今回は関連記事をプラグインなしで表示させる方法を色々とやってみたいと思いますが、一応「関連記事」とは言っても、「同じタグ」で関連付けるか「同じカテゴリー」で関連付けるかという2通りの方法になります。今回紹介するのは「タグ」で関連付ける関連記事の表示です。
以前紹介したプラグインYARPPの場合は「記事タイトル」「内容」「カテゴリー」「タグ」全てで関連付けて関連スコアを出し、そのスコアに基づいて関連記事を表示させるのでプラグインを利用した方が精度は高いと思っています。そのため私の場合はYARPPを利用しています。
⇒関連記事を表示させるプラグイン【Yet Another Related Posts Plugin】の設定方法
ただ、プラグインを使わずにやりたいという気持ちは非常によく分かりますので、今回は色々チャレンジしてみます。
関連記事を表示させるための手順
プラグイン無しで関連記事を表示させる方法は色々あるのですが、どれも結構複雑なコードが必要になります。それで関連記事を表示させたい部分（single.php）等にコードを書いて行く必要があります。
しかしながら前述したように結構複雑なコードを直接入れてしまうと後からゴチャゴチャして修正がしにくいので直接single.phpに書くのではなく、テーマフォルダに「related.php」というファイルを作成し、その中にゴチャゴチャコードを入れます。
それで設置する場所（single.php）でその作成した「related.php」を呼び出すコードを1行入れていく方針が分かりやすいかと思いますのでその方針でやっていきます。
ロリポップの場合で説明していきます。ロリポップにログイン後、ユーザー専用ページ⇒「WEBツール」⇒「ロリポップFTP」と進みます。
そんで自分のWordPressのフォルダ⇒wp-content⇒themes⇒子テーマ（私の場合はchild）と進みます。そして子テーマのフォルダ内に「新規ファイル作成」。
ファイル名は「related.php」として保存。内容はWordPressから書くので名前だけ付けて保存します。
保存できたらWordPressに戻りましょう。さて、ここからは「related.php」に色々記述をしていきますが、リスト表示（画像なし）とサムネイル表示（画像あり）の2種類を紹介します。
タグで関連付ける（画像なし）
どの記事にもタグを付けている場合に同じタグ同士で関連付けます。一応シンプルにこんな感じにしてみました。
WordPressの管理画面から外観⇒テーマの編集と進みます。右側に先ほど追加したファイル「related.php」があると思いますのでそれを開きます。
「related.php」には次の記述をして「ファイルを更新（保存）」して下さい。
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 | <div class="related"> <h3 class="related-title">こちらの記事もオススメです</h3> <ul class="related-box"> <?php $original_post = $post; $tags = wp_get_post_tags($post->ID); $tagIDs = array(); if ($tags) { $tagcount = count($tags); for ($i = 0; $i < $tagcount; $i++) { $tagIDs[$i] = $tags[$i]->term_id; } $args=array( 'tag__in' => $tagIDs, 'post__not_in' => array($post->ID), 'showposts'=>4, 'caller_get_posts'=>1 ); $my_query = new WP_Query($args); if( $my_query->have_posts() ) { while ($my_query->have_posts()) : $my_query->the_post(); ?> <li class="related-list"> <a href="<?php the_permalink();?>" rel="bookmark" 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> |
16行目に「showposts」という部分が４になってます。これで4記事まで関連記事を表示させます。ここは好きな数字に変更して下さい。これで「related.php」が完成したので、これを「single.php」で呼び出すようにしましょう。
子テーマの「single.php」を開いて次の記述を探します（TwentyTwelveを利用してます）。
1 | <nav class="nav-single"> |
テーマによってちょっと違う部分もあるかと思いますが、大体記事下に「前の記事」と「次の記事」みたいなリンクがあると思います。上記のコードはそれを表示させるためのコードの最初の部分ですので、これを探してこのコードの直前に先ほど作成した「related.php」を呼び出します。ここにこのコードを挿入。
1 | <?php get_template_part( 'related' ); ?> |
こんな感じになります。
これで個別ページにタグで関連付けられた関連記事ができます。後は色や文字の大きさ、位置調整をしていきます。
子テーマのスタイルシート（CSS）を開いて次の記述を追加します。
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 | /* 関連記事全体 */ .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」で全体を囲む線（border:3px solid #1F5E73;）を入れてます。不要なら削除して下さい。後は表示される関連記事の文字の大きさ（font-size）、文字の高さ（line-height）、余白（padding）、リンクの色（color）をそれぞれ設定していますので、これもお好みで変更して下さい。
タグで関連付ける場合（サムネイル画像あり）
今度はタグで関連付けてサムネイル画像（アイキャッチ画像）も一緒に表示させるタイプです。各記事にアイキャッチ画像が設定されている前提です。アイキャッチ画像と記事タイトルを表示させますのでこんな感じ。
この場合には「related.php」の中身はこのようにします。
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 | <div class="related"> <h3 class="related-title">こちらの記事もオススメです</h3> <?php $tags = wp_get_post_tags($post->ID, array('orderby'=>'rand')); // 複数タグを持つ場合ランダムで取得 if ($tags) { $first_tag = $tags[0]->term_id; $args=array( 'tag__in' => array($first_tag), // タグの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を利用してます）。
1 | <nav class="nav-single"> |
テーマによってちょっと違う部分もあるかと思いますが、大体記事下に「前の記事」と「次の記事」みたいなリンクがあると思います。上記のコードはそれを表示させるためのコードの最初の部分ですので、これを探してこのコードの直前に先ほど作成した「related.php」を呼び出します。ここにこのコードを挿入。
1 | <?php get_template_part( 'related' ); ?> |
こんな感じになります。
これで個別ページにタグで関連付けられた関連記事ができます。後は色や文字の大きさ、位置調整をしていきます。
子テーマのCSSには次の記述を追加しておきます。
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 | 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; } .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にしておけば横並びに２つづつ表示されます。
子テーマのCSSに次の記述をしてスマートフォンでのサイズ切り替えを行います。
1 2 3 | @media screen and (max-width: 599px) { .related li {width:100px;} } |
以上タグで関連付けた関連記事を表示させる方法でした。
関連記事をプラグインなしで表示させる方法（カテゴリーで関連付け）
YARPPでサムネイル画像を表示させる設定方法
Seesaaブログのタイトルやサイドバーのタイトルのカスタマイズ【新システム】
WordPressサイドバーのカスタマイズまとめ
バンナ様
コメントありがとうございます。サイドバーが下にカラム落ちするのはCSSでブログの幅を変更を間違える場合が多いです。そのため、関連記事のカスタマイズ以外の原因という可能性があります。実際にブログを見させて頂けると原因も分かると思うので、もし良かったら一度ブログのURLを教えていただけると助かります。コメント公開時にはURLは削除しますので、どうぞよろしくお願い致します。
この記事を見てtwenty twelveで関連記事の表示（画像あり）をさせたんですが、ＰＣから記事を表示したときにサイドバーが下のほうに表示されるようになってしまいました。サイドバーを元の位置に表示させたいと思っているんですがどうすればいいでしょうか？ よろしければ教えてください
いつもお世話になっております。
ご丁寧な回答ありがとうございます。
とても参考になりました。
中古ドメインの事はとりあえず忘れて、ひたすら記事を書く事に集中したいと思います。
本当にいつもありがとうございます。
またご質問させていただくかもわかりませんが、今後とも宜しくお願い致します。
＞モース様
コメントありがとうございます。タグバージョン反映できてよかったです。私もやりながら結構勉強になりました（笑）。アフィリエイトはキッカケというか最初１つ収入が発生するサイトを作るのに時間がかかります。ただ、一度収入のあるサイトの作成ができるとコツは同じなのでサイトの量産ができますし、メインサイト自体もどんどん強くする工夫が出てきます。それまでが試行錯誤の連続なので大変な部分があると思います。１つスタイルができると後は記事を書くという事に集中できますし、どのような記事を増やしていけばいいのかわかるようになってきます。
質問の中古のドメインですが、確かに中古のドメインの方が新しいドメインよりも歴史があるので有利ではあると思いますが、ではなぜそんな中古のドメインがあるのか？という事をよく考えておく必要があります。以前にGoogleからペナルティーを受けたドメインかも知れませんし、何かそのドメインで不都合があったのかも知れません。そのため私は中古のドメインは利用しません。
個人的な意見ですが、ペラサイトや小規模のサイトを作るのに独自ドメインは必要ないと思っています。独自ドメインで作るのは記事数が多くなる可能性のあるメインサイト。じっくり育てていくサイトを独自ドメインで作成します。小規模サイトは無料ブログで十分だと思っています。無料ブログの方が即効性があると感じているからです。
ただ、無料ブログで上位表示できて訪問者もある程度多いブログができたときにはリダイレクト（評価を引き継ぐ）の引越しでWordPressに移しています。その方が広告の貼り付けが自由にできますし、余計な広告もないからです。
それとサテライトサイトですが、サテライトサイトの強みというのはジャンルやカテゴリーを絞る事ができるという点です。例えばこのドキドメのようなサイトをメインにサテライトサイトを作成するなら「独自ドメイン取得の仕方」とか「プラグイン専門サイト」とかメインサイトよりもさらに狭い範囲でのサテライトサイトを作成します。それによってブログタイトルにはそれぞれキーワード「独自ドメイン 取得方法」とか「WordPress おすすめ プラグイン」というキーワードを使えます。
ブログタイトルにキーワードを入れてサイトを作成するとジャンルが狭く専門性も高いので上位表示がしやすくなります。各記事にはキーワードと関連性の高いキーワードを入れて記事を作成します。全部が上位表示できる訳ではありませんが、狙っているキーワード（複合キーワード）をブログタイトルに含められるのは結構有利です。それで上位表示させて集客、それをメインサイトに流すというのが私のスタイルでもあります。これを無料ブログでやってます。
そのため、サテライトサイトは「被リンク」を目的に作っているのではなく、「上位表示させてメインサイトに流す」という目的です。もちろんそれで結果的には被リンク効果にもなると思っています。「被リンク」だけのためにサテライトサイトを作成するのはおそらく今後通用しなくなると思いますし、下手をするとメインサイトまで悪影響を受ける可能性もあります。
「稼げる」「稼げない」はキーワード選定にかかっています。ライバルの少ないキーワードがあればそれは無料ブログでも数週間で上位表示できます。私は2013年の1年間で無料ブログを利用して合計100以上の小規模ブログを作成しました。全部20記事程度のブログです。このうち3割程度は現在も収益を上げ続けているブログですが、現在は小規模サイトよりも記事数の多い強いブログ作成が一番効果的だと思っています。
記事数の多い強いブログが１つできればそのブログでキーワード（複合キーワード）を狙うのが簡単になります。記事を書いて数時間後には上位表示されているという事も多いですし、安定感もあります。デメリットは時間がかかる事です。
おすすめなのはメインサイトは不定期でもいいので更新を続ける事（メインサイトを育てる）と小規模サイトを増やしていきどんなキーワード（複合キーワード）でもいいので上位表示させる練習をする事です。もちろん練習なので収益を考えずにとにかく上位表示させる練習が効果的と思います。
いつもお世話になっております、モースです。
さっそくタグバージョン実装してみました。これぞ、私が求めていたものです！
本当にありがとうございました。
しかし、アフィリエイトとはなかなかハードなビジネスですね！（笑）
何度も挫折しそうになりながら、なんとか持ちこたえています。報酬が上がるまでは、なんとかくらいついてやろうと思っています。
そこでドメインについて1つ質問なのですが、中古ドメインは本当に強いのでしょうか？ネット上でものすごく稼いでるアフィリエイターの方達は、中古ドメインで本サイト（ペラまたは30記事程の小規模サイト）を作って、中古ドメインのサテライトサイトでリンクを送って上位表示させてるみたいですが、その様な手法でしか稼げないのでしょうか？
私は、こちらのサイトを参考に新規ドメインとワードプレスでサイトの作製をしてます。
早く稼ぎたいのであれば、上記のようなブラック？的なSEOも行っていかないと難しいのでしょうか？
ご教授いただけると幸いです。
宜しくお願い致します。