今回は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】のソーシャルメディアリンクが作成されているのが確認できます。

まとめ

この方法を活用すると、ソーシャルメディアボタンも自在に追加・修正できるようになりますし、メニュー機能自体を自在に扱えるようになりますね。参考になれば幸いです。