ワードプレスで「サムネ付き関連記事カード」を自作する

サムネ付き関連記事カード自作方法解説ページのアイキャッチ

SHARE

このページにはプロモーションが含まれています

このページでは下のような「サムネ（サムネイル）付き関連記事カード」を自作する方法について解説します。

サムネ付き関連記事カードの例１

私のウェブサイトでもサムネ付き関連記事カードをよく使用していますが、特にウェブサイト内への内部リンクを貼るのに便利です。

また、サムネが表示されるので、記事の内容も直感的に伝えられますし、画像付きなのでウェブページとしても華やかになります。

このページではこの「サムネ付き関連記事カード」の作成し、それをショートコードで表示する方法を解説します。

このページで作成するカードは最終的に下のようなものになります。

サムネ付き関連記事カードの例２

サムネ付き関連記事カードの作り方

サムネ付き関連記事カードをショートコードで表示するためには、主に以下の４つのことを行います。

  • ショートコードを作成する
  • カードの中身を出力する
  • カード全体にリンクを貼る
  • カードにスタイルを設定する

まず、「サムネ付き関連記事カード」を表示するためのショートコードを作成します。ここで作成するのはショートコードの枠組みだけで、何も表示されないショートコードをまず作成します。

次に、ショートコードを投稿画面で記述した際に、ページにカードの中身のサムネイルとタイトルを出力（表示）するようにします。

カードの中身を表示する様子

さらに、カード全体にリンクを貼ります。これによりカードをクリックすることで関連記事に飛べるようになります。

カード全体にリンクを貼る様子

最後に仕上げとしてカードのスタイルを設定し、見た目を整えます。これによりカードっぽく関連記事リンクを表示することができます。

カードにスタイルを設定する様子

それではこれら４つの手順を実施するためのプログラムの作り方を具体的に説明していきたいと思います。

注意

サムネ付き関連記事カードを表示するためには functions.php と style.css を変更する必要があります。バックアップをとってから functions.php と style.css を変更するようにしてください。

ショートコードを作成する

まず最初に「サムネ付き関連記事カード」を表示するためのショートコードの作成方法について解説します。

といっても、前述のとおりここで作るのはショートコードの枠組みだけで、実際に「サムネ付き関連記事カード」を表示するのは、次のカードの中身を出力する以降になります。

また、ショートコードの作り方は下のページで解説をしていますので、詳細を知りたい方はこちらも参考にしてください。

ショートコード作成方法解説ページのアイキャッチ 【ワードプレス】テーマの作り方⑦：ショートコードを自作する

ここでは「サムネ付き関連記事カード」を表示するショートコードを作成するために必要なプログラムについてのみ解説していきます。

スポンサーリンク

カードを表示するための関数を作成する

まず functions.php の <?php 〜 ?> に下記に追記し、サムネ付き関連記事カードを表示する関数 my_related_card_func を定義します。

functions.php 
<?php
/**
 * サムネ付き関連記事カードを表示する関数
 */
function my_related_card_func( $atts ) {

	/* 投稿IDのチェック。問題ある場合はエラー表示 */
	if ( empty( $atts ) || empty( $atts['id'] ) ) {
		return '投稿IDが不正です';
	}

	$id = intval( $atts['id'] );
	if ( $id < 1 ) {
		return '投稿IDが不正です';
	}

	$output = '';

	return $output;
}
?>
引数 $atts は、ショートコードの属性で指定した値が格納された配列であり、id 属性で指定された投稿 ID は $atts[‘id’] に格納されることになります（一応この $atts[‘id’] に対するエラー処理のみを行っています）。

まだ何も出力されませんが、カードの中身を出力する以降でこの関数を拡張していくことで、サムネ付き関連記事カードを表示できるようにしていきます。

カードを表示するショートコードを作成する

続いてショートコードの作成（登録）を行います。

作成するのは下記のような、タグ名が my-related-card で、id に投稿 ID を指定するショートコードとなります。

[my-related-card id="187"]

下記を追記して ‘my-related-card’ というショートコードタグと先ほど定義した my_related_card_func 関数を紐付けします。

/* サムネ付き関連記事カードを表示するショートコードを追加 */
add_shortcode( 'my-related-card', 'my_related_card_func' );

