تغییر رنگ متن در وردپرس بدون دردسر + ۳ روش ساده

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

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

گوتنبرگ (Gutenberg)، همون ویرایشگر بلوکی وردپرسه که هر پاراگراف، تصویر یا دکمه رو به شکل یک بلوک جدا نشون می‌ده. شاید جای بعضی گزینه‌های اون در نگاه اول مشخص نباشه، ولی تغییر رنگ متن با چند کلیک انجام می‌شه. برای تغییرات سراسری هم می‌تونید از CSS استفاده کنید؛ CSS کدی هست که ظاهر بخش‌های مختلف سایت رو کنترل می‌کنه.

روش اول: تغییر رنگ کل یک پاراگراف در ویرایشگر گوتنبرگ

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

اول روی پاراگرافی کلیک کنید که می‌خواید رنگش رو تغییر بدید. با انتخاب بلوک، نوار ابزار اون ظاهر می‌شه. بعد نوار تنظیمات سمت راست صفحه رو بررسی کنید. این بخش با نام تنظیمات بلوک یا Block Settings شناخته می‌شه و گزینه «رنگ‌ها» یا «Colors» داخل اون قرار داره.

با باز کردن این گزینه، پالت رنگ رو می‌بینید. می‌تونید یکی از رنگ‌های آماده مثل مشکی، سفید، قرمز، آبی یا سبز رو انتخاب کنید. اگه رنگ مشخصی مدنظرتونه، روی «رنگ دلخواه» بزنید و کد هگزادسیمال یا Hex اون رو وارد کنید. کد هگزادسیمال همون شناسه‌ای هست که رنگ رو با ترکیبی مثل #cc0000 مشخص می‌کنه. با وارد کردن این کد، کل متن پاراگراف به رنگ قرمز تیره درمیاد.

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

روش دوم: تغییر رنگ فقط بخشی از یک پاراگراف

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

با ماوس بخشی از متن رو که می‌خواید رنگش عوض بشه انتخاب کنید. بعد در نوار ابزار بالای متن، روی علامت سه‌نقطه بزنید تا گزینه‌های بیشتر باز بشن. از این منو گزینه مربوط به برجسته‌سازی متن رو انتخاب کنید. بسته به ترجمه وردپرس، ممکنه این گزینه با عنوان «تأکید بر این قسمت»، «آن رو برجسته کن»، «Highlight» یا «Mark» دیده بشه.

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

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

روش سوم: تغییر سراسری رنگ متن با CSS

دو روش قبلی برای تغییر موردی متن داخل یک نوشته یا صفحه مناسب هستن. ولی شاید بخواید رنگ همه پاراگراف‌های سایت رو از مشکی به خاکستری تیره تغییر بدید یا تمام تیترهای H2 رو آبی کنید. در این حالت CSS انتخاب مناسب‌تریه. CSS کدی هست که مشخص می‌کنه بخش‌های مختلف سایت چه ظاهر و رنگی داشته باشن. حتی اگه قبلاً با اون کار نکردید، نمونه‌های این بخش ساده هستن.

برای اضافه کردن CSS سفارشی لازم نیست فایل‌های قالبتون رو دست‌کاری کنید. وارد پیشخوان وردپرس بشید و از منوی نمایش > سفارشی‌سازی (Customize) رو باز کنید.

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

یک کادر متنی باز می‌شه که می‌تونید کد CSS رو داخلش بنویسید. برای تغییر رنگ همه پاراگراف‌ها، کد زیر رو وارد کنید:

css

p {
    color: #333333;
}

در این کد، p همه پاراگراف‌ها رو هدف می‌گیره و #333333 کد یک رنگ خاکستری تیره هست. می‌تونید به‌جای اون از رنگ‌هایی مثل red برای قرمز، blue برای آبی یا یک کد دلخواه مثل #2c3e50 استفاده کنید. نتیجه همون لحظه در پیش‌نمایش یا Live Preview دیده می‌شه و همه پاراگراف‌های سایت رنگ انتخابی شما رو می‌گیرن.

اگه فقط می‌خواید رنگ تیترهای درجه دو یا H2 رو تغییر بدید، کد رو به شکل زیر بنویسید:

css

h2 {
    color: #3498db;
}

برای تغییر رنگ لینک‌ها هم می‌تونید از این کد استفاده کنید:

css

a {
    color: #e74c3c;
}

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

مقایسه سه روش و انتخاب گزینه مناسب

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

برای تغییرهای موردی بهتره از تنظیمات داخلی گوتنبرگ کمک بگیرید. این گزینه‌ها ساده هستن و احتمال تغییر ناخواسته در بخش‌های دیگه سایت رو هم کمتر می‌کنن. CSS رو زمانی به کار ببرید که دقیقاً می‌دونید کد باید کدوم بخش‌ها رو هدف بگیره و می‌خواید نتیجه در کل سایت یکسان باشه.

جمع‌بندی و توصیه نهایی

برای تغییر رنگ متن در وردپرس سه انتخاب دارید. می‌تونید رنگ یک پاراگراف کامل رو از تنظیمات بلوک عوض کنید، فقط چند کلمه مشخص رو رنگی کنید یا با CSS رنگ متن رو در سراسر سایت تغییر بدید. برای کارهای روزمره معمولاً همون دو گزینه اول کافی هستن. CSS هم برای زمانی مناسبه که یک تغییر هماهنگ و گسترده می‌خواید.

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

امیدواریم این آموزش کار تغییر رنگ متن‌های سایتتون رو ساده‌تر کرده باشه. موفق باشید.

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

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