【WP】プラグインなしで内部リンクのブログカードを実装する方法

<!-- たとえば、「Embedly」のブログカード埋め込み用コードの例 -->
<blockquote class="embedly-card"><h4><a href="https://cosybench.com/made-the-original-wordpress-theme/">【WP】オリジナルテーマに衣替え: 使ったフリー素材や参考にしたサイト集 - 日なたの縁台</a></h4><p>去年の春からWordPress環境でのブログ運営を始め、それ以来ずっと「 Simplicity 」をテーマとして使ってきたのですが、3日前から、自作テーマに衣替えしました。 2018年、装いも新たに。 去年の秋頃からコツコツと作り始め、ようやく形になったので、めでたくお目見えです。 今回オリジナルテーマを作るにあたり、色々なサイトにお世話になったので、お礼も兼ねてまとめてみました。 ...</p></blockquote>
<script async src="//cdn.embedly.com/widgets/platform.js" charset="UTF-8"></script>

/**
* オリジナルブログカード表示用の関数
* @param   string   the_content（投稿本文）
* @return  string   the_content（ブログカード用に置換された投稿本文）
**/
if (!function_exists('original_blog_card')){ //子テーマを使っている場合、推奨
// @link http://php.net/manual/ja/function.function-exists.php
function original_blog_card ( $the_content ) {

    /*== 解説（1） 参照 ==*/
    // 該当箇所を取得するための正規表現
    // <span class="bcard ilink（またはelink）"<<a href="~" title="~" (target="_blank")<xxx</a></span>という文字列パターンを文中から探してもらう
    $pattern = '#<span class="bcard (i|e)link"><a href="((?:https?|ftp)(?:://.+?))" title="(.*?)"(?: target="_blank")?>(.*?)</a></span>#';

    // 記事内の一致する文字列をすべて取得する
    preg_match_all($pattern, $the_content, $card_matches, PREG_SET_ORDER);
        /* 以下のように$card_matchesに格納される
        array(N) {
          [M]=>
              array(5) {
                [0]=> mathced content
                [1]=> $1 : Link type (i|e)
                [2]=> $2 : URL
                [3]=> $3 : Title
                [4]=> $4 : Link Text
              }
        }*/

    /*== 解説（2） 参照 ==*/
    if ($card_matches) { //変換する要素があれば
        foreach ($card_matches as $m) {
                $url = $m[2];
                $domain = parse_url($url, PHP_URL_HOST);  //PHP関数でドメインを切り出す

            if ($m[1] == 'i') : //内部リンクの場合(internal)
                $id = url_to_postid( $url ); //IDを取得（URLから投稿ID変換）
                    if ( !$id ) return ''; //IDを取得できない場合は脱出

                //global $postの利用
                $post_data      = get_post($id);
                setup_postdata($post_data);
                $title          = $post_data->post_title; //タイトルの取得
                $excerpt        = get_post_meta($id, 'meta_description', true) ? get_post_meta($id,'meta_description',true) : get_the_excerpt($id); //$post_data->post_excerpt; //抜粋の取得
                if ( has_post_thumbnail($id) ): //thumbnail画像のHTML取得
                    $src    = get_the_post_thumbnail( $id, 'cb100-crop', array( 'alt' => $title ) ); //thumｂnail画像（'cb100-crop'）は、add_image_size()関数でfunctions.php内で別途、独自に設定したものを使用． @link https://developer.wordpress.org/reference/functions/add_image_size/
                    $thumbnail  = '<div class="blog-card-thumbnail">' .$src. '</div>';
                else: //thumbnailがない場合
                    $src        = get_template_directory_uri() . '/images/ogp_no_image.jpg';
                    $thumbnail  = '<div class="blog-card-thumbnail"><img src="' .$src. '"></div>';
                endif;
                $date           = date('Y-m-d H:i', strtotime($post_data->post_date)); //投稿日の取得
                $target         =''; //target="_blank"の設定
                wp_reset_postdata();

            /*== 解説（3） 参照 ==*/
            elseif ($m[1] == 'e') : //外部リンクの場合(external)
                //設定されているOGP情報を利用する
                //@link https://github.com/scottmac/opengraph
                require_once('opengraph.php');

                $graph = OpenGraph::fetch($url);
                if ($graph) : //OGP情報が設定されていたら
                    $title = $graph->title ? $graph->title : $m[3];
                    $excerpt = $graph->description ? $graph->description : '';
                    // 【★追記：2018/08/05★】
                    // 外部サイトのOGP画像を自サーバーに保存してから使えるようにしました。
                    // 詳細は、https://cosybench.com/save-ogp-images-with-wpfilesystem/ をご覧ください。
                    // 新verでは、「$src = $graph->image ? cb_fetch_ogp_image_file($graph->image) : get_template_directory_uri().'/images/ogp_no_image.jpg';」 になります。
                    $src = $graph->image ? $graph->image : get_template_directory_uri().'/images/ogp_no_image.jpg';
                    $thumbnail = '<div class="blog-card-thumbnail"><img src="' .$src. '"alt="' .$m[3]. '"></div>';
                endif;
                $date       = ''; //外部リンクは投稿日なし
                $target     = 'target="_blank"'; //外部リンクは新規タブで

            endif;

/*== 解説（4） 参照 ==*/
            //ブログカードのタグを設定
            $title_tag   = '<p class="blog-card-title subheading p_t">' .$title. '</p>';
            $excerpt_tag = '<p class="blog-card-excerpt p_t">' .$excerpt. '</p>';
            $favicon_tag = '<div class="blog-card-site-info"><span class="blog-card-favicon"><img src="//www.google.com/s2/favicons?domain=' .$domain. '" class="blog-card-favicon-img" alt="" />' .$domain. '</span></div>'; //GoogleファビコンAPI利用
            $date_tag    = '<div class="blog-card-date">' .$date. '</div>';
            //タグを合体
            $whole_tag = '<div class="blog-card"><a href="' .$url. '">' .$thumbnail. '<div class="blog-card-body">' .$title_tag .$excerpt_tag. '</div>' . '<div class="blog-card-footer s_t">' .$favicon_tag .$date_tag. '</div>' .'</a></div>';

            //置換する
            $the_content = preg_replace('{'.preg_quote($m[0]).'}', $whole_tag, $the_content);
        }
    }

    return $the_content;

}
} //子テーマを使っている場合、推奨。if (!function_exists('original_blog_card')){を閉じる。

