Вопрос или проблема
Я хочу добавить внешнюю CSS-стилизацию. Я знаком с различными техниками, такими как добавление в очередь. (Или использование @import в таблице стилей дочерней темы?) Однако эти методы не применимы в моем случае. Я хочу добавить следующую строку:
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="somedigits" crossorigin="anonymous">
в html секцию.
В старом стиле WordPress я бы просто нашел файл header.php в моей теме, скопировал его в свою дочернюю тему и добавил эту строку напрямую. Но новые “блочные темы” не имеют файл header.php.
Шаблоны, похоже, не выводят секцию. Так что я не уверен, где это можно добавить?
(Конечно, есть обходные пути, например, я могу скачать CSS Bootstrap в папку темы и добавить его в очередь как локальный файл. Но это не то, что я хочу делать).
Вы можете использовать wp_head action hook, чтобы выводить HTML в элементе <head> на веб-странице:
function function_name() {
echo '<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="somedigits" crossorigin="anonymous">';
}
add_action( 'wp_head', 'function_name' );
Ответ или решение
Вопрос о том, как можно отредактировать вывод HTML заголовка в современном редакторе сайта WordPress, особенно в контексте новых блоковых тем, является актуальным и интересным, учитывая как изменился способ управления элементами сайта в последних версиях WordPress. Давайте подробно разберем эту тему.
Теория
Сначала необходимо понять, как современные блоковые темы отличаются от классических тем в WordPress. В прошлых версиях WordPress разработчики активно использовали такие файлы, как header.php, footer.php и другие подобные, которые обеспечивали базовую структуру HTML для каждой страницы. Это позволяло легко добавить кастомный код напрямую в HTML-разметку, манипулируя кодом в этих файлах.
С введением блоковых тем WordPress изменил свой подход к созданию и кастомизации тем. Теперь многие элементы страницы управляются через редактор блоков и шаблоны, что повышает гибкость и возможности кастомизации без изменения кода. Однако это также создает некоторые сложности, поскольку традиционная структура файлов темы изменилась, и некоторые методы, использовавшиеся ранее, больше не применимы.
Пример
Рассмотрим ваш конкретный случай, где необходимо добавить внешнюю CSS-стилизацию. В прошлом, работа с header.php позволяла вставить следующие строки:
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="somedigits" crossorigin="anonymous">Теперь же, когда вы используете блоковые темы, header.php отсутствует в стандартной структуре тем. Тем не менее, WordPress предоставляет другие способы для добавления кода в HTML-заголовок, например через хуки.
Приложение
Наиболее подходящим способом для вставки нужного вам HTML-кода в <head> является использование хука wp_head. Вот пример того, как это можно реализовать в функции темы или через плагин:
function my_custom_stylesheet() {
echo '<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="somedigits" crossorigin="anonymous">';
}
add_action('wp_head', 'my_custom_stylesheet');Эта функция определяет, как вставить HTML-тег <link> непосредственно в секцию <head> на вашем сайте. Вы можете добавить код в файл functions.php вашей темы или в отдельный плагин, если хотите сохранить код отдельно от темы.
Значение и преимущества
Использование хука wp_head позволяет управлять содержимым секции <head> программно, без редакции исходного кода темы. Это сохраняет целостность и совместимость сайта, особенно при обновлениях тем, и обеспечивает единообразный способ добавления кода через WordPress API. Это особенно важно в современных условиях, когда гибкость и модульность являются ключевыми аспектами разработки и управления сайтами.
Кроме того, такой подход открывает путь к созданию более сложных и функциональных решений, например, интеграция с системами управления контентом, аналитическими системами, или даже манипулирования схемами метаданных для улучшения SEO показателей.
Заключение
Редактирование HTML заголовка в WordPress с использованием современных блоковых тем предоставляет новые возможности, но требует понимания и использования хук-системы WordPress. Хотя прямой доступ к файлам как в классических темах потерян, программы ваши решения остаются гибкими и надежными. Используйте wp_head и другие подходящие хуки для внедрения дополнительных компонентов в ваш сайт и получите все преимущества современного подхода WordPress к кастомизации тем.