最近僕のブログで重要視しているテーマが、『回遊性』をあげるってことです。
というのも、僕のブログの場合１つの記事に対して1テーマ書いているので、どうしても直帰率が高くなってしまうんです。

直帰率を減らして、回遊性をあげるのに効力を発揮するのが、「ブログカード」という存在です。
今回は、WordPressのプラグインを使用せず、ブログカードを実装し回遊性をアップさせる方法をご紹介したいと思います。

スポンサーリンク




プラグインはできる限り利用しないほうが好ましい

以前、本ブログではブログカードが実装できるWordPress用プラグイン「Pz-LinkCard」をご紹介しました。
※ちなみにブログカードとは、以下のようにリンク先ページのアイキャッチ画像やタイトルが表示されるやつです

リンク先の情報を簡易表示｜ブログカードプラグイン「Pz-LinkCard」
リンク先の情報を簡易表示｜ブログカードプラグイン「Pz-LinkCard」

しかし、プラグインを使用するとどうしても少なからずサーバーに負荷をかけてしまったり、WordPressの場合プラグインを狙われてウィルスの標的にされてしまったり、どうしてもリスクが付きまといます。

プラグイン無しで実装できる機能は、できる限りプラグインを利用せず、実装することが好ましいので、まずは、本記事を参考に実装してみて、できない場合のみ、上記の「Pz-LinkCard」を利用してみましょう。

ブログカードをプラグイン無しで実装する方法

WordPressのプラグイン無しでブログカードを実装する場合、大きく分けて「function.php」へのコード追記と「style.css」へのコード追記、特定の場所にショートコードを埋め込むといった3つの作業が発生します。

「function.php」では、特定のショートコードが追加された場合に、記事の画像やタイトルが表示されるようにするカスタマイズ。
「style.css」では、その画像の記事やタイトルがブログカード風に見えるよう、調整する役割のコードを追加します。

function.phpに追記

まず、「function.php」ファイルに以下のコードを追記しましょう。

※注意点
「function.php」ファイルはWordPress上でもっとも重要な役割を持ったファイルデータになります。
追記や記入の方法を誤ると、ブログが真っ白になったり管理画面にログインできなくなったりしてしまうので、追記や変更前には必ずバックアップデータを取得するようにしてください。
///////////////////////////////////////
// 内部リンクをショートコードでブログカード化
///////////////////////////////////////
function get_the_custom_excerpt($content, $length) {
	$length = ($length ? $length : 70);//デフォルトの長さを指定する
	$content =  strip_shortcodes($content);//ショートコード削除
	$content =  strip_tags($content);//タグの除去
	$content =  str_replace(" ","",$content);//特殊文字の削除（今回はスペースのみ）
	return $content;
}

//内部リンクをはてなカード風にするショートコード
function nlink_scode($atts) {
	extract(shortcode_atts(array(
		'url'=>"",
		'title'=>"",
		'excerpt'=>""
	),$atts));

	$id = url_to_postid($url);//URLから投稿IDを取得
	$post = get_post($id);//IDから投稿情報の取得
	$date = mysql2date('Y-m-d', $post->post_date);//投稿日の取得

	$img_width ="90";//画像サイズの幅指定
	$img_height = "90";//画像サイズの高さ指定
	$no_image = get_template_directory_uri().'/images/no-img.png';//アイキャッチ画像がない場合の画像を指定

	//タイトルを取得
	if(empty($title)){
		$title = esc_html(get_the_title($id));
	}

	//アイキャッチ画像を取得 
	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.'" />';
		   }

	$nlink .='
<div class="blog-card"><a href="'. $url .'">
	<div class="blog-card-thumbnail">'. $img_tag .'</div>
	<div class="blog-card-content">
		<div class="blog-card-title">'. $title .' </div>
		<div class="blog-card-date">'.$date.'</div>
	</div>
	<div class="clear"></div>
</a></div>';

	return $nlink;
}  

add_shortcode("nlink", "nlink_scode");

style.cssに追記

続いて、ブログカードのデザインを調整する「style.css」ファイルにコードを追記します。
ロールオーバーや背景色、縦幅などの調整は、この「style.css」ファイルで自由にカスタマイズすることができますので、ご利用のブログによって調整してみてください。

/*-----------------------------------
内部リンクをショートコードでブログカード化
------------------------------------*/
.blog-card{
	border:1px solid #ddd;
	word-wrap:break-word;
	max-width:100%;
	border-radius:5px;
	margin-bottom: 30px;
}

.blog-card a {
	color: #333;
	background: #fbfaf8;
	display: block;
	-webkit-transition: 0.3s ease-in-out;
	-moz-transition: 0.3s ease-in-out;
	-o-transition: 0.3s ease-in-out;
	transition: 0.3s ease-in-out;
}

.blog-card a:hover{
	background: #fee;
}

.blog-card-thumbnail{
	float:left;
	padding:10px;
}

.blog-card-thumbnail img {
	display: block;
	padding: 0;
	-webkit-transition: 0.3s ease-in-out;
	-moz-transition: 0.3s ease-in-out;
	-o-transition: 0.3s ease-in-out;
	transition: 0.3s ease-in-out;
}

.blog-card-content{
	line-height:120%;
}
.blog-card-title{
	padding:10px 10px 10px 0;
	font-size:85%;
}

.blog-card-title::before {
	content: '関連記事';
	font-size: 0.7em;
	font-weight: bold;
	color: #fff;
	background: #111;
	width: 5em;
	display: inline-block;
	padding: 0.2em;
	position: relative;
	top: -2px;
	text-align: center;
	margin-right: 0.5em;
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	border-radius: 2px;
}

.blog-card-date{
	color:#333;
	font-size:75%;
	margin-right:10px;
}

ショートコードを埋め込む

「function.php」と「style.css」の各ファイルにコードを追記したら、あとはブログカードを記載したい箇所に、以下のコードの要領でショートコードを埋め込むのみです！

［nlink url=”ブログカードで表示させたい先のURLを入力”］

はい、以上でWordPressのプラグイン無しでもブログカードを簡単に実装することができました！

テキストリンクじゃダメなの？

中にはテキストリンクではダメなの？という方もいらっしゃるのではないでしょうか？
一言で言えばテキストリンクでも、全く問題はありません。

ただ、当初の目的である『回遊性のアップ』を目的としていれば、味気の無いテキストリンクよりも、圧倒的に読み手の目に留まりやすく、おしゃれなブログカードを実装した方が『回遊性アップ』に貢献してくれるのではないでしょうか。

まとめ

いかがでしたでしょうか？
今回は、WordPressプラグインの利用無しで、ブログカードを簡単に実装できる方法をご紹介しました。

「function.php」や「style.css」ファイルをいじるので、パッと見ると難しそうだなと感じられますが、実装してみると、意外と簡単でものの5分程度でブログカードを実装することができますので、ぜひ試してみてはいかがでしょうか？

今回も最後までお読みいただき、ありがとうございました。

スポンサーリンク