آموزش تغییر رنگ متن در وردپرس

تغییر رنگ متن در وردپرس تغییر رنگ متن در وردپرس

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

تغییر رنگ متن در وردپرس

آنچه در این مقاله به اختصار خواهید خواند:

  • تغییر رنگ متن در وردپرس با استفاده از ویرایشگر ویژوال
  • تغییر رنگ متن در Customizer Theme
  • تغییر رنگ متن با استفاده از کد CSS

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

تغییر رنگ متن در وردپرس با استفاده از ویرایشگر ویژوال

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

تغییر رنگ متن یک بلوک

پس برای شروع ابتدا باید پست یا صفحه‌ه­ای را که می­‌خواهید تغییر دهید را انتخاب و یا یک صفحه جدید ایجاد کنید، تا بتوانید ویرایش رنگ متن را شروع کنید.

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

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

text color in Visual-تغییر رنگ متن در وردپرس
تغییر رنگ متن در ویرایشگر ویژوال

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

روش دیگر برای استفاده از رنگ­‌های بیشتر و  با استفاده از یک رنگ خاص این است که روی لینک “رنگ سفارشی” کلیک کنید. این گزینه، انتخاب رنگ را باز می­‌کند که می­‌توانید یک رنگ را به صورت دستی انتخاب کنید. همچنین می­‌توانید برای این کار، کد هگزای رنگ را تایپ کنید تا رنگ دلخواه خود را به دست آورید.

text color in Visual editor-تغییر رنگ متن در وردپرس
تغییر رنگ متن در ویرایشگر ویژوال

اگر در حین کار یا پس از انتخاب و تغییر رنگ متن در وردپرس، نظر خود را تغییر داده و خواستید به رنگ متن پیش فرض خود برگردید، فقط بر روی دکمه “پاک کردن” در زیر گزینه‌­های مربوط به رنگ متن کلیک کنید.

clear text color-تغییر رنگ متن در وردپرس
بازگردانی رنگ به حالت پیش‌فرض

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

تغییر رنگ متن یک کلمه یا عبارت

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

text color in Sentence-تغییر رنگ متن در وردپرس
تغییر رنگ یک کلمه یا عبارت

در مرحله بعدی، به بر روی قسمت “رنگ متن” در پایین لیست کشویی کلیک کنید:

color in Sentence-تغییر رنگ متن در وردپرس
تغییر رنگ یک کلمه یا عبارت

اکنون می‌­توانید تمام گزینه­‌های موجود رنگی که در قسمت قبل مشاهده کردید را در اینجا نیز ببینید. در این قسمت هم می­‌توانید یکی از گزینه‌­های پیش فرض را انتخاب کنید یا از طریق قسمت “custom color” رنگ دلخواه خود را انتخاب کنید.

custom color-تغییر رنگ متن در وردپرس
گزینه custom color

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

headline color-تغییر رنگ عنوان
تغییر رنگ عنوان

باید این نکته در این قسمت در نظر بگیرید که شما نمی­توانید یک پس زمینه برای بلوک­های عنوان تنظیم کنید.

  آموزش گام به گام تغییر قالب در وردپرس

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

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

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

change text color in classic-تغییر رنگ عنوان
تغییر رنگ متن در ویرایشگر کلاسیک

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

change text color in classic-تغییر رنگ در ویرایشگر کلاسیک
تغییر رنگ در ویرایشگر کلاسیک

تغییر رنگ متن در Customizer Theme

اگر تصمیم بر این بگیرید که رنگ متن را در کل وبسایت خود تغییر دهید، آن زمان چه کاری باید انجام داد؟! بسیاری از بهترین قالب‌های وردپرس به شما امکان می‌­‍‌‌دهند این کار را با استفاده از Customizer Theme مربوط به قالب انجام دهید. خب پس برای این کار به در داشبورد وردپرس خود رفته و “نمایش” را انتخاب و سپس به شخصی­‌سازی بروید و گزینه Customizer را باز کنید.

سفارشی‌سازی در منوی نمایش
سفارشی‌سازی در منوی نمایش

در مرحله بعد شما باید به دنبال گزینه‌ه­ایی به اسم تایپوگرافی و یا  “Typography” باشید. بسته به نوع تم انتخابی شما برای سایت خود، این گزینه می‌تواند در قسمت­‌های پایین­‌تر یا بالاتری باشد.

