هایلایت کردن متن در وردپرس

اگر تغییر رنگ بخشی از محتوا یا هایلایت کردن متن در وردپرس برای شما سخت شده و وقتی می خواهید رنگ یک جزئی از بخش را تغییر دهید کل آن بخش تغییر می کند پیشنهاد می کنیم حتما این آموزش را مطالعه نمایید چون راهکار آن را به شکل ساده و اصولی بیان می کنیم. این موضوع در ویرایشگر پیشفرض وردپرس (گوتنبرگ) به دلیل بلوکی بودن ساختار المان ها متدوال است اما هایلایت کردن متن در ویرایشگر کلاسیک کار خاصی ندارد.

هایلایت کردن متن در وردپرس برای بهبود رابط کاربری

یکی از نوستالژی های دوران مدرسه و دانشگاه، استفاده از ماژیک هایلایت برای مشخص کردن نکات مهم کتاب ها بود. این کار باعث می شد که به راحتی بتوانیم مطالب مهم کتاب را در اختیار داشته باشیم و در دفعات بعدی به آنها مراجعه کنیم. این کار در وردپرس نیز قابل انجام است که موجب بهبود رابط کاربری سایت می شود.

رابط کاربری (UI) یکی از مباحث مهم و تاثیرگذار در سئو است که اگر مایل به کسب اطلاعات در خصوص آن هستید می توانید به مطلب رابط کاربری مراجعه نمایید.

لطفا به متن زیر توجه نمایید:

همانطور که مشاهده می کنید متن آدرس مورد نظر را فراموش نکنید بیشتر از کلمات دیگر خودنمایی می کند. حال با این وجود می توانیم برای موارد زیر از هایلایت کردن متن در وردپرس استفاده کنیم:

• تاکید بیشتر بر روی یک کلمه یا یک بخش از متن
• تفکیک کردن یک بخش از متن
• بارز کردن لینک ها برای دریافت کلیک بیشتر
• شبیه سازی یک قطعه محتوایی

و موارد متعدد که می تواند دلیل هایلایت کردن متن در وردپرس باشد.

هایلایت کردن متن در وردپرس (ویرایشگر پیشفرض)

هایلایت کردن متن در ویرایشگر پیشفرض وردپرس (گوتنبرگ) با ابزار نکات برجسته قابل انجام است که می توانید رنگ متن و زمینه آن را تغییر دهید. برای انجام اینکار کافیست بخش مورد نظر از متن را انتخاب کرده و طبق تصویر زیر بر روی علامت بیشتر کلیک کرده و گزینه نکات برجسته را انتخاب نمایید.

رنگ های پیشنهادی برای هایلایت کردن متن در وردپرس:

• رنگ متن سفید با کد fff و رنگ زمینه سبز 4caf50
• رنگ متن سفید با کد fff و رنگ زمینه قرمز f06464
• رنگ متن سفید با کد fff و رنگ زمینه آبی 3a82bc
• رنگ متن مشکی با کد 000 و رنگ زمینه زرد f2e330

و ترکیب های متعدد دیگر …

آموزش هایلایت کردن متن در وردپرس با تگ mark

با افزودن تگ mark به هر بخش از محتوا می توانید آن بخش را هایلایت کنید. اما توجه داشته باشید که به دلیل غیر استاندارد بودن، این روش به شما پیشنهاد نمی شود. در هر حال اگر مایل به انجام آن هستید می بایست بصورت زیر اقدام نمایید:

• انتخاب گزینه (سه نقطه)
• انتخاب گزینه ویرایش به عنوان HTML
• اضافه کردن تگ mark و قرار دادن بخش مورد نظر در بین این تگ

تگ mark به شکل زیر در بخش مورد نظر قابل اضافه کردن است:

<mark>متن مورد نظر</mark>

و برای اینکه استایل های سفارشی مانند رنگ متن و پس زمینه را اعمال کنیم می بایست کد زیر را در بخش سفارشی سازی از منوی نمایش پیشخوان، گزینه css اضافی وارد نماییم.

mark {
color: #fff;
background-color: #f06464;
}

که مقدار color برای رنگ متن و background-color برای رنگ پس زمینه استفاده می شود. همچنین شما می توانید کدهای css متعددی مانند موارد زیر را به آن اضافه کنید:

• مقدار font-family برای تغییر فونت
• مقدار border و متغیرهای آن برای حاشیه
• مقدار padding برای فاصله متن با حاشیه
• مقدار margin برای فاصله کل المان از بخش های دیگر

و ده ها مورد دیگر …

هایلایت کردن متن در وردپرس (ویرایشگر کلاسیک)

اگر ویرایشگر پیشفرض وردپرس (گوتنبرگ) را به ویرایشگر کلاسیک تغییر داده باشید می توانید طبق تصویر زیر، رنگ هر قسمتی از متن را با انتخاب و گزینه رنگ متن تغییر دهید.

لازم به ذکر است که تغییر رنگ پس زمینه در ویرایشگر کلاسیک به دو روش قابل انجام است:

• نصب افزونه Advanced Editor Tools (گزینه پیشنهادی)
• تغییر رنگ پس زمینه با افزودن استایل به بخش انتخاب شده

برای نصب این افزونه می بایست از بخش افزونه ها، افزودن افزونه تازه عبارت Advanced Editor Tools را در قسمت جستجوی افزونه وارد کرده و آن را نصب نمایید.

دریافت افزونه Advanced Editor Tools

با نصب این افزونه، امکانات بسیار زیادی به ویرایشگر گوتنبرگ و ویرایشگر کلاسیک وردپرس اضافه می شود. این مورد برای سایت هایی که تولید محتوا در آن ها زیاد است بسیار کاربری بوده و پیشنهاد می شود.

پاسخ به سوالات متداول