基本方針
以下URLをまるっと参考に
http://mugen00.moo.jp/web/wordpress/ogp-blogcard
ただカードのタイトルが文字化けするため、ケアを行う
// OGPの解析
blogcard
function outlink($atts) {
extract(shortcode_atts(array(
'addtitle' => "タイトルなし",
'link' => "",
), $atts));
require_once 'OpenGraph.php';
$graph = OpenGraph::fetch($link);
if ($graph) {
$title = $graph->title;
//文字化け対応
$title_check = utf8_decode($title);
if(mb_detect_encoding($title_check) == 'UTF-8'){
$title = $title_check; // 文字化け解消
}
$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');
記述したショートコード
[o_link addtitle="ABCDEFG" link="https://www.asahi.com/articles/ASN5V7FDPN5VPIHB01P.html"]
ショートコードテスト
高さが平気パターン
全職員から10万円寄付前提でコロナ予算 兵庫・加西市:朝日新聞デジタル
高さが怪しいパターン
WordPressの投稿記事内に外部URLのOGPを取得してカードを作る
まぁ一応動いたか、スタイルは要調整のようだ
ということで調整
/* カードのイメージ高さ上限を固定*/
.card-img-top {
width: 100%;
max-height: 30vw;
object-fit: cover;
}
Cards