Liberty

こんにちは、yutaです。

今回は、WordPressでブログ用のオリジナルテーマを制作している方向けに、投稿記事を「カード形式」で表示する方法を解説します。カード形式というのは以下の画像のように「アイキャッチ画像(サムネイル画像)」「記事タイトル」「記事抜粋文」「続きを読むボタン」が一つの四角いカードのような形のエリアにまとめられた形式を指します。

カード形式にすることで、タイトルのみのリンクに比べ見栄えがぐっと良くなり訪問者の関心も惹きやすくなります。ECサイトなどでは良くありますよね、商品の名前だけだと興味が湧きづらいですが、画像が載っているとついクリックしちゃいたくなりますね。

そんなカード形式の投稿記事リンクを今回はBootstrapを使って実装していきます。

1.Bootstrapを知らない人向けの説明と情報リンク
1-1.Bootstrapの概要
1-2.Bootstrap情報リンク
2.Cardの基本的なコーディング
3.WordPress関数を使って、Cardの内容を記述
3-1.記事データを格納するためのクラスを作成
3-2.今回使うWordPress関数の説明
3-3.記事データ取得用関数の作成
4.Cardの各要素に取得した記事データを出力して、カード形式の投稿記事リンクを実装

1.Bootstrapを知らない人向けの説明と情報リンク

今回のカード形式投稿記事リンクの実装にはBootstrapというCSSフレームワークを利用します。非常に有名なフレームワークなのでご存知の方も多いかと思いますが、全く知らない場合は本記事を読んでも意味がわからないので、知らない方はBootstrapについて少し勉強してください。

1-1.Bootstrapの概要

Bootstrapは、CSSフレームワークでレスポンシブ対応したWebページを比較的簡単に作ることができます。グリッドシステムが有名ですが、その他にも今回利用するCard機能や、写真をスライドショーするCarousel機能、ナビゲーションメニューを作成するためのNavbar機能など便利な機能がたくさんあります。

誰でも無料で利用ができます。公式サイトは英語ですが、ググるとBootstrapについて丁寧に解説してある日本語記事がたくさんありますので非常に参考になります。公式サイト自体にもサンプルが豊富に載っていて分かりやすいです。

1-2.Bootstrap情報リンク

Bootstrapの導入方法については以前記事を書いたので以下を参考にしてください。

Bootstrapによるレスポンシブ対応の基礎

今回の実装で利用するCard機能については以下を参考にしてください。

【Bootstrap】Cardの使い方4パターンを紹介

2.Cardの基本的なコーディング

以下は、BootstrapのCardを使った基本的なコードです(Bootstrapの公式ページのサンプルのコピペ)。

<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

これからやる主な事は以下の通りです。

・imgタグに表示するアイキャッチ画像のURLを指定
・h5タグに記事タイトルを設定
・pタグに記事の抜粋文を設定
・aタグに記事へのリンクを貼って、”続きを読む”ボタンを実装

また、最初の行でstyle属性にwidth:18remが設定されていますがこれは削除して、CardのサイズはCSS側で指定します。

3.WordPress関数を使って、Cardの内容を記述

これからWordPress関数を使って、Cardの内容として含める記事データを取得していきます。取得した記事データを後で取り出しやすい形で保存するために、専用のクラスを自作していきます。ここからは、PHPの基礎知識が必要ですので、全く知らない方はPHPの基礎を勉強してください。PHPの基礎学習には「ドットインストール」というプログラミング学習サイトがおすすめです。僕もここで知識0から学習しました。基本的に無料で利用できるので有料の書籍を購入する必要はありません(もちろん購入しても全然OKです)。また、ドットインストールは月々980円の有料プランがあり、有料会員はより高度なプログラムを学べたり、ソースコードの検索、文字起こしの閲覧など利用できるサービスが増えます。月々1,000円以下はかなり手頃ですし、Netflixなどを利用するくらいの気持ちで1ヶ月くらい試してみてもいいかもしれませんね。以下にリンクを貼っておきます。

