本シリーズは、WordPressのテーマ作成を勉強し、まとめたものである。
前回は、ようやくだが本格的に見た目を書き始めた。
とりあえず、記事の中身が表示されるところまではできたと思う。
この中で使っていたWordPressループは、今回は使わないが他のページ実装時にも使うので、せめて名前だけでも覚えておこう。
また、タイトルを動的に出力する設定も行い、これでそれぞれのページに合わせたタイトルがつくようになった。
このあたりがまだできていない、あるいは不安な方は前回の内容を見て復習しておこう。
以下がその記事だ。
さて、今回は複数のページで共通して使う部品を別ファイルへ切り出してみよう。
この部品を書いたファイルには、テンプレートパーツという名前がついている。
大きく分けて、以下4種類の部品を解説する。
- ヘッダー
- フッター
- サイドメニューの各項目
- その他
三つ目、四つ目は今回はまだ中身が無いが…折角なので、やり方だけ紹介しよう。
そして、今回はページ出力時には変化は起きない。
が、今回に限っては変化がないことが重要だったりもするので、そこは認識しておいてもらいたい。
なお、本シリーズは以下の本を参考にしている。
他にも、公式ドキュメントなど参照する場合は随時リンクを貼っていこう。
部品を切り出す時の考え方
さて、PHPの内容を思い出そう。
本シリーズでもすでにfunctions.phpの中で使っているが、そもそもPHPで他のファイルを読み込む関数が用意されている。
以前出したのは、それまでに読み込まれていなければ一度だけ読み込むrequire_once関数。
他にも、そのチェックを行わずに読み込むrequire関数もある。
ということは、これらを使えばいいのでは？と思われるかもしれない。
しかし、WordPress側でも特定の部品を読み込む関数が用意されている。
なぜ用意されているかというと、別の処理をこれに関連付けることが可能なのだ。
例えば、ヘッダーを読み込む前に何かしら処理を行いたい場合、アクションフックと呼ばれる仕組みで関数を追加で実行させるようなことができる。
…が、そこに突っ込むと今回の内容から外れてしまうので、今後必要な時に詳細を解説することにしよう。
まあ、そんなことができるようにするため、基本的にWordPress側で用意されているものを使うようにしよう、ということだ。
つまり、部品を切り出す際には…
- 切り出した中身を決まった名前のファイルに書く
- それをWordPress関数で呼び出す
こんなことをする必要がある。
なお、切り出しの際には、これをやった前後で見た目に変化がないことを確認しておこう。
というのも、今回の目的は表示には影響を与えず、管理をしやすくすることだからだ。
そんなこともあり、今回はソースコードのみの記載とし、サンプルページの紹介はしない。
では、それぞれのやり方を見ていこう。
ヘッダー
まずは、ヘッダーから。
前回作ったsingle.phpを開いてみよう。
私と同じことを書いていれば、以下のような状況になっているはず。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<?php wp_body_open(); ?>
<?php if(have_posts()): ?>
<?php while(have_posts()): ?>
<?php the_post(); ?>
<h1><?php the_title(); ?></h1>
<p>カテゴリー：<?php the_category(); ?></p>
<p><?php the_tags(); ?></p>
<p>投稿日時：<?php the_date(); ?></p>
<hr>
<?php the_post_thumbnail("medium"); ?>
<?php the_content(); ?>
<?php endwhile; ?>
<?php endif; ?>
<?php wp_footer(); ?>
</body>
</html>さて、この中を見てみると、先頭から<?php wp_body_open(); ?>まではどのファイルでも使えそうだ。
そのため、ここを共通のヘッダーとして分けていこう。
まず、このテーマディレクトリ直下に、新しくheader.phpというファイルを作り、今見た先頭からの部分をコピペしよう。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<?php wp_body_open(); ?>次に、single.phpの今コピペした部分を削除し、代わりに処理を追加する。
<!-- 共通ヘッダー読み込み -->
<?php get_header(); ?>
<?php if(have_posts()): ?>
<?php while(have_posts()): ?>
<?php the_post(); ?>
<h1><?php the_title(); ?></h1>
<p>カテゴリー：<?php the_category(); ?></p>
<p><?php the_tags(); ?></p>
<p>投稿日時：<?php the_date(); ?></p>
<hr>
<?php the_post_thumbnail("medium"); ?>
<?php the_content(); ?>
<?php endwhile; ?>
<?php endif; ?>
<?php wp_footer(); ?>
</body>
</html>ちょっとインデントがおかしいが、後で直すのでお待ちいただきたい。
今追加したget_header関数が、WordPressで用意されているヘッダーファイルを読み込む関数になる。
引数を渡さずに実行することで、テーマディレクトリ直下にあるheader.phpをインクルードしてくれるのだ。
これだけで、ヘッダー部分の切り出しが完了。
ページを表示して、変化がないことを確認しておこう。
フッター
次はフッター部分。
先ほどのヘッダーと同じ流れだ。
まず、新たにfooter.phpというファイルをテーマディレクトリ直下に作成し、single.phpの最後3行分をコピペ。
<?php wp_footer(); ?>
</body>
</html>そして、single.phpの今コピペした部分を、今度はget_footer関数を実行するように書き換える。
この関数も、今度はfooter.phpというファイルを探してインクルードしてくれるものだ。
<!-- 共通ヘッダー読み込み -->
<?php get_header(); ?>
<?php if(have_posts()): ?>
<?php while(have_posts()): ?>
<?php the_post(); ?>
<h1><?php the_title(); ?></h1>
<p>カテゴリー：<?php the_category(); ?></p>
<p><?php the_tags(); ?></p>
<p>投稿日時：<?php the_date(); ?></p>
<hr>
<?php the_post_thumbnail("medium"); ?>
<?php the_content(); ?>
<?php endwhile; ?>
<?php endif; ?>
<!-- 共通フッター読み込み -->
<?php get_footer();本シリーズの方針としてファイル末尾のPHP閉じ括弧は省略することにしていたので、最後は閉じていない。
で、これで表示してもやはり表示は変わっていないはずだ。
もし気になるのであれば、ページのソースを表示して、最後の</html>まで入っていることを確認しておこう。
以上で、ヘッダーとフッターの切り出しが完了だ。
オマケ：index.phpも同じヘッダー、フッターを使う
さて、ついでなのでindex.phpも同じことをしておこう。
とはいえ、こちらは切り出すのではなく、上で切り出した部品を使うことになる。
つまり、今度は少し見た目にも変化が起きるので、そこだけちょっと注意だ。
index.phpの内容を、以下のように書き換えよう。
<!-- 共通ヘッダー読み込み -->
<?php get_header(); ?>
<h1>テーマ適用OK！！</h1>
<!-- 共通フッター読み込み -->
<?php get_footer();非常にシンプルになった。
これでトップページにアクセスし、管理バーが表示されたりページタイトルが変わったりしていることを確認しておいてほしい。
特定のヘッダーやフッターを使う
さて、ここまでで全てのページで使うヘッダーやフッターを一か所にまとめることが可能になった。
しかし、ページによっては使うヘッダーやフッターを分けたい、という場合もあるだろう。
例えば、トップページだけは画像を大きく表示し、その下に中身を書く。
他のページは画像を小さくし、あるいは無くしてメニューだけを表示する、という感じだ。
実際に、本シリーズで作っているこのテーマもこの形にする予定でいる。
これには大きく二つの方針があり、一つ目が新たに別の部品として作成する方法。
今使ったget_headerやget_footerには、特定の名前のファイルを読みこむようにも書くことができる。
改めて、それぞれの関数の書き方を出してみよう。
get_header([名前])
get_footer([名前])こんな感じで、引数として追加の名前を渡すことができる。
上で使っていたように、これを省略した場合はそれぞれheader.php、footer.phpというファイルを探してくる。
で、この名前を追加すると…例えばexampleという文字列を渡せば、header-example.phpというファイルを探しにいってくれる。
このように、ファイル名をheader-○○.phpやfooter-○○.phpという形にしてあげれば、それを指定して読み込めるのだ。
ちょっといつになるか分からないが、トップページを作る時にこの方法で分けるつもりなので、覚えておくといいだろう。
ちなみに二つ目の方法は、今表示されているページの種別を判定する各種関数が用意されており、それを使って条件分岐するというものだ。
冒頭で出した参考書では、こちらの方法が使われている。
それぞれの方法でメリット・デメリットが異なるので、そこを考えて使い分けるようにしよう。
サイドメニュー部品
さて、ここからは実際には組まないが、こんなのもあるよという紹介になる。
まず、サイドメニューの部品を分ける方法。
これには、get_sidebar関数を使う。
使い方はget_headerやget_footerとほぼ全く同じで、今度はファイル名がsidebar.php、あるいは追加名を入れるならsidebar-○○.phpとなる。
サイドメニューの各項目ごとに追加名を含ませたファイルを用意しておき、それを読み込むのがいいだろう。
…と書いたが、すでに運用されている方はご存じの通り、サイドバーをウィジェットとして管理画面からカスタマイズすることも可能だ。
そちらを使えばカスタマイズ時にソースを修正することも無くなるので、本シリーズではこれを有効化して使う方法を採用しよう。
その他の部品
これまで紹介した3種類以外にも、幾つか専用の部品を読み込む関数は用意されている。
が、まだ使わないのにそこまで解説しても混乱しかねない。
そのため、それらは実際に使う時に紹介していくことにして、今はその他用意されていないものを読みこむ方法を簡単に述べておこう。
冒頭でもちらっと書いたが、このようにテンプレートの一部を切り出したファイルはテンプレートパーツと呼ぶ。
この、指定したテンプレートパーツを読み込むget_template_part関数が用意されている。
get_template_part(パーツ名[, 追加名])例えば何かの部品をsample.phpという名前のファイルに書き、テーマディレクトリ直下に配置したとする。
このとき、get_template_part("sample");と記述することで、このファイルをヘッダーやフッター等と同じように読み込むことが可能だ。
追加名は、sample-foo.phpにすればget_template_part("sample", "foo");で読み込める、という感じ。
…ちなみにだが、この場合はget_template_part("sample-foo");でも読み込めたりする。
ぱっと思いつくものでいうと、パンくずリストなんかを自力で実装する場合にはこれで読み込むといいのではないだろうか。
おわりに
今回は、異なるテンプレートファイルで共通のテンプレートパーツを使うための方法を解説した。
できるだけ同じことをする部品は一か所で管理したいので、是非使うようにしていこう。
もちろん、本シリーズでもガンガン使っていくので忘れないようにしたい。
さて、次回はカテゴリー、タグ、月ごとの一覧をまとめるアーカイブページを作っていこう。
前回はあまり実感のわかなかったWordPressループが本領を発揮するものの一つだ。
また、同時に表示件数が多い場合に使われるページネーションも実装してみようと思う。
ちょっと長くなるかもしれないが、落ち着いて一個一個確実に理解していきたい。
次回に向けて、検証環境等を用意して実際に組んでいる方へ、一つ宿題を。
ページネーションを実装するのだが、その動作確認のために多量の記事が必要だ。
デフォルトでは、1ページに10件表示させるようになっている。
そのため、最低でも11件、できれば21件以上の記事を用意しておいてほしい。
記事の中身自体は何でもいいが、それらに「ページネーション確認用」のようなカテゴリーとタグをつけ、同じ月の投稿にしておこう。
可能であれば、これ以外の記事も表示されないことを確認するための記事も幾つか用意しておくといい。
…面倒な方は、メイン側の記事をエクスポート&インポートでコピーし、カテゴリーとタグをプラグイン等で一括設定するのが一番楽かと思う。
2021/3/6追記
次回の内容、アーカイブページの作成を行った。
同時にページネーションも予告通り実装してみた。
特にこのあたりは混乱しやすい箇所だと思うので、それぞれで何をどんな目的でやっているか、しっかり把握しながら進めたい。
コメント