カテゴリー WordPress タグ .

サイトの関連記事・人気記事をカスタマイズ【記事下】

  • このエントリーをはてなブックマークに追加
NEVER

久々にこのサイトでWordPressの話題を書きたいと思います。
FCめがぶーの宗岡(@pre_muneoka)です。

個人サイト【O3 WEB】ではWordPressやテーマの話題をそこそこ書いていますが、元々このFCめがぶーサイトでWordPressに関する記事を書いておりました。

FCめがぶーサイトもリニューアルしたてで、改造箇所も多く、改造した場所や方法をこのサイトに直接載せた方が見る方にとって効率的だと思いWordPress記事の再掲載をきめました!

面白いWordPressプラグインや無料テーマなどに関しては、個人サイトで扱いますのでそちらも見て頂ければと思います。

なぜ記事下に関連記事・人気記事なのか?

このサイトでは行っていませんが、アフィリエイトを行っているサイトを見てみてください。アフィリエイトバナーが貼ってある位置は、ユーザーが見やすい(クリックしやすい)位置になっています。

その中でも「記事下」はホットスポットになっており、関連記事や人気記事を配置しているサイトが非常に多いです。このサイトでも関連記事は配置していましたが今回のカスタマイズで人気記事も配置することにしました。

関連記事プラグイン「WordPress Related Posts」

関連記事表示には「WordPress Related Posts」というプラグインを使用しています。このプラグイン最大の特徴は「関連記事を手動で変更出来る」という点にあります。任意でも関連記事を調整できるのでより、見てもらいたい記事への誘導が可能になっています。

WordPress Related Postsの導入

通常のプラグインと同じように

管理画面の左サイドバー「プラグイン」 > 新規追加 > WordPress Related Postで検索
WordPress Related Postをインストールして有効化しましょう。

WordPress Related Posts使い方

有効化をすると
管理画面の左サイドバー「設定」 > WordPress Related Post が出現します。

WordPress- Related-Posts01

Basic settingsでは、関連記事の上に表示される文章と表示記事数を設定出来ます。

Related Posts Title:…空白でも問題ありません。見出しになります。
Number of Posts:…表示記事数になります。

WordPress- Related-Posts02

Enable Themes*…こちらをチェックすることで関連記事のテーマが有効化。
Layout…表示方法を選択できます。このサイトでは「Vertical (Medium)」。

※Two Columnsはブラウザーなどに強く依存し、表示乱れが続発するそうです。
 設定しだいなんのかもしれませんが使用時はよくご確認を。

WordPress- Related-Posts03

Display Thumbnails For Related Posts…サムネイル画像の表示。
Display Number of Comments…コメント数を表示。
Display Publish Date…日時を表示。
Display Post Excerpt…文章抜粋を表示。数字は抜粋文章量。
Enable custom CSS…カスタムのCSSを使う場合は設定。

このサイトでは、CSSでサムネイルサイズや記事タイトルのフォントサイズを調整しています。

WordPress- Related-Posts04

Default thumbnails…デフォルトのサムネイルを指定出来ます。

WordPress- Related-Posts05

こちらの設定もせずに、記事側でアイキャッチを設定しない場合はランダムで画像が挿入されます。

Use custom field for thumbnails…カスタムフィールドに使用した画像を使えるそうです。
Custom size thumbnails…サムネイル画像のサイズを指定できます。

WordPress- Related-Posts06

関連記事から除外するカテゴリーを選択できます。

WordPress- Related-Posts07

Auto Insert Related Posts (or add to your single post template)
…自動で関連記事を表示させたい場合はチェックを。任意で場所を選ぶ時は、表示したい箇所に「」を記述します。このサイトの場合は「single.php」に直接書くことで表示を行っています。

関連記事の変更

WordPress- Related-Posts08

WordPressにログインをした状態で、変更したい記事の関連記事を見てみてください。「Edit Related Posts」というボタンが表示されています。このボタンをクリックしましょう。

WordPress- Related-Posts09

変更画面が表示され、下段が書いた記事郡、上段が関連記事部分です。

WordPress- Related-Posts10

ドラッグ・アンド・ドロップで記事を移動できます。

人気記事プラグイン「Wordpress Popular Posts」

基本的な導入方法は上記の記事で解説済みですので、今回は記事下に挿入する方法を解説します。

記事下挿入方法

基本的には上記のサイト様を参考にさせて頂きました!
このサイトではやっていませんが、カテゴリーの人気記事を表示する方法も掲載されています。

上記サイト掲載方法に従い、あとはCSSなどで自身のサイトに合うかたちに変更を加えればいい感じに表示されます。ぜひ、やってみてください!

まとめ

サイトの関連記事・人気記事をカスタマイズ【記事下】いかがだったでしょうか?
記事下に関連記事・人気記事を挿入することで直帰率が低下し、PV数が増加する可能性大です。ぜひ、サイトに未導入の方は入れてみてください。

今回のカスタマイズは僕の個人サイト「O3 WEB」、サイト管理を行っている「絵動-kaiDO-」でも行いました。それぞれ表示の下を微妙に変更しているのでぜひ、見てみてください!

それでは次回の記事でお会いしましょう!

  • このエントリーをはてなブックマークに追加

サイトの人気記事もどうぞ

カテゴリー WordPress タグ .

コメントはお気軽に