プラグインなしで外部用ブログカード

Warning: Undefined variable $sc_Linkcard in /home/nrocks/backon69.com/public_html/memo.backon69.com/wp-content/themes/MEMORANDUM-V04.2/functions.php on line 146

Warning: Attempt to read property "title" on bool in /home/nrocks/backon69.com/public_html/memo.backon69.com/wp-content/themes/MEMORANDUM-V04.2/functions.php on line 229

Warning: Attempt to read property "description" on bool in /home/nrocks/backon69.com/public_html/memo.backon69.com/wp-content/themes/MEMORANDUM-V04.2/functions.php on line 235

GitHub - scottmac/opengraph: Helper class for accessing the OpenGraph Protocol

Helper class for accessing the OpenGraph Protocol. Contribut…

https://github.com/scottmac/opengraph/

プラグインを使わずにブログカードをいい感じに作れないかと探していたらいい記事を発見。早速参考に、いや正直ほぼそのままだな。自分のサイトに装着してみた。感謝。

REFERENCE 【外部リンク対応】ブログカードをプラグインなしで設置する方法【長文】
https://dis-play.net/wordpress/tips/blogcard-external/

せっかくなので概要を自分なりに理解しようかと。まずOpenGraph.phpは外部サイトのOGPタグから情報を取得するためのPHPとのこと。OGPってなんだ？「Open Graph Protcol」の略でFacebookやTwitterなどのSNSでシェアした際に、設定したWEBページのタイトルやイメージ画像、詳細などを正しく伝えるためのHTML要素ということらしいが設定されていないサイトも多いらしい。もちろん自分も。設定方法も調べたのでメモしておく。以下metaタグを<head>〜</head>に記載する。

<!-- OGPを使用することを宣言 -->
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/ fb# prefix属性: http://ogp.me/ns/ prefix属性#">
<!-- ページURL --> 
<meta property="og:url" content="ページURL" />
<!-- ページの種類　TOPページは「website」記事ページなどは「article」 -->  
<meta property="og:type" content=" ページの種類" />
<!-- ページのタイトル --> 
<meta property="og:title" content="ページのタイトル" />
<!-- ページの説明文 -->  
<meta property="og:description" content=" ページの説明文" />
<!-- サイト名 -->   
<meta property="og:site_name" content="自サイト名" />
<!-- 表示されるサムネイル画像 --> 
<meta property="og:image" content="サムネイル画像の格納先URL" />

紹介させてもらったさサイトにも書いてあるけど、OGPタグから取得したタイトルやdescriptionの文字列の文字化けする場合、OpenGraph.phpは一部以下修正が必要。自分のエディタでは82行目の下あたりに追加。修正したら使っているテーマフォルダの直下に格納する。

static private function _parse($HTML) {
  $old_libxml_error = libxml_use_internal_errors(true);
//この下に追加

$HTML = mb_convert_encoding($HTML,"HTML-ENTITIES","UTF-8");

画像を自分のサイト用に大きいサイズに変更しただけ。wordpress.comにスクリーンショットを取得できるAPIがあるとは知らなかった。あとファビコンも。

function show_Linkcard($atts) {
	extract(shortcode_atts(array(
		'url'=>"",
		'title'=>"",
		'excerpt'=>""
	),$atts));
	
	$img_width ="650";//画像サイズの横幅を指定
	$img_height = "300";//画像サイズの高さを指定

	require_once 'OpenGraph.php';//OGP情報を取得
	$graph = OpenGraph::fetch($url);
	
	$Link_title = $graph->title;//OGPタグからタイトルを取得
	if(!empty($title)){
		$Link_title = $title;//title=""の入力がある場合はそちらを優先
	}
		
	//OGPタグからdescriptionを取得（抜粋文として利用）
	$Link_description = wp_trim_words($graph->description, 60, '…' );//文字数は任意で変更
	if(!empty($excerpt)){
		$Link_description = $excerpt;//値を取得できない時は手動でexcerpt=""を入力
	}
	
	//wordpress.comのAPIを利用してスクリーンショットを取得
	$screenShot = 'https://s.wordpress.com/mshots/v1/'. urlencode(esc_url(rtrim( $url, '/' ))) .'?w='. $img_width .'&h='.$img_height.'';
	
	//スクリーンショットを表示
	$xLink_img = '<img src="'. $screenShot .'" width="'. $img_width .'" />';
	
	//ファビコンを取得（GoogleのAPIでスクレイピング）
	$host = parse_url($url)['host'];
	$searchFavcon = 'https://www.google.com/s2/favicons?domain='.$host;
	if($searchFavcon){
		$favicon = '<img class="favicon" src="'.$searchFavcon.'">';
	}
		
	//外部リンク用ブログカードHTML出力
	$sc_Linkcard .='
	<div class="blog-card02 ex">
	<a href="'. $url .'" target="_blank">
	 <div class="blog-card02_thumbnail">'. $xLink_img .'</div>
	  <div class="blog-card02_content">
	   <div class="blog-card02_title">'. $Link_title .'</div>
	   <div class="blog-card02_excerpt">'. $Link_description .'</div>
	   <div class="blog-card02_link">'. $favicon .' '. $url .' <i class="icon-external-link-alt"></i></div>
	 </div>
	</a>
	</div>
   <div class="clear"></div>';	
	
	return $sc_Linkcard;	
}

//ショートコードに追加
add_shortcode("sc_Linkcard", "show_Linkcard");

スタイルシートはお好みで。あとはスマホで表示される時にだけ画像サイズを小さくするくらい。

/*blog-card02
================================*/
.blog-card02 {
display: block;
line-height: 1;
background-color: #ffffff;
border: 1px solid #bebebe;
word-wrap: break-word;
margin: 0px;
}
.blog-card02.ex {
background-color: #ffffff;
margin-bottom: 15px;
}
.blog-card02 a {
text-decoration: none;
opacity: 1;
transition: all 0.2s ease;
}
.blog-card02 a:hover {
opacity: 0.6;
}
.blog-card02_thumbnail {
float: left;
padding: 10px;
}
.blog-card02_title {
font-family:'Montserrat', sans-serif;
font-size: 1em;
font-weight: bold;
line-height: 1.4;
padding: 17px 20px 10px;  
}
.blog-card02_excerpt {
font-size: 0.85em;
line-height: 1.6;
padding: 0 17px 15px 20px;
}
.blog-card02_link {
font-size:0.65em;
padding:0 17px 15px 20px;
text-align: left;
}
.blog-card02_link .favicon {
margin-bottom: -4px;
}
.blog-card02_link .icon-external-link-alt::before {
font-size:0.75em;
}

あと画像をOGPから取得するという記事もあった。スクリーンショットを表示部分を以下にに差し替え。ただOGP用のイメージ画像を設定されていない記事も多いと思うのでスクリーンショットのほうがいいな。

REFERENCE
https://niyutadesign.com/weblog/web/wordpress/2019/12/29/blogcard/

 　　$xLink_img_pre = $graph->image;
    $xLink_img = '<img src="'. $xLink_img_pre .'" width="'. $img_width .'" />';

NOTICES

記事内容は実装させたものがほとんどですが自己責任で参考にしてください。

調べて知り得た情報をせっかくなのでメモしとく

NOTICES