追記するのは my_related_card_func 関数の定義の直後で良いです。

これにより、my-related-card ショートコードタグが登録され、my-related-card ショートコードを投稿画面から使用できるようになります。

ページ表示時には my_related_card_func 関数が実行され、その戻り値が HTML と出力されてブラウザに表示されます。

ひとまずこれで「サムネ付き関連記事カード」を表示するためのショートコード ‘my-related-card’ を作成し、ショートコードが記述された投稿をページ表示する際に  ‘my_related_card_func’ 関数が実行されるようになりました。

ここからは my_related_card_func 関数を拡張して実際に「サムネ付き関連記事カード」が表示できるようにするための方法を解説していきます。

カードの中身を出力する

続いてはカードの中身としてサムネイルとタイトルの出力を行います。

カードの中身を表示する様子

スポンサーリンク

サムネイルを表示する

ワードプレスでは、サムネイルとは「アイキャッチ画像を小さくしたもの」と考えられます。ですので、サムネイル表示はアイキャッチ画像を小さなサイズにリサイズし、それを表示するだけで行うことができます。

アイキャッチ画像のリサイズは functions.php に下記の黄色背景部分のように add_image_size の処理を追記することで実現できます。

add_theme_support( 'post-thumbnails' );
add_image_size( 'related-thumb', 160, 160, true );

記述するのは add_theme_support( 'post-thumbnails' ); の直後で良いです。

MEMO

アイキャッチ画像がサポートされていないテーマの場合は、この add_theme_support( 'post-thumbnails' ); の処理が記述されていません。

このような場合はまずはアイキャッチ画像のサポートを行う必要があります。

この辺りは下記のページで解説していますので参考にしていただければと思います。

アイキャッチ表示解説ページのアイキャッチ 【ワードプレス】テーマの作り方⑨：アイキャッチ画像を表示する

これにより、アイキャッチ画像登録時に 160 x 160 px にリサイズしたサムネイル画像が生成されるようになります。

add_image_size はアイキャッチ画像のサイズを追加する関数で、各引数は下記を表しています。

  • 第１引数：サイズを表すキーワード
  • 第２引数：画像の横サイズ
  • 第３引数：画像の縦サイズ
  • 第４引数：クロップするかどうかの設定値

ですので、この辺りはご自身の好みに合わせて設定していただければ良いです。詳細は下記ページで解説していますので必要に応じて参照していただければと思います。

アイキャッチ画像表示の仕組みを解説するページのアイキャッチ ワードプレスのアイキャッチ画像表示・リサイズの仕組みを解説

続いてリサイズ後のアイキャッチ画像の表示について説明します。

リサイズ後のアイキャッチ画像を表示する HTML は、get_the_post_thumbnail 関数を実行することで取得することができます。

$image = get_the_post_thumbnail( $id, 'related-thumb' );

get_the_post_thumbnail 関数は、第１引数で指定した投稿記事に登録されているアイキャッチ画像のサムネイル（上記の場合は ‘related-thumb’ が表すサイズにアイキャッチ画像をリサイズした画像）を表示する HTML を作成し、その HTML を返却する関数になります。

上記により $image にその HTML が格納されますので、$image を出力してやれば、サムネイルが表示できることになります。実際にどう出力するかはタイトル表示と合わせて後述します。

タイトルを表示する

タイトルは get_the_post を実行することで取得することができます。

$title = get_the_title( $id );

get_the_title 関数は、引数で指定された投稿 ID に対応する投稿のタイトルを返却する関数です。

上記により $title にそのタイトルが格納されますので、この $title を出力することでタイトルをページに表示することができます。

ここまでを踏まえてサムネイルとタイトルを表示するには、my_related_card_func 関数を下記のように変更すれば良いです（黄色背景部分が変更部分です）。

/**
 * サムネ付き関連記事カードを表示する関数
 */
