2019年5月5日 / 最終更新日時 : 2019年5月5日 あかひげ

WordPressでブログカードを表示するショートコード

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');
PHP

使用例

直近のものから。

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

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

CloudFront Cache Clear

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/
タグ

前の記事

CloudFront Cache Clearと言うツールを作った
2019年4月30日

次の記事

WordPress 5.2の致命的エラー保護、リカバリーモード、サイトヘルスが素敵
2019年5月27日