Это случается с каждым.

Вы находите тему, которая вам нравится, устанавливаете ее и несколько месяцев наслаждаетесь внешним видом своего сайта. Но потом, через несколько месяцев, тема начинает казаться несвежей. Немного скучной.

Проблема лишь в том, что вы не хотите тратить пару часов на поиски чего-то нового. Если бы только был способ добавить немного специй в вашу тему, немного бликов, чтобы она выделялась.

Прежде чем вы в отчаянии вскинете руки вверх, позвольте мне показать вам простой способ оживить вашу тему без особых усилий и без добавления ненужных изображений, которые могут замедлить работу вашего сайта.

Дашиконы - это значки шрифтов, которые были введены в WordPress 3.8. Это те удивительные и крутые значки, которые вы видите, когда входите в свою приборную панель. Разве не было бы здорово, если бы вы могли добавить их и в свою тему?

Вы можете, и я собираюсь показать вам, как это сделать.

Как можно использовать дашиконы в навигационном меню?

Начнем с простого примера. Дашиконы уже включены в WordPress начиная с версии 3.8, но вам все еще нужно включить их, чтобы они правильно отображались на лицевой стороне вашего сайта, то есть в вашей теме.

Шаг 1: Подготовьте Дашиконы вашей темы

Чтобы подготовить Dashicons вашей темы, сначала откройте файл functions.php (находится в Appearance>Editor - по умолчанию он открывает CSS файл вашей текущей темы. Идите вперед и найдите файл functions.php и нажмите на него, чтобы загрузить его в Editor).

Шаг 2: Запустить сценарий

Прокрутите страницу до самого низа и вставьте эти строки кода в конец:

 //Включите скрипт Dashicons add_action( 'wp_enqueue_scripts', 'load_dashicons_front_end' ); function load_dashicons_front_end() { wp_enqueue_style( 'dashicons' ); } 

Все! Теперь ваша тема готова к использованию Dashicons.

Шаг 3: Добавление дашиконов в пункты меню

Давайте добавим Dashicon для вашей ссылки Home. Перейдите на сайт Dashicons и выберите понравившуюся иконку.

Обновление: Дашиконы первоначально были доступны на GitHub.io, но с тех пор они стали доступны на WordPress.org.

Шаг 4:

Нажмите на нужный значок (в данном случае я выбрал значок дома), а затем нажмите на Copy HTML. Это даст вам всплывающее окно с кодом, который вам нужен.

Шаг 5:

Вернитесь в панель управления WordPress, нажмите на Внешний вид> Меню и вставьте код прямо туда, где написано Navigation Label.

Если вы все еще хотите, чтобы слово отображалось, введите его после закрывающей скобки div.

Нажмите на кнопку сохранить и загрузите домашнюю страницу. Теперь ваша домашняя ссылка должна отображать красивый, четкий Dashicon.

Вы можете сделать это для всех пунктов навигационного меню или только для главного. Просто повторите описанные выше действия с соответствующими значками. Это было просто, верно?

Как использовать Dashicons в метапосте?

Вы можете пойти дальше и добавить Dashicons в метапост, или, другими словами, добавить Dashicons перед именем автора, датой, категорией или тегом; в зависимости от вашей темы и информации, которую она отображает.

Поскольку вы уже включили Dashicons в свою тему, все, что вам теперь нужно сделать, это открыть файл style.css (или использовать редактор Custom CSS, что всегда лучше, чтобы не потерять изменения после обновления темы!), найти соответствующий селектор и добавить код CSS.

Допустим, вы хотите добавить значок перед своим именем или именем автора.

Шаг 1:

Сначала мы выберем иконку, которая нам нравится.

Шаг 2:

Затем щелкните по нему, и на этот раз выберите Copy CSS. Снова появится всплывающее окно с кодом, который нужно вставить.

Шаг 3:

Теперь откройте ваш style.css и найдите соответствующий селектор, в данном случае - .entry-author. Добавив :before и вставив CSS-код, который вы скопировали с сайта Dashicons, перед именем автора появится красивый значок. Вам также нужно указать, что вы используете шрифт Dashicons. Измененный код выглядит следующим образом:

 .entry-author:before { font-family: "dashicons"; content: "\f110"; } 

Добавим также немного стилизации, и теперь готовый код выглядит следующим образом:

 .entry-author:before { font-family: "dashicons"; content: "\f110"; color: #f15123; display: inline-block; -webkit-font-smoothing: antialiased; font: normal 20px/1; vertical-align: top; margin-right: 5px; margin-right: 0.5rem; } 

Конечный результат

Так как же это будет выглядеть в итоге?

Что-то вроде этого:

Существует так много способов использования Dashicons - дайте волю своему творчеству и посмотрите, что у вас получится.

Собираем все вместе

Помимо приведенных выше примеров, вы можете использовать Dashicons в бэкенде, чтобы указать разные иконки для разных типов постов, или использовать их в заголовках постов, заголовках виджетов, или, если вы создаете пользовательскую целевую страницу, вы можете различать разные страницы вашего сайта.

Вот базовый пример того, что можно создать с их помощью: