Вопрос или проблема
Как я могу добавить скрипт и код PHP в секцию <head> шаблона темы определенной категории, которая использует встроенный редактор блоков в WP?
Вот пример:
<script type="text/javascript">
let map;
function initMap() {
map = new google.maps.Map(document.getElementById("gmap"), {
<?php
$lat= get_post_meta($post->ID, 'gmap-latitude', true);
$lon= get_post_meta($post->ID, 'gmap-longitude', true);
echo 'center: {lat: '.$lat.', lng: '.$lon.'},';?>
zoom: 14,
});
}
window.initMap = initMap;
</script>
Некоторая справочная информация:
Я пытаюсь перейти на новую тему WP twenty twenty-three, используя его встроенный редактор блоков, заменив старые шаблонные файлы (например, single-map.php).
Одна из категорий моего сайта (“Карта”) содержит более 3000 страниц, на всех которых находится приведенный выше код в секции <head> (и другой скрипт в <body>). Затем на экране редактирования каждой страницы я вводил значения широты и долготы, используя пользовательские поля.
Кроме решения для моей первоначальной проблемы, если существует лучший способ сделать это, я с удовольствием узнаю!
Как я могу добавить скрипт и код PHP в секцию шаблона темы определенной категории, которая использует встроенный редактор блоков в WP?
Тем же способом, как вы всегда и должны были делать это в классических темах, ничего не изменилось!
Используйте действие wp_head в сочетании с действием is_category.
Обратите внимание, что хотя классические темы позволяли вам напрямую изменять тег head через header.php, блочные темы этого не позволяют, но делать это никогда не было лучшей практикой с самого начала.
Другие заметки:
- ручное создание JSON таким образом опасно! Гораздо проще сделать
<?php echo wp_json_encode( [ 'center' => [ 'lat' => ...], 'zoom' => 14 ) ); ?>, теперь содержимое этих метаданных поста не может сломать ваш JS и вызвать синтаксические ошибки - этот JS должен быть в javascript-файле, а не встроенным, я вижу, что он был включен в заголовок, чтобы вы могли вывести значения метаданных поста, но это должно было быть сделано в атрибутах
data, считываемых изdocument.getElementById("gmap"), например<div data-lat="123" data-long="456"> - Простой блок с именем
Ferienflieger/map-block, который выводил широту и долготу наdivс использованием рендеринга на стороне сервера, мог быть полностью сделан с помощью PHP и файлаblock.json. Это упростило бы вставку блоков, оптимизировало бы ваш сайт, позволяя WP добавлять JS только при использовании блока, позволяло бы использовать несколько карт, если вы захотите, устранило бы необходимость что-либо вставлять в заголовок и избегало бы ошибок в редакторе сайта. Вы даже могли бы дать ему красивую иконку карты, которая появится в контуре
Ответ или решение
Чтобы добавить скрипты и PHP код в раздел <head> шаблона темы, используемой в категории, которая задействует встроенный блочный редактор WordPress, вы можете использовать хук wp_head и условную проверку с помощью функции is_category(). Это даст вам возможность интегрировать необходимый код только на страницах определенной категории. Вот пошаговое руководство, как это реализовать:
Шаг 1: Изменение файла функций темы
Откройте файл functions.php вашей темы. Это основной файл для добавления пользовательского кода и функциональности. Внутри этого файла вам необходимо зарегистрировать функцию, которая будет добавлять скрипт в секцию <head>:
function add_custom_script_to_head() {
if (is_category('map')) { // Убедитесь, что правильная категория
$lat = get_post_meta(get_the_ID(), 'gmap-latitude', true);
$lon = get_post_meta(get_the_ID(), 'gmap-longitude', true);
echo '<script type="text/javascript">';
echo 'let map;';
echo 'function initMap() {';
echo 'map = new google.maps.Map(document.getElementById("gmap"), {';
echo 'center: {lat: ' . esc_js($lat) . ', lng: ' . esc_js($lon) . '},';
echo 'zoom: 14,';
echo '});';
echo '}';
echo 'window.initMap = initMap;';
echo '</script>';
}
}
add_action('wp_head', 'add_custom_script_to_head');Шаг 2: Оптимизация и улучшение безопасности
В вашем первоначальном примере кода есть несколько уязвимостей, связанных с формированием JavaScript-объектов.
-
Безопасность данных: Используйте
esc_js()для экранирования значений широты и долготы, чтобы предотвратить возможные синтаксические ошибки и атаки на сайт. Это важно для предотвращения XSS-уязвимостей. -
JSON-кодирование: Вместо непосредственной генерации JavaScript-объекта, рассмотрите использование функции
wp_json_encode()для более безопасного кодирования данных. Например:
$data = array(
'center' => array(
'lat' => $lat,
'lng' => $lon
),
'zoom' => 14
);
echo 'center: ' . wp_json_encode($data) . ',';Шаг 3: Использование внешних файлов JavaScript
Рекомендуется вынести JavaScript в отдельный файл и подключать его в wp_enqueue_scripts. Это улучшит загрузку страницы и позволит больше модульности кода:
function enqueue_custom_scripts() {
if (is_category('map')) {
// Подключите внешний файл
wp_enqueue_script('custom-map-script', get_template_directory_uri() . '/path/to/your-script.js', array('google-maps-api'), null, true);
}
}
add_action('wp_enqueue_scripts', 'enqueue_custom_scripts');Шаг 4: Создание кастомного блока
Рассмотрите возможность создания специализированного блочного типа для отображения карты. Это может существенно упростить вашу работу с блоками в редакторе и обеспечить более задокументированное и чистое решение. Это включает в себя использование block.json для регистрации вашего блока и PHP для отображения.
Заключение
Используя описанные выше методы, вы сможете эффективно интегрировать JavaScript и PHP код в <head> секцию вашего шаблона, при этом соблюдая современные стандарты разработки. Кроме того, использование кастомных блоков значительно упростит процесс добавления карт и улучшит производительность вашего сайта.