آموزش تغییر رنگ لینک‌های کلیک شده در وردپرس (راهنمای گام‌به‌گام و حرفه‌ای)

آخرین بروزرسانی در تاریخ ژوئن 1, 2026 توسط PersiaWebAdmin

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

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

۱. چرا تغییر رنگ لینک کلیک‌شده مهم است؟ (قبل از هر کدی بدانیم)

لینک‌ها ۴ حالت اصلی دارند که در CSS با نام شبه‌کلاس (Pseudo-classes) شناخته می‌شوند:

• a:link : لینکی که هنوز کاربر روی آن کلیک نکرده است.
• a:visited : لینکی که کاربر قبلاً از آن بازدید کرده.
• a:hover : لحظه‌ای که نشانگر موس روی لینک قرار می‌گیرد.
• a:active : لحظه‌ای که کاربر روی لینک کلیک می‌کند (نگه داشتن کلیک).

دلیل اهمیت رنگ :visited

• جهت‌یابی کاربر: کاربر باید بداند کدام صفحات را قبلاً دیده تا دوباره روی آن‌ها کلیک نکند.
• کاهش نرخ پرش: اگر لینک‌های بازدیدشده متمایز باشند، کاربر به دنبال محتوای جدید می‌گردد.
• دسترسی‌پذیری (Accessibility): افراد با مشکلات بینایی از این تمایز رنگی بهره می‌برند.

از نظر سئو، گوگل به سیگنال‌های تعامل کاربر اهمیت می‌دهد. بهبود تجربه کاربری مستقیماً بر ماندگاری کاربر و نرخ کلیک تأثیرگذار است.

۲. پیدا کردن سلکتور (Selector) دقیق لینک‌ها در قالب شما

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

آموزش عملی با مرورگر کروم:

1. روی هر لینک در سایت خود راست‌کلیک کرده و گزینه Inspect یا بررسی را بزنید.
2. در پنل Elements، می‌بینید که تگ <a> هایلایت شده است. به دنبال کلاس‌هایی بگردید که در آن تگ یا والدینش (div, article, nav) نوشته شده. مثال:
   html <a href="..." class="post-title">عنوان مطلب</a>
3. در این مثال، سلکتور ما .post-title خواهد بود. اما برای تغییر رنگ کلیک‌شده، باید بنویسیم .post-title:visited.
4. برای لینک‌های عمومی در بدنه محتوا، معمولاً سلکتور .entry-content a کار می‌کند.

---

۳. روش‌های تغییر رنگ لینک کلیک‌شده در وردپرس (از آسان تا پیشرفته)

روش اول: استفاده از «CSS سفارشی» در پیشخوان (مبتدی‌پسندترین روش)

این روش بدون نیاز به دانش فنی بالا و نصب افزونه اضافی انجام می‌شود.

