Вопрос или проблема
Я пытаюсь добавить шрифты Google в свою собственную тему WordPress. Поэтому я попытался подключить сразу три шрифта, чтобы обеспечить быструю загрузку. Я использую следующий код для регистрации и подключения этих шрифтов.
wp_register_style('googlFonts', '//fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&family=DM+Serif+Display&family=La+Belle+Aurore&display=swap');
wp_enqueue_style('googlFonts');
Когда я ищу в исходном коде, я вижу только последний шрифт. Остальные шрифты не загружаются. Я даже не вижу тот же полный URL в исходном коде. Вот что я увидел в исходном коде.
Может кто-нибудь помочь мне с этим?
Заранее спасибо
Просто удалите параметр версии.
wp_register_style('googlFonts', '//fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&family=DM+Serif+Display&family=La+Belle+Aurore&display=swap', array(), null);
wp_enqueue_style('googlFonts');
Ответ или решение
Добавление шрифтов Google к кастомной теме WordPress — это важный шаг для создания стильного и функционального сайта. С помощью правильного кода вы сможете быстро и эффективно интегрировать различные шрифты, оттеняя уникальность вашей темы. В данном руководстве мы рассмотрим процесс добавления нескольких шрифтов Google, как исправить распространенные ошибки и обеспечить корректную загрузку всех выбранных шрифтов.
Шаг 1: Регистрация и подключение стилей
Первоначально вы написали следующий код для регистрации и подключения шрифтов Google:
wp_register_style('googlFonts', '//fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&family=DM+Serif+Display&family=La+Belle+Aurore&display=swap');
wp_enqueue_style('googlFonts');Однако при проверке исходного кода страницы вы заметили, что отобразился только последний шрифт. Это связано с тем, что браузер может неправильно обрабатывать строку запроса, когда к ней добавляются специальные параметры.
Шаг 2: Исправление кода
Для устранения этой проблемы рекомендуется добавить третий аргумент к функции wp_register_style(), который указывает версию стиля. Чтобы избежать добавления версии, достаточно установить этот аргумент в null. Вот исправленный код:
wp_register_style('googlFonts', '//fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&family=DM+Serif+Display&family=La+Belle+Aurore&display=swap', array(), null);
wp_enqueue_style('googlFonts');Шаг 3: Понимание параметров
- URL шрифта: Обратитесь к стандартному URL, как указано выше. Используйте
&вместо&, так как это необходимо для корректной обработки. - Массив зависимостей: Если у вас есть другие стили, которые должны быть загружены до этого, вы можете указать их в качестве массива. Если зависимости нет, оставьте пустым.
- Версия: Если вы хотите предотвратить кеширование вашей таблицы стилей, установите значение на
null.
Шаг 4: Проверка результата
После внесения этих изменений обязательно проверьте исходный код страницы вашего сайта. Для этого откройте DevTools в вашем браузере (обычно F12 или правой кнопкой мыши → "Просмотреть код") и перейдите к вкладке "Сеть" (Network). Убедитесь, что все три шрифта загружаются корректно.
Шаг 5: Дополнительные рекомендации
Для оптимизации загрузки шрифтов рекомендуется:
- Использовать локальные шрифты, если это возможно. Локальные файлы шрифтов могут загрузиться быстрее и не зависят от внешних серверов.
- Инструменты для оптимизации: Пользуйтесь плагинами для кэширования и оптимизации производительности, такими как WP Rocket или Autoptimize.
- Мониторинг производительности: Используйте Google PageSpeed Insights или GTmetrix для анализа скорости загрузки вашего сайта и выявления возможных улучшений.
Заключение
Правильное добавление шрифтов Google в вашу кастомную тему WordPress может значительно улучшить визуальное восприятие вашего сайта. Следуя вышеуказанным рекомендациям и исправлениям, вы сможете корректно подключить и использовать шрифты, обеспечив их быструю загрузку и корректное отображение. Если у вас возникли дополнительные вопросы, не стесняйтесь задавать их на форумах поддержки WordPress или в профессиональных сообществах.