【外部リンク対応】ブログカードをプラグインなしで設置する方法【長文】

この記事は約 18 分で読めます。

外部リンクに対応した「ブログカード」をプラグインを使わずにWordPressの投稿記事内にショートコードで設置する方法を考察を交えて紹介します。

なお、本記事単体でも完結する内容になっていますが、ブログカードの使用目的やメリットについて詳しく知りたい方は以下の「内部リンクのブログカードを作成する方法」について書いた記事を先に読まれることをオススメします。

コピペで簡単設置！内部リンクのブログカードを作成する方法【PV・回遊率アップに貢献】

外部リンク対応ブログカードを設置する目的
外部リンク対応ブログカードを自作する理由
外部リンク対応ブログカードの設置方法
外部リンク対応ブログカードの使い方
まとめ

外部リンク対応ブログカードを設置する目的

ブログカードを設置する目的は、内部リンクの場合は簡潔にまとめると「サイト内を横断する関連ページへのリンクのクリック率を上げて全体のPVアップに繋げる」ことです。

いわゆる自サイトのSEO内部対策の手法のひとつになります。
ブログカードを利用する際は内部リンクに対して適用するのが一般的ですね。

一方で外部リンク対応のブログカードを設置するメリットは何でしょうか？

外部リンクの場合、クリック率が上がっても自サイトのPVには影響がないので、自サイトのSEO内部対策とは関係のない施策になります。

そんな外部リンクにも対応した「外部リンク対応ブログカード」の設置目的はズバリ以下の2点に集約されるのではないかと考えます。

外部リンクのブログカードによるサイト送客貢献
外部サイトへの送客による何らかの恩恵獲得

前者の「外部リンクのブログカードによるサイト送客貢献」はオススメのサイトを紹介したり、記事を書く際に参考にしたページの中でもとりわけ読んでほしい参考記事をピックアップするケースでの使用が想定されます。

関連するコンテンツが掲載されたページからの被リンク獲得は外部リンク先のサイトにとってSEO上の恩恵があるため喜ばれます。

サイト送客でコツコツ貢献していると、自サイトにも何らかの形で恩恵が巡ってくるかもしれませんね。

後者の「外部サイトへの送客による何らかの恩恵獲得」は一定数以上の送客、もしくは送客したユーザーがコンバージョンに至った際に何らかの報酬が発生する、といったケースが想定されます。

アフィリエイトサイトにおいて、商品やサービスを紹介する際は独自のアフィリエイト用コードを埋め込んでリンクを埋め込むケースが多いですが、内容によっては今回紹介する外部リンク用のブログカードを利用してリンクを貼ることもできますね。

いずれにしても、ブログカードの設置目的はリンクのクリック率を上げることに集約されます。

外部リンク対応ブログカードを自作する理由

WordPressで構築されたサイトにおいて、内部リンク用のブログカードの設置は比較的仕組みが単純で簡単に設置できるため、多くのサイトで作成方法が紹介されています。

一方で外部リンクに対応しているブログカード作成となると、「はてなブログカード」を利用した設置方法や、WordPressプラグインである「Pz-LinkCard」を利用した設置方法を紹介しているサイトが数多く見られます。

これらの実装方法はシステムに関係するファイルをさわらなくても簡単に設置できる反面、以下のような弊害もあります。

「はてなブログカード」でリンクを設置した場合、外部リンクへ飛んだ際の参照元が「はてな」になってしまう
「Pz-LinkCard」を利用した場合、テーマや他プラグインとの相性次第でページの表示速度が重たくなる可能性がある
外部提供サービスを利用する場合、サービス自体に仕様変更があった際に自サイトが影響を受ける
デザイン調整や機能追加などのカスタム自由度が低い

圧倒的なメリットや使い勝手の良さがあれば喜んで外部サービスやプラグインを導入するのですが、そういう素晴らしいサービスは少ないのが現実です。

