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

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

ブログカードとは、ページ内に内部リンクを貼る際にアイキャッチ画像と記事タイトル・テキストなどの要素を1枚のカードのようにまとめて装飾したリンクのことです。

ブログカードを設置する目的は、ページを訪れたユーザーにより分かりやすい形で有益なリンク先を提示することで内部リンクのクリック率を上げて（離脱率を下げて）、より多くのページを見てもらい、PV（ページビュー）・回遊性アップに繋げることです。

本記事ではそんな便利な「ブログカード」をプラグインを使わずにWordPressの投稿記事内に簡単に設置する方法を考察を交えて紹介します。

ブログカードを設置する目的
ブログカードの設置方法
ブログカードの使い方
まとめ

ブログカードを設置する目的

ブログカードを設置する目的は、内部リンクのクリック率を上げて、PVアップに繋げることです。

記事内にテキストリンクを貼る場合、通常は以下のようになりますが、
https://dis-play.net/blog/wordpress/shortcoder/

これをブログカードリンクにすると以下のようになります。

[Shortcoder]記事作成効率アップ！よく使う定型文をショートコードに登録して簡単に呼び出す方法と使い方【超絶便利】

WordPress開発者なら目にする機会が多い「ショートコード」。活用シーンは様々ですが、ショートコードについて簡単に説明すると、繰り返し使用する関数や処理、HTMLや文章を予め一塊のコードとして登録しておき、利用時は[]（ブラケット）で囲んだ簡単な短いコードで呼び出して再利用できるようにするための仕組みです。少し大げさに言うと、長くて煩雑なコードで書かれた内容を任意の1行で呼び出せるように…

同じリンク先でも画像や記事タイトル・抜粋文が記載されているので内容が分かりやすいですよね。

但し、注意点として記事内の全てのリンクを「ブログカードにしたほうがよい」というわけではなく、記事内容に関連した有益なリンク先に絞ってブログカード化した方がよいでしょう。

アフィリエイト系サイトで広告をペタペタ貼りまくっている場合は、広告とブログカードの違いが曖昧になるため、使い方には注意した方がよいでしょう。

また、ブログカードはテキストリンクと違って物理的な面積を占有します。
スマートフォンではリンク範囲が広くタップしやすい反面、乱用するとUI・操作性が悪くなるため、注意が必要です。

重要なことなので何度も言いますが、ブログカードの設置目的は冒頭で述べた通り、あくまでページを訪れたユーザーにより分かりやすい形で有益なリンク先を提示することで内部リンクのクリック率を上げて、PV・回遊性アップに繋げることです。

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

ブログカードの設置方法

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

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

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

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

functions.phpの編集

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

以下ソースを丸ごとコピーして、functions.phpの一番下に貼り付けてください。

貼り付け箇所を間違えたり、不用意な操作で閉じタグなどのソースを消さない限り、基本的にコピペするだけでfunctions.phpの編集は完了します。

もしfunctions.php編集中にソースのコピペミスや閉じタグ忘れなどのミスで画面が真っ白になってしまった場合は、バックアップしておいたファイルをFTP経由で上書きアップロードすれば直りますのでご安心ください。