ドットインストール(PHP入門)
PHPプログラミングの基礎が学べます。

ドットインストール(ローカル開発環境の構築:macOS)
PHPを学習する際にはローカル開発環境が必要ですが、その環境構築方法を解説してあります。macOS用です。

ドットインストール(ローカル開発環境の構築:WindowsOS)
上記のWindowsOS用です。

3-1.記事データを格納するためのクラスを作成

WordPress関数を使って記事データを取得していきますが、取得した記事データを後で読み出しやすいように独自のクラスを作成していきます。作成したクラスは以下の通りです。

class ArticleData{
    //property
    public $article_title;
    public $article_excerpt;
    public $article_thumbnail;
    public $article_permalink;
    //constructor
    public function __construct()
    {

    }
    //method
}

僕は先ほど紹介したドットインストールでPHPを勉強したので、クラスの書き方もドットインストールの講義そっくりだと思います(笑) 上記コードを見て意味がわからない方は、ドットインストールで勉強してください(なんだかドットインストールの宣伝記事みたいになってきたのでこの辺にしておきます)。

このArticleDataクラスでは、4つのプロパティを宣言しています。それぞれの役割は以下の通りです。

・$article_title : 記事のタイトル格納用
・$article_excerpt : 記事の抜粋文格納用
・$article_thumbnail : 記事のアイキャッチ画像格納用
・$article_permalink : 記事のパーマリンク格納用

コンストラクタやメソッドは一切作っていません。

3-2.今回使うWordPress関数の説明

今回、先ほど作成したArticleDataクラスの各プロパティに格納する記事データを取得するためにいくつかのWordPress関数を利用しますが、それらの関数について簡単な説明をしておきます。

・get_the_title() : 現在の記事のタイトルを取得します。
・get_the_excerpt() : 現在の記事の抜粋文を取得します。
・get_permalink() : 現在の記事のパーマリンクを取得します(指定したIDのパーマリンクも取得可)。
・get_the_postthumbnail($post_id, $size, $attr) : 現在の記事のアイキャッチ画像を取得します(指定したIDのアイキャッチ画像も取得可)。引数が3つありますが、$post_idは記事ID、$sizeはアイキャッチ画像のサイズ(thumbnail, medium, large, full , array(w, h)のいずれかを指定)、$attrはアイキャッチ画像用の要素に付加する独自クラスです。

これら以外にもWordPress関数を使用しますが、その都度解説します。

3-3.記事データ取得用関数の作成

まず、エディタでファイルを新規作成して.php拡張子で保存してください。名前は何でも構いませんが、僕はselfcreated-functions.phpとしました。もしくは、WordPressのオリジナルテーマを作る時には必須？のfunctions.phpを開いてそこに関数をコーディングしても良いと思います。僕は気分的に分けたかったから新しいPHPファイルを作っただけです。関数のコードは以下の通りです。

<?php
function show_posts(){
    if( have_posts() ):
        $cnt = 0;
        $articleArr[] = new ArticleData();
        //このループは、WPの設定->表示設定の「1ページに表示する最大投稿数」に記載された数だけ繰り返す
        while( have_posts() ): the_post();
            switch($cnt){
                case 0:{
                    $articleArr[$cnt]->article_title = get_the_title();
                    $articleArr[$cnt]->article_excerpt = get_the_excerpt();
                    $articleArr[$cnt]->article_permalink = get_permalink();
                    if(has_post_thumbnail()){
                        $articleArr[$cnt]->article_thumbnail = get_the_post_thumbnail(get_the_ID(),'large',array('class'=>'card-img-top'));
                    }
                    break;
                }
                case 1:{
                    $articleArr[$cnt]->article_title = get_the_title();
                    $articleArr[$cnt]->article_excerpt = get_the_excerpt();
                    $articleArr[$cnt]->article_permalink = get_permalink();
                    if(has_post_thumbnail()){
                        $articleArr[$cnt]->article_thumbnail = get_the_post_thumbnail(get_the_ID(),'large',array('class'=>'card-img-top'));
                    }
                    break;
                }
                case 2:{
                    $articleArr[$cnt]->article_title = get_the_title();
                    $articleArr[$cnt]->article_excerpt = get_the_excerpt();
                    $articleArr[$cnt]->article_permalink = get_permalink();
                    if(has_post_thumbnail()){
                        $articleArr[$cnt]->article_thumbnail = get_the_post_thumbnail(get_the_ID(),'large',array('class'=>'card-img-top'));
                    }
                    break;
                }
            }
            $cnt++;
        endwhile;
    endif;
    return $articleArr;
}

