WordPressの投稿記事内に外部URLのOGPを取得してカードを作る

WordPressの投稿記事内に、引数として外部URLを指定すると、URLからOGPを取得してブログカードを表示するショートコードの作り方

php関連記事

OpenGraph.phpをダウンロードする

下記からOpenGraph.phpをダウンロードする。

ダウンロードしたらわかりやすい場所にアップロードしておく。
子テーマ使ってる場合は子テーマルートでもいい。

opengraph/OpenGraph.php at master · scottmac/opengraph

Helper class for accessing the OpenGraph Protocol. Contribute to scottmac/opengraph development by creating an account on GitHub.

ショートコードを作る

php

function outlink($atts) {
    extract(shortcode_atts(array(
        'addtitle' => "タイトルなし",
        'link' => "",
    ), $atts));

    require_once 'OpenGraph.php';
    $graph = OpenGraph::fetch($link);
    if ($graph) {
        $title       = $graph->title;
        $src         = $graph->image;
    }else{
        $title       = $addtitle;
        $src         = "noimage.jpg";
    }

    $outlink = '
    <a href="'.$link.'" target="_blank">
    <div class="card mx-auto mb-4">
    <img class="card-img-top" src="'.$src.'" alt="'.$title.'">
    <div class="card-body">
        <p class="card-text mb-0">'.$title.'</p>
    </div>
    </div>
    </a>
    ';
 
    return $outlink;
}
add_shortcode('o_link', 'outlink');

ショートコードに渡す引数は、URLと任意で変更できるタイトル。
OGPの有無で処理を振り分けする。
あとは結果をbootstrap4のカードで出力するだけ。