function my_related_card_func( $atts ) {

	/* 投稿IDのチェック。問題ある場合はエラー表示 */
	if ( empty( $atts ) || empty( $atts['id'] ) ) {
		return '投稿IDが不正です';
	}

	$id = intval( $atts['id'] );
	if ( $id < 1 ) {
		return '投稿IDが不正です';
	}

	$image = get_the_post_thumbnail( $id, 'related-thumb' );
	$title = get_the_title( $id );

	$output = '';

	$output = $output . $image;
	$output = $output . '<div class="my-card-content">';
	$output = $output . '<span class="my-card-title">';
	$output = $output . $title;
	$output = $output . '</span>';
	$output = $output . '</div>';

	return $output;
}

span タグ要素も追加していますが、これはカードにスタイルを設定するでスタイル設定を行うためです。

この状態で適当な記事の投稿画面で下記のようにショートコードを追記してみましょう。

[my-related-card id="187"]

id には関連記事として表示したい記事の投稿 ID を指定します。投稿 ID は記事の投稿画面（編集画面）のアドレスバーで確認できます。

投稿IDの確認方法

ページ表示を行うと、id に指定した投稿 ID の投稿記事のサムネイルとタイトルが表示されるはずです。

サムネイルとタイトルを表示した結果

サムネイルの画像サイズが add_image_size で指定したものと異なる場合は、アイキャッチ画像を登録し直すと修正される可能性が高いです。

とりあえずサムネとタイトルが表示されるようになったので、後はこれを関連記事カードっぽく仕上げていきます。

カード全体にリンクを貼る

次はカードをクリックすることで関連投稿記事をページ表示できるようにリンクを貼ります。

カード全体にリンクを貼る様子

サムネイルとタイトルを div タグで囲む

まずはサムネイルとタイトルをカードのように四角で囲むために、サムネイルとタイトルを表示する HTML を div タグ要素で囲みます。

具体的には my_related_card_func 関数を下記のように変更します。

/**
 * サムネ付き関連記事カードを表示する関数
 */
function my_related_card_func( $atts ) {

	/* 投稿IDのチェック。問題ある場合はエラー表示 */
	if ( empty( $atts ) || empty( $atts['id'] ) ) {
		return '投稿IDが不正です';
	}

	$id = intval( $atts['id'] );
	if ( $id < 1 ) {
		return '投稿IDが不正です';
	}

	$image = get_the_post_thumbnail( $id, 'related-thumb' );
	$title = get_the_title( $id );

	$output = '';
	$output = $output . '<div class="my-card">';
	$output = $output . $image;
	$output = $output . '<span class="my-card-title">';
	$output = $output . $title;
	$output = $output . '</span>';
	$output = $output . '</div>';

	return $output;
}

これにより、サムネイルとタイトルが div タグ要素で囲まれます。div タグ要素をカードと見立てれば、イメージとしてはカード上にサムネイルとタイトルが配置されているようになります。

カードの中身がdivで囲まれる様子

スポンサーリンク

さらにその div タグ要素にリンクを貼ります。これは先程追加した div タグ要素を a タグ要素で囲むだけです。

a タグの href 属性には下記関数を実行して取得できる URL を指定します。引数に投稿 ID を指定することで、そのページの URL を取得でき、$link にその URL が格納されます。

$link = get_the_permalink( $id );

my_related_card_func 関数を下記のように変更することで、div タグ要素にリンクを貼ることができます。

/**
 * サムネ付き関連記事カードを表示する関数
 */
function my_related_card_func( $atts ) {

	/* 投稿IDのチェック。問題ある場合はエラー表示 */
	if ( empty( $atts ) || empty( $atts['id'] ) ) {
		return '投稿IDが不正です';
	}

	$id = intval( $atts['id'] );
	if ( $id < 1 ) {
		return '投稿IDが不正です';
	}

	$image = get_the_post_thumbnail( $id, 'related-thumb' );
	$title = get_the_title( $id );
	$link  = get_the_permalink( $id );

	$output = '';
	$output = $output . '<a href="' . $link . '" class="my-card-link">';
	$output = $output . '<div class="my-card">';
	$output = $output . $image;
	$output = $output . '<span class="my-card-title">';
	$output = $output . $title;
	$output = $output . '</span>';
	$output = $output . '</div>';
	$output = $output . '</a>';

	return $output;
}

div 要素で囲まれた部分全体にリンクが貼られますので、ちょうどカード全体がリンクになっているような感じになります。

カード全体にリンクが貼られる様子

