【プラグイン不要】目指せ回遊率UP！WordPress でブログカードを自作する方法

2019年07月17日
2020年01月30日

以前、ブログカードを作ってみたので、その備忘録です。

ブログカードって？

ブログカードはもともと “はてなブログ” にあった機能で、下の画像の様なもの指します。

“はてなブログ” を確認すると、次の様に書かれていました。

「ブログカード」とは、ブログに掲載したい記事のタイトルや概要、アイキャッチ画像などを読みやすくまとめて表示する埋め込み形式です。
はてなブログで「リンク挿入」機能を利用する際に、さまざまなWebページを、タイトルや概要がコンパクトにまとまったブログカードの形式で埋め込むことができます。

出典：ブログカード－はてなブログヘルプ

わたし自身は “はてなブログ” を利用したことがなく、お恥ずかしながら「ブログカード」という名前も知らなかったのですが、たまに他の WordPress サイトで見かけることがあり、ちょっと興味があったので調べてみることにしました。

WordPress 公式のブログカードの機能がある

WordPress には、ブログカードを簡単に実装する機能が備わっています。
本当に何も難しいことはなく、下の様にリンクを記述するだけなんです。簡単ですね。
※ビジュアル・テキストどちらでも OK。

https://startmeup.jp/column/digital/1142/

生成されたブログカードがこちら。

【プラグイン不要】目指せ回遊率UP！WordPress でブログカードを自作する方法

テキストリンク↓ と比較すると目立ちますね！
【プラグイン不要】WordPressで構築したウェブサイトにdescriptionタグを簡単に設定する方法

ただし、以下の 4項目を満たしていることが条件となります。

WordPress のバージョンが 4.4以降であること
自分自身のウェブサイトの URL であること
URL は 1行に 1 URLを記述すること
URL の前後には余分なテキストや空白を挿入しないこと

プラグインを使って実装する

プラグインを使ってブログカードを実装することもできます。
検索みると、「Pz-LinkCard」というプラグインに関する記事が多数見つかりました。
有名どこなんでしょうか？

しかし、サイトがものすごく重くなるなど良い評価ばかりではありませんでした（サイトが重くなるということに関して言えば、このプラグインに限った話ではありませんが）。

プラグインを使わずに実装する

WordPress の公式のブログカードも良いのですが、簡単に作れそうだったので今回は自作することに。
完成形はこんな感じです。

【プラグイン不要】WordPressで構築したホームページにdescriptionタグを簡単に設定する方法

プラグインを使わずに WordPress の投稿・固定ページの抜粋機能を使って descriptionタグを設定する方法。

functions.php にコードを追加

functions.php に下記のコードをコピペします。
バックアップ忘れずに！

// 記事IDを指定して抜粋文を取得
function ltl_get_the_excerpt($post_id){
    global $post;
    $post_bu = $post;
    $post = get_post($post_id);
    setup_postdata($post_id);
    $output = get_the_excerpt();
    $post = $post_bu;
    return $output;
}
// 内部リンクをはてなカード風にするショートコード
function nlink_scode($atts) {
    extract(shortcode_atts(array(
        'url'=>"",
        'title'=>"",
        'excerpt'=>""
    ),$atts));
    $id = url_to_postid($url); // URLから投稿IDを取得
    $no_image = 'noimageに指定したい画像があればここにパス'; // アイキャッチがない場合の画像を指定
// タイトルを取得
    if(empty($title)){
        $title = esc_html(get_the_title($id));
    }
// 抜粋文を取得
    if(empty($excerpt)){
        $excerpt = esc_html(ltl_get_the_excerpt($id));
    }
// アイキャッチ画像を取得
    if(has_post_thumbnail($id)) {
        $img = wp_get_attachment_image_src(get_post_thumbnail_id($id),array($img_width,$img_height));
        $img_tag = "<img src='" . $img[0] . "' alt='{$title}' width=" . $img[1] . " height=" . $img[2] . " />";
    }
    else{
        $img_tag ='<img src="'.$no_image.'" alt="" width="'.$img_width.'" height="'.$img_height.'" />';
    }
    $nlink .='
    <div class="blog-card">
    <a href="'. $url .'">
    <div class="blog-card-thumbnail">'. $img_tag .'</div>
    <div class="blog-card-content">
    <div class="blog-card-title">'. $title .' </div>
    <div class="blog-card-excerpt">'. $excerpt .'</div>
    </div>
    </a>
    </div>';
    return $nlink;
}
add_shortcode("nlink", "nlink_scode");

style.css にコードを追加

続いて style.css に下記コードを追加します。
こちらもバックアップしてから！

.blog-card {
    width: 100%;
    background: #f5f5f5;
    border: 1px solid #dddddd;
    word-wrap: break-word;
    margin: 1.5em 0 0;
    padding: 0;
}
.blog-card:hover {
    background: #dbe9f4;
}
.blog-card a {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    justify-content: space-between;
}
.blog-card-thumbnail {
    width: 20%;
    padding: 10px;
}
.blog-card-thumbnail img {
    width: 100%;
    border: none;
    display: block;
    padding: 0;
}
.blog-card-content {
    width: 78%;
    line-height: 1.5;
}
.blog-card-title {
    font-size: 15px;
    font-weight: bold;
    padding: 10px 10px 10px 0;
}
.blog-card-excerpt {
    color: #333333;
    font-size: 13px;
    padding: 0 10px 10px 0;
}

ブログカードを実装するためのショートコード

投稿内に [nlink url="https://startmeup.jp/column/digital/1142/"] と記述するだけで OK。

完成！

【プラグイン不要】WordPressで構築したホームページにdescriptionタグを簡単に設定する方法

プラグインを使わずに WordPress の投稿・固定ページの抜粋機能を使って descriptionタグを設定する方法。

参考にさせて頂いたサイト

こちらのサイトを参考にさせて頂きました。ありがとうございました。

この記事を書いた人

冨江恵: 2014年個人でデザイン事務所を開業後、2018年3月にスタートミーアップ合同会社へ。現在は、デジタル事業部のメンバーとして茨城県つくば市を中心にホームページ制作・グラフィックデザイン・CAD図面データ作成等を行なっています :‑D

WordPress に予約システムを構築するなら「Booking Package – 予約システム」が設定楽々でオススメ！【プラグイン不要】WordPressの個別投稿・固定ページに JavaScript を追加する方法

コラム

関連記事

スライダー（スライドショー・カルーセル）は本当に必要？その役割と必要性について。

WordPress に予約システムを構築するなら「Booking Package – 予約システム」が設定楽々でオススメ！

【プラグイン不要】カテゴリーを好きな順番に並び替えてサイドエリアなどに表示する方法

【設定不要】2枚の画像をスライドで簡単比較できる無料プラグイン「TwentyTwenty」

【2019年度版】Facebook（フェイスブック）ページのカバー画像をパソコン・スマホでピッタリ表示するには？最適なサイズ考察まとめ

【プラグイン不要】WordPressの個別投稿・固定ページに JavaScript を追加する方法