関数名は、show_postsとしています(後々考えるとget_postsの方が機能に合ってて良かったですね)。

have_posts()は、表示できる記事があるかをboolean型(true/false)で返す関数です。if文で分岐処理していますが、記事がある場合は変数$cntの宣言と、先ほど作成したArticleDataクラスのインスタンス$articleArr[]を生成します。ここで、配列にしているのは取得する記事データが複数あるからです。ちなみに、if文の条件の後に:(コロン)を記載しているのはコロン構文というものです。

while文でもhave_posts()を使っていますがここでのループは、WordPressの設定画面(wp-adminで開くあの画面)の表示設定→「1ページに表示する最大投稿数」で設定している数だけ繰り返されます。1ページに5記事表示している場合は5回繰り返し、8記事の場合は8回繰り返しです。

while文の中では、the_post()が呼び出されていますが、これは「現在の記事をセットアップ」する関数です。セットアップと言われても良くわかりませんがつまりは、この関数の後に前に説明したget_the_title()などの関数を呼び出すと現在の記事の各情報を取得できます。

今回はswitch文を利用して$cntで各記事のデータを格納する$articleArr配列のインデックスを指定しつつ、$articleArrの各プロパティにget_the_title()などを使って記事データを格納しています。

has_post_thumbnail()は、現在の記事(もしくは指定したIDの記事)にアイキャッチ画像が設定されているかどうかをboolean型で返す関数です。アイキャッチ画像が設定されていれば、get_the_thumbnail()で画像を取得します。ここで関数に渡している各引数については以下の通りです。

・get_the_ID() : 現在の記事IDを返します。
・’large’ : largeサイズ(640px × 640pxまで)のアイキャッチ画像を取得します。WordPressではアイキャッチ画像としてアップロードした画像は、自動的に複数のサイズに変換された状態で複製されます(150px × 150pxや300px × 300pxなど)。その中からどのサイズを取得するかという指定です。
・array(‘class’=>’card-img-top’) : 取得したアイキャッチ画像用のimgタグに独自のクラスを付加します。今回は、”card-img-top”という名前のクラスを付加しています。CSSでこのクラスに対して記述することでスタイルを適用できますが今回は使用していません。理由は、このように独自にクラスを付加しなくても”wp-post-image”というクラスが自動的に付加されるようになっているからです。とりあえず、あっても問題はないので残してあります。

while文の最後では$cntをインクリメントしてカウントアップしています。本記事では、1ページに表示する記事数が3という設定でswitch文を書いていますが、もしも1ページに表示する記事数が5であれば、その分caseを増やしてください(case 4とcase 5を追加)。

最後にreturn $articleArrで取得した記事データを返します。これをしないと、関数を実行した後にせっかく取得した記事データが使えないのでreturnは忘れないでください。

4.Cardの各要素に取得した記事データを出力して、カード形式の投稿記事リンクを実装

各記事のデータを取得するための関数ができたので、あとは表示させたい場所で関数を呼び出して記事データを取得してから、記事データを格納したクラスのプロパティにアクセスして各データを表示します。

まずはCardクラスの前で、先ほど作成したshow_posts()を以下の通り呼び出します。