外部リンク対応のブログカードの実装方法の【決定版】を提供しているブロガーさんが少ないのもまた現実です。

というか、開発者や提供者が少ないということは「世の中における需要が少ない」ということなのですが。。。(笑)

上記理由や今後のメンテナンスコスト等を考慮すると、「自作した方が使いやすい」という結論に至り、今回自作で外部リンク対応のブログカードを作成してみることにしました。

趣味のサイトならまだしも、クライアント案件でブログカードのリクエストがあった場合、「はてなブログ」や「Pz-LinkCard」で実装するのはどう考えても「なし」ですからね。。。

とりあえず自サイトや運営サイトの環境でリスクなく正常動作することを目的として作成しましたので、ソースコードを流用＋カスタマイズする場合は自己責任でお願いいたします。

先に完成した外部リンク対応ブログカードを貼っておきますね。
※もし表示されない場合一度リロードしてみてください。。。

もらって嬉しい！オリジナル金箔ノベルティ・販促専門サイト『HAQU』

金沢箔を使用したオリジナル金箔カレンダー・名刺・栞（しおり）など、企業様向けの販促・周年記念品やイベント・展示会用に広告…

https://haqu.jp/

画像サイズやブログカード自体の見栄えは後からCSSで自由に調整可能となっています。

それでは設置方法を解説していきます。

外部リンク対応ブログカードの設置方法

最初にお伝えしておきますが、本手順ではWordPressのPHPテンプレートファイル（functions.php）を直接編集することになるため、そのリスクを理解した上で必ず一度テスト環境上で試されることを奨励します。

作業はWordPressの管理画面上で行わず、FTPなどでファイルをローカルに落とした上でバックアップを取ってから行った方がよいでしょう。

カスタム⇒プレビューという流れで画面確認することになると思われますが、コピペミス・手動入力ミスなどにより些細なミスが発生する可能性があるため、ご注意ください。

WordPressが動作するローカル作業環境をお持ちの方はローカルで作業することをオススメします。

また、基本的にコードのコピペ＋＠で実装できるような内容になっていますが、WordPressやPHP、HTMLやCSSについての基本的な知識がある前提で説明していますことをご了承ください。

使用するファイルと仕組みの説明

設置に際して調整が必要なファイルは以下の3点です。
作業はいずれもコピペ＋＠でおよそ30分もあれば完了します。

OpenGraph.phpの設置＋＠
functions.phpの編集（コードをコピペ＋＠）
CSSの設定（任意のstyle.cssにCSSコードをコピペ）

各コードの説明に入る前に今回実装する内容の要点を作業フローに沿って記載します。

OpenGraph.phpをダウンロードして1行追記
OpenGraph.phpをWordPressのfunctions.phpと同じディレクトリにアップ
functions.phpにショートコード用のコードをコピペ＋＠
ブログカードの見栄えを調整するためのCSSをコピペ＋＠
投稿記事内にショートコードでブログカードを挿入

「コピペ＋＠」と表記しているのは、コピペ後に各々の環境に合わせて変更・調整が必要な箇所があることを意味しています。

それでは次章より各ファイルについての説明を行っていきます。

OpenGraph.phpの設置

OpenGraph.phpは外部サイトのOGPタグから各種情報を取得できるようにするためのPHPファイルです。（本記事ではOGPの仕様や利用方法などの詳細な説明は割愛します）

基本的には設置するだけでOKのファイルです。

※OGPとは、Open Graph Protocolの略で、主にSNS上でウェブページの内容を伝えるために定められた情報のことです。
FaceBookやTwitterのシェア機能もOGPを利用しています。
その用途はSNSにとどまらず、OGPタグを利用して外部サイトの様々な情報を読み取ることが可能となっています。

以下サイトよりファイルをダウンロードします。
https://github.com/scottmac/opengraph/

「Clone or Download」にホバーして、「Download Zip」からファイル一式をダウンロードすることができます。

