Це трапляється з усіма.

Ви знаходите тему, яка вам подобається, встановлюєте її і проводите кілька місяців, насолоджуючись зовнішнім виглядом вашого сайту. Але потім, через кілька місяців, тема починає здаватися прісною. Трохи нудною.

Єдина проблема полягає в тому, що ви не хочете витрачати пару годин на пошуки чогось нового. Якби ж то був спосіб додати до вашої теми трохи пікантності, трохи спалаху, щоб виділити її з-поміж інших.

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

Тире - це шрифтові іконки, які з'явилися в WordPress 3.8. Це ті дивовижні і круті іконки, які ви бачите, коли входите на свою інформаційну панель. Хіба не було б круто, якби ви могли додати їх і до своєї теми?

Що ж, ви можете, і я покажу вам, як це зробити.

Як використовувати тире в навігаційному меню?

Давайте почнемо з простого прикладу. Дашикони вже включені в WordPress, починаючи з версії 3.8, але вам все одно потрібно включити їх, щоб вони правильно відображалися в інтерфейсі вашого сайту, тобто у вашій темі.

Крок 1: Підготуйте значки теми

Щоб підготувати тиш-іконки вашої теми, спочатку відкрийте файл functions.php (знаходиться в редакторі зовнішнього вигляду - за замовчуванням він відкриває CSS-файл вашої поточної теми. Знайдіть файл functions.php і натисніть на нього, щоб завантажити його в редакторі).

Крок 2: Поставте сценарій у чергу

Прокрутіть сторінку до кінця і вставте ці рядки коду в кінці:

 //Встановити в чергу скрипт Dashicons add_action( 'wp_enqueue_scripts', 'load_dashicons_front_end' ); function load_dashicons_front_end() { wp_enqueue_style( 'dashicons' ); } 

Гаразд! Тепер ваша тема готова до використання тире.

Крок 3: Додавання тире до пунктів меню

Давайте додамо Dashicon для вашого посилання "Додому". Перейдіть на сайт Dashicons і виберіть іконку, яка вам подобається.

Оновлення: спочатку тишікони були доступні на GitHub.io, але відтоді вони стали доступні і на WordPress.org.

Крок четвертий:

Натисніть на потрібну іконку (в даному випадку я вибрав домашню іконку), а потім натисніть на Копіювати HTML. У вас з'явиться спливаюче вікно з потрібним кодом.

Крок п'ятий:

Поверніться до панелі інструментів WordPress, натисніть на меню "Зовнішній вигляд" і вставте код прямо там, де написано "Навігаційна мітка".

Якщо ви хочете, щоб слово було показано, введіть його після закриваючої дужки div.

Натисніть "Зберегти" і завантажте домашню сторінку. Тепер ваше посилання на домашню сторінку має відображатися у вигляді красивої, чіткої іконки Dashicon.

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

Як ви використовуєте тире в метапості?

Ви можете піти ще далі і додати тире до метаданих вашого допису, або, іншими словами, додати тире перед іменем автора, датою, категорією або тегом; залежно від вашої теми та інформації, яка в ній відображається.

Оскільки ви вже ввімкнули тире у вашій темі, все, що вам потрібно зробити, це відкрити файл style.css (або скористатися спеціальним редактором CSS, що завжди краще, щоб не втратити зміни при оновленні теми!), знайти відповідний селектор і додати CSS-код.

Припустимо, ви хочете додати іконку перед своїм ім'ям або ім'ям автора.

Крок перший:

Спочатку обираємо ікону, яка нам подобається.

Крок другий:

Потім натисніть на нього і цього разу виберіть "Копіювати 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; } 

Кінцевий результат

Тож як це виглядатиме в кінцевому підсумку?

Щось на кшталт цього:

Існує безліч способів використання тире - дайте волю своїй фантазії і подивіться, що у вас вийде.

Збираємо все воєдино

Окрім наведених вище прикладів, ви можете використовувати тире у своєму бекенді, щоб вказати різні іконки для різних типів дописів, або використовувати їх у заголовках дописів, заголовках віджетів, або, якщо ви створюєте кастомну цільову сторінку, щоб розрізняти різні сторінки вашого сайту.

Ось базовий приклад того, що ви можете створити з їх допомогою: