WordPressオリジナルテーマの作り方⑤（ブログカード編）

今回は、WordPressオリジナルテーマの作り方【第5回】ブログカード編となります。

WordPressオリジナルテーマの作り方は、当記事を含め以下の記事があります。

WordPressオリジナルテーマ制作の記事

ファイルの準備
トップページ作成
functions.phpからCSSやJavaScriptなどを読み込む
固定ページ作成
ブログカード作成 ← 当記事
記事一覧ページ作成
パンくずリスト作成
個別記事ページ作成
カテゴリーページ作成
カスタム投稿作成
404ページ
検索フォーム・検索結果ページ
月別アーカイブページ
カスタムフィールド

今回は、トップページに新着3件表示させるという設定で、ブログカードについて書いていきたいと思います。

また、記事の最後にはWordPressのおすすめ教材をご紹介させて頂きます。

じゅんぺいブログは、Web制作（コーディング・WordPress制作）の技術記事を中心に、約500記事公開しています。ぜひ他の記事も参考にしてみてください！

完全無料のプログラミングスクール『ZeroPlus Gate』

30日間でWeb制作を学べる無料のプログラミングスクールがこちら

いきなり数十万するプログラミングスクールは厳しい・・・という人のお試しに最適です。

現在は無料ですがいつ有料になるか分からないので、気になる方はお早めに👇
（有料になっていたらすいません🙇‍♂️）

＼完全無料／

ZeroPlus Gate公式サイト

毎日先着制！

WordPressオリジナルテーマの作り方：ブログカードとは？

まず、ブログカードが何かということですが、画像（アイキャッチ）やタイトル付きの投稿記事のリンクのことになります。

普通のリンクであれば、

WordPressオリジナルテーマの作り方④（固定ページ作成編）

という感じになります。

これでは味気ないので、色々と装飾をしてオシャンティーにしたものがブログカードです。

今回は、以下のようなブログカードを作ってみたいと思います（CSSは案件ごとにデザインに合わせる形になります）

ブログカードのサンプル

ベースとなるコードは、こちらになります。

1枚のカードに相当する部分になります（親要素のulタグなどは省略しています）

<li class="">
  <!-- 記事へのリンク -->
  <a href="記事のURL" class="">
    <!-- アイキャッチ -->
    <div class="">
      <img src="画像パス" class="sample-img" alt="チワワ" />
    </div>
    <!-- 投稿日 -->
    <p class="">
      <time datetime="2022-01-01">2022年1月1日</time>
    </p>
    <!-- カテゴリー名 -->
    <div class="">
      チワワ
    </div>
    <!-- タイトル -->
    <h2 class="">
      愛犬撮影会(チワワ)
    </h2>
    <!-- 本文の抜粋 -->
    <div class="">
      舌がチョロッと出ているチワワちゃん。飼い主さんも思わず触ってしまいます。
    </div>
  </a>
</li>

また、ブログカードを書く場所は『ブログカードを表示させたいテンプレートの表示させたい場所』なので、以下のようなケースが想定されます。

front-page.php：トップページ（新着一覧）
home.php：記事一覧ページ（全体）
single.php：個別記事ページ（関連記事）
category.php：カテゴリー一覧ページ（全体）
archive-〇〇.php：カスタム投稿一覧ページ（全体）
single-〇〇.php：カスタム投稿個別記事ページ（関連記事）
taxonomy-〇〇.php：カスタム投稿タクソノミー一覧ページ（全体）
author.php：投稿者別一覧ページ（全体）
tag.php：タグ一覧ページ（全体）
search.php：検索結果ページ（全体）
date.php：月別アーカイブページ（全体）

今回は、『通常投稿の新着記事』を想定して解説しているので、上記の場合だと『front-page.php』で『トップページに表示させる新着記事（3記事）』というイメージで進めていきます（関連記事だと最後に解説しているループの書き方が変わります）

ブログカードで表示させる項目

ブログカードで表示させる項目は案件によって異なると思いますが、次の5つを覚えておけば大丈夫だと思います。

画像（アイキャッチ）
カテゴリー
日付
タイトル
本文

それでは1つずつ見ていきたいと思います。

画像（アイキャッチ）

WordPressのオリジナルテーマを作成する場合は、まず投稿ページにアイキャッチ画像を有効化する必要があります。

