今回は、WordPressのブログ記事にブログカード機能を追加する方法を紹介します。
ブログカードとは、他のブログ記事のリンクをカード形式で表示する機能です。
リンクをカード形式にすることで、テキストのみよりもクリックされやすくなり、サイトの回遊率を高められるのでSEOにも効果を発揮してくれます。
プラグインを使わずにWordPressにブログカード機能を追加してみましょう。
もくじ
完成形
今回は、ショートコードにリンクを貼りたいページのurlを指定して、挿入するブログカードを作成します。
↓ショートコードを入力
↓実際に挿入されるカード
作成の手順
ブログカードを実装する手順を確認しておきましょう。
ソースコードの解説
①functions.phpを編集してブログカード機能を追加
functions.phpにで指定するコードは、次の通りです。
必要なデータを取得してブログカードを生成する関数と、関数を実行するショートコードタグを作成します。
ひとつひとつ確認していきましょう。
<?php
// ①-1. ショートコードで実行する関数を作成
function add_my_blogcard($atts) {
// ①-1-1. ショートコードタグに指定した属性を取得して変数に代入
extract(shortcode_atts(array(
'url' => '',
'title' => '',
'excerpt' => ''
), $atts));
// ①-1-2. 記事のIDを取得して変数に代入
$id = url_to_postid($url);
// ①-1-3. アイキャッチ画像を取得、タグを作成
$no_image = esc_url(get_theme_file_uri('images/no-image.jpg'));
$thumbnail_width = '160';
$thumbnail_height = '90';
if(has_post_thumbnail($id)) {
$thumbnail = wp_get_attachment_image_src(get_post_thumbnail_id($id),array($thumbnail_width,$thumbnail_height));
$thumbnail_tag = '<img src="' . $thumbnail[0] . '" alt="' . $title . '">';
} else {
$thumbnail_tag = '<img src="' . $no_image . '" alt="">';
}
// ①-1-4. タイトルを取得
if(empty($title)) {
$title = esc_html(get_the_title($id));
}
// ①-1-5. 抜粋文を取得
if(has_excerpt($id)){
$excerpt = wp_trim_words(get_the_excerpt($id), 74, '…' );
} else {
$excerpt = wp_trim_words(strip_shortcodes(get_post($id)->post_content), 74, '…' );
}
// ①-1-6. 出力するHTMLタグを作成、戻り値として返す
$html = '
<div class="p-blogCard">
<a href="' . $url . '" target="_blank" rel="noopener">
<div class="p-blogCard__thumbnail">' . $thumbnail_tag . '</div>
<div class="p-blogCard__title">' . $title . '</div>
<div class="p-blogCard__excerpt">' . $excerpt . '</div>
</a>
</div>';
return $html;
}
// ①-2. ショートコードタグを作成
add_shortcode('blog_card', 'add_my_blogcard');
?>①-１. ショートコードで実行する関数を作成する
ショートコードで実行する関数、つまり必要なデータを取得してブログカードを生成する関数を作成します。
関数「add_my_blogcard()」を作成し、引数には「$atts」を指定してショートコードタグに入力された属性を取得します。
関数名は任意なのでお好みの名前をつけてくださいね。
次は関数の中身を設定していきましょう。
①-１-１. ショートコードタグに指定した属性を取得して変数に代入する（5〜9行目）
まずは、ショートコードタグに指定した「url」属性を取得します。
shortcode_atts()関数でショートコードタグに入力された属性を取得して、extract()関数で取得した「ラベル：値」を変数に変換していきます。
データは「shortcorde_atts( 属性の名前とデフォルト値の配列, ショートコードタグに指定した属性の配列 );」と指定・取得します。
ショートコードに指定する属性は「url」のみですが、タイトルと抜粋もデフォルトで変数を作成しておきましょう。
ショートコードタグに指定した属性の配列は、関数の引数で取得している「$atts」を指定しましょう。
extract(shortcode_atts(array(
'url' => '',
'title' => '',
'excerpt' => ''
), $atts));WordPress Codex
①-１-２. 記事のIDを取得して変数に代入する（12行目）
今回は、記事のurlの他にID、タイトル、抜粋、アイキャッチ画像を取得します。
記事のIDを使ってタイトル、抜粋、アイキャッチ画像も取得するので、まずはurlからIDを取得ておきましょう。
記事のIDは「url_to_postid($url)」で取得できます。
WordPress Codex
①-１-３. アイキャッチ画像を取得して出力するタグを作成する（15〜24行目）
「if(has_post_thumbnail( $id ))」で記事にアイキャッチ画像の有無を判定します。
アイキャッチ画像がある場合は「wp_get_attachment_image_src( 画像のID, 画像のサイズ )」でパスを取得して、出力する<img>タグ（$thumbnail_tag）を作成します。
アイキャッチ画像がない場合は「$no_image」に代替え画像のパスを指定して、出力する<img>タグ（$thumbnail_tag）を作成します。
// アイキャッチがない場合の画像のパス
$no_image = esc_url(get_theme_file_uri('images/no-image.jpg'));
// アイキャッチの画像サイズ
$thumbnail_width = '160';
$thumbnail_height = '90';
// アイキャッチ画像がある場合
if(has_post_thumbnail($id)) {
$thumbnail = wp_get_attachment_image_src(get_post_thumbnail_id($id),array($thumbnail_width,$thumbnail_height));
$thumbnail_tag = '<img src="' . $thumbnail[0] . '" alt="' . $title . '">';
} else {
// アイキャッチ画像がない場合
$thumbnail_tag = '<img src="' . $no_image . '" alt="">';
}①-１-４. タイトルを取得（27〜29行目）
「if(empty( $title ))」で$title変数の値が空かどうか判定して、空の場合は「get_the_title( $id )」で記事のタイトルを取得して、$title変数に代入します。
デフォルトで$titleに「”」を指定しているので、判定はtrueで記事からタイトルを取得してくれる仕組みですね。
WordPress Codex
①-１-５. 抜粋文を取得（32〜36行目）
抜粋も①-３のアイキャッチ画像と同様に「if(has_excerpt( $id ))」で抜粋文の有無を判定します。
抜粋文がある場合は「get_the_excerpt($id)」で取得、ない場合は「get_post($id)->post_content」で本文を取得します。
表示する文字数は「wp_trim_words( 文字列, 文字数, ‘抜粋文の最後につける記号やテキストなど‘)」で指定します。
抜粋文がない場合の「strip_shortcodes()」は、本文にショートコードが含まれていたら取り除く関数です。
if(has_excerpt($id)){
// 抜粋文がある場合
$excerpt = wp_trim_words(get_the_excerpt($id), 74, '…' );
} else {
// 抜粋文がない場合
$excerpt = wp_trim_words(strip_shortcodes(get_post($id)->post_content), 74, '…' );
}①-１-６. 出力するHTMLタグを作成、戻り値として返す（39〜48行目）
最後にこれまで取得してきたデータを使って、ブログカードの出力するHTMLタグを作成し「$html」変数に代入しましょう。
ここはお好みでカスタマイズしてくださいね。
作成したタグを「return $html;」で返したら、ブログカードを生成する関数は完成です\(^^)/ﾊﾞﾝｻﾞｲ！
$html = '
<div class="p-blogCard">
<a href="' . $url . '" target="_blank" rel="noopener">
<div class="p-blogCard__thumbnail">' . $thumbnail_tag . '</div>
<div class="p-blogCard__title">' . $title . '</div>
<div class="p-blogCard__excerpt">' . $excerpt . '</div>
</a>
</div>';
return $html;①-２. ショートコードタグを作成（51行目）
関数が完成したら、「add_shortcode(‘ショートコードタグ名‘, ‘ショートコードで実行する関数名‘);」でショートコードタグの機能を追加します。
ショートコードタグ名には呼び出す時に入力する任意の文字列（半角英数字と_）、関数名には①-１で作成した関数の名前を指定しましょう。
WordPress Codex
② CSSでブログカードのスタイルを指定
あとは、①-１-６で出力したHTMLタグにCSSでスタイルをお好みで指定しましょう。
おわりに
今回は、WordPressでブログカード自作する方法を紹介しました。
データの取得やアクションフックを使った機能追加は慣れるまで大変ですが、理解できるとWordPressを自由にカスタマイズできるようになります。
テキストリンクよりも認識されやすくなり、ユーザーに多くのページを見てもらえるチャンスを増やすブログカード、ぜひ導入してみてくださいね。
