web-dev-qa-db-fra.com

Étendre WordPress REST API pour afficher des slugs pour les éléments de menu

J'utilise React pour créer le front-end d'un site utilisant Wordpress pour le back-end. En particulier, j'utilise l'API Wordpress REST pour extraire et afficher du contenu.

Par défaut, l'API Wordpress REST _ n'expose pas les informations de menu. Je l'ai donc étendue pour l'inclure:

function get_menu( $data ) {
  return wp_get_nav_menu_items( $data[ 'slug' ] );
}

add_action( 'rest_api_init', function () {

  register_rest_route( 'custom', '/menus/(?P<slug>[a-zA-Z0-9-]+)', 
    array(
      'methods'  => 'GET',
      'callback' => 'get_menu'
    )
  );

});

Maintenant, je peux accéder aux informations de mon menu avec une requête comme celle-ci:

http://localhost:8888/learn-react/admin/wp-json/custom/menus/main-menu

La réponse que je reçois pour chacun des éléments inclus dans le menu ressemble à ceci:

ID: 13
attr_title: ""
classes: [""]
comment_count: "0"
comment_status: "closed"
db_id: 13
description: ""
filter: "raw"
guid: "http://localhost:8888/learn-react/admin/?p=13"
menu_item_parent: "0"
menu_order: 3
object: "page"
object_id: "8"
ping_status: "closed"
pinged: ""
post_author: "1"
post_content: " "
post_content_filtered: ""
post_date: "2018-02-10 08:57:52"
post_date_gmt: "2018-02-10 08:57:52"
post_excerpt: ""
post_mime_type: ""
post_modified: "2018-02-10 08:57:52"
post_modified_gmt: "2018-02-10 08:57:52"
post_name: "13"
post_parent: 0
post_password: ""
post_status: "publish"
post_title: ""
post_type: "nav_menu_item"
target: ""
title: "About"
to_ping: ""
type: "post_type"
type_label: "Page"
url: "http://localhost:8888/learn-react/admin/about/"
xfn: ""

Mon problème est que j'essaie d'utiliser ces données pour mettre un lien sur chaque élément de menu, mais comme j'utilise React Router, je n'ai pas besoin de l'URL complète (qui est fournie dans les données ci-dessus), mais uniquement du dernier limace. Voici mon composant de menu:

class MainMenu extends React.Component {

  componentDidMount() {
    this.props.fetchMainMenu();
  }

  render() {

    let menuItemsArray = store.getState().menuReducer.mainMenuItems;     
    let menuItems = menuItemsArray.map( ( menuItem, index ) => {    

      return( 
        <li key={ index }>
          <Link to={ menuItem.url }>{ menuItem.title }</Link>
        </li>
      )
    })
    return (
      <ul>{ menuItems }</ul>
    )
  }
}

Utiliser menuItem.url génère naturellement le href suivant:

http://localhost:3000/http://localhost:8888/learn-react/admin/about/

comme je l’ai dit, il me faudrait quelque chose comme menuItem.slug pour générer:

http://localhost:3000/learn-react/admin/about/

Quelles sont mes options?

menusrest-api
1
grazianodev

J'ai eu le même défi, et corrigé en l'ajoutant à la réponse. Exemple:

function get_menu() {
    # Change 'menu' to your own navigation slug.
    $menu_items = wp_get_nav_menu_items('menu');
    foreach($menu_items as $menu_item) {
        // ALTERNATIVE: $slug = get_post_field( 'post_name', $menu_item->object_id );
        $slug = basename( get_permalink($menu_item->object_id) );
        $menu_item->slug = $slug;
    }
    return $menu_items;
}

add_action( 'rest_api_init', function () {
        register_rest_route( 'myroutes', '/menu', array(
        'methods' => 'GET',
        'callback' => 'get_menu',
    ) );
} );
2
Hyra