Керування шрифтами в блокових темах WordPress

Шрифти є визначальною характеристикою дизайну будь-якого сайту. Це включає в себе теми WordPress, де розробники тем зазвичай інтегрують такі служби, як Google шрифти у налаштування WordPress Customizer для «класичної» теми на основі PHP. Це не зовсім так для блокових тем WordPress. Хоча інтеграція Google Fonts у класичні теми добре задокументована, наразі немає нічого доступного для блокових тем у Посібник з теми WordPress.

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

Те, що ми вже знаємо

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

Однак після виходу Twenty Twenty-Two процес став простішим. Збірні шрифти тепер можна визначати без їх реєстрації, як показано в Тема "Двадцять двадцять три".. Однак цей процес вимагає від нас вручну завантажити файли шрифтів і об’єднати їх у теми. Це перешкода, яка ніби перешкоджає меті простих, що вставляються, розміщених шрифтів, які обслуговуються на швидкому CDN.

Що нового

Якщо ви ще не знали, Проект Гутенберга це експериментальний плагін, де функції, що розробляються для редактора блоків і сайтів WordPress, доступні для раннього використання та тестування. У недавньому Стаття Theme Shaper, провідний архітектор проекту Гутенберга Матіас Вентура обговорюється, як Google Fonts — або будь-які інші завантажені шрифти, якщо на те пішло — можна додати для блокування тем за допомогою Створити тему блоку плагін.

Цей короткий відео на сайті Learn WordPress надає хороший огляд плагіна Create Block Theme і його роботи. Але суть полягає в тому, що він робить те, що написано на листі: він створює блокові теми. Але він робить це, надаючи елементи керування в інтерфейсі користувача WordPress, які дозволяють створювати цілу тему, дочірню тему або варіант стилю теми без написання будь-якого коду або будь-коли торкаючись файлів шаблонів.

Я спробував! І оскільки Create Block Theme є створено та підтримується WordPress.org команди, я б сказав, що це найкращий наш напрямок для інтеграції Google Fonts у тему. Тим не менш, безперечно варто зазначити, що плагін знаходиться в активній розробці. Це означає, що все може змінитися досить швидко.

Перш ніж я перейду до того, як це все працює, давайте спочатку коротко оновимося з «традиційним» процесом додавання Google Fonts до класичних тем 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 попередньо підключаються до теми таким чином:

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 року а Німецький регіональний суд наклав штраф на власника веб-сайту за порушення Європейських Вимоги GDPR. Питання? Додавання шрифтів Google у чергу на сайті відкриває IP-адресу відвідувача, ставлячи під загрозу конфіденційність користувача. CSS-Tricks розглядав це деякий час тому.

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

Як використовувати Google Fonts із блоковими темами

Це підводить нас до сьогоднішнього «сучасного» способу використання Google Fonts із блоковими темами WordPress. Спочатку створимо локальний тестовий сайт. Я використовую Flywheel Місцевий додаток для місцевого розвитку. Ви можете використовувати це або будь-що інше, а потім використовуйте Плагін Theme Test Data командою тем WordPress для роботи з фіктивним вмістом. І, звичайно, ви захочете Створити тему блоку плагін там також.

Ви встановили та активували ці плагіни? Якщо так, перейдіть до Зовнішній вигляд → Керуйте шрифтами теми з меню адміністратора WordPress.

Екран «Керування шрифтами теми» відображає список будь-яких шрифтів, уже визначених у темі theme.json файл. У верхній частині екрана також є дві опції:

• Додайте шрифти Google. Цей параметр додає шрифти Google безпосередньо до теми з API шрифтів Google.
• Додайте локальні шрифти. Цей параметр додає завантажені файли шрифтів до теми.

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

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

Натисніть кнопку «Додати шрифти Google». Це перенесе нас на нову сторінку з параметрами вибору будь-якого доступного шрифту з поточного Google Fonts API.

Для цієї демонстрації я вибрав Inter у меню параметрів і вибрав ваги 300, Regular і 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 і натиснемо Керуйте шрифтами теми знову, ми побачимо варіанти ваги Inter 300, 400 (звичайний) і 900, відображені на панелі попереднього перегляду.

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

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

Звідси перейдіть до шаблони → індекс і натисніть синій Редагувати кнопку для редагування index.html шаблон. Ми хочемо відкрити Глобальні стилі налаштування, які представлені у вигляді значка контрасту, розташованого у верхньому правому куті екрана. Коли ми натискаємо на текст налаштування та відкрийте шрифт меню в Книгодрукування розділ… бачимо Інтер!

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

Ми також можемо розглянути можливість додавання локальних шрифтів до теми, оскільки плагін Create Block Theme надає таку можливість. Перевага полягає в тому, що ви можете використовувати будь-який файл шрифту з будь-якої служби шрифтів, яку ви віддаєте перевагу.

Без плагіна нам довелося б отримати наші файли шрифтів, перекинути їх кудись у папку теми, а потім вдатися до традиційного PHP-шляху, поставивши їх у чергу в functions.php файл. Але ми можемо дозволити WordPress нести цей тягар замість нас, завантаживши файл шрифту на Додайте локальні шрифти за допомогою інтерфейсу створення теми блоку. Після вибору файлу для завантаження поля визначення накреслення шрифту заповнюються автоматично.

Хоча ми можемо використовувати будь-який .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

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