テーマを一から作成する 第9回目
前回は固定ページを作成しました。今回は、カスタムメニューを作成します。
第8回目
固定ページを作成する[page.php][カスタムテンプレート]
スポンサーリンク
WordPressにはカスタムメニューという機能があり、ナビゲーションメニューを効率よく作成することができます。
カスタムメニュー機能を利用するには、まずfunctions.phpにadd_theme_support(‘menus’);を追記します。カスタムメニュー機能を利用するには他にも、register_nav_menuやregister_nav_menus関数もありますが、今回はadd_theme_support(‘menus’)を利用します。
functions.php
1 2 3 4 5 6 7 8 9 10 |
<?php function sample_scripts(){ wp_enqueue_style('style', get_stylesheet_uri() ); } add_action('wp_enqueue_scripts', 'sample_scripts'); //カスタムメニュー add_theme_support('menus'); |
10行目にてadd_theme_support(‘menus’);を追記している。
すると管理画面にメニューという項目が表示されます。
メニュー画面ではメニュー項目の順番を変更したり、メニューのラベルを変更することができます。下記の画面では、メニュー名に「Menu 1」が設定されています。
メニュー初期画面
メニューを保存したら、実際にこの「Menu 1」カスタムメニューをヘッダー部分(header.php)に表示させます。
header.phpに下記のコード記述して下さい。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title><?php bloginfo('name'); ?></title> <meta name="description" content="<?php bloginfo('description'); ?>" /> <?php wp_head(); ?> </head> <body> <header> <h1><a href="<?php echo home_url(); ?>"><?php bloginfo('name'); ?></a></h1> <?php $args = array( 'menu' => 'Menu 1', 'container' => 'nav', ); wp_nav_menu( $args ); ?> </header> |
14〜20行目
カスタムメニューを画面で表示させるには、wp_nav_menuタグを利用します。
menuパラメータにおいてメニュー名「Menu 1」を指定しています。containerパラメータに「nav」を指定すると、メニュー部分がnavタグで囲まれるようになります。初期値はdivです。パラメータについては参照ページをご覧下さい。今回は行いませんが、後はCSSで見た目を整えるだけです。
カスタムメニューを追加する
実験的にカスタムメニューをもう一つ追加してみます。メニュー画面にて新規メニューを作成して下さい。
メニュー名にtestと指定し、メニュー項目は「お問い合わせ」と「自己紹介」の二つにしてみました。
作成したメニューの編集画面へは以下のように選択できます。
作成した「test」という名前のカスタムメニューをフッター部分(footer.php)に表示させてみます。
footer.phpに下記のコード記述して下さい。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<footer> <?php $args = array( 'menu' => 'test', 'container' => 'nav', ); wp_nav_menu( $args ); ?> </footer> <?php wp_footer(); ?> </body> </html> |
5行目のmenuパラメータにて、作成したカスタムメニューの「test」名を指定しています。これでフッター部分に「test」という名前のカスタムメニューが表示されるようになります。
ヘッダー部分(header.php)には「Menu 1」
フッター部分(footer.php)には「test」
今回作成したテーマファイルは以下のリンクからダウンロードできます。
次回はウィジェットを作成します。
第10回目
ウィジェットを作成する[register_sidebar][dynamic_sidebar]
参照ページ
WordPress
Codex日本語版