Здравствуйте, сегодня поговорим про иконки для сайта, а именно: как вставить иконку в адресную строку сайта (favicon), перед названием категории, заголовков, пунктов меню, списков, ссылок и др.
Скачать исходники для статьи можно ниже
1. Иконка в адресной строке сайта (favicon, фавикон):
В основном используются изображения размера 16×16 пикселей формата ico, помещенные в корневой каталог сайта под именем favicon.ico, однако, сейчас современные браузеры могут поддерживать различные форматы изображений для favicon:
, а также можно задать положение значка (favicon) с помощью следующего кода (то есть не обязательно располагать иконку в корневом каталоге сайта):
<link rel="shortcut icon" href="https://mnogoblog.ru/wp-content/uploads/favicon.ico" />
Или так, если тип файла не ico:
<link rel="icon" type="image/png" href="/someimage.png" />
, где type – формат файла: image/png, image/gif и др.
Как загрузить и вставить фавикон на сайт wordpress?
Заходим в админку wordpress, в левом меню выбрать пункт “Медиафайл” и его подпункт “Добавить новый”, далее загружаем нужную иконку для сайта и не забываем скопировать путь до нее.
Следующим шагом заходим в файл header.php – в панели управления wordpress выбираем пункт “Внешний вид” и его подпункт “Редактор”, справа в списке шаблонов выбираем файл header.php – после в его коде ищем закрывающий тег </head> и вставляем перед ним код с указанием пути до иконки:
... wp_head(); ?> <link rel="shortcut icon" href="https://mnogoblog.ru/wp-content/uploads/2013/08/favicon.ico" /> </head> <body <?php body_class(); ?>> ...
PS: В случае отсутствия указания до фавикона (favicon) браузер пытается загрузить favicon.ico из корня сайта – поэтому можно просто загрузить иконку в корневую папку без правки кода сайта.
2. Иконки заголовков.
Давайте добавим иконку например к заголовку H3.
Для этого заходим в файл стилей – style.css (панель управления wordpress, пункт “Внешний вид”, подпункт “Редактор”, справа в списке шаблонов выбираем файл style.css) – и в его коде, в самом конце, вставить следующее:
h3 {
background: url(https://mnogoblog.ru/wp-content/uploads/2013/08/iconcanav.gif) no-repeat !important;
padding-left: 20px !important;
}
, где строчка:
background – задает url до иконки.
3. Иконка списков.
Для примера возьмем стандартную тему wordpress – Twenty Eleven.
Давайте исправим иконки списков в сайдбаре (боковой колонке):
И создадим следующее:
Для этого достаточно зайти в файл стилей – style.css (панель управления wordpress, пункт “Внешний вид”, подпункт “Редактор”, справа в списке шаблонов выбираем файл style.css) – и в его коде, в самом конце, вставить следующее:
.widget ul li {
background: url(https://mnogoblog.ru/wp-content/uploads/2013/08/iconcanav.gif) no-repeat !important;
padding-left: 20px !important;
}
.widget ul {
list-style: none !important;
}
, где строчка:
background – задает url до иконки.
list-style: none !important – убирает иконки списков, которые стояли изначально в сайдбаре.
4. Иконка для внешних ссылок на сайте
Ответ на данный пункт можете найти в моей статье – Как выделить внешние ссылки на сайте.
5. Иконка категорий
Ответ на данный пункт можете найти в моей статье – Иконки для категории.
6. Иконка виджетов, иконки для заголовков виджетов
Ответ на данный пункт можете найти в моей статье – Иконки для виджетов.