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

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

wikipedia-external-link

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

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

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

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

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

wikipedia-external-link

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

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

خوب مراحل کاملا ساده و کوتاه هستش، وارد قسمت نمایش/ویرایشگر بشید و وردپرس به صورت پیش فرض فایل 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 بشید.

موفق باشید

سوالات و مشکلات خود را در دیدگاه ها بیان کنید، حتما پاسخ خواهیم داد.

دیدن این مطالب رو به شما پیشنهاد میکنیم...

۲ دیدگاه برای این مطلب ارسال شده است

پاسخ دهید

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