前回、サイトのトップページに様々なWordPressの基本的なテンプレートタグを追加した。今回はグローバルナビゲーションをWordPressのメニュー機能を使って作成していく。

フロントページのテンプレートファイル

WordPressを語る上で避けて通れないのが、テンプレートファイルの種類とテンプレート階層。詳細は次回に解説するので、現段階では「こういうものがあるのか…」という程度にとどめておいてほしい。
　
サイトのトップページはもちろん「index.php」が呼び出され表示されるのはお分かりかと思う。そして通常固定ページは「page.php」。ブログの個別投稿ページは「single.php」。その個別投稿ページの同一カテゴリが集約されるページが「category.php」というように、WordPressのテーマを構成しているファイルのことをテンプレートファイルと言う。そしてテンプレートファイルには「header.php」や「footer.php」のように、すべてのページ内で使用できるファイル（パーツテンプレート）と、「single.php」や「category.php」のように、ある条件の下でのみ使用されるファイルがあるのだ。
　
そのテンプレートファイルの中で、サイトのホーム（トップ）ページのテンプレートの一つがfront-page.php。今からこのテンプレートを作成していく。
　
まず、「index.php」をコピーして「front-page.php」を作成し、「index.php」と同階層にアップロード。「index.php」には…
　

<?php echo "index";

　
この一行のみを記述してほしい。もちろん、トップページのテンプレートは「index.php」のままでもいいのだが、より優先度が高いテンプレートがない場合は「index.php」は必ず呼び出される。簡単に説明すると、管理画面から通常の固定ページを作成したとしよう。しかし通常固定ページ用の「page.php」というテンプレートファイルがない場合には、「index.php」が呼び出されてしまうのだ。WordPressのテンプレートにはそれぞれ優先度が決まっていて、「page.php」や「single.php」がない場合には、「index.php」が呼び出される仕組みになっているのだ。なので、トップページを別のテンプレートに分離して、「index.php」が呼び出された時は、テンプレートが存在しないことがすぐに分かるようにしてあげるために、「index.php」に上記のコードを記述した。そして、フロントページの表示を固定ページに変更することによって、トップページ自体をWordPress上の固定ページとして扱うことができるようにもなる。こうすることによって、固定ページの機能も有効になり、固定ページを対象とするテンプレートタグなどでの処理も可能になるのだ。初心者の方には、何を言ってるのか分からないだろうが、今はこういうものだと頭の片隅に置いておこう。

固定ページを作成する

さきほど「front-page.php」を作成したことにより、トップページも固定ページ扱いとなった。このサイトのページは、グローバルナビゲーションを見てもらえば分かるが、HOME、COLUMN、SNS、PROFILE、ABOUT、CONTACTに分けられている。そして、固定ページとして作成するのが、HOME、PROFILE、ABOUT、CONTACTの4つ。COLUMNは個別投稿のカテゴリーが集約するページとして作成していく。またSNSは自分のフェイスブックやツイッター等のソーシャルネットワークのリンクを貼る。
　
ここで最初にやっておくべきことは、パーマリンク設定。パーマリンクとは、Webページの中の個別のコンテンツに対して設けられたURLのことで、非常に重要な役割を担っているのだ。これについても後ほど詳しく説明するが、現段階では…
　
管理画面の「設定」→「パーマリンク設定」の「投稿名」にチェックを入れ保存しよう。
　

　
次にメニューの「固定ページ」→「固定ページ一覧」を開くと、下の画像のようにディフォルトで存在している「サンプルページ」があるのが分かる。これにチェックを入れ、「ゴミ箱へ移動」を選択して「適用」をクリックする。
　

　
続いて、「新規追加」からHOME、PROFILE、ABOUT、CONTACTの順に固定ページを作成。この時に重要なのはパーマリンクの設定だ。これはサイト上のURLになるので、適切なものに修正してやろう。このサイトでは、ページ名が英語表記なので、そのまま小文字にしたものを使用する。そして「ページ順序」の設定だが、これは基本的には100、200、300…という順番で、3桁の数字を使うようにしよう。各固定ページに子ページができた時には、例えば200のページの子ページなら、210、220…というように順序付けしていけば、ページが増えたときにも困らないのだ。最後に「公開」をクリック。
　