ダウンロード後にZipを解凍して、「OpenGraph.php」をWordPressのfunctions.phpが置いてあるディレクトリと同じ場所にアップしてください。

OpenGraph.phpはこの後、functions.phpの中でブログカード用のタイトル・抜粋文用のdescription取得時に利用することになります。

ここでOpenGraph.phpについて1つ注意点があります。

ダウンロードしたファイルをそのまま使用した場合、サーバー環境によっては文字列の受け渡しを行う際に文字化けが起きてしまうケースがあるため、一部コードを追記します。

筆者のいくつかの環境ではOGPタグから取得したタイトルやdescriptionの文字列をブラウザに出力した際にもれなく文字化けしました。(笑)

もし文字化けが発生しない環境であれば、以下はスルーしてください。

文字コードが悪さをしているのですが、追記するのは以下の1行のみです。
文字エンコーディングに関する記述ですね。

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

ファイル内の行番号で言うと、84行目付近でしょうか。
以下のように「static private function _parse」関数の中に1行追記します。

static private function _parse($HTML) {
	$old_libxml_error = libxml_use_internal_errors(true);
	
	$HTML = mb_convert_encoding($HTML,"HTML-ENTITIES","UTF-8");

	$doc = new DOMDocument();
	$doc->loadHTML($HTML);

以上でOpenGraph.phpの作業は完了です。
ファイルをアップした後、続いてfunctions.phpの編集を行っていきます。

functions.phpの編集

functions.phpの編集を行います。
子テーマが利用できる環境であれば子テーマのfunctions.phpを利用しましょう。

PHPに不慣れな人にとっては内容はやや複雑に見えるかもしれませんが、貼り付け箇所を間違えたり、不用意な操作で閉じタグなどのソースを消さない限り、基本的にコピペ＋＠でfunctions.phpの編集は完了します。

但しコピペするコードが長いため、コピーする際の閉じタグ漏れなどにはご注意ください。

もしfunctions.phpをアップ後、画面が真っ白になってしまった場合は、バックアップしておいたファイルをFTP経由で上書きアップロードすれば直りますのでご安心ください。

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">
	 <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 .' <i class="icon-external-link-alt"></i></div>
	 </div>
	 <div class="clear"></div>
	</a>
	</div>';	
	
	return $sc_Linkcard;	
}

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

各々の環境に合わせて任意で変更が必要な箇所

先に示した完成版ブログカードのサンプルと同じ体裁でそのまま使う場合は、コピペした後コードを変更する必要はありませんが、ここでは任意で変更調整できる箇所を2点ピックアップして解説します。

画像サイズ
本文を取得した時の抜粋文字数

画像サイズ
10/12行目：サムネイル画像のサイズを調整。
初期値は正方形で縦横ともに170と設定しています。

//画像サイズの横幅を指定
$img_width ="170";
//画像サイズの高さを指定
$img_height = "170";

ここで設定した値が画像出力時のコードに反映されます。

本文を取得した時の抜粋文字数
25行目：記事タイトル下の本文抜粋文字数を調整。
画像とのバランスを見て2行以内に収まるように60文字に設定しています。

//本文を取得
$Link_description = wp_trim_words($graph->description, 60, '…' );//文字数は任意で変更

抜粋文字数の増減を行う場合はこの数字を調整してください。

ちなみに筆者は主にWordPress環境をメインで構築するケースが多いため、「wp_trim_words」で文字列を切り出していますが、WordPress以外の場合は「mb_substr」を使うとよいかと思います。

※本記事ではWordPressで利用することを前提にショートコード化しているため、WordPress環境以外の場合はショートコード周りの記述を変更する必要があります。

【WordPress】投稿本文の文字数を制限してテキストのみで取得する方法（HTMLタグ・改行・スペース・ショートコード除去）

その他については取り急ぎ変更しなくても問題ありませんが、いろいろカスタムできる仕組みにはなっていますので、知識がある人はよりよいコードに改変してご利用ください。

