Полное руководство по поиску меню Wordpress в Гэтсби

Этот пост в блоге изначально был размещен на dev.to https://dev.to/boussama/complete-guide-to-wordpress-menu-sourcing-in-gatsby-h76.

Используя подключаемый модуль Gatsby gatsby-source-wordpress, мы можем получить почти все с веб-сайта WordPress.
Есть только две вещи, которых нет по умолчанию, меню и пользовательские параметры.
Этот пост в блоге о меню.

1. Подготовка меню

Как я только что упомянул, меню WordPress по умолчанию недоступно в REST API WordPress, поэтому первый шаг — сделать его видимым.

Мы можем легко сделать это с помощью плагина wordpress WP REST API Menus, который вы не можете найти, когда хотите установить его прямо со своего веб-сайта.

Вам нужно скачать его и использовать WordPress Admin Plugin Upload, вот ссылка на учебник, если вы не знаете, как это сделать.
Теперь, когда вы установили плагин, ваши меню доступны на остальных API.

WP-REST-API V2 Menus — не лучший подключаемый модуль для установки.

2. Запрос:

После установки плагина, если вы запустите gatsby develop, будет доступен новый запрос GraphQL:

• allWordpressWpApiMenusMenus для доступа к меню
• allWordpressWpApiMenusMenusItems для получения пункта меню
• allWordpressWpApiMenusMenuLocations, чтобы получить доступное местоположение меню

3. Полезный запрос:

Есть много полезных запросов, но в нашем случае нам просто нужно получить меню и их элементы «содержимое», и это запрос для этого.

{
  allWordpressWpApiMenusMenusItems {
    edges{
      node {
        slug
        name
        items {
          title
          url
        }
      }
    }
  }
}

Если ваше меню содержит подменю, используйте атрибут wordpress_childer.

{
  allWordpressWpApiMenusMenusItems {
    edges{
      node {
        slug
        name
        items {
          title
          url
          wordpress_children {
            title
            url
          }
        }
      }
    }
  }
}

Если вы хотите получить определенное меню, используйте фильтры, подобные этому

{
  allWordpressWpApiMenusMenusItems(filter: {slug: {eq: "sidebar-menu"}}) {
    edges{
      node {
        slug
        name
        items {
          title
          url
          object_slug
          wordpress_children {
            title,
            url
          }
        }
      }
    }
  }
}

4. Получение меню

Полный код в компоненте Gatsby:
Теперь, когда у нас есть все, что нам нужно, это небольшой компонент для отображения меню Wordpress.

import React from "react"
import { StaticQuery, graphql } from "gatsby"
export default () => (
  <StaticQuery
    query={graphql`
      query {
        allWordpressWpApiMenusMenusItems(
          filter: { slug: { eq: "sidebar-menu" } }
        ) {
          edges {
            node {
              slug
              name
              items {
                title
                url
                object_slug
                wordpress_children {
                  title
                  url
                }
              }
            }
          }
        }
      }
    `}
    render={data => {
      return (
        <nav className="menu">
          <ul className="nav flex-column">
            {data &&
              data.allWordpressWpApiMenusMenusItems &&
              data.allWordpressWpApiMenusMenusItems.edges &&
              data.allWordpressWpApiMenusMenusItems.edges[0] &&
              data.allWordpressWpApiMenusMenusItems.edges[0].node &&
              data.allWordpressWpApiMenusMenusItems.edges[0].node.items &&
              data.allWordpressWpApiMenusMenusItems.edges[0].node.items.map(
                prop => {
                  return (
                    <li className="nav-item">
                      <a
                        className="nav-link active"
                        href={prop.url}
                        alt={prop.title}
                      >
                        {prop.title}
                      </a>
                      <div className="sub-menu">
                        {prop &&
                          prop.wordpress_children &&
                          prop.wordpress_children.map(child => {
                            console.log("child ", child)
                            return (
                              <a
                                className="dropdown-item"
                                href={child.url}
                                alt={child.title}
                              >
                                {child.title}
                              </a>
                            )
                          })}
                      </div>
                    </li>
                  )
                }
              )}
          </ul>
        </nav>
      )
    }}
  />
)

5. Правильный URL

Если ваше доменное имя Wordpress не совпадает с вашим веб-сайтом Gatsby, не забудьте заменить их.
В gatsby-config.js укажите это в объявлении плагина.

searchAndReplaceContentUrls: {
    sourceUrl: "http://localhost:8080",
    replacementUrl: "http://localhost:8000",
}

вот полный пример:

{
      resolve: "gatsby-source-wordpress",
      options: {
        baseUrl: "http://localhost:8080/",
        protocol: "http",
        hostingWPCOM: false,
        useACF: false,
        excludedRoutes: ["**/settings", "**/themes", "**/users/me"],
        verboseOutput: true,
        searchAndReplaceContentUrls: {
          sourceUrl: "http://localhost:8080",
          replacementUrl: "http://localhost:3000",
        },
      },
    }

6. Заключение

Это не всегда хороший подход, а иногда и излишний, но приятно знать все о меню Wordpress и их использовании в Gatsby. У вас может быть другое мнение или другой метод.
Пожалуйста, поделитесь со мной своей точкой зрения в комментариях.