せっかく訪れてくれたユーザーに別の記事もおすすめしたい

 

ブログを運営している人なら、できるだけ1人あたりのPV数をアップさせたいですよね。WordPressでブログを運営している場合、サイドバーの「人気記事」や記事の最後の「関連記事」はプラグインを追加するだけで簡単に導入でき、自動的に表示することができます。

一方で、本文の途中で「あわせて読みたい」みたいな感じで関連記事を表示するためには、1つずつURLを書く地道な作業が必要です。

今回は

  • できるだけ簡単に関連記事(内部リンク)をブログカード風に表示したい
  • プラグインは使いたくない
  • 外部リンクと内部リンクでデザインを変えたい

という人向けに「function.php+ショートコード」でブログカードっぽい関連記事を表示する方法をご紹介させて頂きます。記事後半のコードをコピペするだけで簡単に実装できますので、ぜひやってみてください。

説明なんかいらないから、コピペのコードだけ見たい、というひとは「function.php+ショートコードのカスタマイズ方法」まで飛んで下さいまし。

 

ブログカードとは?

ブログカードとは、はてなブログで利用できる、記事のタイトルや概要、アイキャッチ画像をめちゃくちゃ簡単に表示するための機能です。記事を書くときに「リンク挿入」で↓のようなパーツが簡単に表示されるのです。

related-articles-blog-card-01

そして、実は、WordPressもバージョン4.4以降では、ブログカードの埋め込みがサポートされるようになりました。

related-articles-blog-card-02

ただ、はてなブログカードのようにコンパクトに表示するには、けっこうなカスタマイズが必要になります(しかも、後述の方法が簡単なので、ほとんどやっている人がいないという……)

 

スポンサーリンク

プラグインでブログカードを表示する方法

まずは、「面倒なことは考えたく無いから、とりあえず一番簡単なやつ!」という人向けに、導入するだけでブログカードを表示できるプラグインを紹介します。

 

Pz-LinkCard

「はてなブログカード」の非公開APIを利用して、そっくりなブログカードを作ることができるプラグイン『Pz-HatenaBlogCard』を公開してくださっていた、ぽぽろんさん(@popozure)が、その後継としてリリースしたのが『Pz-LinkCard』です。

[blogcard url=”■URL■”]といったショートコードを記載することで、簡単にブログカードを表示することができます。

また、表示を細かくカスタマイズできるので、自分好みのブログカードを作ることも可能!

↓はプラグインを導入後、まったくカスタマイズしなかった場合。
好みによりますが、なかなかアグレッシブなデザインなので、自分のブログのデザインにあわせて調整しましょう。

related-articles-blog-card-03

 

Celtispack プラグインパック

デザインのカスタマイズすらしたくないよ!というめんどくさがりのアナタには『Celtispack プラグインパック』がおすすめ。

『Celtispack プラグインパック』は、画像の遅延ロードやスライダー機能の追加など、様々なプラグインをぎゅっと1つにまとめてくれたプラグインパックです。この沢山の機能の1つに「ブログカード」を表示する機能が搭載されているのです。

この『Celtispack プラグインパック』のブログカード機能、ついでのように搭載されている割に、UstreamやCodePenなどWordPress標準のブログカード機能では対応していないサイトの埋め込みが可能になったり、エディタにキャッシュをクリアする機能を追加できたりと、かゆいところに手が届く親切設計!

ショートコードの入力する必要すら無く、エディタにURLをコピペするだけで勝手に↓のようなそこそこおしゃれなブログカードに変換してくれます。

related-articles-blog-card-04

 

スポンサーリンク

じゃあなんでプラグインを使わないの?

プラグインで簡単にブログカードが導入できるのに、なんでやらないの?と思われるかもしれませんよね。ごめんなさい、実は『Celtispack プラグインパック』は使っています。これまでは↑の画像のように関連記事を表示していたんです。

なら、なぜ今回の記事を書いているかというと、「内部リンクと外部リンクでデザインを変えたくなったから」。『Celtispack プラグインパック』はとても便利なプラグインなのですが、細かいデザインの調整はできません。

外部リンク(他のサイトを紹介するリンク)については今のままで問題ないのですが、自分の過去記事を紹介する内部リンクについては、概要などを省き、もっとシンプルにした方が良いのでは?と思うようになりました。

