2018/03/09 2018/03/31

【サムネ有り】余白まで美しい！YARPPのカスタマイズ用テンプレート無料配布 | WordPressプラグイン

こんにちは、フリーランスパパの神田翼(@tsubasa_lsc)です。

今回は、WordPressでブログを運営している方に向けた記事です。みなさんのブログには、記事下などに「関連記事」の表示はしてありますか？一度訪問してくれたユーザーに、「この記事もおすすめですよ」と複数の関連記事を表示することで、すぐに離脱することが少なくなります。関連記事の表示は必須だと思います。

そこで、多くのブログで使用されている関連記事を表示させるためのプラグインYARPP(Yet Another Related Posts Plugin)を紹介します。

タイトルに「余白まで美しい！YARPPのカスタマイズ用テンプレート無料配布」と書いていますが、カスタマイズした独自のデザインで表示できるところまでご説明します。カスタマイズ後のイメージ図はこんな感じです。

YARPPの関連記事表示(カスタマイズ後)

ちなみに、サムネイルを見て、記事の内容が気になった方はこちらの「旅行カテゴリ」から見ることができます。

YARPPプラグインが人気の理由とデメリット

YARPPのプラグインは関連記事表示系のプラグインの中では、非常に人気です。その理由は関連して表示される記事の「精度が高い」からです。しかし、デメリットがひとつあります。はじめの段階で選択できるデザインが美しくないです。あくまでも個人的な意見ですが、共感してくれる人もいるのでは？と思ったので、今回「カスタマイズ用テンプレート」を作ってみました。

僕が実際にYARPPプラグインを触ってみて感じたデメリットは、知識のない初心者の方には少しカスタマイズが難しいということです。「初心者には難しい」と書いた理由は、デザインを美しく整えるにはPHPを使用して自分でカスタマイズしてテンプレートを作成しなければいけないからです。その小難しいテンプレートを僕が作成しましたので、問題解決です！

まずは、こちらからインストール＆有効化してください。
YARPP(Yet Another Related Posts Plugin)をダウンロードする
プラグイン検索で「YARPP」と入力してもダウンロード可能です。

YARPPカスタマイズ用テンプレート【yarpp-template-relative.php】の作成

PHPファイルを作成しますが、下記コードをそのままコピーしてもらってOKです！こちらからZIPファイルをダウンロードすることも可能です。

<?php
/*
YARPP Template: フリーランスパパ配布
*/ ?>

<h3>こちらの記事も人気です</h3>
<?php if (have_posts()):?>
<ul class="related-post">
	<?php while (have_posts()) : the_post(); ?>
		<?php if (has_post_thumbnail()):?>
		<li>
			<a href="<?php the_permalink() ?>"rel="bookmark"title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail(); ?></a>
			<p class="title"><a href="<?php the_permalink() ?>"rel="bookmark"title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></p>
		</li>
		<?php endif; ?>
	<?php endwhile; ?>
</ul>

<?php else: ?>
<p>関連記事はありません。</p>
<?php endif; ?>

<?php

YARPP Template: フリーランスパパ配布

*/ ?>

<h3>こちらの記事も人気です</h3>

<?php if (have_posts()):?>

<?php while (have_posts()) : the_post(); ?>

<?php if (has_post_thumbnail()):?>

<li>

<a href="<?php the_permalink() ?>"rel="bookmark"title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail(); ?></a>

<p class="title"><a href="<?php the_permalink() ?>"rel="bookmark"title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></p>

</li>

<?php endif; ?>

<?php endwhile; ?>

</ul>

<?php else: ?>

<p>関連記事はありません。</p>

<?php endif; ?>

上記コードをコピーして、テキストエディタで「yarpp-template-relative.php」というファイル名で保存して下さい。

以下にコードの簡単な解説を書いておきます。

6行目：こちらの記事も人気です

「こちらの記事も人気です」のテキストを自由に変更してOKです。「関連記事一覧」や「あなたにおすすめの記事」なども良いと思います。導入してみて「こちらの記事も人気です」の見出しがキレイに装飾されていない場合は、各々が使用しているテーマで、すでに見出しは装飾されていると思うので、「h3」と書いている部分を「h4」などに変更してみて下さい。

20行目：関連記事はありません

「関連記事はありません」は、関連記事が表示されない時に表示するテキストです。自由に変更してOKです。

YARPPカスタマイズテンプレート「yarpp-template-relative.php」の保存場所

