ワードプレスメインカスタムナビゲーションメニューショートコード作成

ワードプレスルックス>メニューで設定できるサイトメニュー、正式名称「ワードプレスナビゲーションメニュー（WordPress navigation menu）」をショートコード化して、ページやその他の必要な場所どこ投げ挿入することができようにすることができる。

通常は、このナビゲーションメニューをショートコードして入れる必要もなく、理由も分からないのに、ポリラング(Polylang)などの多言語サイトのプラグインを使用しているとか、基本的な設定されているモバイルナビゲーションメニューが気に入らなくて、最初から作成したいとかしたときに活用することができる。

ナビゲーションメニューをショートコードするカスタムメニューを作成し、作成したメニューをショートコードに登録する2つの段階を経なければならない。すべてのコードは、ワードプレスfunctions.php中入力すればよい。

ワードプレスカスタムナビゲーションメニューの作成

まず、任意のカスタムメニューをfunctionsに登録させて、外観>メニューで変更できる状態を作らなければならない。以下のコードを入力すればよい。

register_nav_menus( array(
  'custom_menu' => 'Custom Menu',
) );

functionsが適用なることしばらく外観>メニューからCustom Menuが有効にされたことを確認することができる。'custom_menu' => 'Custom Menu'部分だけ変えて貼り付けると、継続して新しいメニューを作成することができる。

メニューショートコードで作成

今作成したメニューをショートコード化して登録すればよい。事実ショートコード化する方法はとてもやすいのに、基本形にコードを入力すると、特定のスキンですべてのスタイルを無視して最上段に位置する現象が現れる。ので下記のような方法で入力すると、エラーなしでカスタムメニューをショートコード化させることができる。

function get_menu($args){
    $menu = isset($atts['menu']) ? $atts['menu'] : '';
    ob_start();
    wp_nav_menu(array(
        'theme_location' => 'custom_menu',
    ) );
    return ob_get_clean();
}
add_shortcode('Custom_nav_menu', 'get_menu');

上記のコードでは少なかった青custom_menuの部分が同じで、赤Custom_nav_menu部分がショートコード名である。つまりこのようにコードを入力して、[Custom_nav_menu]と入力すると、設定したカスタムメニューがショートコードで呼ばれる。

コードの中にwp_nav_menu(array(中身を追加すると、ナビゲーションメニューの設定を変更したり、追加することができる。

    wp_nav_menu(array(
        'theme_location' => 'custom_menu',
        'fallback_cb'      => false,
    ) );

このように、赤の部分のように追加すればよい。fallback_cbコードに明示されているメニューがない場合は、どのようにするかを定めるコードであるが、デフォルトでは、ページのリストを示し、falseと入力すると、空き領域が表示されるようになる。

使用可能な属性

ここに使用できるコードは以下の通りである。すべて使ってみたのはなく、公式ヘルプを参照していたので、いくつかのコードの説明とは異なる場合があります。

許可するメニューのID、スラグ（Slug）、名前などを入力する

メニューを構成するClass人を付与する。文字通りここ少ないようメニューのClass名生成される。

メニューを構成するID人を付与する。

Ulを包むか否かを定める。デフォルトでは、div

メニューを包んでいる容器containerのclass名を指定します。

containerのID名を指定します。

上記コード。コード内に明示するメニューがない時ロード値を定める。デフォルト値は、ページのリストであり、falseを入力すると、何も表示されない。

CSSで自由に文章や画像、アイコンを入れてみよう::before, ::after編で説明した::before属性のように、リンクのマークアップの前に出てくるテキストを定めることができる。

上記のbeforeと同じだが、以前ではなく、後に出てくるテキストを定める。

上記のようでリンクテキストの前のテキストを定める。

上記のようでリンクテキストの後のテキストを定める。

メニューを表示したり、戻したりする定とする。デフォルトでは、true

ロードメニューの階層構造を決定する。ここ2と入力すると、メニュー内のメニューを2段階まで表現する。デフォルト値は0であり、0はすべての階層を表現するという意味である。

ユーザー定義ウォーカークラスのインスタンスを定義する。

使用するテーマの位置を定義するが、ここで使用カスタムメニューの名前を入れて入れるとされる。

リストの項目をラップすること。デフォルトでは、idとulで構成されているが、printf()方式に変更されるとする。

メニューのHTML内の空白を保持するか否かを定義する。デフォルトでは、保存するpreserveであり、discardと入力すると、保存していない。

使用可能なすべての属性は、上記のようで、内容はワードプレスwp_nav_menu公式ヘルプでも確認することができる。