その方が、ユーザーさんにとっても分かりやすく&使いやすくなるのでは?という予想もあります。

 

プラグイン無しでブログカードを表示するためのカスタマイズの流れ

外部リンクは『Celtispack プラグインパック』に任せるとして、内部リンクをブログカード化するために、以下の流れでカスタマイズしていきます。

  1. 特定のショートコードが入力された場合、該当の記事のアイキャッチ画像とタイトルを表示してくれるようにfunction.phpをカスタマイズ
  2. そのアイキャッチ画像とタイトルがブログカードっぽく見えるようにCSSをカスタマイズ
  3. 毎回ショートコードを手打ちするのは面倒くさいので、『AddQuicktag』に該当のショートコードを登録

出来上がりは↓のような感じ。

参考にさせて頂いたのは、下記の記事。

はてなブログで使われているブログカードみたいなデザインで、WordPressで内部リンクを貼ることができるショートコードを作りました。投稿画面に下記のようなショートコードを入力するだけで、アイキャ

もともとは、多くの愛用者がいる無料のWordPressテーマ『Simplicity』を制作しておられる、わいひらさん(@mryhira)が公開して下さった方法をカスタマイズしたものになります。

9月にはてなブログがリリースしたブログカード、かっこいいですよね。

 

function.php+ショートコードのカスタマイズ方法

それでは、具体的なカスタマイズ方法について見ていきましょう。といっても、↓のコードを順番にコピペするだけですが……

 

function.php にコピペするコード

まずは、function.phpに以下のコードを追記しましょう。(基本的に参考にさせて頂いた記事のコードのうち、概要を取得する部分を削除したものになります)

注意
function.phpはちょっと記入の仕方をミスると、ブログが真っ白になったりするので、必ずバック アップをとり、FTPからアクセスできるようにしてから作業して下さい。
(FTPって何?という人は、今回のカスタマイズの実施は見送りましょう)
///////////////////////////////////////
// 内部リンクをショートコードでブログカード化
///////////////////////////////////////
//使用方法:http://nelog.jp/get_the_custom_excerpt
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にコピペするコード

次に、デザインを調整するために、WordPressテーマのデザインを管理しているstyle.cssに以下のコードを追記しましょう。背景色やロールオーバー時の処理などは、ご自由にカスタマイズいただければと思います。

今回のブログカードのデザインは、有料ながら高い人気を誇るWordPressテーマ『ハミングバード』の利用マニュアルの、下記の記事に表示されている「関連記事」のデザインを参考にさせて頂きました。

ショートコードの利用が可能です!   もくじ記事中に関連記事のリンクを画像つきで表示2カラム表示3カラム表示補足説明注意説明ボタン吹き出し機能アイコン周りに色をつける※バージョン1.1.9〜追加機能吹き出しのオ…
/*-----------------------------------
内部リンクをショートコードでブログカード化
------------------------------------*/
.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;
}

 

AddQuicktag にショートコードを登録

function.phpとCSSをカスタマイズした時点で、[nlink url=”ブログカード化したいURL”]と記載すればブログカードが表示されるようになっています(↑で全角にしているかぎかっこを半角にする必要あり)。

ただし、毎回、このショートコードを手打ちするのは面倒くさいので、よく使うタグを登録しておける『AddQuicktag』というプラグインに、今回のショートコードを登録してしまいましょう。

related-articles-blog-card-05

このように「開始タグ」と「終了タグ」を登録しておけば、記事作成画面の「Quicktags」というプルダウンを選択するだけで、ショートコードの入力ができるので、あとはURLをコピペするだけでOKです。

related-articles-blog-card-06

 

TSUNJI(@tsunji1983)的まとめ

今回のカスタマイズを実施することで、内部リンクについては今回のブログカードを表示、外部リンクについては『Celtispack プラグインパック』のブログカードを表示、という形で場合分けすることができました。

ちなみに、『Celtispack プラグインパック』を使おうとして、上手くブログカードが表示できない!という人は、下記の過去記事が解決策になるかもしれません。

コピペするだけで実装できるので、ぜひやってみてください。

 

以上、TSUNJI(@tsunji1983)でした。