---
title: "_s(underscores)ナビゲーションにソーシャルメディアメニューを追加する"
canonical_url: "https://olein-design.com/blog/social-media-menu-on-navigation"
language: "ja"
date_published: "2014-12-22T09:30:32+09:00"
date_modified: "2014-12-22T09:30:32+09:00"
content_type: "post"
author: "久野晃司"
taxonomies:
  category:
    - "WordPress"
  post_tag:
    - "underscores"
---

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

今回は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管理画面から【外観】>【メニュー】の【位置の管理】を選択します。するとこのような画面が表示されます。 ![social-media-menu-01](https://olein-design.com/wp-content/uploads/2014/12/social-media-menu-01.png) 先ほど`functions.php`に記述した内容が反映されていることが確認できます（テーマ位置：Social Menu）。こちらの右「新しいメニューを使う」をクリックし、ソーシャルメニューを作成していきます。 ![social-media-menu-02](https://olein-design.com/wp-content/uploads/2014/12/social-media-menu-02-1024x466.png) 「メニューの名前」に**Social Menu**とし、左側【固定ページ】【リンク】【カテゴリー】とある中から**【リンク】**を選びます。 ![social-media-menu-03](https://olein-design.com/wp-content/uploads/2014/12/social-media-menu-03-1024x527.png) URLにリンク先URLを、リンクテキストにはサービスの名前（メニューに表示される文言）を入力します。 ![social-media-menu-04](https://olein-design.com/wp-content/uploads/2014/12/social-media-menu-04-1024x637.png) 必要な項目を入力し終えたら、【テーマの位置】が【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 日本語版](http://wpdocs.sourceforge.jp/%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E3%82%BF%E3%82%B0/wp_nav_menu)[!\[\](http://b.hatena.ne.jp/entry/image/http://wpdocs.sourceforge.jp/%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E3%82%BF%E3%82%B0/wp_nav_menu)](http://b.hatena.ne.jp/entry/http://wpdocs.sourceforge.jp/%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E3%82%BF%E3%82%B0/wp_nav_menu)

 このように設定しておくことで、`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(); ?>
```

 これで実装は完了です。 ## 動作確認

 ブラウザで表示を確認してみましょう。このようになるかと思います。 ![social-media-menu-05](https://olein-design.com/wp-content/uploads/2014/12/social-media-menu-05-1-1024x510.png) このようにメニューの右側に続くような形で【Twitter】【Facebook】のソーシャルメディアリンクが作成されているのが確認できます。 ## まとめ

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