前回は関連記事をプラグインなしで表示させる(タグで関連付ける)方法を紹介したので今回は「タグ」ではなくて「カテゴリー」で関連付ける方法をやってみたいと思います。
ただ、この場合は同じカテゴリー内の記事をランダムに表示させるという方法になりますので、「タイトル」「内容」「カテゴリー」「タグ」で関連付けるプラグイン「YARPP」の方が関連レベルは高いと思います。
⇒関連記事を表示させるプラグイン【Yet Another Related Posts Plugin】の設定方法
前回同様にリスト表示(画像なし)とサムネイル表示(画像あり)のバージョン2通り紹介していきます。
関連記事を表示させるための手順
前回のやり方とほとんど同じ方針でいきます。プラグイン無しで関連記事を表示させる方法は色々あるのですが、どれも結構複雑なコードが必要になります。それで関連記事を表示させたい部分(single.php)等にコードを書いて行く必要があります。
しかしながら前述したように結構複雑なコードを直接入れてしまうと後からゴチャゴチャして修正がしにくいので直接single.phpに書くのではなく、テーマフォルダに「related.php」というファイルを作成し、その中にゴチャゴチャコードを入れます。
それで設置する場所(single.php)でその作成した「related.php」を呼び出すコードを1行入れていく方針が分かりやすいかと思いますのでその方針でやっていきます。
テーマフォルダに「related.php」を作成する
ロリポップの場合で説明していきます。ロリポップにログイン後、ユーザー専用ページ⇒「WEBツール」⇒「ロリポップFTP」と進みます。
そんで自分のWordPressのフォルダ⇒wp-content⇒themes⇒子テーマ(私の場合はchild)と進みます。そして子テーマのフォルダ内に「新規ファイル作成」。
ファイル名は「related.php」として保存。内容はWordPressから書くので名前だけ付けて保存します。
保存できたらWordPressに戻りましょう。さて、ここからは「related.php」に色々記述をしていきますが、リスト表示(画像なし)とサムネイル表示(画像あり)の2種類を紹介します。
リスト表示(画像なし)のやり方
画像なしのシンプルなこんな感じにしていきます。
WordPressの管理画面から「外観」⇒「テーマの編集」を選択して先ほど追加した「related.php」を開き、次の記述をします。
<div class="related"> <h3 class="related-title">こちらの記事もオススメです</h3> <ul class="related-box"> <?php $categories = wp_get_post_categories($post->ID, array('orderby'=>'rand')); // 複数カテゴリーを持つ場合ランダムで取得 if ($categories) { $args = array( 'category__in' => array($categories[0]), // カテゴリーのIDで記事を取得 'post__not_in' => array($post->ID), // 表示している記事を除く 'showposts'=>4, // 取得記事数 'caller_get_posts'=>1, // 取得した記事の何番目から表示するか 'orderby'=> 'rand' // 記事をランダムで取得 ); $my_query = new WP_Query($args); if( $my_query->have_posts() ) { ?> <?php while ($my_query->have_posts()) : $my_query->the_post(); ?> <li class="related-list"> <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></li> <?php endwhile; wp_reset_query(); ?> <?php } else { ?> <p class="no-related">関連する記事は見当たりません…</p> <?php } } ?> </ul> </div>
「showposts」という部分が4になってます。これで4記事まで関連記事を表示させます。ここは好きな数字に変更して下さい。これで「related.php」が完成したので、これを「single.php」で呼び出すようにしましょう。
子テーマの「single.php」を開いて次の記述を探します(TwentyTwelveを利用してます)。
<nav class="nav-single">
テーマによってちょっと違う部分もあるかと思いますが、大体記事下に「前の記事」と「次の記事」みたいなリンクがあると思います。上記のコードはそれを表示させるためのコードの最初の部分ですので、これを探してこのコードの直前に先ほど作成した「related.php」を呼び出します。ここにこのコードを挿入。
<?php get_template_part( 'related' ); ?>
こんな感じになります。
これで個別ページにカテゴリーで関連付けられた関連記事ができます。後は色や文字の大きさ、位置調整をしていきます。今度は子テーマのCSSに次の記述を追加します。
/* 関連記事全体 */ .related{ margin-bottom:20px; border:3px solid #1F5E73; } /* 関連記事タイトル部分 */ h3.related-title { font-size: 18px; margin-bottom: 8px; padding: 10px; line-height: 25px; } /* 表示される各記事の調整 */ li.related-list { font-size: 15px; line-height: 18px; padding:8px; list-style: disc inside; } /* 各記事のリンク */ li.related-list a{ font-weight:bold; color:#0066cc; } /* カーソルが乗った時のリンク */ li.related-list a:hover{ color:#7a8285; } p.no-related { padding-left: 15px; margin-bottom: 15px; }
これで一応完成です。表示を確かめてみて下さい。続いて画像あり(サムネイル表示)の場合の解説をしていきます。
サムネイル表示(画像あり)の場合
画像も一緒に表示させるこのような感じにしていきます。
途中までは同じで子テーマのフォルダに「related.php」を追加しておきます。WordPressの管理画面から「外観」⇒「テーマの編集」をクリックして追加した「related.php」を開き、次の記述をします。
<div class="related"> <h3 class="related-title">こちらの記事もオススメです</h3> <?php $categories = wp_get_post_categories($post->ID, array('orderby'=>'rand')); // 複数カテゴリーを持つ場合ランダムで取得 if ($categories) { $args = array( 'category__in' => array($categories[0]), // カテゴリーのIDで記事を取得 'post__not_in' => array($post->ID), // 表示している記事を除く 'showposts'=>4, // 取得記事数 'caller_get_posts'=>1, // 取得した記事の何番目から表示するか 'orderby'=> 'rand' // 記事をランダムで取得 ); $my_query = new WP_Query($args); if( $my_query->have_posts() ) { ?> <ul> <?php while ($my_query->have_posts()) : $my_query->the_post(); ?> <li><?php the_post_thumbnail(array(150,150)); ?> <p><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></p></li> <?php endwhile; wp_reset_query(); ?> <?php } else { ?> <p class="no-related">関連する記事は見当たりません…</p> <?php } } ?> </ul> </div>
18行目この部分「thumbnail(array(150,150))」にはWordPressの設定⇒「メディア設定」で設定しているサムネイル画像のサイズを入れて下さい。後でCSSで画像の大きさも調整できます。
「related.php」を保存したらsingle.phpで呼びだすようにしておきます。子テーマの「single.php」を開いて次の記述を探します(TwentyTwelveを利用してます)。
<nav class="nav-single">
テーマによってちょっと違う部分もあるかと思いますが、大体記事下に「前の記事」と「次の記事」みたいなリンクがあると思います。上記のコードはそれを表示させるためのコードの最初の部分ですので、これを探してこのコードの直前に先ほど作成した「related.php」を呼び出します。ここにこのコードを挿入。
<?php get_template_part( 'related' ); ?>
こんな感じになります。
これで個別ページにタグで関連付けられた関連記事ができます。後は色や文字の大きさ、位置調整をしていきます。
子テーマのCSSには次の記述を追加しておきます。
h3.related-title { font-size: 18px; margin-bottom: 8px; padding: 10px; line-height: 25px; } .related{ padding-left:15px;} .related ul{ margin:0; padding:0; list-style:none;} .related li a{ display:block; padding:5px; color:0066cc; font-size:14px; text-decoration:none;} .related li a:hover{ background-color:#eeeeee;} .related ul:after { content:""; display:block; clear:both;} .related li { height: 200px; float: left; width: 150px; padding-right: 20px; overflow: hidden; } .related img { max-height:175px; float:left; width:150px; padding-right: 20px; margin-bottom: 10px; } .related-title{ margin-bottom:15px; margin-top:15px; font-size:18px; padding-left:10px; } .related{ margin-bottom:15px; border:3px solid #1F5E73; } p.no-related { padding-left: 15px; margin-bottom: 15px; }
「.related li」という部分で「width」を150pxにしてますが、これは先ほど設定⇒メディアで確認したサムネイル画像の横幅にしておきましょう。もし画像を小さく表示したい場合にはここの「width」を100px程度にしておくとよいと思います。画像もそれに合わせて小さくなります。
同じく「.related li」の部分の「padding-right」が横並びの記事同士の間隔です。これを広くすると横並びの記事の間隔が狭くなります。
同じく「.related li」の部分の「height」が画像とタイトルを含む高さになります。この高さをはみ出す部分は見えなくなるように「overflow: hidden」としてます。タイトルの長さと画像の高さを考慮して数値変更して下さい。
「.related」で「border」を入れて関連記事全体を囲む線を入れてますが、必要なければ削除して下さい。
「.related-title」は関連記事のタイトル部分になりますので文字の大きさや余白、色等をお好みで設定して下さい。
それからスマートフォンで確認したときに画像のサイズが150pxだと大きすぎるのでスマートフォンの場合は表示される各記事それぞれの横幅をちょっと小さく100pxでまとめた方が良いと思います。100pxにしておけば横並びに2つづつ表示されます。
子テーマのCSSに次の記述をしてスマートフォンでのサイズ切り替えを行います。
@media screen and (max-width: 599px) { .related li {width:100px;} }
以上カテゴリーで関連付けた関連記事を表示させる方法でした。
コメント
乃風様
コメントそれから報告もありがとうございます(^^)
この関連記事に関してはプラグインではなくて、「related.php」で追加したんでしたっけ?多分そうだと思うのですが、サムネイル下の文字数(行数)を増やす事は可能です。ただ、はみ出す部分をCSSで隠す(overflow: hidden)というのはそのままが良いと思います。これがないとその下のサムネイルなどに記事タイトル文字が重なってしまうからです。
どうしてももう1行増やしたいという事であればスタイルシート(CSS)に以下を追加でOKと思います。
今の時点でサムネイルも含む部分の高さが230pxになってましたので、20px追加して250pxとして追加する感じです。今までよりも20px余白ができますので1行分くらい増えるかな?と思います。
それからオススメの部分ですが、テーマ編集⇒「related.php」があるか確認して下さい。もしあるならそれを開いて「こちらの記事もオススメです」という記述があると思いますので、それを好きな記述に書き換えて下さい。
しげぞう博士様
ご無沙汰しております。いつもありがとうございます。
「こちらの記事もオススメです」という枠の中の、サムネイル下の文字(行数)のことです。以前にしげぞう博士に教えていただいた時、行数を最大に設定しました。それ以上増やせない事が、その時の操作で分かりました。
でも、あと1行だけ増やしたいのですが、どうすればいいのでしょうか? 出来れば、はみ出した部分を隠すのではなく、表示させておきたいと思っております。
それと、もう1点なのですが、「こちらの記事もオススメです」の「オススメ・・・」の部分の
「オ」だけを、平仮名の「お」にしたいのですが、どうしたらいいのでしょうか? 大して変わりはないんですけどね。馴染みと好みの問題ですが・・・。(*^^)v
どうぞよろしくお願いします。
3uz様
コメントありがとうございます!無事に反映されたようで良かったです!3uz様の言われるようにカテゴリー内の記事数が少ないと左からのスタートになりますよね。この関連記事の部分はfloatで左寄せにして、横並びにしてます。
もしセンタリングをするのであれば「ul」タグで囲ってある部分全体を「div」で囲んでスタイルシートでセンタリングするといいかもしれませんね。「div class=”name”」のようにdivにクラス名を付けてその部分をセンタリングする感じでできるかも知れませんが、試してはいないので、できるかは分かりません。
また時間のあいた時に試してできそうであれば追記しておきますね。
こんにちは。3uzです。
先程コメントさせて頂いた件のカテゴリ表示の件、解決致しました!
「 // 複数カテゴリーを持つ場合ランダムで取得」する、arrayの中の[ ‘orderby’=>’rand’ ]を消して、ランダム表示を ‘orderby’=> ‘ASC’ // 記事を昇順で取得
…に変更しました。
こうすることでカテゴリ内記事のみになったのですが、記事数が少ないカテゴリは1段でも左寄りになってしまい、やはりセンタリングしたいなぁと。。引き続き頑張ります☆
取急ぎ!
はじめまして。3uzと申します。
同カテゴリのサムネイル一覧を表示するようにしたいと思い、どうやっても横並びに成功しなかったところ、こちらを参考にさせて頂き上手く行きました。ありがとうございます。
現在同一カテゴリの一覧表示に変更するのに試行錯誤しております。
…もし「この部分をこうしたらいいよ」というアドバイス頂けましたら、幸いです。。。
あと、センタリング(センターから表示)することは可能でしょうか?
しげぞうさん同様の悩みなのですが(↓下記、参考に試させて頂き上手く行きました!)、私の場合、同カテゴリ内の記事が4~16個とかあるので、カテゴリによっては2段表示になります。その際、左に寄るのではなく、1段目からこぼれたサムネイルを真ん中から表示させたいと重い、や margin: 0 auto; 等を試しましたが駄目でした。
こちらも、もしアドバイス頂けましたら嬉しいです。
何卒宜しくお願い致します。
乃風様
コメントありがとうございます。関連記事の画像だと思うのですが、これは次のコードをスタイルシートに追加して下さい。
「padding-left」が左側の余白になるので、ここの数値を調整して見て下さい。
しげぞうさま
いつもお世話になっております。
「こちらの記事もオススメです」の枠の中に、4枚の画像が横に並んで設置してあるのですが、一番左の画像の左余白の方が、一番右の画像の右余白よりも、若干狭いので、前者の余白を少し大きくして、全体のバランスを取りたいのですが、どうもうまくいきません。スタイルシートのどこを変更したらいいのでしょうか?
乃風様
コメントありがとうございます。プラグインについては「WordPressの高速化」のカテゴリ-にも記事がたくさんあります。例えば
「EWWW Image Optimizer」
画像を圧縮してくれるので表示速度の改善が期待できます。
「Google XML Sitemaps」
サイトマップを作成して送信することで記事をインデックスさせて、検索結果に反映されるようにできます。
「PuSHPress」
書いた記事をいち早くインデックスさせます。書いた記事がすぐに検索結果に反映されます。
上記以外にもキャシュ系のプラグインが多数あり、サイトの表示速度の高速化が期待できます。私もあまり多くのプラグインは使いませんが、基本的にはこのブログで紹介しているプラグインを使ってます。
乃風様
コメントありがとうございます。プラグインを入れ過ぎると表示速度が少し重くなる場合もありますし、プラグインに不具合が出た場合に困ります。なので、できればプラグインは使わない方がいいとは思うのですが、関連記事の精度に関してはこのプラグインの方が良いと思います。タグで関連付けをしているのであればそれは1つ1つ追加したコードを削除すれば元に戻ります。
一応プラグインが不具合があった時にも対応できるように追加したコードはコピペしてメモ帳などに残しておくといつでも使えます。
いつもお世話になっております。
どの方法も試された結果、結局、プラグインに戻られたのですね。じゃ、私も「Yet Another Related Posts Plugin」に変更しようかと思います。
プラグインだと、データーが重くなって、URLの動きが遅くなる・・・ということはあるのでしょうか? 私の場合、ライトプラン(ロリポプラン)です。
既に、「タグで関連付け」の設定をしてしまったのですが、それを解除する場合は、設定したいった方法で、1つ1つ消去していけばいいんですよね? こういう時、クリックボタン1つで全部消去できたらいいですね。ま、確認してみます。
乃風様
返信ありがとうございます。私の場合はプラグイン「Yet Another Related Posts Plugin」を利用してます。どの方法も試してみましたが、結局プラグインに戻って来ました(笑)。このプラグインに関しても記事にしてますので、時間のある時にでも読んで見てください。今後もよろしくお願いします。
いつもお世話になっております。やはりそういう事だったのですね。了解しました。
まだ自分のURL上でブログを書き始めていないため、その使い勝手が分からず、ならば両方作っておいて、後で選べばいいか・・・と考えておりました。事前にお聞きしてよかったと思いました。ありがとうございました。
ちなみに、しげぞうさんは、タグで関連付けをされているのでしょうか? それともカテゴリーで関連付けをされているのでしょうか?
乃風様
コメントありがとうございます。プラグイン無しで関連記事を表示させるのは1つだけでOKです。タグで関連付けをするかカテゴリーで関連付けするか、どちらか1つを選択して下さい。両方すると関連記事がダブルになります。
いつもお世話になっております。
「関連記事をプラグインなしで表示させる方法(タグで関連付け)」の設定が、今しがた無事に終わったのですが、ここの記事の「関連記事をプラグインなしで表示させる方法(カテゴリーで関連付け)」の設定も、同時に行っておいても問題ないですか?