WordPress オリジナルテーマ作成4

WordPress HTML&CSS

少し時間があいてしました。現在は、サイト作成の基本となるテンプレートファイルの作成の学習は一通り終わったのですが、理解度がまだまだのため次のステップへ進む前に、もう一度、少し時間をかけながら復習をやっています。
今回は前回と同じような作業ですが、「投稿ページのテンプレートファイルを作成」していきます。

今回やっていくこと

  • 投稿ページ用のテンプレート「single.php」を作成
  • 投稿の日付を出力
  • カテゴリーを出力
  • タグを出力

前回同様、ざっくりこんな感じです。前回やったことは最初の作業に入っていますので、今回新たにやるのは2つ目以降になります。WordPress化するサイトのレイアウトによってもやることは変わってくると思います(あくまで私が購入した教則本を参考に整理していますので・・・)

今回も、やっぱりゆっくり整理していきます。

投稿ページ用のテンプレート「single.php」を作成

前回の作業を参考に実施します(WordPress オリジナルテーマ作成3

  • 固定ページのHTMLからヘッダー/フッター部分を削除して「single.php」を作成
  • 投稿があるかどうかを判断し、あれば投稿を表示させる仕組みを追加(ループ)
  • ページ固有のIDとクラスを出力(特定のページにCSSやJSするのに便利)
  • サイドバーを分割してパーツ化
  • タイトルと本文を出力
  • アイキャッチ画像を出力
    WordPressの固定ページ編集画面にあるアイキャッチ画像パネルを有効化
    アイキャッチ画像のサイズを指定
    アイキャッチ画像を出力

投稿の日付を出力

「single.php」にある投稿日付部分を、現在の投稿日を表示するテンプレートタグに置き換えます。

get_the_date(日付書式) ※必ずループの中で使用する。

カテゴリーを出力

WordPressには「カテゴリー」という投稿の分類機能があるので、投稿で設定したカテゴリー名を表示させるために、テンプレートタグをつかって書き換えます。

the_category(区切り文字,親カテゴリーの表示方法,投稿ID)
現在の投稿が属るカテゴリーへのリンクを表示、必ずループの中で使用します。

タグを出力

投稿で設定されたタグを出力するために書き換えます。

the_tags(タグ一覧前の文字列,区切り文字,最後のタグ後の文字列)
現在の投稿が属るタグへのリンクを表示、必ずループの中で使用します。

まとめ

前回の固定ページ、今回の投稿ページと同じような構成だったので、基本的な部分+それぞれのページの固有部分を置き換えることを学びました。ここまでは、そこまで複雑でないですが、ここから急に難しくなってきたなぁと感じています。一通りの流れをしっかりと学んで、いろいろなサイトをWordPress化していくことが大事なんだろなぁ…と思っています

さあ、次もかんばりますか!


WordPressオリジナルテーマ制作入門 [ 清水由規 ]

コメント