Управление шрифтами в блочных темах WordPress

Шрифты являются определяющей характеристикой дизайна любого сайта. Сюда входят темы WordPress, где разработчики тем часто интегрируют такой сервис, как Google шрифты в настройки WordPress Customizer для «классической» темы на основе PHP. Это не совсем так для блочных тем WordPress. Хотя интеграция Google Fonts в классические темы хорошо задокументирована, в настоящее время нет ничего доступного для блочных тем в Справочник по темам WordPress.

Это то, что мы собираемся рассмотреть в этой статье. Блочные темы действительно могут использовать шрифты Google, но процесс их регистрации сильно отличается от того, что вы могли делать раньше в классических темах.

Что мы уже знаем

Как я уже сказал, нам мало что нужно делать, чтобы начать. Тема Twenty Twenty-Two — это первая блочная тема WordPress по умолчанию, и она демонстрирует, как мы можем использовать загруженные файлы шрифтов в качестве ресурсов в теме. Но это довольно громоздко, потому что включает в себя пару шагов: (1) зарегистрировать файлы в functions.php файл и (2) определить связанные шрифты в theme.json файл.

Однако с тех пор, как была выпущена Twenty Twenty Two, процесс стал проще. Связанные шрифты теперь можно определять без их регистрации, как показано на Тема Двадцать двадцать три. Однако этот процесс по-прежнему требует от нас ручной загрузки файлов шрифтов и их объединения с темами. Это препятствие, которое противоречит цели простых вставных размещенных шрифтов, которые обслуживаются на быстрой CDN.

Какие новости

Если вы еще не знали, Проект Гутенберга — это экспериментальный плагин, в котором функции, разрабатываемые для редактора блоков и сайтов WordPress, доступны для раннего использования и тестирования. В недавнем Статья о создателе темы, ведущий архитектор проекта Gutenberg Матиас Вентура обсуждает, как шрифты Google — или любые другие загруженные шрифты, если уж на то пошло — могут быть добавлены к темам блоков с помощью Создать тему блока .

Этот короткий видео на Учим WordPress предоставляет хороший обзор плагина Create Block Theme и того, как он работает. Но суть в том, что он делает то, что говорит на жестяной банке: создает блочные темы. Но он делает это, предоставляя элементы управления в пользовательском интерфейсе WordPress, которые позволяют вам создавать целую тему, дочернюю тему или вариант стиля темы без написания кода или необходимости прикасаться к файлам шаблонов.

Я попробовал! И так как Create Block Theme создано и поддерживается WordPress.org команда, я бы сказал, что это лучшее направление для интеграции шрифтов Google в тему. Тем не менее, определенно стоит отметить, что плагин находится в активной разработке. Это означает, что все может измениться довольно быстро.

Прежде чем я перейду к тому, как все это работает, давайте сначала кратко освежим в памяти «традиционный» процесс добавления шрифтов Google в классические темы WordPress.

Как это было сделано

Эта статья ThemeShaper от 2014 года представляет собой отличный пример того, как мы делали это в классических PHP-темах. эта новая статья Cloudways Ибада Ура Рехмана.

Чтобы освежить нашу память, вот пример из стандартного Тема двадцать семнадцать показывающий, как шрифты Google ставятся в очередь в functions.php .

function twentyseventeen_fonts_url() { $fonts_url = ''; /** * Translators: If there are characters in your language that are not * supported by Libre Franklin, translate this to 'off'. Do not translate * into your own language. */ $libre_franklin = _x( 'on', 'libre_franklin font: on or off', 'twentyseventeen' ); if ( 'off' !== $libre_franklin ) { $font_families = array(); $font_families[] = 'Libre Franklin:300,300i,400,400i,600,600i,800,800i'; $query_args = array( 'family' => urlencode( implode( '|', $font_families ) ), 'subset' => urlencode( 'latin,latin-ext' ), ); $fonts_url = add_query_arg( $query_args, 'https://fonts.googleapis.com/css' ); } return esc_url_raw( $fonts_url );
}

Затем Google Fonts предварительно подключается к теме следующим образом:

