UGgallery

Чтобы добавить иконку к ссылке в WordPress-е потребуется вставить всего несколько строк в CSS-файл шаблона. Ну, и саму иконку подготовить. Сразу предупрежу, что данное решение подходит только для современных браузеров, вроде Firefox и Opera. Пользователей IE 5-6, это никак не затронет, они получат обычную текстовую ссылку без картинки. Хаков не используется, так как IE, на данный момент, просто не понимает таких CSS-селекторов.

Результат можно видеть на скриншоте или в подвале любой страницы этого сайта.

Сначала нам понадобится картинка для иконки RSS-потока. Возьмем изображение, принятое в качестве стандарта де-факто, отрисованное добрыми людьми, и выложенное для всеобщего использования в форматах PSD и AI.

Слегка модифицируем картинку и получаем следующее: в одном файле два изображения разной цветовой насыщенности (для rollover-эфффекта). Файл сохраняем в формате PNG с прозрачностью, в результате чего, этот файл можно использовать на любом фоне: черном, белом, цветном, пестром — любом. Это благодаря тому, что мы сразу отказались от поддержки устаревших браузеров, не полностью поддерживающих PNG.

Загружаем картинку на сервер и начинаем писать CSS. Главное тут — правильный селектор, который гарантирует, что стилевое правило будет применено к определенной ссылке, без использования классов или id.

a[href="..."]

В селекторе, между кавычками пишем точный полный адрес нашего RSS-потока. Он же — адрес ссылки. Его можно скопировать прямо с страницы в окне браузера.

Копи-пейстить нужно внимательно — достаточно забыть конечный слеш, например, и селектор не заработает.

В моем случае получается следующее:

a[href="http://uggallery.audiopeace.ru/feed/"]

Это селектор для ссылки на RSS-поток “Статьи”. Для выделения ссылки “Комментарии” , нужно лишь заменить адрес.

Дальше все совсем просто. прописываем картинку в качестве фона ссылки, выравниваем ее по правому краю (или по левому, как больше нравится). Задаем padding, чтобы текст ссылки не перекрывал фон и картинка полностью была видна. Для этого же использовано правило line-height. Добавляем margin, который, в общем, не обязателен — зависит от дизайна страницы.

a[href="http://uggallery.audiopeace.ru/feed/"],
a[href="http://uggallery.audiopeace.ru/comments/feed/"] {
    margin-right: 1px; 
    padding: 1px 19px 5px 0; 
    background: url(/wp-content/feedicon16.png) no-repeat 100% 0; 
    line-height: 2; 
}

Ссылка готова. Еще немного кода для создания rollover-эффекта:

a:hover[href="http://uggallery.audiopeace.ru/feed/"],
a:hover[href="http://uggallery.audiopeace.ru/comments/feed/"] {
    background-position: 100% -100px; 
}

Вот и все.

В принципе, то же самое нетрудно реализовать для IE. Но кому он, такой устаревший, нынче нужен? :-) Я не хочу принизить пользователей IE, однако пришла пора осваивать новые технологии дизайна, а для этого нужно ориентироваться на новые браузеры. Благодаря чему, нам не понадобилась модификация кода страницы, что, в случае с WordPress, может потребовать некоторых навыков работы с PHP. А так, это решение годится для любого сайта, независимо от платформы. Элементарно просто

Дата написания: Wednesday, 21.12.2005. Время: 19:12. Рубрика: CSS-верстка, WordPress.