オリジナルテーマ WordPress

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

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

前回までに以下の事をやってきました。

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

ブログカードとは?

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

普通のリンクであれば、

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

という感じになります。

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

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

ベースとなるコードはこちらになります(1枚のカードに相当する部分で、class名は書いていません)

<li>
  <a href="記事へのリンク">
    <div>
      <img src="img/blog1.jpg" class="blog-img" alt="チワワ" /> //アイキャッチ
    </div>
    <div>
      <div>
        チワワ
      </div>
      <time datetime="2021-01-01">2021年1月1日</time>
      <h3>
        愛犬撮影会(チワワ) // タイトル
      </h3>
      <div>舌がチョロッと出ているチワワちゃん。飼い主さんも思わず触ってしまいます。</div> // 本文
    </div>
  </a>
</li>

 

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

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

  1. 画像(アイキャッチ)
  2. カテゴリー
  3. 日付
  4. タイトル
  5. 本文

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

 

画像(アイキャッチ)

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

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

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

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

<!-- /変更前 -->
<img src="img/blog1.jpg" class="blog-img" alt="チワワ" />

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

これでアイキャッチは表示されるようになりました・・・が、

変更前についていたclass="blog-img"がなくなってしまった。

なので変更する時点でclass名を設定します。

<!-- /変更前 -->
<img src="img/blog1.jpg" class="blog-img" alt="チワワ" />

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

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

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

もしclass名を付けていなければこれでOKです。

<?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名 blog-img でwidthとheightを指定しているので、ここで設定する必要がないということです。

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

 

カテゴリー

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

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

<!-- /変更後 -->
<div><?php $cat = get_the_category(); $cat = $cat[0]; { echo $cat->cat_name; } ?></div>

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

<div>
  <?php
    $terms = get_the_terms($post->ID, 'タクソノミースラッグ');
    if ( $terms ) {
      echo $terms[0]->name;
    }
  ?>
</div>

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

 

日付

続いて日付です。

<!-- /変更前 -->
<time datetime="2021-01-01">
  2021年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 で調べてみると色々な表示方法が見つかると思います。

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

 

更新日を表示したい場合

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

datetime属性

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

 

タイトル

これは「愛犬撮影会(チワワ)」の部分ですね。

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

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

以上です。

 

本文

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

WordPressで出力する投稿記事本文の文字数を制限する方法

文字列の行数を制限して3点リーダーを表示させる方法【複数行、IE対応】

 

リンク先の設定

以上でトップページに表示させることが出来るようになりましたが、このままではクリックしても投稿ページに飛びません。

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

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

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

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

これでOKです。

 

表示させる新着記事の数

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

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

<ul>
  <li>
    <a href="<?php the_permalink(); ?>"> //記事へのリンク
      <div>    
        <img src="<?php the_post_thumbnail('post-thumbnail', array('alt' => the_title_attribute('echo=0'))); ?>" /> //アイキャッチ
      </div>   
        <div>    
         <div>
           <?php $cat = get_the_category(); $cat = $cat[0]; { echo $cat->cat_name; } ?> //カテゴリー名
         </div>   
         <time datetime="<?php the_time('Y-m-d'); ?>">
           <?php the_time('Y年m月d日'); ?> //投稿日
         </time>
         <h3>
           <?php the_title(); ?> //タイトル
         </h3>   
         <div>
           <?php the_excerpt(); ?> //本文の抜粋
         </div>
      </div>   
    </a>
  </li>
</ul>

ここではliタグが1つしかありませんが、コーディング時は3つあったかと思います。

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

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

<ul>
  <?php $args = array(
    'posts_per_page' => 3, //表示する記事の数
    );
    $customPosts = get_posts($args);
    if($customPosts) : foreach($customPosts as $post) : setup_postdata( $post );
  ?>
  <li>
    <a href="<?php the_permalink(); ?>"> //記事へのリンク
      <div>    
        <img src="<?php the_post_thumbnail('post-thumbnail', array('alt' => the_title_attribute('echo=0'))); ?>" /> //アイキャッチ
      </div>   
        <div>    
         <div>
           <?php $cat = get_the_category(); $cat = $cat[0]; { echo $cat->cat_name; } ?> //カテゴリー名
         </div>   
         <time datetime="<?php the_time('Y-m-d'); ?>">
           <?php the_time('Y年m月d日'); ?> //投稿日
         </time>
         <h3>
           <?php the_title(); ?> //タイトル
         </h3>   
         <div>
           <?php the_excerpt(); ?> //本文の抜粋
         </div>
      </div>   
    </a>
  </li>
  <?php endforeach; ?>
  <?php else : //記事が無い場合 ?>
  <p>このカテゴリーにはまだ記事がありません</p>
  <?php endif; wp_reset_postdata(); //クエリのリセット ?>
</ul>

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

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

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

以上になります。

 

お疲れ様でした!

-オリジナルテーマ, WordPress