Використовуємо шрифти Google Fonts у текстовому редакторі WordPress

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

А конкретніше, ви можете (і повинні!) додати таблицю стилів редактор WYSIWYG в консолі WordPress. Ця таблиця стилів зазвичай називається editor-style.cssале може бути названа як завгодно, головне правильно її викликати.

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

Дивіться також:

• Як правильно додати шрифти Google Web Fonts у WordPress тему
• WordPress плагіни для додавання шрифтів Google Fonts
• Додаємо шрифти для іконок у WordPress
• Використання шрифту Genericons на вашому сайті WordPress

Додаємо шрифти Google до редактора WordPress

Зазвичай додавання веб-шрифтів до WordPress ми робимо за допомогою зачіпки wp_enqueue_scripts, своєї функції та виклику функції wp_enqueue_styleяка включить наш шрифт або шрифти.

Звичайно, це для того, щоб шрифти були доступні на сайті користувача.

Якщо ви хочете додати цю ж функціональність до консоль сайту, вам потрібно буде діяти трохи інакше.

1. Зачіплення стилів редактора

Спочатку зачепите таблицю стилів вашого редактора за допомогою ініціалізації та вашої кастомної функції:

function acme_load_editor_style() {
  add_editor_style( get_template_directory_uri() . '/css/editor-style.css' );
}
add_action( 'after_setup_theme', 'acme_load_editor_style' );

Як бачите в коді вище, мій файл editor-style.css знаходиться в папці CSS всередині каталогу моєї теми.

2. @import веб-шрифтів

Ось тут починаються відмінності у завантаженні таблиць стилів. Ви не можете використовувати admin_enqueue_scripts, щоб отримати той же результат, що вище.

Це дивно, згоден, але вам потрібно використовувати CSS вираз @import. Таким чином, ваша таблиця стилів може виглядати приблизно так:

@import url('https://fonts.bunny.net/css?family=Source+Sans+Pro:300,400,600,700,900|Muli:300,400|Nunito:400,300,700');
 
body {
  font-family: 'Source Sans Pro', Sans-serif;
  font-size: 16px;
  max-width: 720px;
}
 
a {
  color: #80949c;
}
 
a:hover {
  color: #2e3138;
  text-decoration: none;
}

Зверніть увагу, що наведений вище код — лише зразок. Вам, очевидно, потрібно буде набагато більше стилів для кожного елемента, але принцип має бути зрозумілим.

3. Оновлення редактора

На цьому етапі у вас вже має бути оголошено editor-style.css, що імпортує веб-шрифти, і визначено кілька елементів. Це має вилитися у щось на кшталт цього:

Звичайно, якщо ви використовували інші шрифти або інші стилі, результат може бути іншим, але суть методу буде та ж.

Джерело: tommcfarlin.com

Олексій Шевченко

редактор wpcafe

Вивчає сайтобудування з 2008 року. Практикуючий вебмайстер, що спеціалізується на створенні сайтів WordPress. Задати питання Олексію можна на https://profiles.wordpress.org/wpthemeus/