1. به پیشخوان وردپرس > نمایش > سفارشی‌سازی (Customize) بروید.
2. گزینه CSS سفارشی (Additional CSS) را پیدا کنید (معمولاً در انتهای فهرست).
3. کد زیر را جای‌گذاری کنید (به‌جای red و کلاس .entry-content a از مقادیر و سلکتور خودتان استفاده کنید):
   .entry-content a:visited { color: #800080; /* رنگ بنفش برای لینک‌های دیده‌شده */ } .entry-content a:hover { color: #ff6600; /* رنگ نارنجی برای هاور */ text-decoration: underline; }
4. دکمه انتشار را بزنید.
5. سایت را در یک پنجره خصوصی (Incognito) باز کنید و چند لینک را کلیک کنید تا تغییر رنگ را ببینید.

پیشنهاد مطالعه : لینک جویس (Link Juice) چیست ؟شریان حیاتی سئو و راهنمای کامل استفاده بهینه – پرشیاوب (persia-web.ir)

روش دوم: افزونه‌های مدیریت CSS (برای انعطاف بیشتر)

اگر نمی‌خواهید هر بار وارد سفارشی‌ساز شوید یا نیاز دارید CSS را برای صفحات خاصی اعمال کنید، افزونه‌های زیر عالی هستند:

• Simple Custom CSS and JS: یک ویرایشگر حرفه‌ای که می‌توانید کدها را مستقیماً در فوتر یا هدر تزریق کنید.
• WP Add Custom CSS: این افزونه به شما امکان می‌دهد برای هر نوشته یا برگه CSS اختصاصی تعریف کنید.

با این افزونه‌ها همان کدهای CSS قبلی را وارد کنید، با این مزیت که با تغییر قالب، کدها حذف نمی‌شوند (برخلاف فایل‌های ویرایش‌شده قالب).

روش سوم: ویرایش فایل style.css قالب فرزند (Child Theme) – روش حرفه‌ای

اگر از قالب فرزند استفاده می‌کنید (که توصیه اکید ما در پرشیا وب است)، کدها را در فایل style.css قرار دهید تا ماندگار شوند.

1. از پیشخوان به نمایش > ویرایشگر فایل قالب بروید.
2. در سمت راست، قالب فرزند فعال خود را انتخاب کنید و فایل style.css را باز کنید.
3. کدهای CSS خود را در انتهای فایل اضافه کنید و ذخیره را بزنید.
   هشدار: هرگز فایل style.css قالب اصلی (والد) را ویرایش نکنید، چون با آپدیت قالب تغییراتتان پاک می‌شود.

پیشنهاد مطالعه : 4 روش برای حذف پیشوند /category/ از لینک‌های دسته‌بندی وردپرس

روش چهارم: تنظیمات قالب‌های صفحه‌ساز (Elementor, WPBakery, …)

اگر از صفحه‌سازها استفاده می‌کنید:

• Elementor: به تنظیمات سایت (Site Settings) > تب Style > بخش Typography بروید. از آنجا می‌توانید استایل لینک‌های عادی و هاور را تنظیم کنید، اما برای :visited باید به صورت دستی در بخش Custom CSS همان ابزار Elementor یا Custom CSS کلی سایت کد بنویسید.
• WPBakery: بخش Design Options هر سطر یا ستون گزینه‌ای برای اضافه کردن CSS اختصاصی دارد.

---

۴. کدهای آماده برای سناریوهای مختلف (کپی کنید و استفاده کنید)

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

article.post .entry-content a:visited {
    color: #6a5acd; /* slate blue */
}

۴.۲ تغییر رنگ لینک‌های منو بعد از بازدید

nav.main-navigation ul li a:visited {
    color: #999; /* خاکستری کمرنگ */
}

توجه: برخی مرورگرها به دلایل امنیتی اجازه تغییر کامل :visited در منو را نمی‌دهند، اما رنگ‌های روشن/تیره جواب می‌دهد.

پیشنهاد مطالعه : مزرعه لینک چیست ؟

۴.۳ استایل کامل یک لینک (عادی، هاور، کلیک‌شده، فعال)

a.my-custom-link:link {
    color: blue;
    text-decoration: none;
}
a.my-custom-link:visited {
    color: purple;
}
a.my-custom-link:hover {
    color: red;
    text-decoration: underline;
}
a.my-custom-link:active {
    color: orange;
    font-weight: bold;
}

۴.۴ اضافه کردن یک آیکون کوچک کنار لینک‌های کلیک‌شده

a:visited::after {
    content: " ✓"; /* یک تیک */
    font-size: 0.8em;
    color: green;
}

---

۵. اشکال‌زدایی و رفع مشکلات رایج

• تغییرات اعمال نمی‌شود؟ احتمالاً سلکتور شما قدرت کافی ندارد. می‌توانید با اضافه کردن !important آن را مجبور کنید (البته فقط به عنوان آخرین راه حل):
  css .entry-content a:visited { color: #800080 !important; }
• رنگ لینک در مرورگر تغییر نمی‌کند، اما در CSS نوشته شده؟ مرورگرها به دلایل امنیتی و حریم خصوصی، تغییر برخی ویژگی‌ها را در :visited محدود می‌کنند (مثلاً پس‌زمینه، اندازه فونت و برخی رنگ‌ها). رنگ‌های ساده مانند color، background-color (به صورت محدود)، border-color و outline-color پشتیبانی می‌شوند.
• رنگ لینک در بعضی بخش‌ها مثل ویجت‌ها فرق می‌کند؟ باید سلکتور آن بخش را جداگانه هدف بگیرید. با Inspect کردن آن ویجت، کلاس مخصوصش را پیدا کنید و کد جدا بنویسید.

پیشنهاد مطالعه : چرا خرید بک‌لینک می‌تواند منجر به پنالتی سایت شما شود؟ 

---

۶. چک‌لیست طلایی تغییر رنگ لینک در وردپرس

• [ ] رنگ‌های انتخاب‌شده تضاد کافی با پس‌زمینه دارند؟ (برای دسترسی‌پذیری، نسبت کنتراست حداقل ۴.۵:۱)
• [ ] تغییرات را در یک پنجره مرورگر خصوصی تست کرده‌اید؟ (جلسه عادی مرورگر ممکن است کش قبلی را نشان دهد)
• [ ] حالت‌های :hover و :focus را نیز تعریف کرده‌اید تا کاربران کیبوردی اذیت نشوند؟
• [ ] از قالب فرزند یا بخش CSS سفارشی استفاده کرده‌اید تا آپدیت قالب کدها را پاک نکند؟
• [ ] در صورت استفاده از کش وردپرس، حافظه کش را خالی کرده‌اید تا تغییرات جدید دیده شوند؟

---

جمع‌بندی تیم پرشیا وب

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