YARPPのサムネイル表示を独自カスタマイズする
この記事は約7分で読めます。
前回、以下の記事でYARPPでのサムネイルあり関連記事表示を紹介しました。
当ブログでは、YARPPを利用しさらに独自カスタマイズして関連記事表示しています。
その方法をご紹介します、もちろん賢威用にレスポンシブデザイン対応です。
まだ、YARPPのインストールができていない方はこちらから先にご覧ください。
WordPressで関連記事をサムネイルありで表示する方法(YARPP) | 前回の記事
Topics
オリジナルPHPでYARPPをカスタマイズ
それでは、オリジナルカスタマイズの方法を説明します。
完成したphpをアップしています、よろしければダウンロードしてお使いください。(PHPファイルのみです)
YARPPサムネイルのオリジナル表示用PHPをダウンロードする
もし、バグなどありましたらコメント頂けると嬉しいです。
独自PHPファイルを作成
まずは、独自PHPのファイルを作成します。
ファイル名は「yarpp-template-xxxxx.php」としてください。(xxxxxは好きな英数字)
ちなみに、ダウンロードファイルは「yarpp-template-keni-customize.php」となっています。
ファイル名の先頭に「yarpp-template-」を付けないと、YARPP用のカスタムファイルと認識されません。
<?php if(have_posts()): ?> <div class="related-box"> <h3 class="related-h">この記事を読んでいる人はこちらの記事も読んでいます</h3> <div class="related-post"> <ul class="related-list"> <?php global $previousday; $cnt = 1; $class = ""; while(have_posts()) : the_post(); $previousday = ''; if(($cnt % 2) == 0) { $class="related-rightlist"; } else { $class="related-leftlist"; } $cnt++; ?> <li class="<?php echo $class ?>"><a href="<?php the_permalink(); ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"> <?php if(has_post_thumbnail()) { ?> <?php the_post_thumbnail(array(70,70)); ?> <?php } else { ?> <img src="<?php echo site_url(); ?>/wp-content/plugins/yet-another-related-posts-plugin/images/default.png" width="70" height="70" /> <?php } ?> </a> <div class="meta"> <p class="date"><?php the_date(); ?></p> <a href="<?php the_permalink(); ?>" rel=\"bookmark" title="<?php the_title_attribute(); ?>" class="title"><?php the_title(); ?></a> </div> </li> <?php endwhile; ?> </ul> </div> </div> <?php else: ?> <h3 class="related-none-h">関連記事はありません</h3> <?php endif; ?>
ダウンロードファイルと同じ内容です。
サムネイルと記事タイトル、そして投稿日を表示します。
記事トップの画像のような表示を目指しています。
ファイルをサーバーにアップロードする
次に、作成したPHPファイルをサーバーにアップロードします。
格納先は、各テーマファイルのルートディレクトリです。
当ブログであれば、「/wp-content/themes/keni61_wp_cool_131113」に
「yarpp-template-keni-customize.php」が格納されています。
作成したPHPを反映させる
「設定 > YARPP」を開き、「表示設定 ウェブサイト用」の「PHPカスタム」を選択します。
すると、テンプレートファイルというプルダウン(ドロップダウン)が表示されます。
既に、開発者が作成したPHPがいくつかありますが、今回は使わずオリジナルで作成します。
ファイルのアップロードが正しく行われていれば、ドロップダウンの中に
アップロードしたファイルの「yarpp-template-」と拡張子を除いた名前が表示されています。
ダウンロードファイルを使用する方は「keni-customize」が表示されていると思います。
それを選択して保存してください。
これで、PHPの追加は完了です。
CSSでスタイルを調整する
次に、CSSでスタイルを調整します。
「外観 > テーマ編集」からCSSを開き、以下のスタイルを1番下に追加してください。
賢威の場合は、「design.css」に追加します。
.yarpp-related{ overflow : hidden; background-color: #fff; box-shadow: 2px 2px 5px rgba(0,0,0,0.5); margin-bottom: 1.0em; padding: 0.3em; } .related-h, .related-none-h{ margin-top: 1.0em; } .related-post{ width: 95%; margin: 0 auto; } .related-post ul{ display: block; margin:0; list-style: none; } .related-post ul li{ display: block; min-height: 8.0em; margin: 0 0 0.3em 0; width: 45%; } .related-post ul .related-leftlist{ margin-right: 0.5em; float: left; } .related-post ul .related-rightlist{ margin-left: 0.5em; float: right; } .related-post ul li img{ display: block; float: left; } .related-post ul li .meta{ width: 65%; float: left; display: inline; margin: 0 0 0 10px; } .related-post ul li .date{ font-size: 0.8em; margin: 0 0 5px 0; font-weight: bold; } .related-post ul li .title{ width: 100%; font-size: 0.9em; margin:0; padding:0; } .related-post ul li .title a{ color:#333; display:block; margin:0 0 10px 0; }
これで、記事トップと同様の関連記事が表示されます。
当ブログでは、関連記事表示数を8件としていますが件数を変えても問題ありません。
レスポンシブデザインスタイルの追加
レスポンシブデザインでは、横並びだと小さくなってしまうので
1件ずつ縦に表示されるデザインを採用しました。
賢威の場合は以下のスタイルを、「mobile.css」に追加してください。
.related-post ul li{ float: none; width: 100%; } .related-post ul li img{ width: 20%; } .related-post ul li .meta{ width: 70%; }
これで、レスポンシブデザインを適用していてもうまく表示されます。
こんにちは。
すごい知識ですね。感服です。
一つご質問があるのですが、回答いただけると助かります。
作例では記事が古い順に表示されますが、新しい順に表示させたいのですが、何か策はありますでしょうか。
それでは失礼いたします。
きゅいきゅい様
さいとうです、コメントありがとうございます。
作例では、日付順ではなくYARPPの「関連スコアの高い順」で表示しています。
YARPPの設定画面から「新しい日付順」を選択していただければ、日付降順で表示されると思います。