! Запросто с WordPress - доступная ручная работа по правилам оптимального интернета
...здесь Ваша реклама.?.
Здравствуйте !
написано: — 
отредактировано: 2016-10-31
издатель:  в теме: HTML-CSS-PHP всякое полезное реплики: будьте первым в диалоге
 
Запросто с WordPress - студия ATs media fashion Reception WordPress golden

Оформление внешних ссылок визуальными иконками 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 — подробно.

 

 

 


Благодарности)) и вопросы в комментариях - помогу… в чём дюжу
А также Вы можете просто:

 

 


подписка feedburner Online консультация по работе c сайтом на WordPress

 

Нажатия на кнопочки определяют Ваше высокое гражданское сознание
Удачи в работе и творчестве..!
 ! самое читаемое:
   Создаём плагин — добавочный файл функций — my-functions.php   Санкции вебмастера Яндекс (фатальные ошибки) — предупреждения, или что это?..   Как исключить вывод (выборочно) поста с главной страницы сайта — регулировка в админке   Яндекс ИКС — новый индекс качества сайта, заместо ТИЦ   Выведем последние комментарии в любом месте сайта — несколько вариантов   14 полезных сниппетов — код для наилучшей работы сайта WordPress — функции   Как к статье добавить блок ссылок на похожие по теме записи сайта   Убираем циклическую ссылку h1 логотипа на главной странице   Продвижение контентом или нужно настраивать сайт — валидный код шаблона..?   Как выбрать хостинг — пошаговые инструкции (обзоры 4 хостингов) — нюансы модного ssl сертифицирования   Что такое Яндекс? SEO оптимизация сайта за пределами Google   Ускоряем сайт: основные кэш и gzip правила .htaccess которые нужно знать   Как самостоятельно установить в Notepad++ плагин Compare   Как перевести сайт на https — сертификат ssl — шифрование
↔ перетаскивайте ленту ↔
ещё статьи по теме:

смотреть ещё статьи в теме HTML-CSS-PHP всякое полезное
меточная навигация:


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

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

Внимание! Обязательные поля помечены *

  отныне доступен плагин: privacy-policy ©

 необходимо принять правила конфиденциальности и пользовательского соглашения
Яндекс.Метрика
? основная линейка услугSkype консультацияЕсли вы выбрали для своего сайта WordPress и только-только начинаете изучать панель управления контентом, то этот вариант оnline консультаций — практически по любым вопросам — для вас! вопросы сюдаSkype онлайн