Как выделить внешние ссылки

Как выделить внешние ссылки | n-wp.ru
Способ визуально выделить внешние ссылки, сделав их более наглядными.
👍 Научим бесплатно правильно создавать сайты на WordPress. Подробнее →

Визуальное выделение ссылок может увеличить их привлекательность и спровоцировать дополнительные клики. К тому же я считаю, что ссылки, открываемые в новом окне стоит как-то выделять, предупреждая об этом посетителя. Разделение на внешние и внутренние ссылки можно создать, обозначив, например, маленьким значком. Для этого можно использовать специальную разметку, которую прописать в вашу тему – проще простого.

Я в этом блоге использую такое обозначение для ссылок, которые ведут из содержимого поста или текста комментариев на страницу, открываемую в новом окне. Внутренние ссылки при этом остаются неизменными. Для этого я использую псевдо-элементы. Давайте обозначим ссылку, открываемую в новом окне. Для этого добавим в style.css такую строчку:

.post_content a[target~="_blank"]::after {content: url(/img/ext.gif); margin-left:4px;}

.post_content – это то, в чем выводится текст содержимого поста. В разных темах это обозначение разное, поэтому найдите, в чем заключен ваш текст поста, и создайте аналогичную строчку.
/img/ext.gif – это путь до картинки. Саму картинку я привел в начале этой записи, можете скачать и пользоваться. А можете поискать и другие, которые вам больше подходят.
В этом коде картинка подставляется после каждой ссылки в посте, в коде которой содержится target=”_blank”. Однако можно использовать не только этот параметр, но и другие. например, вот так будет выглядеть код css для ссылки с rel=”nofollow”:

.post_content a[rel~="nofollow"]::after {content: url(/img/ext.gif); margin-left:4px;}

Вы можете поэкспериментировать с параметром этого кода, подобрав подходящий для вас.
У этого способа есть один недостаток: он не работает в Internet Explorer. Однако думаю, что с выходом Internet Explorer 9 ситуация изменится.

Создай свой первый сайт на WordPress

tiaurus

Автор n-wp.ru — блога о WordPress для новичков.

Оцените автора
Добавить комментарий

×
Улучши свой сайт с плагином Clearfy Pro!
Скидка для тебя -15%
Купить со скидкой ⋙