استایل دادن به لینک های خارجی مثل ویکی پدیا

طراحی یک ظاهر متقاوت برای لینک های خارجی برای بسیاری از سایت های حاوی منابع بسیار مهم و ضروری است.

برای کاربران این یک نشانه بصری ساده هست که نشون میده اگر شما بر روی این لینک کلیک کنند به یک سایت دیگر هدایت میشوند.

در این پست من میخوام به شما آموزش بدم که چگونه تمامی لینک های خارجی خودتون رو در سایتتون متفاوت کنید، پس همراه وردپرس ساز باشید:

چگونه لینک های خارجی خود را مانند ویکی پدیا کنیم

اگه شما استایل لینک های خارجی ویکی پدیا رو فراموش کردید میتونید این عکس که مربوط به صفحه وردپرس در ویکی پدیا هست رو ببینید:

شما باید توجه کنید که آیکون های کوچکی که کنار لینک ها قرار گرفته نشون میده با کلیک بر روی اون ها به یک سایت دیگر هدایت میشوید.

یک ظاهر طراحی شده برای لینک های خارجی با متن

خوب مراحل کاملا ساده و کوتاه هستش، وارد قسمت نمایش/ویرایشگر بشید و وردپرس به صورت پیش فرض فایل style.css رو باز میکنه که ما هم با این فایل کار داریم کد زیر رو به آخر این فایل اضافه کنید:

a[href^="http://"]:not([href*="wpsaz.net"])::before,
a[href^="https://"]:not([href*="wpsaz.net"])::before {
content: "" url('/wp-content/themes/twentyfourteen/images/external-icon.png');
padding-left:5px;
}

مطمئن شید که به جای “wpsaz.net” ادرس سایت خودتون رو وارد کردید! و آدرس آیکون رو درست وارد کرده باشید. برای پیدا کردن آیکون مناسب با سلیقه خودتون وارد سایت Flaticon بشید.

موفق باشید