Simple Journal – カスタムメニューに対応する

テーマ作成の続き。

本日は、サイトのヘッダー部分にあるナビゲーションメニューを、WordPressの管理画面から設定したものに置き換えたいと思います。

Header Navigation

 

01 テーマのカスタムメニュー機能を有効にする

テーマフォルダの中に functions.php という名前のテーマファイルを作成します。

Add Functions Template

そして以下のような記述を追加。

簡単に説明すると、

このテーマをサイトに適用している場合、「Top Menu」という名称のナビゲーションメニューを設定できるようにする。

という処理が行われています。

これにより、WordPressの管理画面からカスタムメニューを作成できるようになり、さらにそのカスタムメニューをテーマに表示できるようになります。

 

02 管理画面からメニューを登録する

それでは早速カスタムメニューを登録しています。

WordPressの管理画面にログインし、「外観 > メニュー」をクリックしてメニューの設定画面を表示します。

Custom Menu

適当なメニュー名を入力して、「メニューを作成」ボタンをクリック。

Register Menu

以上でカスタムメニューの作成が完了です。

作成が完了すると以下のような画面になり、先ほど functions.php に記述したナビゲーションメニュー(メニューの位置)が表示されます。

「Top Menu」のチェックボックスをオンにし、「メニューを保存」ボタンをクリックすると、このカスタムメニューを「Top Menu」というナビゲーションメニューとして表示できるようになります。

Save Menu

 

03 メニューをヘッダーに表示する

header.php を以下のように編集して、サイトのヘッダー部分にナビゲーションメニューを表示できるようにします。

 

今回使ったテンプレートタグは以下。

wp_nav_menu

ナビゲーションメニューを表示するためのテンプレートタグです。

‘theme_location’というパラメーターが指定されている場合、パラメーターの値が示す位置へ割り当てられたメニューを表示します(今回の場合は、「Top Menu」に割り当てた「Global Menu」が表示されます)。

 

サイトを確認すると、以下のようになります。

Global Menu

メニューを増やしたり、メニュー項目のラベルを変更したりしたい場合は、WordPressの管理画面から先ほどのカスタムメニューを編集すればOKです。

 

Simple Journal – header.php の作りこみ

先日追加したテンプレートファイル header.php を編集していきます。

 

以下のようになっている header.php に・・・・

 

次のようなテンプレートタグや関数を挿入していきます。

 

この変更後の header.php に登場するテンプレートタグは以下。

language_attributes

htmlタグに言語属性を表示します。

bloginfo

指定したパラメータに応じたサイトの情報を表示します。

(パラメータの例)

  • “charset” -> ページのエンコーディングを表示。常に「UTF-8」となります。
  • “name” -> サイトのタイトルを表示。
  • “stylesheet_url” -> style.css の URL を表示。

home_url

サイトのホームURLを表示します。

body_class

bodyタグにページに応じたclass要素を表示します。
例えばトップページの場合、「home blog」といったclassの値が表示されます。

 

以下は、ちょっと特殊な用途の「関数」と呼ばれているコード。

wp_head

‘wp_head’ というアクションフックをスタートさせるための関数です。 通常、</head> タグの直前に記述します。

この関数をテンプレートファイルに記述しておくと、
</head>タグが出力される直前のタイミングで実行するよう事前登録された(「フックされた」といいます)関数を実行することができます。

例えばWordPressプラグインの中には、この’wp_head’アクションにフックして動くものが多々ありますので、自作のテーマを作る際には必ず記述しておいたほうがいいでしょう。

header.php の編集後、サイトを表示すると以下のようになります。

Edit Header Template

見た目的には、サイトのタイトルが変わっただけですが、出力されたヘッダー部分のHTMLのコードを確認すると以下のようになります。

 

なお、上記のコードの中で <!– start of wp_head –> と <!– end of wp_head –> の間に挟まっている部分が、 ‘wp_head’アクションフックにより自動的に出力されたコードとなります(結構いろいろ、勝手に出力されます)。

Simple Journal – ヘッダー部分とフッター部分をテンプレートファイルに切り出す

前回編集した index.php のヘッダー部分とフッター部分のコードを別のテンプレートファイルに切り出し、共通化しておくことにします。

01. ヘッダー部分を header.php に切り出す

テーマのヘッダー部分をテンプレートファイル header.php に切り出します。

まずはテーマフォルダに header.php ファイルを作成し、

Add Header Template

index.php のヘッダー部分をコピーまたはカットして・・・

Cut Header HTML

header.php に貼り付け、保存します。

Paste Header HTML

その後、index.php のヘッダーがあった箇所には以下のテンプレートタグを挿入。

Add Header Template Tag

この状態でWordPressサイトを確認すると・・・

Check Header

見た目は変わらずです。

※ なお、index.phpのテンプレートタグの記述を削除した場合、サイトは以下のような表示になります(ヘッダー部分がごっそりなくなった状態)。

Without Header

 

02. フッター部分を footer.php に切り出す

フッター部分についても同様におこないます。

まずはテーマフォルダに footer.php ファイルを作成し、

Add Footer Template

index.php のフッター部分をコピーまたはカットして・・・

Cut Footer HTML

footer.php に貼り付け、保存します。

Paste Footer HTML

その後、index.php のフッターがあった箇所には以下のテンプレートタグを挿入。

Add Footer Template Tag

この状態でWordPressサイトを確認すると・・・

Check Footer

ちゃんと footer.php の内容が index.php から読み込まれているのがわかります。

 

今後 index.php 以外のテンプレートファイルを追加したとき、今回使ったテンプレートタグの記述だけで、index.php と同じヘッダーやフッターを読み込めるので大変便利です。