студия занимательная МИХАЛИКА
! Михалика - запросто с WordPress:
доступная ручная работа по правилам оптимального интернет(а)
Здравствуйте !

издатель:   в теме: HTML-CSS-PHP
студия занимательная МИХАЛИКА

Оформление внешних ссылок визуальными иконками CSS

Сегодня я расскажу, как оформить иконками или цветом внутренние и внешние ссылки. Расскажу, а вы уж сами решайте, нужно это вам или нет. На мой взгляд, это удобно и красиво. Удобно тем, что ваш посетитель сайта сразу увидит какая перед ним ссылка – внешняя или внутренняя.

 

Всё просто! Это можно реализовать несколькими способами. Я вам покажу пару вариантов, а вы уж решайте. Внимательно изучите примеры, постарайтесь въехать в логику, а тогда уж все ваши желания станут вам по силам.


 

Как красиво оформить внешние ссылки свойствами CSS

 

 

 

Да что там: взгляните на фото чуть ниже. Увидели!? Да, именно так, например, в Wikipedia ссылки и оформлены.

 

 
Оформление внешних и внутренних ссылок скриптами CSS и визуальными иконками

 

 

Ну что! …если это нужное дело – вперёд.

 

 

Вся наша работа сведётся к использованию селекторов псевдоклассов after и before. И, конечно же, мы решим задачу по отделению внутренних ссылок от внешних. Собственно об этом ниже…

 

 

Вот иконка

 
Оформление внешних и внутренних ссылок скриптами CSS и визуальными иконками

 

 

копируйте её и переносите к себе на сервер. У меня она располагается в папке с темой, в подпапке images. Как только перенесёте эту иконку к себе, смело можно считать что большая часть дела выполнена. Кстати скажу: иконку ссылки возможно заменить на любую другую, более симпатичную, или же вовсе за место неё прикрепить текст.

 

 

 

 

CSS Оформляем иконками внешние ссылки статей

 

 

 

 

Для этого вам потребуется открыть ваш файл стилей style.css (в WordPress он лежит в папке с используемой вами темой по адресу: …/wp-content/themes/Название темы/) и дописывайте в него подобный код:

 

 

.post a[href^="http://"]:not([href*="mihalica.ru"]):after,
.post a[href^="https://"]:not([href*="mihalica.ru"]):after,
.post a[href^="ftp://"]:not([href*="mihalica.ru"]):after {
content: "" url('/wp-content/themes/Real/images/extera.png');
padding-left:3px;
}

 

 

 

Думаю, ясно, что мой домен в примере нужно заменить на свой, а так же и путь к файлу иконки.

 

А в остальном тоже, думаю, понятно. Но немного поясню: у меня все посты «обёрнутые» классом – контейнер post  А ПОЭТОМУ Я И ДОБАВИЛ ЕГО К ТЕГУ «а». Иначе все ссылки ведущие за пределы вашего сайта будут тоже обозначены иконкой. В их числе, например, окажется и ссылка счётчика посещаемости, а это уже перебор в красЯвостях))

 

 

 

…теперь, после нашей работы, ваш сайт (его CMS) станет принудительно сравнивать все ссылки на вашем блоге, а к внешним, из проверенных, добавлять иконку. Ну, а та, посредством нашего примера, станет выводится рядом с текстом ссылки.

 

 

 

Последняя строка примера: padding-left:3px; – три пикса — это и есть расстояние отступа от текста внешней ссылки. (В вашей теме, класс КОНТЕНТА может быть иным. Это не страшно. Посмотреть его вы запросто сможете расширением, которое есть в любом браузере: клик по нужному элементу вашей вебстраницы правой кнопкой мыши… и выбор в подменю подобного пункта «Просмотр кода элемента». Посмотрите и всё станет ясно. А ещё для этих целей, и не только этих, есть отличный инструмент для web-мастеров — Фаербаг (о нём в следующем параграфе.

 

 

…теперь…

 

 

 

…если вас иконка не устраивает, — с лёгкостью вместо неё можно добавить какую-то надпись «Внешняя ссылка», например – просто замените содержимое свойства content

 

 

…как-то так:

 

 

content: "(Внешняя ссылка)";

 

 

…а коли есть желание заменить цвет ВНУТРЕННЕЙ ссылки от внешней, всё точно так же и подобно… простки-напрстки вместо словца content допишите нужные вам свойства CSS.
Если что неясно, спрашивайте в комментариях.

 

 

 

 

Пожалуй, всё! Правило, по которому теперь ваш блог станет работать – добавлено.
И работать, управляя ссылками вашего сайта, вам станет запросто.

 

 

Тем же кто пока мало разбирается в скриптах CSS и т.п. — смотрите видео, там подробно разъяснено начальное оформление ссылок лёгким посредством правки кода.

 

Буду рад, если эта коротенькая статья кому-то пригодится.

 

Также у нас сайте есть ещё полезные рубрики: Плагины WordPress и их настройка ИЛИ HTML, CSS, PHP — подробно.

 

 

 


Если что-то не ясно, спрашивайте. Помогу… в чём дюжу.
Вместе мы многое сможем! Берегите себя и свой век - mihalica.ru


 

 


подписка feedburner МИГ подписки - ВРЕМЯ знаний!!

 

Нажатия на кнопочки определяют Ваше высокое гражданское сознание
Удачи в работе и творчестве..!


меточная навигация:


Комментарии © 0 к статье: Оформление внешних ссылок визуальными иконками CSS

Поделитесь соображениями: Ваши мысли очень важны! $ правила комментирования ©

Ваш e-mail не будет опубликован. Обязательные поля помечены *