本シリーズは、WordPressのテーマ作成を勉強し、まとめたものである。
前回は、テンプレート以外で重要なfunctions.phpというファイルを紹介した。
また、その中でアイキャッチを設定できるように記載も行った。
他にも色々できることはあるが、それらは今後の内容を通して学習していこう。
以下がその記事だ。
さて、今回からようやく本格的なコーディングを開始する。
まずは、各記事を表示するページについて、軽く書き始めよう。
第2回で書いた通り、single.phpというテンプレートファイルに色々と書き込むことになる。
ようやく見た目にも変化が出てくるので、楽しくなってくるところだと思う。
是非、色々と書く内容を変えながら遊んでみてほしい。
なお、本シリーズは以下の本を参考にしている。
他にも、公式ドキュメントなど参照する場合は随時リンクを貼っていこう。
今回どこまでやるのか
さて、今回は各投稿の記事を表示させるのだが、いきなり完全な形で全てを実装するわけではない。
とりあえずで、記事の情報を取得し、それを使って表示ができるところまでをやっていこうと思う。
目的は、WordPress特有の書き方を見るところにある。
具体的には、WordPressループと呼ばれるものだ。
そのため、次回以降で今回触った部分を修正するので、そのつもりでいてほしい。
復習：今現在の状況
では、内容に入る前に、今どんな状況だったかを振り返ってみる。
今、テーマディレクトリの中身は以下の通り。
- テーマディレクトリ
- index.php(初回作成)
- style.css(初回作成)
- functions.php(第3回作成)
- lib(第3回作成)
- setting.php(第3回作成)
で、ページを表示すると、どんなコンテンツを表示しようとしても決まって以下のように出てくるはずだ。
下準備
では、下準備をしていこう。
というのも、これから記事を表示させる部分を実装するのだが、肝心の記事がないと何もできない。
WordPressインストール時にも自動で一つ生成されているが、折角なのでサンプルで表示する用の記事を一つ追加しておこう。
私の場合は…
- カテゴリーも新規作成し、それを適用
- タグは2つ追加
- アイキャッチも設定(※前回をやっていないと設定不可)
このあたりも併せてやっておいた。
で、実際に公開までしておく。
…が、現段階ではやはり表示にはindex.phpが使われ、表示も上に出したものと変わらない。
つまり、今回のゴールはここで作成した記事が表示されること、という感じだ。
なお、私の検証環境におけるこの記事ページを貼っておこう。
ただ、先ほどの書いた通りどんどん手を加えていくので、この記事の内容とは見た目やソースが大きく変わっている可能性も高く、そこは気を付けて欲しい。
それぞれの時点での結果は、スクショかご自身の環境で確認するようにしよう。
single.phpの作成
下準備を終えたので本題に入ろう。
まず、投稿ページ専用のテンプレートとなるsingle.phpを作成する。
場所はテーマディレクトリ直下、中身は一旦index.phpの中身をコピペしてからタイトルの部分だけ少し変えておく。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>投稿ページ - てーま</title>
</head>
<body>
<h1>テーマ適用OK！！</h1>
</body>
</html>タイトルを、投稿ページであることが分かるように変えただけだ。
これで、下準備で作った記事へアクセスしてみよう。
タイトルのところに投稿ページであることが表示されたので、一旦single.phpが適用されているのは大丈夫そうだ。
一応、トップページにもアクセスして、そちらはindex.phpが使われていることも見ておこう。
single.phpの編集
ファイルを作り、それが認識されたことが確認できたので、実際に色々と書き替えていこう。
基本設定を行う三つの記述
まず、ここからいこう。
これから紹介する三つの項目は、基本的には常に書くことになるので覚えておいて欲しい内容だ。
一つ目、headタグの最後に、PHPでwp_head関数というものを実行させる。
これは特に引数を渡さず実行するもので、プラグインを含むWordPressの機能を使うためのものだ。
WordPressとしてもこれをやっておくことが推奨されており、約束事として書くようにしておこう。
二つ目、今度はbodyタグの先頭、今度はwp_body_open関数を実行する。
これも同じく約束事のようなものだが、これはfunction.php等であらかじめ設定しておくと、決まった内容をここに出力させるようなことが可能となる。
引数は不要で、こちらもただ実行すればいい。
三つ目、一つ目と対になるwp_footer関数。
書く場所がbodyタグ終了直前になっただけで、他はwp_head関数と同じ。
これら3つは、特別な事情がない限りは基本的に書いておくようにしよう。
これらを追加した状態のソースコードは以下だ。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>投稿ページ - てーま</title>
<!-- 追記その1 -->
<?php wp_head(); ?>
</head>
<body>
<!-- 追記その2 -->
<?php wp_body_open(); ?>
<h1>テーマ適用OK！！</h1>
<!-- 追記その3 -->
<?php wp_footer(); ?>
</body>
</html>この状態でページを表示すると、以下のようになる。
これだけで、一つ見た目が変わってくれた。
実は、これまでのサンプル画像も全てログインした状態で撮っていたのだが、管理バーが表示されていなかった。
今回出した3つの中で、これを表示するための処理が行われているのだ。
具体的に書くと、管理バーのスタイルがwp_headによる出力の中に、管理バー自体の記述がwp_body_openによる出力の中に含まれている。
ちなみにだが、第2回で導入したプラグインのShow Current Templateの表示もここにされているのが分かると思う。
しっかり、single.phpを使っているというのがこれで分かるようになる。
もちろん、ログアウト状態だと…まだ見た目の変化はない。
記事の内容表示
次に、記事の内容を表示してみよう。
実は、ここの内容が他のテンプレートを作成する上でも共通して使う処理で、丁寧に解説をしたい。
そのため、先にサンプルを今回のゴールの形まで作ってしまい、その後で深掘りしていくことにしよう。
上の方でも書いた通り、WordPressループというものを使っている。
というわけで、まずはそのサンプルを。
一つ上で追加したwp_body_open関数より下、wp_footer関数より上に処理を入れていく。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>投稿ページ - てーま</title>
<?php wp_head(); ?>
</head>
<body>
<?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_content(); ?>
<?php endwhile; ?>
<?php endif; ?>
<!-- 追記ここまで -->
<?php wp_footer(); ?>
</body>
</html>何やら色々と書かれているが、まずはこれをそのまま書いて、表示してみよう。
すると…
しっかり、記事の中身が表示されるようになった。
ということで、とりあえず中身を表示するだけであればこれで完了だ。
ページタイトルの変更
さて、今回はあと二つほどやってみる。
まずはページのタイトルについて。
ページのtitleタグがまだ直接書かれている状態になっており、このままだとどんな記事を表示しても同じタイトルになってしまう。
これを、そのページの表記になるよう変更していこう。
今度の修正対象は二つ、今見ているsingle.phpと、もう一つfunctions.phpになる。
というのも、このtitleタグの出力は、前回やったアイキャッチの有効化と似た手順で行うことができる。
WordPressでtitleタグを出力する機能を有効化する、という方法だ。
で、本シリーズではそういった内容はlib/setting.phpに書くことにしていた。
そのため、実際にはこれに追記することになる。
では、まずsingle.phpのtitleタグを消してしまおう。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<!-- titleタグを消す -->
<!-- <title>投稿ページ - てーま</title> -->
<?php wp_head(); ?>
</head>
<body>
<?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_date(); ?></p>
<hr>
<?php the_post_thumbnail("medium"); ?>
<?php the_content(); ?>
<?php endwhile; ?>
<?php endif; ?>
<?php wp_footer(); ?>
</body>
</html>ソースサンプルではコメントアウトしているが、実際にはそのまま消してしまって問題ない。
次に、lib/setting.phpの最後に記載を追加。
<?php
// アイキャッチを有効化する
add_theme_support("post-thumbnails");
// タイトルの動的出力を有効化する
add_theme_support("title-tag");このように、今度はadd_theme_support関数にtitle-tagを渡すことで、titleタグの自動生成を有効化できる。
これでもう一度表示してみよう。
ページタイトルの部分が、「(記事タイトル) – (ブログタイトル)」になっていればOKだ。
bodyクラス追加
今回の最後はこれ、bodyタグにクラスを追加しておこう。
先に書き方を、bodyタグのところへ少し記述を追加する。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<?php wp_head(); ?>
</head>
<!-- bodyタグに追記 -->
<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>bodyタグ内に、<?php body_class(); ?>という記載を追加した。
このbody_class関数は、WordPressによってbodyタグにクラスを追加するもので、後々スタイル調整などに使えるものなので入れるようにしておこう。
ちなみにどう変化するかだが、まずこれを入れる前のbodyについているクラスを見てみると…
<body class="customize-support">こんな状態になっている。
この元々入っているクラスは何ぞやと思われるかもしれないが、本筋とは逸れてしまうので詳細は触れない。
一応、テーマのカスタマイズに関連するものらしく、ログイン状態のみ追加されるようだ。
で、これを追加した後は…
<body class="post-template-default single single-post postid-15 single-format-standard logged-in admin-bar customize-support">このように、色々とクラスが追加される。
ちなみに、これもログイン状態での内容で、例えばlogged-inクラスなんかはその時のみに付与されるクラス名だったりする。
つまり、これを上手く使えばログイン時にのみ何かを表示させる、といったことも可能になる。
もちろん、後で他のクラスを追加することもできるが、それはまたその時に。
とりあえず、今回のソース変更は以上にしよう。
これで記事が取得・表示できるようになるので、あとはHTMLの構造やCSSで見た目を調整していく。
そこはWordPressの内容とは外れるので、記事にするかは未定だ。
やるとしたら、付録みたいな感じで外枠に出してやることになるだろう。
WordPressループ
では、今回のもう一つの本題とも言える、このWordPressループというやつを解説していこう。
今回のサンプルで記事の中身を表示するために追加した、以下の部分に着目してみる。
<?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; ?>ここが、WordPressループと呼ばれる処理のブロックになる。
そもそもの話になるが、あるページにアクセスされた時、そのページの種類によってWordPress側でどんな記事を持ってくるかがあらかじめ決められている。
これをメインクエリと呼ぶ。
例えばカテゴリーページであれば、そのカテゴリーがついた記事全てがこのメインクエリに該当する。
今回のように投稿ページの場合は、そのアクセスされた記事一つだ。
そのほか、自分でどんな内容を持ってくるかを決めることもでき、その場合は単にクエリと呼ばれる。
で、どちらにせよその中から実際の情報を取り出して表示する、ということを行う。
この時の基本的な処理方針は以下の通り。
- 今現在のクエリに表示する内容が1件以上入っているかを確認し、あれば次へ
- 以下を、次に取得できる内容がある限り繰り返す
- 今見ているクエリを一つ進める(最初は先頭の記事より一つ前を指している)
- そのクエリに関する処理を行う
こんな流れだ。
今回は記事一つだけなので、一通り1、2、2-1、2-2が実行されたあと、2での判定に当てはまらなくなるので終了する。
もし複数あれば1は最初一回だけ行われ、存在するので2へ。
そこから該当する記事の数だけ2、2-1、2-2が繰り返し行われ、全て終えたら終了という感じだ。
ソースコードと照らし合わせながら詳しく見ていこう。
まず、ソースコードではif文でhave_posts関数を実行している。
これは、クエリを一つ次に進めることができるかを判定する関数だ。
処理方針の中にも書いたが、最初はクエリの先頭のさらに一つ前を指している状態になっている。
このとき、次のクエリに進めるかを判定するということは、一つ以上記事が入っているかを確認していることと同じだ。
もしここでfalseが返ってくると、そのページで表示できる記事はないことになる。
例えばアーカイブページなんかでは「記事がないよ」という内容をこのif文に対するelseブロックで書くことになるだろう。
ということで、これでtrueが返ってきたら、メインの処理に入っていく。
次に、while文でhave_posts関数の結果がtrueである間処理を繰り返す。
この処理の中でクエリを一つ進めるので、このような判定方法になっているのだ。
そして、その中に入っているthe_post関数。
これには、現在指しているクエリの場所を一つ進める役割がある。
で、この現在指しているクエリの情報を各種関数で表示させることになる。
そのため、WordPressループ内の先頭でこれを実行する必要がある。
あとは、実際に各種関数を実行すればその記事の中身を表示することができる、というわけだ。
今回使っている表示関数は6種類。
| 関数名 | 今回の引数 | 取得するもの |
|---|---|---|
| the_title | なし | 記事タイトル |
| the_category | なし | 記事につけられたカテゴリー 箇条書きとして出力 |
| the_tags | なし | 記事につけられたタグ デフォルトでは「タグ：」の後にコンマ区切りで出力 |
| the_date | なし | 記事の投稿日時 |
| the_post_thumbnail | 出力するサイズ | 記事のアイキャッチ imgタグとして出力 |
| the_content | なし | 記事本文 |
他にもあるが、一旦このくらいでいいだろう。
これらは共通して文字列として取得するのではなく、echoのようにそのままHTMLとして出力されるという点に注意しよう。
また、引数はほとんど省略してしまっているが、それぞれ指定できるものもある。
それは、また別の機会に詳しく解説しよう。
今回は記事一つなのでループ感はないが、最新記事一覧やカテゴリー、タグ等のアーカイブページで本領を発揮する。
その時にも出てくるので、もう一度改めて解説をするつもりでいる。
とにかく、今はそういうものなのかと思っておいてもらえれば大丈夫だ。
おわりに
今回は、投稿ページのテンプレートであるsingle.phpを実際に書き始めた。
ようやく記事の中身が表示されるようになったので、一歩進んだ感が大きいと思う。
これからもどんどん内容を追加していくので、より変化が現れてくることだろう。
是非、色々試して作り込んでいってほしい。
さて、次回は今作ったテンプレートを分割してみようと思う。
というのも、今回の流れで分かったかと思うが、サイト全体で使えそうな部品がいくつかある。
それを毎回個別に書いていると、全て一括で変更したいという時に不便だろう。
具体的には、ヘッダー部分とフッター部分を別ファイルに切り出す。
また、まだ作ってはいないが、サイドバーの中に入れるような各項目も切り出すことができるので、その方法だけ紹介しよう。
その他、任意の部品を切り出しておき、それを読み込むなんてこともしてみる。
これにも、決まったやり方があるのでそれを紹介していこう。
2021/3/5追記
次回の内容、テンプレートを分割してそれを読み込む方法を解説した。
これで、同じ内容は一か所で管理できるようになる。
メンテナンスをしやすくするためにも、是非使うようにしよう。
コメント