Это случается со всеми.
Найдите понравившуюся тему, установите ее и проведите несколько месяцев, наслаждаясь внешним видом вашего сайта. Но затем, через несколько месяцев, тема начинает ощущаться прогорклой. Немного скучно.
Единственная проблема в том, что вы не хотите тратить пару часов на поиски чего-то нового. Если бы только был способ добавить немного пряности к вашей теме, немного вспыхнуть, чтобы она выделялась.
Прежде чем поднять руки в отчаянии, позвольте мне показать вам простой способ оживить вашу тему без особых усилий и без добавления ненужных изображений, которые могут замедлить работу вашего сайта.
Дасиконс входит. Dashicons – это иконки шрифтов, которые были представлены в WordPress 3.8. Это те классные и крутые значки, которые вы видите, когда заходите в свой дэш. Разве не было бы замечательно, если бы вы тоже могли добавить их в свою тему?
Ну, вы можете, и я покажу вам, как.
Как вы можете использовать Dashicons в вашем меню навигации?
Давайте начнем с простого примера. Dashicons уже включены в WordPress начиная с версии 3.8, но вы все равно должны включать их, чтобы они правильно отображались в передней части вашего сайта; это ваша тема.
Шаг 1: Подготовьте тему Dashicons
Чтобы подготовить тему Dashicons, сначала откройте файл functions.php (находится в разделе «Внешний вид»> «Редактор»; по умолчанию откроется файл CSS вашей текущей темы. Найдите файл functions.php и нажмите на него, чтобы загрузить его). в редакторе.)
Шаг 2: поставить скрипт в очередь
Прокрутите до конца и вставьте эти строки кода в конце:
//Enqueue the Dashicons script
add_action( 'wp_enqueue_scripts', 'load_dashicons_front_end' );
function load_dashicons_front_end() {
wp_enqueue_style( 'dashicons' );
}
Все хорошо! Ваша тема готова к использованию Dashicons.
Шаг 3: Добавить дашиконы в пункты меню
Давайте добавим Dashicon к вашей ссылке Start. Перейдите на сайт Dashicons и выберите понравившуюся вам иконку.
Шаг 4:
Нажмите на нужный значок (в данном случае я выбрал значок запуска), а затем нажмите «Копировать HTML». Это даст вам всплывающее окно с кодом, который вам нужен.
Шаг 5:
Вернитесь на панель управления WordPress, нажмите «Внешний вид»> «Меню» и вставьте код там, где написано «Навигационный тег».
Если вы все еще хотите, чтобы слово появилось, введите его после заключительного div.
Нажмите сохранить и загрузить свою домашнюю страницу. Ваша домашняя ссылка должна теперь показывать хороший и острый Dashicon.
Вы можете сделать это для всех пунктов меню навигации или просто для дома. Просто повторите предыдущие шаги с соответствующими значками. Это было легко, верно?
Как вы используете Dashicons в пост-мета?
Вы можете сделать еще один шаг вперед и добавить Dashicons к цели публикации или, другими словами, добавить Dashicons перед именем автора, датой, категорией или тегом; в зависимости от вашей темы и отображаемой информации.
Поскольку вы уже поставили Dashicons в очередь в своей теме, все, что вам нужно сделать, – это открыть свой файл style.css (или использовать специальный редактор CSS, который всегда лучше, чтобы вы не потеряли свои изменения после его обновления). ваша тема). соответствующий селектор и добавьте код CSS.
Предположим, вы хотите добавить значок перед вашим именем или именем его автора.
Шаг 1:
Сначала мы выберем иконку, которая нам нужна.
Шаг 2:
Затем нажмите на него, и на этот раз выберите Копировать CSS. Опять же, это даст вам всплывающее окно с кодом, который нужно вставить.
Шаг 3:
Теперь откройте ваш style.css и найдите соответствующий селектор, в данном случае: .entry-author. Добавление: перед вставкой кода 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 в своем бэкэнде, чтобы указывать разные значки для разных типов постов, или вы можете использовать их в заголовках постов, заголовках виджетов, или если вы создаете пользовательскую целевую страницу, вы можете различать разные страницы вашего сайта.
Прекрасным примером этого является старая домашняя страница WP Superstars. Здесь вы можете увидеть Dashicons, используемые в разных областях сайта:
Скачать WordPress Themes бесплатно