! Запросто с 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 — подробно.

 

 

 


...вопросы в комментариях - помогу, в чём дюжу...
mihalica.ru !

 

 


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

 



Михаил ATs - владелец блога запросто с Вордпресс - в сети нтернет давным-давно...

...веб разработчик студии ATs media: помогу в создании, раскрутке, развитии и целенаправленном сопровождении твоего ресурса в сети... - заказы, вопросы...разработка...


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

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


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

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

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

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

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