アイキャッチを有効化する方法は、WordPressオリジナルテーマの作り方③（functions.php編）で解説しています。

まずは、先ほどのベースとなるコードからアイキャッチの部分を見てみます。

『imgタグ』を以下のテンプレートタグに置き換えます。

<!-- 変更前 -->
<img src="画像パス" class="sample-img" alt="チワワ" />

<!-- 変更後 -->
<?php the_post_thumbnail(); ?>

これでアイキャッチは表示されるようになりました・・・が、変更前についていたclass="sample-img"がなくなってしまった。

なので、変更する時点でclass名が表示されるように設定します。

<!-- 変更前 -->
<img src="画像パス" class="sample-img" alt="チワワ" />

<!-- 変更後 -->
<?php the_post_thumbnail('post-thumbnail', array('class' => 'sample-img', 'alt' => the_title_attribute('echo=0'))); ?>

この'class' => 'sample-img'が、class名を付ける所になります。

これで、変更前と同じclass名が付いて出力されます。

もし、class名の表示が不要であればこれでOKです。

<!-- class名が不要な場合 -->
<?php the_post_thumbnail('post-thumbnail', array('alt' => the_title_attribute('echo=0'))); ?>

alt属性ですが、ここで'alt' => 'チワワ'とすれば、この新着記事に表示される画像のalt属性は全部『チワワ』になってしまうので、ここでは『alt属性＝タイトル』になるようにしています。

あとは、第1引数である'post-thumbnail'ですが、ここはサイズに関する項目です。

種類としては、以下になります。

'post-thumbnail'（設定なし）
'thumbnail'（サムネイル：150×150）
'medium' （中サイズ：300×300）
'large'（大サイズ：640×640）
'full'（フルサイズ）

今回設定なしにしているのは、class名でwidthとheightを指定しているので、ここで設定する必要がないということです。

他にも設定できることがあるので、興味があったら調べてみて下さい。

カテゴリー

カテゴリーの表示は、以下になります。

<!-- 変更前 -->
<div>
  カテゴリー名
</div>

<!-- 変更後 -->
<div>
  <?php
    $category = get_the_category();
    echo '<span class="'.$category->slug.'">'.$category[0]->name.'</span>';
  ?>
</div>

ちなみにカスタム投稿の場合、カテゴリーに相当する箇所をカスタムタクソノミーにしていればこうなります。

<!-- カテゴリー1つ表示 -->
<?php
  $taxonomy_terms = get_the_terms($post->ID, 'タクソノミースラッグ'); 
  if ( $taxonomy_terms ) {
    echo '<span>'.$taxonomy_terms[0]->name.'</span>';
  }
?>

カテゴリーについては以上になります。

日付

続いて日付です。

<!-- 変更前 -->
<time datetime="2022-01-01">
  2022年1月1日
</time>

<!-- 変更後 -->
<time datetime="<?php the_time('Y-m-d'); ?>">
  <?php the_time('Y年m月d日'); ?>
</time>

日付のところを、<?php the_time('Y年m月d日'); ?>というテンプレートタグに置き換えます。

今回は〇年〇月〇日という表示にしましたが、<?php the_time('Y/m/d'); ?>とすれば『〇/〇/〇』と表示させたり、他にも時間を表示させることも可能です。

気になる方は、the_timeで調べてみると色々な表示方法が見つかると思います。

ちなみに2022年の場合、Yが大文字だと2022となり、小文字のyだと22となります。

更新日を表示したい場合

上の例では投稿日の表示となりますが、更新日を表示したい場合は<?php the_modified_time('Y-m-d'); ?>となります。

datetime属性

datetime属性を設定すると日時以外の内容をtime要素内に記述出来るようになります（<time datetime="2022-01-01">今日</time>など）。
またYYYY-MM-DDという形式で指定することが推奨されているで、ここは<?php the_time('Y-m-d'); ?>の表記にしておきましょう。

タイトル

これは、『愛犬撮影会（チワワ）』の部分ですね。

<!-- 変更前 -->
<h3>
  愛犬撮影会（チワワ）
</h3>

<!-- 変更後 -->
<h3>
  <?php the_title(); ?>
</h3>

以上です。

本文

ここに関しては少し長くなるので、以下の記事を参照下さい。

出力する投稿記事のタイトルと本文の文字数を制限する方法は、こちらの記事を参照下さい。

あわせて読みたい

