Здрастуйте, шановні читачі блогу . Маленька замітка — раптом комусь знадобиться. У мене виникло бажання по різному оформити посилання провідні з блогу на зовнішні сайту і посилання ведуть на сторінки мого ж ресурсу. Навіщо це потрібно? Поки не знаю, але якщо бажання з’явилося, то його потрібно було спробувати вгамувати. Власне, рішення було знайдено на цьому блозі.
Суть методу полягає у застосуванні регулярних виразів та використання селекторів псевдокласів after та before, про яких я вже писав. В принципі, як саме ви виберіть посилання ведуть на зовнішні сайти не важливо (можете самі пробігтися по урокам стильової розмітки і знайти відповідний вам метод). Головне саме відокремити ці самі зовнішні посилання від внутрішніх.
Як CSS застосувати властивості тільки для зовнішніх посилань?
Однак мені сподобався варіант запропонований на знайденому мною блозі, коли до зовнішньої посилання додається іконка зі стрілочкою. Подібним чином оформлені зовнішні посилання на Wikipedia (що це таке?), а значить більшої частини користувачів мережі буде зрозуміло призначення подібної іконки.
У цьому випадку вам потрібно буде зберегти на своєму сервері ось таку картинку 
(клацніть по ній правою кнопкою миші і виберіть зберегти зображення). Після цього відкривайте ваш файл стилів (в WordPress він лежить в папці з використовуваної вами темою за адресою:/wp-content/themes/Назва теми/) і дописывайте в нього такий код:
a[href^=»http://»]:not([href*=»»]):after,
a[href^=»https://»]:not([href*=»»]):after,
a[href^=»ftp://»]:not([href*=»»]):after {
content: url(‘/wp-content/themes/Звичайний/images/external.png’);
padding-left:3px;
}
Природно, що вам потрібно буде замінити на доменне ім’я вашого сайту, а шлях /wp-content/themes/Звичайний/images/external.png на шлях наведеної вище картинки, яка повинна бути збережена на вашому сервері в якійсь папці (тут використовується відносна посилання, тобто без зазначення хоста, тобто домену).
Щоправда, в цьому разі це правило застосувати до всіх зовнішніх посилання на вашому сайту, в тому числі і до лічильників відвідувань, що не є добре. Тому я вирішив додати виділення зовнішніх посилань тільки в постах, вказавши в якості селектора не просто тег A, а ще й клас контейнера, у який обгорнуті всі пости на моєму блозі.
Подивитися його можна за допомогою, наприклад, Фаербага або інструментів для розробників, які є в будь-якому браузері (клік по потрібному елементу вебсторінки правою кнопкою миші і вибір пункту на кшталт «Перегляд коду елемента»).
У моєму випадку це клас post, тому код видозмінився:
.posts a[href^=»http://»]:not([href*=»»]):after,
.posts a[href^=»https://»]:not([href*=»»]):after,
.posts a[href^=»ftp://»]:not([href*=»»]):after {
content: url(‘/wp-content/themes/Звичайний/images/external.png’);
padding-left:3px;
}
Власне, все. Повинно працювати. Якщо захочете наприклад, додати іконку зі стрілочкою, а напис «Зовнішнє посилання» або що подібне, то просто поміняйте вміст content:
.posts a[href^=»http://»]:not([href*=»»]):after,
.posts a[href^=»https://»]:not([href*=»»]):after,
.posts a[href^=»ftp://»]:not([href*=»»]):after {
content: «(Перехід на інший сайт)»;
padding-left:3px;
}
Можна, до речі, і нічого не додавати, а просто змінити колір зовнішньої посилання щодо внутрішньої або зробити підкресленою, припустимо пунктиром. Для цього замість content: просо допишіть потрібні вас CSS властивості. Сподіваюся, що вам це знадобиться.
Удачі вам! До зустрічей на сторінках блогу
