前回の記事で自作ショートコードでシンプルなブログカードを作ったら、次はサムネイルメインで作ってみたい欲に駆られました。
そして作ってみました！こんな感じです。↓
OpenGraph.phpは前回設置しているのでこの部分は省略。
この記事では備忘録として、子functions.phpに貼るコードと追加CSS/子テーマのスタイルシートに貼るコードだけご紹介します。
★カスタマイズは自己責任で、必ずバックアップを取ってから行ってください。
子functions.phpに貼るコード
外観 → テーマファイルエディター → Theme Functions（functions.php）
/* 【アイキャッチメインのブログカード】ショートコード作成 */
function show_ECcard($atts) {
extract(shortcode_atts(array(
'url'=>"",
'title'=>"",
'img_url'=>"",
),$atts));
//画像サイズの横幅を指定
$img_width ="320";
//画像サイズの高さを指定
$img_height = "200";
//OGP情報を取得
require_once 'OpenGraph.php';
$graph = OpenGraph::fetch($url);
//OGPタグからタイトルを取得
$Link_title = $graph->title;
if(!empty($title)){
$Link_title = $title;//title=""の入力がある場合はそちらを優先
}
//OGPタグからサムネイル画像を取得
$image = $graph->image;
if ( !empty($image) ) {
$xLink_img = '<img src="'. $image .'" width="'. $img_width .'" />';
} else if (!empty($img_url)){
////サムネイル画像が無ければURLで画像を指定可
$imgURL = $img_url;//img_url=""
$xLink_img = '<img src="'. $imgURL .'" width="'. $img_width .'" />';
} else {
////または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出力
$ECcard .='
<div class="eccard">
<a href="'. $url .'" target="_blank">
<div class="eccard_thumbnail">'. $xLink_img .'</div>
<div class="eccard_content">
<div class="eccard_title">'. $favicon .' '. $Link_title .'</div>
</div>
<div class="clear"></div>
</a>
</div>';
return $ECcard;
}
//ショートコードに追加
add_shortcode("ECcard", "show_ECcard");
コピーする
ショートコードはこちら↓
[ECcard url="" title="" img_url=""]
コピーする
簡単に解説。
url=”記事のURL”
title=”タイトルを変更する場合”
img_url=”画像URLを指定する場合”
追加CSS/子テーマのスタイルシートに貼るコード
お好みで調整してください。
外観 → テーマファイルエディター → （Cocoon Child）Stlyesheet（style.css）
/******************************
アイキャッチメインブログカード
******************************/
.eccard {
width:320px;
background-color: #ffffff;
border: 1px solid #eeeeee;
word-wrap: break-word;
margin-top:10px;
margin-right: auto;
margin-left: auto;
box-shadow: 0 0 5px 5px rgba(0,0,0,.025);
}
.eccard a {
text-decoration: none;
opacity: 1;
transition: all 0.2s ease;
}
.eccard a:hover{
opacity: 0.7;
}
.eccard_title {
font-size: 0.9em;
font-weight: bold;
color:#333333;
line-height: 1.4;
padding: 0px 10px 10px;
}
コピーする
