こんにちは。fsです。
前回はブログサイトのトップページを作りました。
※参考記事はこちら
↓↓↓↓↓↓↓
今回は個別の投稿を表示させるページを作りたいと思います。
実際に書いたブログを読んでもらうためのページです。
完成のイメージはこちらです。
初心者の方でも作れるように、画像つきで解説していますので安心してお読みいただければと思います。
それではご覧ください。
個別投稿ページの作成
それでは実際にコードを書きながら解説していきます。
個別投稿ページのファイル(single.php)を作る
まずは投稿を表示させるページファイルを作ります。
Start Bootstrapには、個別投稿ページ用のテンプレートファイル（post.html）が用意されているので、このファイル名をsingle.phpに変更します。
ヘッダーとフッター部分はパーツ化したindex.phpと同様に置き換えていきます。
※パーツ化の参考記事はこちら
↓↓↓↓↓↓↓
記事を表示させる
次にトップページでクリックされた記事を表示させるようにループ（while）構文を書いていきます。
これはWordpressで各投稿のデータを取り出すために必要な処理になります。
なので、対象のエリアをこのwhile構文で囲んでいきます。
これでループが出来上がったので、一覧画面で作ったタイトルや著者名、時間も引っ張ってこれます。
タイトルの表示
ループ処理を書いたら、実際の投稿タイトルを表示させていきます。
h1タグの部分にテンプレートタグ（the_title）を入れます。
そうすると投稿タイトルに変わりました。
今回はサブタイトルはいらないので、消してしまいます。
著者名・日付の表示
次に著者名と日付を追加していきます。
著者名はthe_author、日付はthe_timeのテンプレートタグを使用します。
これでタイトル部分の連動が完了しました。
本文の追加
次は本文を出力していきます。
まずはデフォルトで入っているの本文部分をカットします。
そして、本文を表示させるテンプレートタグ（the_content）に置き換えます。
これで投稿ページができてきたので、最後におまじないを入れていきます。
トップページ作成の時にやったように、ループをif構文で囲います。
個別投稿ページなので記事が見つからないことはないのですが、バグを防ぐため決まり文句として入れておくと良いです。
※あくまでおまじないなので、深く考えなくてもOKです
アイキャッチ画像を入れる
アイキャッチ画像は各記事に紐づく画像のことを言います。
記事を書くとき、投稿に関連する画像も入れたい方も多いので、今回はこれを背景画像として入れていきます。
WordPressの既存テーマを使うときは投稿記入画面で挿入することができるのですが、自分でテーマ作る場合はその設定を最初からしないといけません。
functions.phpでテーマの設定を行う
テーマの設定を行うためにはfunctions.phpという新しいファイルを作る必要があります。
これはWordpressの動作の設定を行うファイルとして認識されます。
テーマの直下にfunctions.phpを作り、アイキャッチ画像をサポートする記述をしていきます。
ちょっと複雑ですが、
「作っているテーマにアイキャッチ画像（thumbnails）をサポートする機能を追加してください」
という命令を書いていると理解いただければOKです。
実際に投稿記入画面を開くと、アイキャッチ画像を追加できるようになりました。
アイキャッチ画像を表示
次はアイキャッチ画像を表示させていきます。
今回はheaderタグの部分に背景画像入れる設定にしているので、その前に処理（ここでもテンプレートタグを使います）を書いていきます。
画像を取り出す
WordPressに画像を挿入するときは、メディアライブラリという場所に登録されます。
そのとき、自動的に各画像に個別のIDが付加されます。
なのでまず、個別の画像のIDを取得する処理を書きます。
次に見ている投稿に指定された画像を取り出す処理（IDに紐付ける）を書きます。
※ここでは解像度を上げるため、二つ目のパラメーターで大きさも指定しています
画像を表示させる
画像を取得する処理を書いたら、画像を表示させていきます。
今回は背景画像として挿入しているので、urlの後に取り出した画像のパスを入れていきます。
※$img配列の0番目が画像のパスになっているので、echoメソットで0番目の配列を指定すればOKです
ページを更新すると、無事アイキャッチ画像が表示されています。
デフォルトの画像を設置
追加の機能として、アイキャッチ画像を登録しないときのデフォルト表示の設定もしていきたいと思います。
これは、if構文で分岐させていきます。
先ほど作った処理をif構文で囲み、画像が登録されていない場合の処理を書いていきます。
デフォルトとして、指定のディレクトリにある画像を取得する処理を書きました。
これでアイキャッチ画像を登録しないで記事を更新すると、このようになります。
これでアイキャッチ画像の設定は完了です。
追加機能をつける
これで投稿ページがだいぶできてきたので、おまけの機能をつけていきます。
言語設定
言語はWordpressの設定で変更できます（多言語対応）。
それに対応できるようにコードを書き換えます。
bodyタグ
bodyタグの設定も追加していきます。
body_classは、表示されるページによって様々なclassがbody要素に付加され、後々カスタマイズしやすくなるメリットがあります。
wp_body_openはGoogleのタグマネージャーなどを入れるときに役立ちます。
これで個別投稿ページはほぼ完成です。
まとめ 難しいプログラムも楽しく覚えていきましょう
いかがだったでしょうか。
今回は、functions.phpや変数（$idや$img）など、少し難しいプログラムをタッチしていきました。
一見複雑そうなプログラムも、このように手を動かしながら作っていくと概要が理解できるようになります。
後は様々なケースを経験していけば、自然と慣れていきます。
以上、Wordpress開発初心者の方の参考になれば幸いです。
最後までお読みいただきありがとうございました。
簡単操作！Macでプログラミングを始めよう！
コメント