function twentyseventeen_resource_hints( $urls, $relation_type ) { if ( wp_style_is( 'twentyseventeen-fonts', 'queue' ) && 'preconnect' === $relation_type ) { $urls[] = array( 'href' => 'https://fonts.gstatic.com', 'crossorigin', ); } return $urls;
}
add_filter( 'wp_resource_hints', 'twentyseventeen_resource_hints', 10, 2 );

Что не так с традиционным способом

Отлично, правда? Однако есть загвоздка. В январе 2022 г. Немецкий окружной суд наложил штраф на владельца веб-сайта за нарушение европейского Требования к ВВПР. Проблема? Постановка Google Fonts в очередь на сайте раскрыла IP-адрес посетителя, что поставило под угрозу конфиденциальность пользователя. CSS-Tricks уже рассказывали об этом некоторое время назад.

Ассоциация Создать тему блока Плагин удовлетворяет требованиям конфиденциальности GDPR, поскольку он использует API Google Fonts, чтобы служить исключительно в качестве прокси для местного поставщика. Шрифты предоставляются пользователю на том же веб-сайте, а не на серверах Google, что обеспечивает конфиденциальность. WP Tavern обсуждает решение немецкого суда и включает ссылки на руководства по самостоятельному размещению шрифтов Google.

Как использовать Google Fonts с блочными темами

Это подводит нас к современному «современному» способу использования Google Fonts с блочными темами WordPress. Во-первых, давайте настроим локальный тестовый сайт. Я использую маховик месте приложение для местного развития. Вы можете использовать это или что вы предпочитаете, затем используйте Плагин тестовых данных темы командой WordPress Themes Team для работы с фиктивным контентом. И, конечно же, вы захотите Создать тему блока плагин там же.

Вы установили и активировали эти плагины? Если это так, перейдите к Внешний вид → Управление шрифтами темы из меню администратора WordPress.

На экране «Управление шрифтами темы» отображается список любых шрифтов, уже определенных в настройках темы. theme.json файл. В верхней части экрана также есть две опции:

• Добавьте шрифты Google. Этот параметр добавляет шрифты Google непосредственно в тему из API шрифтов Google.
• Добавьте локальные шрифты. Эта опция добавляет в тему загруженные файлы шрифтов.

Я использую совершенно пустую тему WordPress под названием Пустая тема. Вы можете использовать свою собственную тему, но я хотел бы отметить, что я переименовал Emptytheme в «EMPTY-BLANK» и изменил ее, поэтому предустановленных шрифтов и стилей вообще нет.

Я решил поделиться скриншотом файловой структуры моей темы и theme.json файл, чтобы показать, что в нем буквально нет стилей или конфигураций.

Нажимаем кнопку «Добавить Google Fonts». Это переводит нас на новую страницу с возможностью выбора любого доступного шрифта из текущего Google Fонц API.

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

После того, как я сохранил свой выбор, выбранные мной стили шрифтов Inter автоматически загружаются и сохраняются в папке темы. assets/fonts Папка:

Обратите также внимание на то, как эти выборки автоматически записываются в theme.json файл на этом скриншоте. Плагин Create Block Theme даже добавляет путь к файлам шрифтов.

{ "version": 2, "settings": { "appearanceTools": true, "layout": { "contentSize": "840px", "wideSize": "1100px" }, "typography": { "fontFamilies": [ { "fontFamily": "Inter", "slug": "inter", "fontFace": [ { "fontFamily": "Inter", "fontStyle": "normal", "fontWeight": "300", "src": [ "file:./assets/fonts/inter_300.ttf" ] }, { "fontFamily": "Inter", "fontStyle": "normal", "fontWeight": "900", "src": [ "file:./assets/fonts/inter_900.ttf" ] }, { "fontFamily": "Inter", "fontStyle": "normal", "fontWeight": "400", "src": [ "file:./assets/fonts/inter_regular.ttf" ] } ] } ] } }
}

Если мы перейдем на главный экран Create Block Theme и нажмем кнопку Управление шрифтами темы снова, мы увидим варианты веса Интера 300, 400 (обычный) и 900, отображаемые на панели предварительного просмотра.

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

