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

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

هایلایت کردن متن چیست

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

ویرایشگر پیش‌فرض وردپرس قابلیت هایلایت را دارد؟

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

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

در کل دو تا راه پیش رومونه: یکی با افزونه که ساده و سریعه، و یکی هم دستی با کمی کد که کنترل بیشتری بهتون می‌ده. بیایید اول از راه راحت‌ترش شروع کنیم.

روش اول: هایلایت متن با افزونه

اگه اهل کد و این حرفا نیستید و فقط می‌خواید کارتون راه بیفته، افزونه بهترین گزینه‌ست. پیشنهاد ما افزونه‌ی Advanced Editor Tools هست. رایگانه، از مخزن وردپرس قابل دانلوده و کلی امکانات قالب‌بندی به ویرایشگرتون اضافه می‌کنه که هایلایت هم یکی از اوناست.

نصب و فعال‌سازی افزونه Advanced Editor Tools

اول از همه برید توی پیشخوان وردپرس، از بخش افزونه‌ها اسم Advanced Editor Tools رو جستجو کنید، نصبش کنید و فعالش کنید. همین. بعد از فعال‌سازی، خودِ افزونه یه سری ابزار جدید به نوار ویرایش اضافه می‌کنه که تا الان نداشتید.

مراحل هایلایت کردن متن با افزونه

حالا بریم سراغ اصل کار. اول وارد نوشته‌ای که می‌خواید ویرایشش کنید بشید. متنی که می‌خواید هایلایت بشه رو انتخاب کنید. توی نوار ویرایش روی پیکان رو به پایین کلیک کنید تا گزینه‌های بیشتر باز بشه، بعد روی گزینه‌ی «علامت» (Mark) بزنید. تموم شد! به همین راحتی متنتون هایلایت می‌شه.

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

ببینید، اگه قراره توی مقاله‌هاتون مدام و به تعداد زیاد از هایلایت استفاده کنید، این روش بهترین انتخابتونه. یه بار افزونه رو نصب می‌کنید و بعدش دیگه با دو تا کلیک کارتون راه می‌افته، بدون اینکه لازم باشه سراغ کد برید.

روش دوم: هایلایت کردن متن با HTML و CSS

این روش یه کوچولو دانش کدنویسی می‌خواد، ولی نترسید، اونقدرام سخت نیست. مزیت بزرگش اینه که کنترل کاملی روی رنگ و ظاهر هایلایت بهتون می‌ده. اینجا قراره با تگ HTML و یه ذره CSS کارمون رو راه بندازیم.

فعال‌سازی حالت ویرایش HTML در ویرایشگر

مثل روش قبل، اول نوشته‌تون رو باز کنید. برید توی همون پاراگرافی که می‌خواید متنش رو هایلایت کنید. توی نوار ویرایش روی گزینه‌ی «سه نقطه» کلیک کنید و بعد گزینه‌ی «ویرایش به عنوان HTML» رو بزنید. حالا کدهای پشت پاراگرافتون رو می‌بینید.

استفاده از تگ mark برای هایلایت متن

حالا کافیه متنی که می‌خواید هایلایت بشه رو داخل تگ <mark> بذارید، اینطوری:

html

<mark>متن مورد نظر برای هایلایت</mark>

بعد از اینکه این کار رو کردید، دوباره روی «سه نقطه» بزنید و این‌بار گزینه‌ی «ویرایش بصری» رو انتخاب کنید تا برگردید به حالت عادی. اونجا می‌بینید که متنتون به رنگ زرد هایلایت شده. البته باز هم یادتون باشه که نمایش نهایی این رنگ توی سایت، به رنگ‌بندی قالبتون بستگی داره.

تغییر رنگ هایلایت با کد CSS سفارشی

قشنگ‌ترین بخش این روش همینه که می‌تونید رنگ دلخواه خودتون رو بذارید. از منوی «نمایش» روی «سفارشی‌سازی» کلیک کنید، بعد برید توی قسمت «CSS اضافه» و یه کد شبیه این وارد کنید:

css

mark {
  background-color: #f8ff00;
}

اون کد رنگ (#f8ff00) رو با هر رنگی که دوست دارید عوض کنید. بعدش روی دکمه‌ی انتشار بزنید و تمام. حالا هر جا از تگ <mark> استفاده کنید، با رنگ دلخواه خودتون هایلایت می‌شه.

مقایسه دو روش: کدام روش برای شما مناسب‌تر است؟

بذارید جمع‌بندی کنیم که بین این دو تا گیج نشید. اگه دنبال سرعت و سادگی هستید و نمی‌خواید درگیر کد بشید، افزونه بهترین دوستتونه؛ نصب کنید و برید. ولی اگه آدمی هستید که دوست داره همه چی دقیقاً همونطوری بشه که خودش می‌خواد، مخصوصاً روی رنگ و ظاهر، روش HTML و CSS بهتون کنترل خیلی بیشتری می‌ده. خلاصه‌ش این می‌شه: افزونه برای راحتی، کد برای انعطاف.

نتیجه‌گیری

خب رسیدیم ته کار. دیدید که هایلایت کردن متن توی وردپرس اصلاً کار سختی نیست؛ چه از افزونه استفاده کنید چه دستی با کد جلو برید، هر دو راه جواب می‌دن. حالا بستگی به خودتون داره که کدوم به حال و حوصله و نیازتون می‌خوره. پیشنهادمون اینه که هر دو رو یه بار امتحان کنید تا ببینید با کدوم راحت‌تر هستید.

سوالات متداول

تیم تولید محتوا

ما در تیم تولید محتوای میهن وردپرس در تلاش هستیم تا بهترین مقالات آموزشی در زمینه وردپرس و کسب‌و‌کارهای اینترنتی را تهیه کنیم. صحت محتوای این صفحه توسط رضا راد بررسی خواهد شد.