_s(underscores)ナビゲーションにソーシャルメディアメニューを追加する

今回はWordPressのメニュー機能で管理できるソーシャルメディアメニューを作ってみたいと思います。

WordPress管理画面の【外観】から【メニュー】という項目内にてナビゲーションを始めとするメニューを管理することができます。必要に応じて項目を増やしたり減らしたり、必要な内容だけのメニューがカスタマイズして作ることができる機能です。

こちらの機能を利用して今回はTwiterやFacebookをはじめとしたソーシャルメディアボタンをメニュー機能の設置から実装までをご説明します。

functions.phpにメニューを追加する

まずはfunctions.phpにてソーシャルメディアメニューを新設します。

51行目あたりにこのような記載があります。

こちらに、

を既存コードの下にでも追加します。

管理画面での設定

WordPress管理画面から【外観】>【メニュー】の【位置の管理】を選択します。するとこのような画面が表示されます。

social-media-menu-01

先ほどfunctions.phpに記述した内容が反映されていることが確認できます(テーマ位置:Social Menu)。こちらの右「新しいメニューを使う」をクリックし、ソーシャルメニューを作成していきます。

social-media-menu-02
「メニューの名前」にSocial Menuとし、左側【固定ページ】【リンク】【カテゴリー】とある中から【リンク】を選びます。

social-media-menu-03
URLにリンク先URLを、リンクテキストにはサービスの名前(メニューに表示される文言)を入力します。

social-media-menu-04
必要な項目を入力し終えたら、【テーマの位置】が【Social Menu】になっていることを確認して【メニューを保存】します。

template-tags.phpを編集

incフォルダ内にあるtemplate-tags.phpの最下部にファンクションを追加します。

パラメータのそれぞれの役割はこちらを参照してみてください。
テンプレートタグ/wp nav menu – WordPress Codex 日本語版

このように設定しておくことで、socialというメニューを設定通りに書き出してくれます。

では次に実装していきます。こちらのファンクション名をコピーしておきましょう。(上の例で言うとmy_simone_social_menu()

header.phpを編集

では、実装していこうと思います。

header.php内にナビゲーションメニューを読み込んでいる箇所を探します。すると、47行目あたりにこのような記述があるかと思います。

この部分がprimaryという名前のメニューを読み込んでいる場所になります。この下に先ほど作成したソーシャルメディアボタンのメニューを追加します。

これで実装は完了です。

動作確認

ブラウザで表示を確認してみましょう。このようになるかと思います。

social-media-menu-05

このようにメニューの右側に続くような形で【Twitter】【Facebook】のソーシャルメディアリンクが作成されているのが確認できます。

まとめ

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