//内部リンクをブログカードにするショートコード
function show_blogcard($atts) {
	extract(shortcode_atts(array(
		'url'=>"",
		'title'=>"",
		'excerpt'=>""
	),$atts));
	
	//URLから投稿IDを取得
	$id = url_to_postid($url);
	//画像サイズの横幅を指定
	$img_width ="90";
	//画像サイズの高さを指定
	$img_height = "90";
	//アイキャッチ画像がない場合の画像を指定
	$no_image = '/wp-content/uploads/xxxx/xx/xxx.png';
	
	//タイトルを取得
	if(empty($title)){
		$title = esc_html(get_the_title($id));
	}
	
	//本文を取得
	if(has_excerpt($id)){
		//抜粋文字列がある場合
		$excerpt = wp_trim_words(get_the_excerpt($id), 72, '…' );
	} else {
		//抜粋文字列がない場合本文から切り出し
		$excerpt = wp_trim_words(strip_shortcodes(get_post($id)->post_content), 72, '…' );
	}
	
	//アイキャッチ画像を取得
	if(has_post_thumbnail($id)) {
		$img = wp_get_attachment_image_src(get_post_thumbnail_id($id),array($img_width,$img_height));
		$img_tag = '<img src="'. $img[0] .'" alt="'. $title .'" width="'. $img[1] .'" height="'. $img[2] .'" />';
	} else { 
		$img_tag = '<img src="'. $no_image .'" alt="" width="'. $img_width .'" height="'. $img_height .'" />';
	}
	
	//ブログカード部分のHTML
	$sc_blogcard .='
	<div class="blogcard">
	<a href="'. $url .'">
	 <div class="blogcard_thumbnail">'. $img_tag .'</div>
	 <div class="blogcard_content">
	  <div class="blogcard_title">'. $title .'</div>
	  <div class="blogcard_excerpt">'. $excerpt .'</div>
	 </div>
	 <div class="clear"></div>
	</a>
	</div>';	
	return $sc_blogcard;	
}

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

ご自身の環境に合わせて任意で変更が必要な箇所は以下です。

画像サイズ
アイキャッチ画像がない場合の$no_image画像のパス
本文を取得した時の抜粋文字数

画像サイズ
12/14行目：サムネイル画像のサイズや縮尺比率を調整。
そのままのサイズで利用する分には変更の必要はありません。

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

アイキャッチ画像がない場合の$no_image画像のパス
16行目：記事に設定されたアイキャッチ画像が見当たらない場合に入る画像。

//アイキャッチ画像がない場合の画像を指定
$no_image = '/wp-content/uploads/xxxx/xx/xxx.png';

ここはご自身の環境に合わせて画像アップ＆画像までのパスを入れてください。

本文を取得した時の抜粋文字数
26/29行目：記事タイトル下の本文抜粋文字数を調整。

//本文を取得
if(has_excerpt($id)){
	//抜粋文字列がある場合
	$excerpt = wp_trim_words(get_the_excerpt($id), 72, '…' );
} else {
	//抜粋文字列がない場合本文から切り出し
	$excerpt = wp_trim_words(strip_shortcodes(get_post($id)->post_content), 72, '…' );
}

当サイトでは現在の文字サイズで基本的に2行で収まるように72文字に設定しています。
抜粋文字数を多く載せたい場合は文字数を多めに設定するとよいでしょう。

※抜粋の有無で分岐させているのは特定環境下で表示を担保するためです。

以上、コピペ＋＠でそのまま利用できますが、抜粋の有無で分岐させた理由を一応書いておきます。

固定ページへの内部リンクをブログカード化する場合、使用するテーマによっては本文取得時にテーマ固有のページビルダーによって自動挿入されるショートコードが原因で崩れが発生する現象が見られました。
※当サイトでは問題なく動作しますが、別テーマのサイトで見られました。

これは固定ページとブログ投稿記事ではテンプレートの構造が異なるからなのですが、その場合は固定ページに「抜粋」文字列を設定しておくことで回避できます。

この辺りの処理はもっとよいやり方があると思いますが・・・

投稿から文字列を切り出す際の方法は以下の記事で詳しく説明しています。

【WordPress】投稿本文の文字数を制限してテキストのみで取得する方法（wp_trim_wordsが最も正確）

Wordpressで投稿本文の文字列を取得する方法はいろいろありますが、出力形式によってはWPの自動整形機能(wpautop) により意図しないコードが挿入されたり、Gutenbergエディターを使用している場合は自動生成されたHTMLタグや、コメントタグが含まれるケースがあります。ここではブログ記事のリストなどでよく見られる、本文から指定文字数を抜粋して掲載する方法をいくつか紹介いたします。本…

CSSコードの設定

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 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;
}

CSSを調整することで装飾は任意に変更いただけます。
参考までに主な調整箇所を記載しておきます。

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

枠線や塗りの色
2行目：background-color:#ffffff; でボックス内の背景色を調整。
3行目：border: 1px solid #eeeeee; で枠線の色を調整。

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

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

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

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

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

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

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

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

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

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