その他コードの解説

以下は特に変更する必要がない箇所ですが、構造を理解しておいた方がご自身でカスタムする際にわかりやすいと思いますので簡単に解説します。

OGP情報を取得
15/16行目：OpenGraph.phpを読み込んでOGP情報を取得。

//OGP情報を取得
require_once 'OpenGraph.php';
$graph = OpenGraph::fetch($url);

OGPタグで定義された外部サイトの各種情報を呼び出すために使います。

OGPタグからタイトル・descriptionを取得
18～28行目：$graph->titleでOGPタグのタイトルを取得。
$graph->descriptionでOGPタグのdescriptionから抜粋文を取得しています。

//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を利用してスクリーンショットを取得
31～33行目：wordpress.comが提供している非公式のAPIを利用してスクリーンショットを取得。
URLを入れるだけで簡単にスクリーンショットを描画してくれるお手軽なAPIです。

//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 .'" />';

URL末尾に「/」スラッシュが付いた状態の場合にスクリーンショットを取得できないケースがある模様なので、rtrim( $url, ‘/’ )で末尾のスラッシュを削除する処理をしています。

但し注意点として、恐らくこのままの書き方だと確実な画像の読み込みとレンダリングが保障されていないため、読み込み状況のタイムラグの影響なのか、たまに画像が取得できなくて以下のようなローディング状態の黒い画像が表示されるケースが見られました。（この場合リロードすると2回目以降は表示されるようです）

もうひとつの注意点は、外部のAPIを経由して外部サイトのスクリーンショットをキャプチャ後、HTMLのイメージとして呼び出されるため、若干表示が遅くなる点です。

案件によっては使用を控えた方がよいですが、普通のブログなどで使用する分にはお手軽さを考慮すれば許容範囲でしょう。(笑)

公式APIに昇格した際には非同期処理の読み込み仕様となり上記問題点をクリアしてほしいですね。

ファビコンを取得（GoogleのAPIでスクレイピング）
36～40行目：Googleが提供している非公式のAPIを利用してスクリーンショットを取得。
非公式シリーズ第二弾。非公式ではありますが非合法ではありません。(笑)

$host = parse_url($url)['host'];
$searchFavcon = 'https://www.google.com/s2/favicons?domain='.$host;
if($searchFavcon){
  $favicon = '<img class="favicon" src="'.$searchFavcon.'">';
}

こちらもURLを入れるだけでファビコンを表示できる優れものです。

ちなみに「スクレイピング」は聞き慣れない言葉ですが、正確には「ウェブスクレイピング」と言うそうで、「ウェブサイトから情報を抽出するコンピュータソフトウェア技術」という意味らしいです。

Googleや世の名のテクノロジー系企業が提供している非公式のAPIはいろいろあるみたいで、「非公式」ゆえに公に出回ることはありませんが、それゆえに面白そうなAPIがゴロゴロしていますね。

「車輪の再発明」を行わずとも、まだあなたの知らない技術や手法が非公式APIを通じて実現できるかもですね！

CSSコードの設定

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

CSSコードは以下になります。
style.cssなど任意のスタイルシートに丸ごとコピペしてください。

.blogcard {
  line-height: 1;
  background-color: #ffffff;
  border: 1px solid #eeeeee;
  word-wrap: break-word;
  margin: 40px;
  box-shadow: 0 0 10px 6px rgba(0,0,0,.025);
}
.blogcard.ex {
  background-color: #f7f7f7;
}
.blogcard a {
  text-decoration: none;
  opacity: 1;
  transition: all 0.2s ease;
}
.blogcard a:hover {
  opacity: 0.6;
}
.blogcard_thumbnail {
  float: left;
  padding: 20px;
}
.blogcard_title {
  font-size: 1em;
  font-weight: bold;
  line-height: 1.4;
  padding: 17px 20px 10px;  
}
.blogcard_excerpt {
  font-size: 0.85em;
  line-height: 1.6;
  padding: 0 17px 15px 20px;
}
.blogcard_link {
  font-size:0.65em;
  padding:0 17px 15px 20px;
  text-align: left;
}
.blogcard_link .favicon {
  margin-bottom: -4px;
}
.blogcard_link .icon-external-link-alt::before {
  font-size:0.75em;
}

