Wordpressのデータを外部から参照する方法として、一番メジャーなのはWordpress REST API（以下：WP REST API）でしょう。 プラグインをインストール後、特定のURLにアクセスすると記事一覧などをJSON形式で返してくれます。 パラメータもいろいろ対応してるので、フロント部をWordpress使わずに今流行のVueとかReactでスタイリッシュに決めたりするのに便利です。 こういうのをヘッドレス化と呼ぶらしいですよ。WPの体目当てなんすね～。  

メニュー一覧を吐き出すにはどうすりゃいいの？

  WP REST APIだけだとメニュー一覧が吐き出せない（知らんけど）ので、別途WP REST APIを拡張するプラグインを導入するか、自分でfunction.php弄る必要があります。 今回は前者のお話。 探してみるとこの2つがヒットしました。

• WP API Menus
• WP-REST-API V2 Menus

 

・・・でこの２つは何が違うの？

  両方共メニュー一覧を吐き出してくれます。 が、JSONの構造が違います。 こちらは WP API Menus の結果。 子メニューに注目してください。（id : 2471） WP API Menusでは子ページが親ページ（id : 2271）の[children]に格納されています。   一方こちらは WP-REST-API V2 Menus の結果。 階層がなくぺちゃんこです。 [menu_item_parent] に格納されている数字が、親の[id]に紐付いている形です。  

結果：階層構造の違い

  でした。 これが影響するのは例えばの話ですが、Vueとかでメニュー一覧のAPIを呼んで、v-for（ループ）でザザザっと一覧表示したいとき。 子メニューに別クラス適用してドロップダウン表示しようとすると、WP-REST-API V2 Menusのぺちゃんこな階層ではどのアイテムが子メニューなのか条件分岐しづらいですね。 更にそれぞれの親に紐づく形でタグを配置しないといけない。 こういうときWP API Menusのようにきちんと階層で別れてると、

1. v-forとv-if="children.length === 0" の併用で、「子を持たない親」を並べる。
2. 途中でv-else、すなわち「子を持つ親」が回ってきたら、別タグで並べられる。
3. その別タグの中で更にv-for（今度はchildren内に範囲限定）回して子を並べる。

という風に構造的にきれいな条件分岐ができます。 （文章で書いたら何言ってるかわからへんわ。）   とはいえWP API Menusは更新もだいぶ前なので、ちゃんとしたプロジェクトならやっぱり自前で用意するのが良さそうすね。