今回はWordPressのメニュー機能で管理できるソーシャルメディアメニューを作ってみたいと思います。
WordPress管理画面の【外観】から【メニュー】という項目内にてナビゲーションを始めとするメニューを管理することができます。必要に応じて項目を増やしたり減らしたり、必要な内容だけのメニューがカスタマイズして作ることができる機能です。
こちらの機能を利用して今回はTwiterやFacebookをはじめとしたソーシャルメディアボタンをメニュー機能の設置から実装までをご説明します。
functions.phpにメニューを追加する
まずはfunctions.phpにてソーシャルメディアメニューを新設します。
51行目あたりにこのような記載があります。
// This theme uses wp_nav_menu() in one location. register_nav_menus( array( 'primary' => __( 'Primary Menu', 'olein' ), ) );
こちらに、
'social' => __( 'Social Menu', 'olein' ),
を既存コードの下にでも追加します。
管理画面での設定
WordPress管理画面から【外観】>【メニュー】の【位置の管理】を選択します。するとこのような画面が表示されます。
先ほどfunctions.phpに記述した内容が反映されていることが確認できます（テーマ位置：Social Menu）。こちらの右「新しいメニューを使う」をクリックし、ソーシャルメニューを作成していきます。
「メニューの名前」にSocial Menuとし、左側【固定ページ】【リンク】【カテゴリー】とある中から【リンク】を選びます。
URLにリンク先URLを、リンクテキストにはサービスの名前（メニューに表示される文言）を入力します。
必要な項目を入力し終えたら、【テーマの位置】が【Social Menu】になっていることを確認して【メニューを保存】します。
template-tags.phpを編集
incフォルダ内にあるtemplate-tags.phpの最下部にファンクションを追加します。
function my_simone_social_menu() {
if ( has_nav_menu( 'social' ) ) {
wp_nav_menu(
array(
'theme_location' => 'social',
'container' => 'div',
'container_id' => 'menu-social',
'container_class' => 'menu-social',
'menu_id' => 'menu-social-items',
'menu_class' => 'menu-items',
'depth' => 1,
'fallback_cb' => '',
)
);
}
}
パラメータのそれぞれの役割はこちらを参照してみてください。
テンプレートタグ/wp nav menu – WordPress Codex 日本語版
このように設定しておくことで、socialというメニューを設定通りに書き出してくれます。
では次に実装していきます。こちらのファンクション名をコピーしておきましょう。（上の例で言うとmy_simone_social_menu()）
header.phpを編集
では、実装していこうと思います。
header.php内にナビゲーションメニューを読み込んでいる箇所を探します。すると、47行目あたりにこのような記述があるかと思います。
<?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
この部分がprimaryという名前のメニューを読み込んでいる場所になります。この下に先ほど作成したソーシャルメディアボタンのメニューを追加します。
<?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?> <?php my_simone_social_menu(); ?>
これで実装は完了です。
動作確認
ブラウザで表示を確認してみましょう。このようになるかと思います。
このようにメニューの右側に続くような形で【Twitter】【Facebook】のソーシャルメディアリンクが作成されているのが確認できます。
まとめ
この方法を活用すると、ソーシャルメディアボタンも自在に追加・修正できるようになりますし、メニュー機能自体を自在に扱えるようになりますね。参考になれば幸いです。