ファイル名は変更せずに「yarpp-template-relative.php」のままにして下さい。ファイルの保存場所ですが、テーマフォルダと同じ階層です。これを間違えたら上手く行かないので気をつけて下さい。

wp-content/themes/テーマの名前/ここです
「index.php」と「style.css」が同じ階層にあるはずです。

YARPPカスタマイズ用CSSを「style.css」に追加

CSSで装飾します。ここで「余白まで美しい」テンプレートに変身します。CSSは下記コードをそのままコピーしてstyle.cssに貼り付けてください。別のCSSファイルでも全然OKです！

ul.related-post{
	width:100%;
	overflow:hidden;
	margin:20px 0;
	height:100%;
	display:-webkit-box;
    display:-moz-box;
    display:-ms-flexbox;
    display:-webkit-flex;
    display:-moz-flex;
    display:flex;
    -webkit-box-lines:multiple;
    -moz-box-lines:multiple;
    -webkit-flex-wrap:wrap;
    -moz-flex-wrap:wrap;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap;
}

ul.related-post li {
	float: left;
	width:22%;
	display: block;
	margin-right: 4%;
	margin-bottom: 20px;
}

ul.related-post li:nth-child(4n) {
	margin-right: 0;
}

ul.related-post li a:hover{
	filter:alpha(opacity=80);
	-moz-opacity: 0.8;
	opacity: 0.8;
}

ul.related-post li p.title{
	line-height: 1.8;
    font-size: 95%;
}

ul.related-post li p.title a{
	text-decoration: none;
}

ul.related-post li img{
	width: 100%;
}

@media (max-width: 599px) {
/* small devices */

ul.related-post li {
	width:48%;
}

ul.related-post li:nth-child(2n) {
	margin-right: 0;
}

}

ul.related-post{

width:100%;

overflow:hidden;

margin:20px 0;

height:100%;

display:-webkit-box;

display:-moz-box;

display:-ms-flexbox;

display:-webkit-flex;

display:-moz-flex;

display:flex;

-webkit-box-lines:multiple;

-moz-box-lines:multiple;

-webkit-flex-wrap:wrap;

-moz-flex-wrap:wrap;

-ms-flex-wrap:wrap;

flex-wrap:wrap;

}

ul.related-post li {

float: left;

width:22%;

display: block;

margin-right: 4%;

margin-bottom: 20px;

}

ul.related-post li:nth-child(4n) {

margin-right: 0;

}

ul.related-post li a:hover{

filter:alpha(opacity=80);

-moz-opacity: 0.8;

opacity: 0.8;

}

ul.related-post li p.title{

line-height: 1.8;

font-size: 95%;

}

ul.related-post li p.title a{

text-decoration: none;

}

ul.related-post li img{

width: 100%;

}

@media (max-width: 599px) {

/* small devices */

ul.related-post li {

width:48%;

}

ul.related-post li:nth-child(2n) {

margin-right: 0;

}

以下にコードの簡単な解説を書いておきます。

スマートフォンの場合は横に並ぶ表示数が4から２に変更になります

51〜60行目はスマートフォン用のCSSです。パソコンやタブレットの場合は、横に４つ記事が並びます。それ以下の場合は、２つ記事が並ぶようにしています。

YARPPの管理画面から設定を行って完了

以下の画像を参考して、設定して下さい。これですべて完了です！お疲れ様でした。

※4番に「フリーランスパパ配布」というファイルがない場合は正しい場所にアップロードできていない可能性があります。もう一度見直して下さい。

それぞれの方が使用しているテーマにより、僕が記述したコードを書き換えてしまうコードがあることがあります。その場合、デザインが崩れることがありますが、そこまで全てには対応できませんのでご了承下さい。ご自身で調べてテストしながら調整してみて下さい。

スワローやストークを作成しているOPENCAGEもYARPPをオススメ

WordPressのテーマで有名な、スワローやストークを作成しているOPENCAGEさんも、YARPPのプラグインをオススメしています(参考)。ちなみに、OPENCAGEさんのテーマを使用している方は、すでにYARPP用のテンプレートが導入済みなので簡単な設定を済ませるだけで使用できるようです。有料のテーマを購入するメリットはこういう細かい部分での配慮だと思います。この記事でやってもらったことをやらずに済むんです(笑) 初心者ブロガーの方は迷わず最初にテーマを購入することをオススメします！