ヘッダー、フッターにナビゲーションメニューを追加する手順の例を示します。
1)functions.phpにregister_my_menus()関数を追加
設定例)
function register_my_menus() { register_nav_menus( array( 'header-menu' => 'Header Menu', 'footer-menu' => 'Footer Menu' ) ); } add_action( 'init', 'register_my_menus' );
2)管理画面にメニューが追加できるようになっているか確認
「外観」→「メニュー」でメニュー画面を開く
左上の”メニューの場所”の部分に’Header Menu’と’Footer Menu’が表示され、メニューを設定できるようになります。
3)header.phpにナビゲーションメニューを追加
以下、ヘッダーにメニューを追加する例を示します。
設定例)
header.phpファイル内の適切な場所に下記コードを追加します。
<nav class=”main-navigation”>
<?php wp_nav_menu( array( ‘theme_location’ => ‘header-menu’ ) ); ?>
</nav>
4)ナビゲーションメニューのスタイル設定追加
スタイルシートの設定方法はあまり詳しくないので、下記サイトの設定を流用しました。
CSSでドロップダウンメニュー
①上記サイトの一番下のコードをコピーし、”#menu-sample”を”.main-navigation”に置換します。
②スタイルシート (style.css)に上記コードをコピー。
③上記参考サイトにならって、header.phpにIE7対応のコードをコピー。
5)管理画面でメニューを作成
以下、ヘッダーにメニューを追加する例を示します。
「外観」→「メニュー」でメニュー画面を開く
①画面中央のメニュー編集画面で”+”ボタン(メニューを追加ボタン)を押下します。
②”メニューの名前”に入力
③固定ページやカテゴリーなどをメニューに追加
④各メニュー項目をドラッグアンドドロップして、メニューの表示順番や階層(メニュー項目を右にずらして配置するとサブメニューになります)を設定します。
⑤”メニューを保存”をクリック。
⑥左上の”テーマの場所”で上記で作成したメニューを指定します。
ここでは、”Header-Menu”欄に②で指定したメニュー名を指定し、保存します。
上記方法でヘッダーにナビゲーションメニューを表示できるようになりました。
- テーマ作成に関わるメモ
- WordPressコアの各ファイルの概要
- WordPressで使われるテーブル一覧
- WordPressのwpdbクラスを使ってテーブル操作
- WordPressの子テーマの概要、作り方
- ヘッダー、フッターにナビゲーションメニューを追加
- カテゴリーやアーカイブページなどに前後のページへのリンクを追加
- ブートストラップ3を使って自作テーマ作成
- (1)全体概要
- (2)ブートストラップのサンプルを使ってindex.phpを作成
- (3)header.php、sidebar.php、footer.php、index.phpのテンプレートファイル作成
- (4)JavaScriptインクルードの設定
- (5)投稿本文表示用のテンプレートファイルを作成
- (6)単一投稿用(single.php)のテンプレートファイル作成
- (7)固定ページ用(page.php)のテンプレートファイル作成
- (8)検索結果表示用(search.php)のテンプレートファイル作成
- (9)アーカイブ表示用(archive.php)のテンプレートファイル作成
- (10)カテゴリー表示用(category.php)のテンプレートファイル作成
- (11)WordPressのメニュー画面でナビゲーションメニューを設定
- (12)サイトタイトル、キャッチフレーズを表示できるようにheader.phpを修正
- (13)カスタムヘッダー画像を使えるようにheader.phpを修正
- (14)404.phpテンプレートファイルを作成
- (15)記事タイトル部分のCSS設定
- (16)記事メタデータ部分のCSS設定
- (17)記事本文部分のCSS設定
- (18)前後のページへのリンクのCSS設定
- (19)前後の投稿へのリンクのCSS設定
- (20)コメント投稿フォーム、コメント表示部のCSS設定
- (21)ウィジェット部のCSS設定
- (22)アーカイブページのCSS設定
- (23)画面を左右にスライドさせるボタンのCSS設定
- Bootstrapのフリーのテーマを使ってデザインを簡単にカスタマイズ
- ブートストラップ3を使って作成したナビゲーションメニューをAngularJSを使う形に変更する方法
- 投稿にメタボックスを追加する方法