ショートコードを記述した状態で、ページを表示してみましょう。

先程は単にサムネイルとタイトルが表示されているだけでしたが、クリックしてみると投稿 ID として指定した関連記事に飛べることが確認できると思います。

またタイトルだけでなくサムネイルやその周辺もリンクになっていることが確認できると思います。

このまでで、一応「サムネ付き関連記事カード」としての機能は実現できています。

ただあまりカードに見えないので、最後に CSS でスタイル設定を行なって見た目を整えます。

カードにスタイルを設定する

最後にカードにスタイルを設定することで、よりカードっぽく、見栄えの良いものに仕上げていきます。

カードにスタイルを設定する様子

現状の HTML タグ要素のおさらい

まずはカードにリンクを貼るで紹介した my_related_card_func 関数で出力される HTML にどのようなタグ要素が含まれているかのおさらいをしたいと思います。

これを図示したものが下記となります。

各タグ要素の配置

img に付加されている class 属性は、get_the_post_thumbnail が自動的に付加してくれるものになります。

これらの要素に対してスタイル設定を行うことで、配置や見た目変更することができます。

スポンサーリンク

スタイルを設定する

それでは実際にスタイルを設定していきましょう。style.css にスタイル設定を追記し、カードの見た目を整えていきます。

カードっぽい見た目にスタイル設定する

カードっぽい見た目にするために、まずはサムネイルとタイトルを横に並べたいと思います。

これは、サムネイルとタイトルを囲っている my-card クラスの div 要素の display プロパティを flex に設定することで簡単に行えます。

.my-card {
    display: flex;
}

これだけでサムネイルとタイトルが横に並びます。

サムネイルとタイトルを横並びにした結果

さらにサムネイルとタイトルが縦方向に中央に並ぶように、align-items プロパティを center に設定します。

.my-card {
    display: flex;
    align-items: center;
}

これでサムネイルとタイトルが縦方向に中央寄せで表示されるようになります。

サムネイルとタイトルを縦方向に中央寄せした結果

さらに、box-shadow プロパティを設定し、カードの周りに影をつけて、さらにカードっぽさを出します。

.my-card {
    display: flex;
    align-items: center;
    box-shadow: 0 0 5px #888888;
}

↑ のスタイル設定を style.css に追記した結果が下記となります。これだけでもかなりカードっぽくなりましたね！

カードに影をつけた結果

あとは見た目を微調整していくだけ

あとは自分好みの見た目にするためにスタイルを設定をしていくだけです。

最初もお見せした下記のようなカードの見た目にするためには、

サムネ付き関連記事カードの例２

style.css に下記を追記すれば良いです。

.my-card {
    display: flex;
    align-items: center;
    box-shadow: 0 0 5px #888888;
    margin: 10px;
    padding: 10px;
    max-width: 90%;
    overflow: hidden;
}

a.my-card-link {
	text-decoration: none;
	color: #222222;
}

.my-card-title {
	font-size: 1.4em;
    margin-left: 20px;
}

あくまでこれは例であり、この辺りはご自身の好みに合わせていい感じにスタイル設定を行って仕上げていけば良いと思います。

まとめ

このページでは「サムネ付き関連記事カード」を自作する方法について解説しました。

このページを作ろうと思った理由は、特にワードプレスのテーマ開発初心者の方にとって良い勉強になる題材だと思ったからです。

「サムネ付き関連記事カード」を自作するためには、ショートコードやアイキャッチ画像、スタイル設定などの知識が必要ですので、自作するだけで良い復習になると思います。

今回は簡単な例を示しましたが、ここから下記のようにいろいろな応用をしていくことでテーマ開発の力がかなり付けられると思います。

  • サムネイルとタイトル以外も表示してみる
  • サイドバーに同じカテゴリの関連記事一覧を表示してみる
  • ショートコードに id 以外も指定できるようにしてみる

時間がある時にでも是非挑戦してみてください！

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

前の記事

見出しにidを自動設定する方法の解説ページのアイキャッチ
ワードプレスで見出しに自動的に id 属性を付ける方法

次の記事

【ワードプレス】コメント表示（wp_list_comments…
コメント表示欄のカスタマイズ方法解説ページのアイキャッチ