オリジナルテーマ WordPress

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

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

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

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

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

今だけ!5大無料特典あり🎁

コーディングの時給アップにはこちら!


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. 画像(アイキャッチ)
  2. カテゴリー
  3. 日付
  4. タイトル
  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】出力する投稿記事のタイトルと本文の文字数を制限する方法
【WordPress】出力する投稿記事のタイトルと本文の文字数を制限する方法

続きを見る

参考記事
【CSS】文字数制限(行数制限)して3点リーダーを表示させる方法(複数行、IE対応)
【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つもない時に表示されるテキストになります。


まとめとおまけ

今回の内容ですが、以下のような設定も可能です。

  • カテゴリーを全部表示
  • カスタム投稿で表示
  • カスタム投稿のタームを指定
  • タームを全部表示
  • タームを指定して表示
  • タームを除外して表示

これらの設定方法は以下のコーディング&WordPressメモまとめ集コピペ出来るように掲載しています。

コーディングの時給と作業効率を上げる!
2年間の実務で実際に使ったコードをまとめた『コーディング&WordPressメモまとめ集』をBrainで公開しています。
  • コピペで使えるWordPressの各テンプレート
  • 実務でよく使う見出し一覧
  • 実務でよく使うテキストのhoverアニメーション
  • 実務でよく使うボタン内の矢印9種類
  • Contact Form 7の色々・・・
などなど、他にもコピペで使えるコードがたくさん載せてあるので、時短=時給アップに繋がります。
さらに『コードのまとめ方が参考になった』というレビューも多数頂いているので、これを元に自分なりの"メモまとめ集"を作るという使い方も出来ます。
レビューは390件以上あるので、気になる方は以下のボタンからチェックしてみて下さい👇

今だけ!5大無料特典あり🎁

販売ページとレビューを見てみる

関連記事WordPressオリジナルテーマ関連記事

 

WordPressオリジナルテーマ制作のおすすめ教材5選!

勉強方法は書籍、動画、プログラミングスクールなど色々あり、個人によって向き不向きがあると思います。

そこでタイプごとにご紹介させて頂きたいと思いますが、その前におすすめの勉強方法は以下になります。

  1. 分かるところまでどんどん進める
  2. 勉強に詰まる
  3. 無視して次に進む or 他の教材などを使う
  4. もう一度詰まった場所を見てみる
  5. 理解できるようになっている

これからご紹介する教材と一緒にこのブログを読み進めて頂けると、より理解が深まるかと思います。

 

書籍

WordPressに関する本も沢山ありますが、ここでおすすめするのは2冊です。

 

いちばんやさしいWordPressの教本

こちらは以前私が持っていた本で、タイトル通りやさしいというかWordPressを1から勉強したい人向けの内容となっています。

Lightningという無料のWordPressテーマを使った制作方法など載っています。

ちなみにLightningを使ったサイト制作についてはこちらのブログでもご紹介しています。

Lightningを使ってサイト作成(前編)

Lightningを使ってサイト作成(後編)

 

初心者からちゃんとしたプロになる WordPress基礎入門

こちらは私も個人的にお世話になっているちづみさんが書かれた本になります。

WordPressの本はこれまで何冊か購入しましたが、ダントツで読みやすいです。

ちなみに私が初めてにして唯一購入したコーディング教材がちづみさんのnoteでした。

また、初心者から実務経験者まで活用出来る非常におすすめの本となっています(電子書籍で購入しました)

 

動画

WordPressを動画で学びたい人はこちらの教材がおすすめです。

WordPress テーマ開発講座

本と違って動画だと手を動かしながら確認出来るのでいいですね。

こちらはUdemyの有料教材ですが、かなりの頻度でセールを行っていて90%オフとか良くあるので出来ればそのタイミングを狙いましょう(私はセール時に購入しました)

『WordPressの動画教材と言えばコレ』というくらい有名な教材で、私を含め周りでも購入している人がたくさんいます。

もちろんUdemyはWordPress以外の教材もたくさんあるので、気になる教材がセールをやっていたら購入を検討しても良いかも知れませんね。

 

プログラミングスクール

プログラミングスクールも色々ありますが『Web制作に特化したスクール』であればデイトラ一択かと思います。

開校1年で受講生が7000人を突破したオンラインスクールで、スクールと言ってもオンラインなので自宅で受講することが出来ます。

WordPressのカリキュラムは『Web制作コース上級編』にあります。

デイトラはTwitterをやっていれば分かりますが、悪い評判は見たことがなく、叩かれやすいWeb制作業界において非常にクリーンなイメージです。

カリキュラムの質が高いのはもちろん、他のスクールと比べて圧倒的なコスパかつ買い切りとなっています。

そしてカリキュラムはどんどん更新されるので『情報が古い』ということもなく、メンターに質問が出来る点も独学だと挫折しやすいWeb制作の勉強においてはおすすめです。

私の周りも『Web制作を始めるならまずデイトラを勧める』という人も多いです。

デイトラの無料レッスン動画はこちら

 

"誰でも月収50万円以上"を達成可能にする】初心者向け実践型WordPress教材

これはBrainという知識共有プラットフォームで販売されている教材になります(👇画像クリック出来ます)

【"誰でも月収50万円以上"を達成可能にする】初心者向け実践型WordPress教材

こちらは学習面以外にも制作会社とのやり取りの流れや、特典では『作業前・納品前のチェックシート』『営業文のサンプル』『見積もり計算シート』など『実務に対する不安を払拭できる内容』となってます。

LP1本のコーディング費が安くても3万円くらいだと考えれれば、軽く1日で回収出来るので早めに『安心』を購入しましょう。

詳細はこちらからどうぞ👇

今だけ!購入者限定の10大特典付き🎁

WordPress案件の不安を払拭!


ブログランキング・にほんブログ村へ
  • この記事を書いた人

じゅんぺい

タイ・バンコク在住のWeb制作フリーランス兼ブロガー▶︎37歳からWeb制作を開始▶︎コーディングとWordPressのオリジナルテーマ制作でこれまで80件以上納品▶︎Web制作中心の当ブログは月間最高8.4万PV▶︎Twitterのフォロワーは6100人▶︎コーディングとWordPressのコンテンツを販売し、3日で500部突破&250万円&人気1位獲得 → 累計700部&420万円突破

-オリジナルテーマ, WordPress