Выбранные шрифты также доступны в Редакторе сайта. Глобальные стили (Внешний вид → редактор), особенно на панели «Дизайн».

Отсюда перейдите к Шаблоны → Индекс и нажмите на синий Редактировать кнопка для редактирования index.html шаблон. Мы хотим открыть Глобальные стили настройки, которые представлены в виде значка контрастности, расположенного в правом верхнем углу экрана. Когда мы нажимаем на Текст настройки и откройте шрифт меню в книгопечатание раздел… мы видим Интер!

То же самое, но с локальными шрифтами

Мы также можем добавить локальные шрифты в тему, поскольку плагин Create Block Theme предоставляет эту возможность. Преимущество заключается в том, что вы можете использовать любой файл шрифта из любой службы шрифтов, которую вы предпочитаете.

Без плагина нам пришлось бы захватить наши файлы шрифтов, поместить их куда-нибудь в папку темы, а затем прибегнуть к традиционному маршруту PHP, поставив их в очередь в functions.php файл. Но мы можем позволить WordPress нести это бремя за нас, загрузив файл шрифта на Добавить локальные шрифты экран с помощью интерфейса Create Block Theme. После выбора файла для загрузки поля определения начертания шрифта заполняются автоматически.

Хотя мы можем использовать любой .ttf, .woffили .woff2 файл, я просто скачал Открытые файлы шрифтов Sans из Google Fonts для этого упражнения. Я взял два варианта веса, обычный и 800.

То же самое автоматическое управление файлами и theme.json обновление, которое мы видели с опцией Google Fonts, происходит снова, когда мы загружаем файлы шрифтов (которые выполняются по одному). Посмотрите, где находятся шрифты в папке моей темы и как они добавляются в theme.json:

Удаление шрифтов

Плагин также позволяет нам удалять файлы шрифтов из блочной темы из панели администратора WordPress. Давайте удалим один из вариантов Open Sans, которые мы установили в предыдущем разделе, чтобы посмотреть, как это работает.

Нажмите Удалить ссылки вызывают предупреждение для подтверждения удаления. мы нажмем OK для продолжения.

Давайте откроем папку с нашей темой и проверим theme.json файл. Действительно, файл Open Sans 800, который мы удалили на экране плагина, удалил файл шрифта из папки темы, и ссылка на него давно исчезла. theme.json.

Идет работа

Ведутся разговоры о добавлении этой функции «Диспетчер шрифтов» в ядро ​​​​WordPress. вместо того, чтобы нуждаться в отдельном плагине.

Начальная итерация функции доступен в репозитории, и он использует тот же подход, который мы использовали в этой статье. Должен быть GDPR-совместимый, слишком. Особенность планируется выпустить с WordPress 6.3 выпуск позже в этом году.

Подведение итогов

Плагин Create Block Theme значительно улучшает взаимодействие с пользователем, когда дело доходит до обработки шрифтов в блочных темах WordPress. Плагин позволяет нам добавлять или удалять любые шрифты с соблюдением требований GDPR.

Мы видели, как выбор шрифта Google или загрузка локального файла шрифта автоматически помещает шрифт в папку темы и регистрирует его в theme.json файл. Мы также видели, как шрифт доступен в настройках глобальных стилей в редакторе сайта. А если нам нужно удалить шрифт? Плагин также полностью позаботится об этом — не касаясь файлов темы или кода.

Спасибо за прочтение! Если у вас есть замечания или предложения, поделитесь ими в комментариях. Я хотел бы знать, что вы думаете об этом возможном направлении управления шрифтами в WordPress.

Дополнительные ресурсы

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

Управление шрифтами WordPress

Проблемы с GitHub

Европейские требования GDPR

• SEO-контент и PR-распределение. Получите усиление сегодня.
• Платоблокчейн. Интеллект метавселенной Web3. Расширение знаний. Доступ здесь.
• Источник: https://css-tricks.com/managing-fonts-in-wordpress-block-themes/