تنظیمات تایپوگرافی
تنظیمات تایپوگرافی

در ادامه باید بر روی تب تایپوگرافی یا گزینه معادل آن کلیک کنید. سپس به دنبال تنظیماتی باشید که بتوانید رنگ متن­‌ها و صفحات خود را تغییر دهید. در این پوسته برای تغییر رنگ متن در وردپرس باید سراغ قسمت “body” برویم. وقتی روی این قسمت کلیک کنید، یکسری تنظیمات برای شما ارائه می­‌شود. همچنین می­‌توانید با استفاده از گزینه‌­های تغییر H1 ، H2 و موارد دیگر موجود، رنگ­‌های عنوان خود را به روشی مشابه‌ای که در ادامه گفته می­‌شود، تغییر دهید.

منوی Body در تایپوگرافی
منوی Body در تایپوگرافی

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

تغییر رنگ متن در قسمت های مورد نظر قالب
تغییر رنگ متن در قسمت های مورد نظر قالب

هنگامی که از تغییرات خود راضی شدید به یاد داشته باشید که روی دکمه “انتشار” در بالای صفحه کلیک کنید تا تغییرات اعمال شوند.

تغییر رنگ متن با استفاده از کد CSS

اگر پوسته سایت شما گزینه تغییر رنگ متن را در خود نداشته باشد چه کاری باید کرد؟ روشی دیگر برای تغییر رنگ متن در وردپرس، تغییر رنگ متن سایت با css  است. این روش در صورت نبود این گزینه در پوسته، بسیار کارآمد خواهد بود. برای این کار، مانند قسمت قبل، به قسمت نمایش پیشخوان وردپرس رفته و سپس شخصی­‌سازی پوسته را انتخاب کنید.

در پایین لیست گزینه­‌های موجود، زبانه CSS اضافی و یا­ “Additional CSS” را مشاهده می­‌کنید.

تغییر رنگ متن در cssهای اضافی
تغییر رنگ متن در cssهای اضافی

در مرحله بعد، بر روی زبانه CSS اضافی کلیک کنید. در برگ‌ه­ای که باز می­‌شود برخی از دستورالعمل‌­ها به همراه یک باکس را مشاهده می‌­کنید که در آن می­‌توانید کد  CSS مورد نیاز خود را وارد کنید.

تغییر رنگ متن سایت با CSS
تغییر رنگ متن سایت با CSS

کسانی که زیاد با کدنویسی میانه­‌ای ندارند و از آن مطلع نیستند، می‌­توانند کد زیر را در کادر مورد نظر کپی کنند. پس از آن می‌­توانید 6 عدد موجود که به عنوان مثال گفته شده است را به کد هگزای رنگ انتخابی خود تغییر دهند.

p { color:#990000; }

با این کار رنگ قلم متن معمولی در همه پست­‌ها و صفحات خود را به رنگ قرمز تیره (یا هر رنگی که انتخاب کرده­‌اید) تغییر می‌­دهد، مانند عکس زیر:

تغییر رنگ متن سایت با CSS
تغییر رنگ متن سایت با CSS

اگر می‌­خواهید رنگ هدرهای درون پست خود را نیز تغییر دهید، می­‌توانید به جای کد قبلی، این کد را اضافه کنید:

h2 { color:#990000; }

تصویر نهایی نتیجه این کد :

normal text color-تغییر رنگ متن سایت با CSS
تغییر رنگ متن سایت با CSS

تغییر رنگ متن در وردپرس چقدر اثر گذار است؟

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

منبع: wpbeginner

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

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

دیدگاهتان را بنویسید

ارسال دیدگاه به معنی این است که شما ابتدا قوانین ارسال دیدگاه را مطالعه کرده‌اید و با آن موافق هستید.

دیدگاه‌های این نوشته جدید ترین ها شاخص

  1. 3 سال عضو همیار وردپرس

    مطالبتون خیلی عالی بودند و مشکل منو حل کرد ممنون و خدا قوت

  2. 5 سال عضو همیار وردپرس

    سرکار خانم مرضیه هاشم پور
    با تشکر از مقاله خوبتان
    آیا برای تغییر تمامی عنوانها می توان به شکل ذیل عمل کرد؟
    h1 { color:#990000; }
    h2 { color:#990000; }
    h3 { color:#990000; }
    با تشکر