【サムネ有り】余白まで美しい!YARPPのカスタマイズ用テンプレート無料配布 | WordPressプラグイン
スポンサーリンク
こんにちは、フリーランスパパの神田翼(@tsubasa_lsc)です。


YARPPプラグインが人気の理由とデメリット
YARPPのプラグインは関連記事表示系のプラグインの中では、非常に人気です。その理由は関連して表示される記事の「精度が高い」からです。しかし、デメリットがひとつあります。はじめの段階で選択できるデザインが美しくないです。あくまでも個人的な意見ですが、共感してくれる人もいるのでは?と思ったので、今回「カスタマイズ用テンプレート」を作ってみました。 僕が実際にYARPPプラグインを触ってみて感じたデメリットは、知識のない初心者の方には少しカスタマイズが難しいということです。「初心者には難しい」と書いた理由は、デザインを美しく整えるにはPHPを使用して自分でカスタマイズしてテンプレートを作成しなければいけないからです。その小難しいテンプレートを僕が作成しましたので、問題解決です! まずは、こちらからインストール&有効化してください。 YARPP(Yet Another Related Posts Plugin)をダウンロードする プラグイン検索で「YARPP」と入力してもダウンロード可能です。YARPPカスタマイズ用テンプレート【yarpp-template-relative.php】の作成
PHPファイルを作成しますが、下記コードをそのままコピーしてもらってOKです!こちらからZIPファイルをダウンロードすることも可能です。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<?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; ?> |
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です!
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 |
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」と「8」の場合は、このままで大丈夫です。 関連記事の表示数が「2」の場合は、22行目の数値を「48%」に書き換えてください。 関連記事の表示数が「6」の場合は、22行目の数値を「31%」に書き換えて、24行目の数値を「3%」に書き換えてください。スマートフォンの場合は横に並ぶ表示数が4から2に変更になります
51〜60行目はスマートフォン用のCSSです。パソコンやタブレットの場合は、横に4つ記事が並びます。それ以下の場合は、2つ記事が並ぶようにしています。YARPPの管理画面から設定を行って完了
以下の画像を参考して、設定して下さい。これですべて完了です!お疲れ様でした。
スワローやストークを作成しているOPENCAGEもYARPPをオススメ
WordPressのテーマで有名な、スワローやストークを作成しているOPENCAGEさんも、YARPPのプラグインをオススメしています(参考)。ちなみに、OPENCAGEさんのテーマを使用している方は、すでにYARPP用のテンプレートが導入済みなので簡単な設定を済ませるだけで使用できるようです。有料のテーマを購入するメリットはこういう細かい部分での配慮だと思います。この記事でやってもらったことをやらずに済むんです(笑) 初心者ブロガーの方は迷わず最初にテーマを購入することをオススメします!スポンサーリンク