Функция пользовательской навигационной цепочки в WordPress с пользовательским текстом ссылок и URL-адресами

Содержание

Вопрос или проблема
Ответ или решение
Шаги для создания кастомной функции хлебных крошек
Оптимизация и простота

Вопрос или проблема

Как можно создать пользовательскую функцию навигационной цепочки, с помощью которой я могу использовать/вводить пользовательский текст ссылки и URL?

Структура на фронтенде:

Главная > Пользовательская ссылка 1 > Пользовательская ссылка 2 > Пользовательская ссылка 3 > Пользовательский текст

В бэкэнде, при написании/публикации поста или страницы, будет одно короткое текстовое поле для текста ссылки и одно короткое текстовое поле (или селектор) для URL, соответственно, таким образом:

[Текст ссылки 1] [URL ссылки 1]

[Текст ссылки 2] [URL ссылки 2]

[Текст ссылки 3] [URL ссылки 3]

[Текст ссылки 4] [URL ссылки 4]

[Текст ссылки 5]

Максимум 5 пар Текст ссылки и URL, при этом последняя пара может быть оставлена без поля/селектора URL.

В моем случае, для каждого публикуемого поста или страницы, я буду вводить весь текст ссылок сам. Что касается URL, я либо введу их сам, либо, в идеале, выберу ссылку из существующего Поста или Страницы.

Каждая пара Текст ссылки и URL следует за разделителем. И когда URL ссылки не введен/не выбран, разделитель опускается.

Как это можно сделать, используя редактор блоков WordPress и тему-блок, такую как Twenty Twenty-Four?

Какой бы плагин WP я ни пробовал, они зависят от структуры категорий/тегов/таксономии или иерархии сайта. У меня не было возможности использовать пользовательский текст и URL структуры ссылок.

Ответ или решение

Создание кастомной функции хлебных крошек в WordPress с возможностью указания собственных текстов ссылок и URL-адресов может значительно улучшить пользовательский опыт, обеспечивая точное навигационное взаимодействие. Такой подход особенно актуален для тех, кто использует редактор блоков WordPress и темы типа «Двадцать двадцать четыре».

Шаги для создания кастомной функции хлебных крошек

1. Добавление пользовательских полей в редакторе блоков

Для начала необходимо предусмотреть возможность ввода пользовательских текстов и URL через интерфейс WordPress:

Custom Fields API: Используйте эту функцию для добавления полей, которые пользователь сможет заполнить при создании или редактировании поста или страницы. Например, можно добавить текстовое поле для текста ссылки и URL-адреса.
ACF (Advanced Custom Fields): Если вы не хотите заниматься программированием, используйте плагин ACF, который предоставляет удобный интерфейс для создания и управления пользовательскими полями.

2. Создание и вывод хлебных крошек

PHP-функция: Напишите функцию в файле functions.php вашей темы, которая будет собирать данные из пользовательских полей и компилировать хлебные крошки.

function custom_breadcrumbs() {
  $breadcrumbs = array();
  for ($i = 1; $i <= 5; $i++) {
      $link_text = get_post_meta(get_the_ID(), 'nav_' . $i . '_link_text', true);
      $link_url = get_post_meta(get_the_ID(), 'nav_' . $i . '_link_url', true);

      if ($link_text) {
          if ($link_url) {
              $breadcrumbs[] = '<a href="' . esc_url($link_url) . '">' . esc_html($link_text) . '</a>';
          } else {
              $breadcrumbs[] = esc_html($link_text);
          }
      }
  }
  echo implode(' &gt; ', $breadcrumbs);
}

3. Интеграция с блоковой темой

Для вывода хлебных крошек в блоковой теме, добавьте вызов функции в подходящее место вашей темы, например в шаблон header.php или single.php. Можно использовать хук do_action или напрямую вызвать функцию custom_breadcrumbs().

4. Использование пользовательских ссылок для выбора URL

Если вы хотите предоставить возможность выбора существующих страниц или постов для URL, плагин ACF с типом поля ‘Page Link’ может помочь. Это позволит выбрать существующий пост или страницу как URL, без необходимости ввода вручную.

Оптимизация и простота

Чтобы столь сложная система работала без сбоев и была удобна в использовании, следует принимать во внимание:

Удобство интерфейса: Пользовательские поля должны быть простыми в использовании и доступными при редактировании любого поста или страницы.
SEO-элементы: Добавленные хлебные крошки улучшат SEO за счет лучшей внутренней навигации и индексации.
Точность и актуальность: Следите за актуальностью введенных данных, поскольку они напрямую влияют на воспринимаемость и юзабилити вашего сайта.

Выполнив эти шаги, вы сможете создать кастомную систему хлебных крошек, которая соответствует вашим требованиям и улучшает навигацию на вашем сайте в WordPress.