/*== 解説（5） 参照 ==*/
add_filter('the_content', 'original_blog_card'); //フィルターフック

// 今回定義している正規表現
$pattern = '#<span class="bcard (i|e)link"><a href="((?:https?|ftp)(?:://.+?))" title="(.*?)"(?: target="_blank")?>(.*?)</a></span>#';

//三項演算子(?!)
//式1がTRUEなら式2を、FALSEなら式3の値が$変数に代入される
$変数 = (式1) ? (式2) : (式3)

//functions.phpと同じフォルダにアップロードしておき、読み込む
require_once('opengraph.php');

//OGP情報をURLから取得する
$graph = OpenGraph::fetch($url);

if ($graph) : //OGP情報が設定されていたら
   /* 必要な情報を取得する */
endif;

.blog-card {
    width: 600px;
    max-width: 100%;
    padding: 1em;
    margin: 1em 0;
    border: 1px solid #e0e0e0;
}

.blog-card a:link {
    text-decoration: none;
    color: inherit;
}

.blog-card:hover {
    background-color: #fafafa;
}

    .blog-card-thumbnail {
        position: relative;
        float: right;
        width: 100px;
        height: 100px;
    }

        .blog-card-thumbnail img {
            position: absolute;
            top: 50%;
            left: 50%;
            -webkit-transform: translate(-50%, -50%);
                    transform: translate(-50%, -50%);
            max-width: 100%;
            height: auto;
        }

    .blog-card-body {
        margin-right: 110px;
    }

        .blog-card-title {
            margin-top: 0;
            font-weight: bold;
        }

    .blog-card-favicon {
        float: left;
    }

        .blog-card-favicon img {
            vertical-align: middle;
            margin-right: .25em;
        }

    .blog-card-date {
        float: right;
    }

        .blog-card-body:after,
        .blog-card-footer:after {
            content: "";
            display: table;
            clear: both;
        }