: 【WordPress】出力する投稿記事のタイトルと本文の文字数を制限する方法
続きを見る

文字数制限(行数制限)して3点リーダーを表示させる方法は、こちらの記事を参照下さい。

あわせて読みたい

: 【CSS】文字数制限(行数制限)して3点リーダーを表示させる方法（複数行、IE対応）
続きを見る

リンク先の設定

以上でブログカードに各情報を表示させることが出来るようになりましたが、このままではクリックしても投稿ページに飛びません。

なので、ブログカードを囲っているaタグに以下のテンプレートタグを書きます（ブログカード全体をクリック範囲とする場合）

<!-- 変更前 -->
<a href="">
  ブログカード全体
</a>

<!-- 変更後 -->
<a href="<?php the_permalink(); ?>">
  ブログカード全体
</a>

hrefの中に、<?php the_permalink(); ?>を入れました。

これでOKです。

表示させる新着記事の数

ようやく最後の項目です。

まずは、これまで反映させてきた状態を見てみましょう。

<li class="">
  <!-- 記事へのリンク -->
  <a href="<?php the_permalink(); ?>" class="">
    <!-- アイキャッチ -->
    <div class="">
      <?php the_post_thumbnail('post-thumbnail', array('alt' => the_title_attribute('echo=0'))); ?>
    </div>
    <p class="">
      <!-- 投稿日 -->
      <time datetime="<?php the_time('Y.n.j'); ?>">
        <?php the_time('Y.m.d'); ?>
      </time>
    </p>
    <div class="">
      <!-- カテゴリー1件表示(カテゴリー順の上にある方が表示される) -->
      <?php
        $category = get_the_category();
        echo '<span class="'.$category->slug.'">'.$category[0]->name.'</span>';
      ?>
    </div>
    <h2 class="">
      <!-- タイトル -->
      <?php the_title(); ?>
    </h2>
    <div class="">
      <!-- 本文の抜粋 -->
      <?php the_excerpt(); ?>
    </div>
  </a>
</li>

ここではliタグが1つしかありませんが、今回の例ではブログカードは3つなので、liタグは3つになります。

しかし、WordPressでは1記事分だけ書いてあれば大丈夫で、これを繰り返し処理＝ループさせます。

今回は、新着3記事分だけループさせます。

<!-- 記事のループ処理開始 -->
<?php
  if( wp_is_mobile() ){
    $num = 3; //スマホの表示数(全件は-1)
  } else {
    $num = 3; //PCの表示数(全件は-1)
  }
  $args = [
    'post_type' => 'post', // 投稿タイプのスラッグ(通常投稿なので'post')
    'posts_per_page' => $num, // 表示件数
  ];
  $the_query = new WP_Query( $args );
  if ( $the_query->have_posts() ) :
  while ( $the_query->have_posts() ) : $the_query->the_post();
?>
<li class="">
  <!-- 記事へのリンク -->
  <a href="<?php the_permalink(); ?>" class="">
    <!-- アイキャッチ -->
    <div class="">
      <?php the_post_thumbnail('post-thumbnail', array('alt' => the_title_attribute('echo=0'))); ?>
    </div>
    <p class="">
      <!-- 投稿日 -->
      <time datetime="<?php the_time('Y.n.j'); ?>">
        <?php the_time('Y.m.d'); ?>
      </time>
    </p>
    <div class="">
      <!-- カテゴリー1件表示(カテゴリー順の上にある方が表示される) -->
      <?php
        $category = get_the_category();
        echo '<span class="'.$category->slug.'">'.$category[0]->name.'</span>';
      ?>
    </div>
    <h2 class="">
      <!-- タイトル -->
      <?php the_title(); ?>
    </h2>
    <div class="">
      <!-- 本文の抜粋 -->
      <?php the_excerpt(); ?>
    </div>
  </a>
</li>
<?php endwhile; else: ?>
<p>まだ記事がありません</p>
<?php endif; ?>
<?php wp_reset_postdata(); ?>

ループさせるのはliタグなので、ulタグの内側にループさせるためのコードを書いています（ulタグは省略しています）

そして、表示させる記事数に関する記述は4・6行目になります。

今回はスマホとPC両方3件ずつの表示にしていますが、別々にすることも出来ます。

また、最後の方に『まだ記事がありません』とありますが、これはまだ投稿が1つもない時に表示されるテキストになります。