WordPressでいわゆるブログカードを表示するにはPz-LinkCardと言うプラグインを使うと簡単。URLを入力するだけでタイトル、概要からサムネイルまで自動で取ってきてくれる優れもの。

なのだが。

けっこうテーマのコードベースにショートコードとして自作している人が多い印象。
機能としては割と短いコードで実装できてしまうのでプラグインに頼るまでもないと言うこともあるのだろう。さすがにタイトルや概要などの入力は手動になるが一方でその方が細かい見栄えの調整がしやすくなると言う利点もある。動作も軽い。

と言うわけで自分も自作した。functions.phpにペちっと。

<?php
function shortcode_blogcard($args)
{
    $no_image = get_stylesheet_directory_uri() . '/images/no_image.png';
    $defaults = array('site_name' => '', 'title' => '', 'desc' => '', 'url' => '', 'thumbnail' => $no_image, 'thumbnail_border' => "true");
    extract(shortcode_atts($defaults, $args));

    $thumbnail_class = 'embed-website-thumbnail';
    if ($thumbnail_border !== "true") {
      $thumbnail_class = 'embed-website-thumbnail-no-border';
    }

    return "
<style>
  blockquote.embed-website { border: 1px solid #ccc; padding: 10px; clear: both; }
  blockquote.embed-website a { text-decoration: none; }
  blockquote.embed-website .embed-website-site-name { color: #999; font-size: 10px; font-weight: bold; margin: 0;}
  blockquote.embed-website .embed-website-site-title { }
  blockquote.embed-website h4 { margin: 0; }
  blockquote.embed-website .embed-website-description { color: #666; margin-top: 5px;}
  blockquote.embed-website .embed-website-thumbnail { margin-right: 10px; float: left; width: 130px; height: 130px; border: 1px solid #999; position: relative;}
  blockquote.embed-website .embed-website-thumbnail-no-border { margin-right: 10px; float: left; width: 130px; border: 1px solid #fff; height: 130px; position: relative;}
  blockquote.embed-website .embed-website-thumbnail-no-border img, .embed-website-thumbnail img { width:130px; position: absolute; top: 50%; left: 50%; margin: auto; transform: translate(-50%, -50%);}
  blockquote.embed-website .embed-website-url { padding-top: 5px; clear: both; overflow: hidden; text-overflow: ellipsis; }
</style>

<blockquote class='embed-website'>
  <a href='{$url}'>
    <div>
      <div class='{$thumbnail_class}'>
        <img src='{$thumbnail}' />
      </div>
  
      <div>
        <div class='embed-website-site-name'>{$site_name}</div>
        <div class='embed-website-site-title'><h4>{$title}</h4></div>
        <div class='embed-website-description'>{$desc}</div>
      </div>
    </div>

    <div class='embed-website-url'>{$url}</div>
  </a>
</blockquote>
";
}

add_shortcode('blogcard', 'shortcode_blogcard');

使用例

直近のものから。

サムネイルの指定がない場合はNO IMAGE画像が表示される。

blogcard site_name="BRASSWORKS" title="CloudFront Cache Clear" desc="フォームから簡単に利用できるCloudFrontのキャッシュ削除ツール" url="https://cfcc.brassworks.jp/"

BRASSWORKS

CloudFront Cache Clear

フォームから簡単に利用できるCloudFrontのキャッシュ削除ツール

https://cfcc.brassworks.jp/

サムネイルにはデフォルトで枠線を付けているが、thumbnail_border=falseでなしにもできる。

blogcard site_name="一般社団法人日本ハッカー協会" title="Coinhive事件裁判費用の寄付のお願い" url="https://www.hacker.or.jp/coinhive_innocent/" thumbnail="https://www.hacker.or.jp/wp-content/uploads/2019/04/moro_icon-300x300.png" desc="はじめまして、モロと申します。この度、先日控訴審の決定した「コインハイブ事件」の裁判のため、寄付でのご支援をお願いしたく、日本ハッカー協会様のご協力のもとこのページを立ち上げさせていただきました。" thumbnail_border=false

一般社団法人日本ハッカー協会

Coinhive事件裁判費用の寄付のお願い

はじめまして、モロと申します。この度、先日控訴審の決定した「コインハイブ事件」の裁判のため、寄付でのご支援をお願いしたく、日本ハッカー協会様のご協力のもとこのページを立ち上げさせていただきました。

https://www.hacker.or.jp/coinhive_innocent/