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’アクションフックにより自動的に出力されたコードとなります(結構いろいろ、勝手に出力されます)。

WordPressテーマ「Simple Journal 」ができるまで

自作のWordPressテーマ「Simple Journal」に関する記事の索引です。

現在絶賛更新中。

IndexPage for PC

ことはじめ

  1. シンプルなWordPressテーマ「Simple Journal」の自作

WordPressテーマ作成の準備

  1. VCCWを使ってWordPress環境を構築する
  2. 必要最小構成のテーマを作成

テーマのデザインと仕様について

  1. テーマのデザインと仕様を決める

テーマの作成