CSSを調整することで装飾は任意に変更いただけます。
そのまま利用する場合は変更の必要はありません。

ちなみにCSSは内部リンク用ブログカードと共用しています。

コピペで簡単設置！内部リンクのブログカードを作成する方法【PV・回遊率アップに貢献】

参考までに主な調整箇所を記載しておきます。

枠線や塗りの色
文字サイズ
その他

枠線や塗りの色
10行目：background-color:#f7f7f7; でボックス内の背景色を調整。

文字サイズ
25行目：font-size: 1em; で記事タイトルの文字サイズを調整。
31行目：font-size: 0.85em; で抜粋文の文字サイズを調整。

ブログ記事に設定している大元の文字サイズとの兼ね合いでバランスを見て任意で調整するとよいでしょう。

その他
余白関係を調整したい場合は、6行目のmargin（カード左右上下の余白）、各行にあるpadding（カード内部の余白）、テキスト行間はline-heightの各数値で調整可能なので、お好みの数値に調整してご使用ください。

また、ブログカード部分のHTML構造を保持している限りは追加で装飾用のHTMLタグやCSSクラスを加えたりすることも可能です。

スマートフォン用のCSS調整

こちらは任意になりますが、スマートフォンで表示した際に抜粋文を非表示にする処理や、その他調整用のCSSを参考までに記載しておきます。

コピペ＋＠で任意で調整してください。

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

CSSの設定が完了したら、テーマで使用しているCSSに反映して保存・アップロードしてください。

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

外部リンク対応ブログカードの使い方

エディタ内でブログカードとして外部リンクを貼る際は、以下のようなショートコードとして挿入します。

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

sc_Linkcardはfunctions.php内で先ほど設定したショートコード名で、
url=”リンク先URL”の部分を以下のように任意のURLに置き換えて利用します。

[sc_Linkcard url="https://haqu.jp/"]
↓ ショートコードはビジュアルエディタ上でのプレビューはできませんが、以下のようになります。

もらって嬉しい！オリジナル金箔ノベルティ・販促専門サイト『HAQU』

金沢箔を使用したオリジナル金箔カレンダー・名刺・栞（しおり）など、企業様向けの販促・周年記念品やイベント・展示会用に広告…

https://haqu.jp/

通常の使い方は「url」に任意のURLを入力して使いますが、何らかの事情で外部リンク先のタイトルやdescriptionが取得できない場合や個別に文言を入れたいケースもあるでしょう。

そういった場合は、ショートコード内に「url」以外に「title」「excerpt」を手動で入力することで任意の文字列を表示させることも可能です。

[sc_Linkcard url="https://haqu.jp/" title="任意のタイトル名" excerpt="任意の説明文"]
↓ 以下のようになります。

任意のタイトル名

任意の説明文

https://haqu.jp/

「外部リンク対応ブログカードのショートコードを作成」する際の冒頭で定義した「url」以外の変数はこういったケースで使われるというわけですね。

/* 外部リンク対応ブログカードのショートコードを作成 */
function show_Linkcard($atts) {
  extract(shortcode_atts(array(
    'url'=>"",
    'title'=>"",
    'excerpt'=>""
  ),$atts));

余談ですが、このショートコードは内部リンクにも対応しています。
OGPタグから情報を取得する構造なのでOGPを設定しているページであれば有効ですからね。

但し内部リンクのURLを入れる際はhttpsからの絶対パスを入力するようにしてください。

解説は以上です。
長文にお付き合いいただきありがとうございました。