Більше результатів...

Загальні селектори
Тільки точні збіги
Шукати у заголовках
Шукати у контенті
Вибір типів постів
Фільтрувати за категоріями
FAQ
Hostenko
Натхнення
Відео уроки
Новини
Плагіни
теми
Уроки
Хакі

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

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

inet.ws - Powerful VPS Hosting в США, Canada, UK та DE!

Враховуючи зростаючу популярність веб-шрифтів, наприклад від Google — при використанні шрифтів у редакторі потрібно застосувати трохи інший підхід щодо впровадження, який відрізняється від звичайного з кодом сервера. Зверніть увагу, що в цьому уроці ми розповімо, як впровадити шрифти від Google саме до редактора записів 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, що імпортує веб-шрифти, і визначено кілька елементів. Це має вилитися у щось на кшталт цього:

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

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

Джерело: tommcfarlin.com
inet.ws - Powerful VPS Hosting в США, Canada, UK та DE!
Олексій Шевченко
редактор wpcafe
Вивчає сайтобудування з 2008 року. Практикуючий вебмайстер, який спеціалізується на створенні сайтів на WordPress. Задати питання Олексію можна на https://profiles.wordpress.org/wpthemeus/

Коментарі до запису: 4

Олексій Сазіков:

а з російськими шрифтами це працюватиме? або лише англ.?

WPcafe.org:

З будь-якими шрифтами Google працюватиме, у тому числі і кириличними.

Євген:

Дякую, давно шукав подібну статтю. Мені завжди дивувало, чому в редакторі WYSIWYG не реалізовано опцію вибору шрифту… Однак я щось недоганяю, «зачіпки» для мене новий термін(( Так розумію, спочатку потрібно знайти якийсь файл «wp_enqueue_scripts.php») і вставити туди необхідну функцію, далі знаходимо файл «editor-style.css» у папці нашої теми та вставляємо туди імпорт шрифтів.

WPcafe.org:

Автор оригінальної статті стверджує, що так, але на практиці ми самі не пробували.

Додати коментар або відгук