WordPressで自作テーマを作ってブログ運営をしよう Vol.5

Hello World!!
杉山です。

さて、今回は第5回目となります。前回では、サイドバーを作りましたので、今回はいよいよメイン部分を作りこんでいきます。

メイン部分とは、記事のループです。

自作テーマを作り終えれば、その後は、ダッシュボード画面にてブログを書いていかれると思うのですが。

ダッシュボード画面で作成した記事を最新の順番に常に表示させるようなシステムが必要になりますね。

考えると難しい、システムですが。

これもワードプレスが用意してくれている関数を使えば簡単にできますので安心してください。

では、さっそく始めていきましょう。

今回することは、下記になります。

  • メインの記事のループ画面を作成する

では、まず完成図のイメージをしていきましょう。

今回、作成するブログの形はこんな形をイメージしております。

サイドバーは前回作成しましたので、サイドバーは右端に移動させ、そして記事ループを左寄せで作成する必要があります。

記事ループの中の記事部分も決めていかないといけません。

私のブログでいえば、このカードの部分ですね。

私のブログは記事部分が一列にひとつしかないのに対し、今回このシリーズで作成する記事ループは一列に二つのカードがあります。

なので、今回のシリーズで作成する記事部分はこんなレイアウトをイメージしております。

ここまで、イメージできていれば、後はコーディングしていくだけとなります。

さあ、さっそくコーディングしていきましょう。

メインの記事のループ画面を作成する

記事のループをPHPで一から書いていくとなると、とても難しく、時間も果てしなくかかりますが、幸いワードプレスには関数が用意されているので、そちらを組み合わせていくだけになります。

どれがどのように作用するかを理解すれば、あとはご自身で組み立てていくパズルのようなものです。

では、早速書いていきましょう。

現在、index.phpの中身はこのようになってると思います。

こちらを以下のように書き換えましょう。

では、一つずつ説明していきます。

まず、記事のループをするにはこの関数が必要になります。

これは記事のループを開始する命令になります。

まず、関数の「have_posts」で記事があるかないかを判断させます。そして、記事があれば「while」を使い繰り返し処理を行います。

これで、前回作成した記事たちが繰り返し表示されるようになります。

しかし、これだけではただ記事を繰り返すだけの処理になり、見た目もへったくれもない状況になります。

なので、どのように記事を表示させるかを命令させる必要があります。

それがこの部分です。

まずは、「a」タグですべての要素を囲います。

そうすることで、記事カードのどの部分を押してもリンク先にいくことができるので使いやすいです。

ちなみに私のブログでは、「a」タグですべてを囲んでおらず、カード内に「記事を読む」ボタンを作っています。

今回は、すべてを囲みます。

そして、次にこのコードですが…

これは、サムネイル画像の部分になります。

サムネイル画像を背景に設定して、その中にカテゴリーのラベルをはめ込んでいます。

しかし、この「thumb_url」という関数はワードプレス特有の関数ではないので、この関数をfunctions.phpに書いていく必要があります。

これなにかというと、当該記事に設定されているサムネイル画像のURLを呼び出す関数になっており、このように背景で画像を設定したい場合などに便利に使うことができます。

サムネイル画像を「img」タグを使って表示させる方法もあるのですが、私個人的に背景で指定したほうが好きなのでそうしています。

というのも、サムネイル画像は指定したい画像によってサイズがバラバラですよね、そのバラバラのサイズを縦横比を指定せずに安易に「img」タグで表示させてしまうとレイアウトが崩れてしまいまいます。

なので、背景で指定してcssで縦横比を合わせるのが私個人的には好きなので。

「object-fit」を使う手もあるのですが、IEに対応していなかったりするので、背景に指定するのが無難だと、個人的には思います。

なので、この「thumb_url」の関数の内容をfunctions.phpに書いていきましょう。

functions.php

これは、なにを書いているかと簡単に言いますと、こういう命令です。

「投稿にサムネイル画像があればそのURLと、指定したサイズを値として返してね、もしサムネイル画像がなかったらimgフォルダに入れた、no-image.jpgを表示させてね」です。

ということは、サムネイル画像がなかったときに表示させる画像をimgフォルダにいれないといけません。

ここで、いったんコードを書くのはストップして、現在編集している自作テーマのフォルダに移動しましょう。

そして、この領域にimgフォルダを作成しましょう。

そして、imgフォルダの中に名称を「 no-image.jpg」に指定した画像ファイルをいれましょう。これは、もしサムネイル画像がない記事の場合に代わりに表示させる画像になります。

独自のものを用意いただいても大丈夫ですし、ご用意がない方はこれをお使いください。

この作業が完了すれば、コードを書く作業に戻りましょう。

サムネイル画像関連はこれでOKです。

次は、タイトルや抜粋や投稿日時を指定するコードですが。

それは、先ほど書いた以下の部分になります。

まず、記事のタイトルを表示させる方法ですが、これもワードプレス側で用意してくれている関数を使用すれば一行で終わります。

「the_title」という関数を使用すればOKです。

同じく、抜粋を表示させるのも一行でOKです。

「the_excerpt」この関数のみです。

そして、最後に投稿日をしているやりかたですが、ここでは「time」タグ内で投稿日の表示のさせかたを指定して、「echo」で値を表示させています。

「time」タグの中の「get_the_date」も()内に「Y-m-d」という記述があると思いますが、Yは年を表し、mは月を表し、dは日を表します。

もし自由に変えたかったら、このY,m,d以外の部分を変えることで自由に表示をカスタマイズすることができます。

例えば「Y年m月d日」とすれば、「2019年5月7日」と表示されますし。

「年:Y 月:m 日:d」とすれば、「年:2019 月:5 日:7」となります。

これらが記事のループ内の記述の説明となります。

あとは、記事のループ終了後にある以下の記述ですが。

これは記事が増えてきて、1ページ内に収まらなくなった時に次のぺージに移動するための、ボタンを作成します。

私のブログでいうと、この部分ですね。

これも、普通にphpで書くと難しいのですが、ワードプレス様様ですね、ワードプレスではこれも関数で用意されています。

これは「paginate_links」という関数で、あとは任意の引数を指定するだけで簡単に作ることができます。

以上でページループ内のphpコーディングは完了となります。

しかし、今のままだと、とんでもなく不細工なので見た目をcssで整えましょう。レイアウトはこうでしたね。

このレイアウトにあるように書いていきましょう。

こんな感じでしょうか。

こちらで、保存して一度、どのようの表示させるか見てみましょう。

いい感じですね。

こんな感じになりましたか?

ブログっぽくなってきましたね。

今回はここまでです。お疲れさまでした。