共通パーツを分離してテンプレートファイル化する【WordPress制作入門講座】

ここまでで、htmlで作成した３ページがWordPressでも表示されるようになりました。それぞれのページへのリンクを作り直したいところですが、このあとブログのページも作ります。

毎回全ファイルを開いて、リンクを修正したり追加したりは、面倒ですよね。
実は、WordPress化すると共通する部分を一括で管理できるようになります。

共通する部分を一括で管理する、とは?
header.phpを作成する

1.ヘッダー部分をテンプレート化する
2.header.phpを編集する
3.wp_head(); を挿入する
3.WordPressを使ってメニューを作る
4.header.phpからメニューを呼び出す

footer.phpを作成する

1.フッター部分を切り出す
wp_footer; を挿入する

共通する部分を一括で管理する、とは?

WordPressでは、データベースにある情報を書き出すだけではなく、テンプレートファイル（phpファイル）内で、別のphpファイルの中身を書き出すことも出来ます。

例えば、header.phpファイルに「ここはヘッダーです」とテキストを入力します。
すると、header.phpの中身を書き出すよう指示されているファイルには、そのテキストが表示されます。

header.phpのテキストを「エドベース株式会社」と打ち替えると、全ページの表示が一気に切り替わります。もちろん、divタグやクラスなども記述できます。
1つ修正すれば全ページに適用されるのです。便利ですね。

WordPressのページは、色々なテンプレートファイルとデータベースの情報を１枚にまとめたものであると言えます。
共通部分は切り出して１つのファイルにすることで、管理が楽になりますよ。

header.phpを作成する

早速、ヘッダーを分離してテンプレートファイル化してみましょう。

1.ヘッダー部分をテンプレート化する

ここまでに作った、３つのテンプレートファイルを見比べてみてください。

front-page.php
page-company.php
page-form.php

titleとdescriptionは違いますが、</header>タグまではほぼ同じ構成ですよね。
この共通部分を「header.php」として分離しましょう。

空の新規ファイルを作成します。
front-page.phpを開いて、1行目から</header>タグまでをカット＆ペースト。

header.phpという名前で保存してください。

ヘッダー部分をカットしたfront-page.php。
こちらは、1行目に「header.phpを出力せよ」というWordPressのタグを挿入します。

<?php get_header(); ?>

上図のようになったら、front-page.phpを上書き保存。
ブラウザでサイトのトップページを確認してみましょう。

今まで通り表示されていれば、うまく出来ています。

page-company.php と page-form.phpも同様に設定しましょう。
</header>タグまでを削除し、<?php get_header(); ?> に置き換えます。

これで、header.phpを編集すると全てのページのヘッダー部分が変更されるようになりました。header.phpをよりWordPressに適した形に調整していきましょう。

2.header.phpを編集する

header.phpを共通化しました。
今のままだと、ページのタイトルやmeta descriptionも一緒になってしまいまいます。

これらを細かく設定するには難しい設定、もしくはプラグインの使用が必要です。
今回はちょっと簡単に作ってしまいましょう。

ページのタイトルを書き出してくれるように、以下３つのWordPressタグを使います。

<?php echo get_the_title(); ?>
<?php bloginfo('title'); ?>
<?php bloginfo('description'); ?>

この３つのタグを組み合わせて使用します。

header.php

<title><?php echo get_the_title(); ?>｜<?php bloginfo('title'); ?></title>
<meta name="description" content="<?php echo get_the_title(); ?>｜<?php bloginfo('description'); ?>">

実際に出力されるページには、赤い文字が入ります。

サイトのトップページ（front-page）だけは、タブに表示されるページタイトルが変になっているかと思います。ここは、そのままでOK。

「会社概要」と「お問い合わせ」が正しく表示されていれば次に進んでください。

3.wp_head(); を挿入する

WordPressテーマのheadに必要なのが、<?php wp_head(); ?>というタグです。
このタグは、WordPress側がhead内に出力したいものがある時に、書き出せる場所を確保してあげる為のものです。

例えば、プラグインを使ってmetaタグを出力する、SNSへのリンクを作るとき。
<?php wp_head(); ?>が入っていないと動かなかったり、CSSが読み込まれずに見た目が汚くなったりしてしまいます。