<?php $articleArr = show_posts(); ?>

これで、$aticleArrに各記事のデータが格納されます(戻り値が配列なのでこの変数も配列になります)のであとは、インデックスとプロパティを指定して各記事のデータを読み出せばOKです。

さて、前にBootstrapの公式ページからコピペしてきたCardの基本的なコードがありましたね(以下にもう一度記載します)。

<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

これを取得した記事データを表示する様に書き換えていきます。書き換えたコードは以下の通りです。

<div class="card">
   <div class="thumbnail-area">
      <?php echo $articleArr[0]->article_thumbnail; ?>
   </div>
   <div class="card-body">
      <h5 class="card-title"><?php echo $articleArr[0]->article_title; ?></h5>
      <p class="card-text"><?php echo $articleArr[0]->article_excerpt; ?></p>
      <a href="<?php echo $articleArr[0]->article_permalink; ?>" class="btn btn-light read-btn btn-block">続きを読む</a>
   </div>
</div>

とりあえず、1行目のdivタグで指定されていたstyle属性は削除します(widthはCSS側で設定するので)。

それから、imgタグは削除して<div class=“thumbnail-area”>を作成した後、<?php echo $articleArr[0]->article_thumbnail; ?>で1つ目の記事のアイキャッチ画像を出力します。このarticle_thumbnailに格納されているデータにはimgタグが含まれているので、わざわざimgタグを記述する必要はありません。また、echoしないと出力されないので忘れないようにしてください。

次に、h5タグの中身を<?php echo $articleArr[0]->article_title; ?>として、1つ目の記事のタイトルを出力します。article_titleにはh5タグが含まれていないので記載する必要があります。

次に、pタグの中身を<?php echo $articleArr[0]->article_excerpt; ?>として、1つ目の記事の抜粋文を表示します。

ところで、article_excerptに格納しているデータを取得する時に、get_the_excerpt()という関数を使用しましたが、この関数はWordPressで新規記事を作成もしくは編集する際の画面にある「抜粋」というエリアに文章を記載していればそれが取得され、そこが空欄であれば記事の最初の55文字が取得されます。

次に、aタグを<a href=“<?php echo $articleArr[0]->article_permalink; ?>” class=“btn btn-light read-btn btn-block”>続きを読む</a>とします。$articleArr[0]->article_permalinkで、1番目の記事のパーマリンクをaタグのリンク先に設定します。今作っているのは「続きを読むボタン」なので、BootstrapのButton機能を利用してそれらしいデザインにしています(btn, btn-light, btn-blockクラスがBootstrapでButton機能を使う時のクラスです)。read-btnクラスでは、CSS側でボタン配置の指定をしています。

これで基本的には実装完了ですが、CSS側でCardのスタイルを記述してサイズや配置を整えます。記述するCSSコードは以下の通りです。

.card{
    width: 300px;
    height: 300px;
}

.card-body{
    position: relative;
    height: 50%; /*これを指定しないと、抜粋文が長い時にアイキャッチ画像エリアに文章が入り込んで行く。*/
    overflow: hidden; /* 抜粋文が長くてoverflowする場合は非表示。*/
}

.read-btn{
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}

.wp-post-image{
    width: 100%;
    height: auto;
}

.thumbnail-area{
    width: 100%;
    height: 50%;
    overflow: hidden;
}

実際に使用する際には、自分の表示させたいデザインに合わせてカスタマイズしていく必要があると思いますが、とりあえずこれで300px × 300pxサイズのカード形式の投稿記事リンクを表示できました。

ブログ記事用にコードを若干省略したりしているので、もしかするとコード漏れなどあるかもしれません。お気づきになられた方はコメントなどで教えていただけると幸いです。また、本記事が参考になったという方は是非SNSでのシェアや、コメントなど頂けるとありがたいです。ではまた！  

ブログランキングに参加していますので、僕のモチベアップの為にもバナーを押していただけると嬉しいです！(※別タブで開きます)