フロントページの表示設定

先ほど作成した固定ページの「HOME」をフロントページとして設定する。

管理画面「設定」→「表示設定」の「フロントページの表示」を下の画像のように変更し、「変更を保存」をクリック。
　

カテゴリーを編集する

固定ページと同様にカテゴリーページを作成する。基本的なカテゴリーページは、個別投稿の「single.php」の新着記事の抜粋一覧が表示される。管理画面の「投稿」→「カテゴリー」を選択して、ディフォルトである「未分類」というカテゴリーを下の画像のように編集しよう。
　

メニューを編集する

ここで新しいテンプレートファイルfunctions.phpという名前のものを作成して、テーマフォルダ内に保存してほしい。「functions.php」はテーマ内で利用する機能などを書いておける便利なファイルだ。この「functions.php」に以下のコードを記述。
　

<?php

// カスタムメニュー
register_nav_menus(
  array(
    'place_global' => 'グローバル',
  )   
);

　
これでWordPressのメニューが有効になった。その後、管理画面の「外観」→「メニュー」から「新規メニューを作成」。メニューの名前を「global」（任意）として「メニューを作成」をクリック。左カラムの固定ページのメニューから4つを追加。
　

　
左カラムのリンクメニューに任意のURLを追加する。自身のフェイスブックやツイッターがあれば、そのURLを記述しよう。リンクテキストにSNSと名前をつけて「メニューに追加」をクリック。
　

　
左カラムのカテゴリーメニューの「COLUMN」にチェックを入れ、「メニューに追加」を選択する。
　

　
「メニュー構造」に追加した各項目をドラッグして下の画像のように順番を入れ替えて、最後に「メニュー設定」の「テーマ位置」の「グローバル」にチェックを入れ、「メニューを保存」をクリックする。
　

グローバルナビのHTMLを変更する

「header-top.php」に記述しているグローバルナビのHTMLをWordPress用に変更する。
　

<!-- グローバルナビゲーション -->
	<nav id="gnav">
		<ul class="cf">
			<li><a href="#">HOME</a></li>
			<li><a href="#">COLUMN</a></li>
			<li><a href="#">SNS</a></li>
			<li><a href="#">PROFILE</a></li>
			<li><a href="#">ABOUT</a></li>
			<li><a href="#">CONTACT</a></li>
		</ul>
	</nav>

<?php wp_nav_menu(array(
    'container' => 'nav',
    'container_id' => 'gnav',
    'container_class' => 'cf',
    'theme_location' => 'place_global',
  ));
?>

　
サイトを確認すると…
　

　
ちゃんとグローバルナビゲーションが表示されている。「HOME」をクリックすると、そのままのトップページへとリンクされているのが分かるだろう。では、「COLUMN」をクリックしてみよう。
　

　
上の画像のように「index」とだけ表示される。これは先述したが、「COLUMN」はカテゴリーページとして作成したので、そのテンプレートファイルとなる「category.php」（もしくは「archive.php」など）といった優先されるべきテンプレートが存在していないため、優先度の低い「index.php」が適応されたのである。「index.php」が適応されて場合は、「index」とだけ表示するように記述したが、今の場合のようにテンプレートファイルが存在していないのが一目瞭然である。「テンプレートファイル」については次回、詳しく説明する。
　
次に「PROFILE」をクリックしてみよう。固定ページ用の「page.php」はアップしてるので表示されるはずだ。
　

　
表示はされたが、レイアウトが崩れている。それもそのはず、CSSと画像のパスへのWordPressのテンプレートタグが記述していないのだ。以前、トップページでは対策したが、通常固定ページへの実装はまだであった。この固定ページの各ファイルへのパスの変更も次回以降に行っていく。
　

Tweet