今後プラグインを追加しても動くように入れておきましょう。
挿入場所は</head>タグの直上です。

header.php

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title><?php echo get_the_title(); ?>｜<?php bloginfo('title'); ?></title>
  <meta name="description" content="<?php echo get_the_title(); ?>｜<?php bloginfo('description'); ?>">
  <link rel="stylesheet" href="<?php echo get_template_directory_uri()?>/style.css">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <?php wp_head(); ?>
</head>

<body>
～以下略～

3.WordPressを使ってメニューを作る

ヘッダーメニューのリンクを各ページに繋がるように直しましょう。
修正が楽になるよう、管理画面からメニューを追加・変更できるようにます。

管理画面からメニューを作るためには、functions.phpというファイルを使います。
functions.phpはテーマファイルの1つ。WordPressの管理画面の設定、機能の使用不使用の決定、そのほか関数のカスタマイズ等などを行うことができるファイルです。

エディタで新規ファイルを作成してください。
下記のコードをコピーして貼り付けます。
張り付けたら、functions.phpという名前で保存してください。

functions.php

<?php 
    add_theme_support('menus');
    register_nav_menus( );

?>

WordPressの管理画面を開きます。
（開いている方は再読み込みしてください）

外観にカーソルを重ねると「メニュー」という項目が増えています。
開いてみましょう。

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

メニューが作成され、項目（リンク先）が追加できるようになります。

左側にあるメニュー項目を追加で、会社概要とお問い合わせにチェックを入れます。その状態で「メニューに追加」ボタンをクリック。

チェックを入れた項目が、右側のメニュー構造の中に表示されます。
ドラックで順番を変えられるので、表示させたい順に並べましょう。

順番を揃えたら「メニューを保存」ボタンをクリックして保存してください。

4.header.phpからメニューを呼び出す

ヘッダーナビゲーション部分を、作成したWordPressの「メニュー」を表示させるコードに置きまえます。

メニューを呼び出すWordPressタグはこちら。

<?php wp_nav_menu( ); ?>

今回の場合は、<nav>の中に上記コードを入れると良いです。

header.php(完成!)

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title><?php echo get_the_title(); ?>｜<?php bloginfo('title'); ?></title>
  <meta name="description" content="<?php echo get_the_title(); ?>｜EdTechで眠っている才能を呼び覚まし、社会に貢献できる人材を創造する企業です。">
  <link rel="stylesheet" href="<?php echo get_template_directory_uri()?>/style.css">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <?php wp_head(); ?>
</head>

<body>
  <div class="container">
    <header>
      <h1>エドベース株式会社</h1>
      <nav>
        <?php wp_nav_menu( ); ?>
      </nav>
    </header>

上書き保存して、ブラウザで確認してみましょう。
ヘッダーナビゲーションが変わっていれば完成です。

これでheader.phpは完成です。

footer.phpを作成する

footerも株式会社エドベースのサイトは共通したデザインです。
footer.phpというファイルを作って共通化しましょう。

1.フッター部分を切り出す

page-company.phpを開いてください。
<footer>タグから下を全て切り取り、新規ファイルに張り付けます。

新規ファイルは「footer.php」という名前で保存。

page-company.phpの最下部に、footer.phpを出力するためのタグを挿入します。headerがfooterになっただけですね。

<?php get_footer(); ?>

frontpage.phpとpage-form.phpも同じく、<footer>から下を全て削除。
<?php get_footer(); ?>を挿入します。

上書き保存して、ブラウザで各ページを確認してください。
見た目に変化がなければ、footerのテンプレート化は成功です。

wp_footer; を挿入する

WordPressのfooter.phpには<?php wpfooter(); ?>というタグを挿入します。
このタグもheader.phpに挿入した`<?php wphead(); ?>`と同じく、WordPress側が必要なコードを書き出せるようにするためのものです。

挿入する場所は</body>タグの直前。
footer.phpに書いてみましょう。

footer.php(完成!)

    <footer>
      <p>エドベース株式会社</p>
    </footer>
  </div>

  <script src="<?php echo get_template_directory_uri()?>/gacha.js"></script>
  <?php wp_footer(); ?>
</body>

</html>