wordpress テーマの作成「メニューバーの表示」

wordpressではページが増えてからでも比較的自由にメニューを入れ替える事のできる「カスタムメニュー」と呼ばれる便利な機能があります。ここではそれを作って自分で作るテーマで使えるようにしていきます。

カスタムメニュー機能の追加

これから自分で作るテーマに色々な機能を追加していくのはすべて、「テーマのための関数(functions.php)」に追加していきます。
まずは管理画面のメニューから「外観」>「テーマの編集」で右端の「テーマのための関数(functions.php)」を選択します。
ここまででは、まだ何も書かれていません。ここに「カスタムメニュー」機能を使えるためのコードを書いてみます。
[php]
<?php
// カスタムメニュー機能を有効にする
add_theme_support( 'menus' );
// カスタムメニューの「場所」を設定する
register_nav_menu( 'navigation', 'ヘッダーのメニュー' );
?>
[/php]

カスタムメニューfunctionsコードを書いて、「ファイルを更新」をクリックすると管理画面のメニューの「外観」のところに新しく「メニュー」が作成されました。これでカスタムメニューが使えるようになりました。さっそくメニューを作ってみます。



メニューの設定

管理画面のメニュー「外観」>「メニュー」をクリックします。
カスタムメニューの作成このような画面が表示されました。「固定ページ」と書かれた下にある「最近」「すべて表示」「検索」タブの真ん中のタブ「すべて表示」をクリックします。「ホーム」と「サンプルページ」にチェックを入れて「メニューに追加」をクリック。右端の「メニューを保存」をクリックすると上部に「メニューを更新しました。」と表示されました。これでメニューができました。しかしこのままではまだ、サイトに何も表示されません。次にメニューを表示させるためのコードを書いて行きます。
メニューバーはすべてのページで共通に表示させるため、「home.php」ではなく「header.php」に記載します。

メニューを画面に表示させる

管理画面から「外観」>「テーマの編集」で「ヘッダー(header.php)」を開きます。
一番最後の</div>の1行前に以下のコードをコピーして貼り付け。
[php]
<!-- ヘッダーメニュー -->
<div id="nav">
<?php wp_nav_menu(array(
'theme_location' => 'navigation'
)); ?>
</div>
[/php]
するとヘッダーの最後の部分が
[php]
<!-- ヘッダー -->
<div id="header">
<h1><a href="<?php echo home_url(); ?>"><?php bloginfo('name'); ?></a></h1>
<p id="desc"><?php bloginfo('description'); ?></p>

<!-- ヘッダーメニュー -->
<div id="nav">
<?php wp_nav_menu(array(
'theme_location' => 'navigation')); ?>
</div>
</div>
[/php]
このようになると思います。

「ファイルを更新」してサイトを表示させます。
メニュー表示画面にメニューが表示されました。
後はスタイルシートで見た目を整えます。

ヘッダーメニューのスタイル指定

ワードプレスの管理画面・メニュー項目の中から「外観」>「テーマの編集」を開きます。「スタイルシート(style.css)が選択されている事を確認して ”/* フッター */” と書かれた上に以下のコードをコピーして貼り付けます。
[css]
/* ナビゲーションバー */
div#nav {font-size: 0.75em;
height: 30px;
background-color: #baf1f9;
border: solid 1px #aaaaaa;
margin-bottom: 8px}
div#nav ul{margin: 0; padding: 0}
div#nav li{list-style-type: none; float: left}
div#nav li a {display: block;
width: 162px;
line-height: 30px;
border-right: solid 1px #aaaaaa;
color: #000000;
text-align: center}
div#nav li a:hover {background-color: #a6d8f6}
[/css]

貼り付けが終われば必ず「ファイルを更新」をクリックしましょう。
ヘッダーメニュー完成先ほどまで縦にリスト表示されていたメニューが横並びになり整列しました。

ABOUT ME
moja
昭和47年生まれ。生まれた時からカープファン。 姫路生まれ姫路育ち。現在は相生市矢野町榊。 パソコン販売・修理・組立、出張サポート、ホームページ制作・WEBデザインなど。 奥さん1人と4男の父 真宗門徒
にほんブログ村 地域生活(街) 関西ブログ 姫路情報へにほんブログ村 子育てブログへにほんブログ村 野球ブログ 広島東洋カープへ