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

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

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

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

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

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

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

تغییر رنگ یک لینک

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

برای انجام این کار، روی پیوند مورد نظر کلیک کنید. سپس، در منوی سمت چپ، وارد تب «بلوک» شوید.

در بخش رنگ، باید لینک را انتخاب کنید. اکنون می‌توانید رنگ جدیدی را از پنجره ظاهر شده انتخاب نمائید.

برای سفارشی کردن رنگ لینک‌های بیشتر، همین مراحل را تکرار کنید.

وقتی از ظاهر لینک‌ها راضی بودید، روی «بروزرسانی» یا «انتشار» کلیک کنید تا تغییرات‌تان اعمال شود.

تغییر رنگ لینک در وردپرس با استفاده از افزودن قطعه کد

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

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

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

a {
     color: #FFA500;
}

در مثال بالا رنگ لینک‌ها به رنگ نارنجی تغییر خواهد کرد. شما می‌توانید رنگ دلخواه خود را به جای کد هگزادسیمال قرار دهید.

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

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

در قطعه کد بالا رنگ لینک‌ها قرمز خواهد شد و زیر آن‌ها خط کشیده می‌شود.

پس از اتمام تغییرات، روی گزینه انتشار کلیک کنید.

آموزش تغییر رنگ لینک‌ در وردپرس بدون ویرایش CSS

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

پیشنهاد ما استفاده از افزونه CSS Hero است. (لینک در انتهای مطلب موجود است)

پس از فعال‌سازی افزونه، روی گزینه “Proceed to Product Activation” کلیک کنید و حساب خود را متصل کنید.

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

روی دکمه “Customize with CSS Hero” در بالای نوار مدیریت وردپرس کلیک کنید.

با این کار وب سایت شما باز می‌شود و افزونه نیز در بالای آن اجرا می‌شود.

افزونه CSS Hero از ویرایشگر What You See is What You Get (WYSIWYG) استفاده می‌کند. این یعنی می‌توانید روی هر محتوایی که می‌خواهید کلیک کنید تا نوار ابزار باز شود و به کمک آن می‌توانید استایل مربوطه را سفارشی کنید.

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

پس از اتمام تغییرات، روی دکمه “Save and Publish” کلیک کنید تا تغییرات را مشاهده کنید.

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