プラグインなし！内部・外部リンク対応のブログカードを表示する方法。｜WordPress

WordPressで、プラグインを使わずにブログカードを表示する方法をご紹介致します。

プラグイン不使用には、サーバー負荷の軽減やサイト表示速度の保持など様々なメリットがあります。

WordPressには多種多様なプラグインがたくさんありますが、できるだけ使わずにカスタマイズしたいものです。

同じ思いの方々に是非参考にしていただきたいと思い、本サイトでも導入している実装方法をご紹介させていただきます。

ショートコードを設置する方法で、内部リンク・外部リンクに対応しています。

完成イメージ

下記が表示イメージです。

デザインはCSSで自由にカスタマイズ可能です。

※もし表示されない場合はリロードしてください。

内部リンク

Frecer（フリッカー）：自由な発想で新世界をつくる。

https://frecer.com/

外部リンク

X. It’s what’s happening

From breaking news and entertainment to sports and politics,…

https://x.com/

目的

内部リンク対応ブログカード

内部リンクの場合「サイト内を横断する関連ページへのリンクのクリック率を上げて全体のPVアップに繋げる」ことで、自サイトのSEO内部対策の手法のひとつになります。

外部リンク対応ブログカード

1. 外部リンク先のサイト送客貢献
2. 外部サイト送客による何らかの恩恵獲得

関連コンテンツが掲載されたページからの被リンク獲得は外部リンク先のサイトにとってSEO上の恩恵があるため、自サイトにも何らかの形で恩恵が返ってくる可能性があります。

設置方法

次の手順で設置していきます。

1. OpenGraph.phpの導入
2. functions.phpの編集
3. CSSの編集
4. ショートコードでブログカードを挿入

OpenGraph.phpの設置

OpenGraph.phpは外部サイトのOGPタグから各種情報を取得できるようにするためのPHPファイルです。

ファイルダウンロード

以下サイトよりファイルをダウンロードします。

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

Helper class for accessing the OpenGraph Protocol. Contribut…

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

「Code」ボタンをクリックし「Download ZIP」からファイル一式をダウンロードします。

ファイルの解凍・設置

Zipファイルを解凍し、「OpenGraph.php」をfunctions.phpがあるディレクトリと同じ場所に設置してください。

functions.phpの編集

functions.phpの編集を行います。

子テーマが利用できる環境であれば子テーマのfunctions.phpを利用してください。

各コードの説明書きはそれぞれコード上部に記載していますので、参考にされてください。

※必ずバックアップをとってから編集してください。

/* 外部リンク対応ブログカードのショートコードを作成 */
function show_Linkcard($atts) {
	extract(shortcode_atts(array(
		'url'=>"",
		'title'=>"",
		'excerpt'=>""
	),$atts));
	
	//画像サイズの横幅を指定
	$img_width ="170";
	//画像サイズの高さを指定
	$img_height = "170";
	
	//OGP情報を取得
	require_once 'OpenGraph.php';
	$graph = OpenGraph::fetch($url);
	
	//OGPタグからタイトルを取得
	$Link_title = $graph->title;
	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="blogcard ex">
	<a href="'. $url .'" target="_blank" rel="noopener noreferrer">
	 <div class="blogcard_thumbnail">'. $xLink_img .'</div>
	 <div class="blogcard_content">
	  <div class="blogcard_title">'. $Link_title .'</div>
	  <div class="blogcard_excerpt">'. $Link_description .'</div>
	  <div class="blogcard_link">'. $favicon .' '. $url .' </div>
	 </div>
	 <div class="clear"></div>
	</a>
	</div>';	
	
	return $sc_Linkcard;	
}

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

CSSコードの設定

最後にCSSの調整を行います。

CSSコードは以下になります。

style.cssなど任意のスタイルシートに丸ごとコピペしてください。

.blogcard {
  line-height: 1;
  background-color: #fff;
  word-wrap: break-word;
  margin: 10px 0
}

.blogcard.ex {
  background-color: #f5f5f5;
  border-radius: 5px
}

.blogcard a {
  text-decoration: none;
  opacity: 1;
  transition: all .2s ease
}

.blogcard a:hover {
  opacity: .6
}

.blogcard_thumbnail {
  float: left;
  padding: 20px
}

.blogcard_title {
  font-size: 1em;
  font-weight: 700;
  line-height: 1.4;
  padding: 17px 20px 10px
}

.blogcard_excerpt {
  font-size: .85em;
  line-height: 1.6;
  padding: 0 17px 15px 20px
}

.blogcard_link {
  font-size: .9em;
  padding: 0 17px 15px 20px;
  text-align: left
}

.blogcard_link .favicon {
  margin-bottom: -4px;
  width: 18px;
  height: 18px
}

CSSをカスタマイズすることで任意のデザインに変更可能です。

スマートフォン用のCSS

スマートフォン表示に対応するためのCSSコードです。

@media screen and (max-width:768px) {
  .blogcard {
    margin: 10px 0
  }
  .blogcard_thumbnail img {
    width: 90px
  }
  .blogcard_title {
    font-size: .95em;
    padding-bottom: 17px
  }
  .blogcard_excerpt {
    display: none
  }
}

CSSの編集が完了したら、テーマで使用しているCSSに保存してください。

設定については以上で完了です。

ブログカード表示方法

以下のようなショートコードを挿入します。

[sc_Linkcard url="リンク先URL"]

例えば、『https://x.com/』のカードを表示させたい場合は下記のようなショートコードになります。

【ショートコード例】

[sc_Linkcard url="https://x.com/"]

【表示例】

X. It’s what’s happening

From breaking news and entertainment to sports and politics,…

https://x.com/

また、外部リンク先のタイトルやdescriptionが取得できない場合や、個別に文言を入れる際は、ショートコード内に「url」とは他に「title」「excerpt」を手動で入力することで任意のテキストを表示させることが可能です。

【ショートコード例】

[sc_Linkcard url="https://x.com/" title="任意のタイトル名" excerpt="任意の説明文"]

【表示例】

任意のタイトル名

任意の説明文

https://x.com/

まとめ

今回はプラグインを使わずにWordPressに「内部・外部リンク対応のブログカードを表示させる方法」をご紹介しました。

作業自体は時間もかからず、すぐに実装できますので宜しければ参考にされてください。

更に条件分岐なども加え、特定の記事ページのみ反映させ、その他のページ速度に影響を与えない方法もご紹介予定ですので、引き続きご購読いただけますと幸いです。

最後までご覧いただきありがとうございました。