آموزش CSS, آموزش کدهای وردپرس, آموزش وردپرس

چگونه رنگ لینک ها را در وردپرس تغییر دهیم؟

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

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

قبل از شروع کار

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

 تغییر رنگ لینک ها در وردپرس با CSS

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

مرحله 1: مکان اضافه کردن کد CSS را پیدا کنید

به طور معمول می توانید کدهای CSS خود را در فایل Style.css که در پوشه قالب وردپرس است اضافه کنید. همچنین به شما پیشنهاد می کنیم که از چایلد تم استفاده کنید که به دلایل مختلف بسیار مطمئن تر است.

اما همچنین می توانید به راحتی کدهای CSS خود را بعد از اینکه وارد پیشخوان وردپرس شدید در قسمت نمایش » سفارشی سازی و سپس CSS اضافی، اضافه کنید.

 تغییر رنگ لینک ها در وردپرس با CSS

مرحله 2: کد CSS را به جعبه اضافه کنید

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

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

a:link{
text-decoration: none;
color: #000000;
}

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

a:hover{
text-decoration: underline;
color: #000000;
}

رنگ لینکی را که بازدید کننده، بازدید کرده است را با این کد تغییر دهید:

a:visited{
text-decoration: none;
color: #000000;
}

در آنجا:

  • text-decoration: none: متن را زیرخط دار نمی کند.
  • text-decoration: underline:  با این می توانید متن لینک را زیر خط دار کنید.
  • #000000: کد رنگ مورد نظر شماست می توانید یک رنگ را به دلخواه انتخاب کنید. (کدهای رنگ)

بنابراین اکنون، تمام کدهای بالا را اینگونه:

a:link{
text-decoration: none;
color: #FB2B09;
}
a:hover{
text-decoration: underline;
color: #A609FB;
}
a:visited{
text-decoration: none;
color: #0912FB;
}

می توانید مانند مرحله یک به جعبه کد CSS سایت خود اضافه کنید و نتیجه را بررسی کنید.

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

5/5 - (14 امتیاز)

(12) نظرات کاربران

  1. محمدی گفت:

    من این کار رو انجام دادم اما چرا تغییری نکرد…کد رنگ هم تغییر دادم اما لینکهایی ک توی متن هست همچنان ب رنگ مشکی نمایش میده.

    1. سلام اگر دقیقا انجام دادید و مشکل هست باید سایتتون بررسی بشه تا مشخص بشه علت چیه.
      همچنین از !important هم استفاده کنید.

  2. sajad گفت:

    دمتون گرم کارم رو راه انداخت

  3. Pedram گفت:

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

    1. سلام وقت بخیر
      همون اول کد، کلاس مربوط به بخشی که میخواید کدش تغییر کنه رو قرار بدید.
      مثلا اگر میخواید فقط داخل مقالات تغییر کنه، کلاس مربوط به صفحه مقالتون رو قرار بدید قبلش.

  4. ayuob گفت:

    با سلام و خداقوت
    ممنون از مقاله مفیدتون یه مشکلی که دارم اینه که کد ها رو کپی کردم اما توی همون قسمت css سفارشی رنگ ها تغییر میکنن اما وقتی تنظیمات رو ذخیره میکنم بعدش وارد سایت میشم رنگ هاور لینک تغییر نمیکنه و فقط رنگ آبی میمونه ک انتخاب کرده بودم توی کد رو نمایش میده و در صورت کلیک بر روی لینک هم رنگ تغییر نمیکنه
    باید چیکار کنم؟ ممنون از شما

    1. سلام وقت بخیر
      اگر از افزونه های کش استفاده میکنید، کش رو پاک کنید. ممکنه بخاطر کش باشه.
      اگر حل نشد، به کدهاتون !important اضافه کنید.

  5. رضا نوربخش گفت:

    سلام

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

  6. صدف گفت:

    سلام
    من این کار رو انجام دادم اما چرا تغییری نکرد…

    1. سلام
      اگر مطمنید که به درستی انجام دادید، احتمالا بخاطر کد رنگ هاست که با رنگ اولیه لینک شما یکیه.
      رنگ رو تغییر بدید درست میشه.

  7. منصور گفت:

    سلام خسته نباشید
    برای تغییر رنگ متن سلکت شده چی پیشنهاد میکنید ؟

    1. سلام میتونید از کد زیر استفاده کنید.

      ::selection {
      background-color: #FF4445;
      color: #ffffff;
      }

      فقط فراموش نکنید که کد رنگ هارو به رنگ دلخواه تغییر بدید.

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

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *