Вопрос или проблема
Я конвертирую содержимое Classic Editor в блоки, и одно из наших навигационных меню использует собственный walker для очень специфического форматирования. Я не вижу способа использовать Nav Walker в блоке навигации, поэтому я поискал и нашел фильтр, который кажется подходящим: block_core_navigation_render_inner_blocks.
Фильтр принимает один параметр, $inner_blocks, но я обнаружил, что эта переменная является объектом, который содержит защищенное свойство blocks. Поскольку они защищены, я не могу на самом деле изменить что-либо в содержимом массива $inner_blocks->blocks, что означает, что я не могу изменить вывод.
Существует ли другой фильтр или метод, который я должен использовать? В конечном итоге мне нужно, чтобы внутри каждой метки пункта меню был <span>, а также текст, который находится вне <span>. Если есть более простой способ сделать это в редакторе, я весь внимание, но когда я пытаюсь добавить какой-либо HTML, он просто выводит %lt;span%gt; на экране вместо использования его как тега.
Ответ или решение
Для решения вашей задачи по кастомизации блока навигации в редакторе блоков WordPress, есть несколько путей, которые можно рассмотреть. Поскольку вы хотите использовать кастомный walker и добавить тег <span> внутри каждого элемента меню, вам может понадобиться немного другого подхода, чем использование фильтра block_core_navigation_render_inner_blocks.
Использование кастомного блока
-
Создание кастомного блока с помощью JavaScript:
Вместо использования стандартного блока навигации, вы можете создать свой собственный блок, который будет рендерить навигационное меню по вашему требованию. Это требует написания кода на JavaScript для регистрации блока и PHP кода для его рендеринга.Примерная структура вашего кастомного блока может выглядеть так:
const { registerBlockType } = wp.blocks; registerBlockType('my-plugin/custom-navigation', { title: 'Кастомное меню', category: 'common', edit: () => { return <p>Редактирование вашего кастомного меню</p>; }, save: () => { // Здесь вы можете рендерить ваше меню, включая теги <span> return ( <nav> <ul> <li><span>Элемент 1</span> Текст 1</li> <li><span>Элемент 2</span> Текст 2</li> </ul> </nav> ); }, }); -
Использование PHP для кастомизации:
Если вы хотите использовать стандартный блок навигации и кастомизировать его вывод с помощью PHP, попробуйте использовать фильтрwp_nav_menu_items. Это позволит вам изменить HTML-вывод элементов меню.Пример добавления тега
<span>к каждому элементу меню:add_filter('wp_nav_menu_items', 'my_custom_menu_item_output', 10, 2); function my_custom_menu_item_output($items, $args) { $items = preg_replace('/<a (.*?)>(.*?)<\/a>/', '<a $1><span>$2</span></a>', $items); return $items; }Этот код находит ссылки в меню и добавляет
<span>вокруг текста ссылки.
Редактирование через редактор
К сожалению, Gutenberg редактор не позволяет добавлять HTML-код напрямую в текстовые блоки, так как он автоматически экранирует HTML для безопасности. Однако вы можете использовать блоки "HTML" и "Кастомные формы" для достижения желаемого результата.
Заключение
Ваша проблема может быть решена несколькими способами, в зависимости от того, как вы хотите управлять выводом меню. Если вы предпочитаете полное управление, созданный вами кастомный блок может быть наиболее эффективным решением. В случае, если вам нужно внести изменения в стандартный блок, попробуйте использование фильтров, таких как wp_nav_menu_items.
Надеюсь, данная информация была полезной. Если у вас есть дополнительные вопросы или потребности, не стесняйтесь задавать их.