【WordPress】「こんなも記事もあります」を簡単に設置!「WordPress Related Posts」。

WEB制作

ちょっとずつ記事が増えてきたので、「こんな記事もあります」っていう、似たような関連記事の一覧を表示してくれるプラグイン「WordPress Related Posts」を設置するよ。有名な定番プラグインだ。CSSを編集すれば自由にデザイン・レイアウトもできるよ。

ようやくまあまあ記事が増えてきたから、ちょっとずつカスタマイズした情報を掲載していくね。

「こんな記事もあります」っていう、よくブログで見るあれね。

「こんな記事もあります」を設置するメリット

細かいことはさておき、とにかく「こんな記事もあります」を設置はメリットいっぱいあるよ。閲覧者がサイトに流入してきた際、その記事に関連する他の記事の候補を一覧にして表示してくれるんだ。

もともとこの記事に検索エンジンから流入してきたってことは、他の関連記事にも興味があるはずだもんね。

別の記事にも閲覧者を誘導することで、他の記事の閲覧数を増やし、ブログ全体に滞在する時間を増やすことができるんだ。

他にも、関連記事のタイトルが入ることでページ自体に関連キーワードが増えたり、ページボリュームも増えるからSEO対策にもなるよね。

へぇーじゃあなんで早く設置しなかったのよぉー。

記事がぜんぜんないのにこんなの設置してもオカシイっしょ。あるていど記事数があって初めてなんかこう「こんな記事もあります」って言えるからさぁ。

そりゃぁ確かにそうだ。

ちなみに、「あわせて読みたい」ってタイトルでもいいと思うんだけど、僕の場合「あわせて読みたい」は記事中、「こんな記事もあります」は記事下部って使い方をしている。

「あわせて読みたい」ってのはこの上のやつね。

ではさっそくインストール。

まずは「プラグイン」から新規追加を押して

プラグインの検索で「WordPress Related Posts」と入力。

これが「WordPress Related Posts」です。これを今すぐインストール。

有効化すると「設置」の中に「WordPress Related Posts」が追加される。

ちなみに有効化しちゃったので自動で設置されちゃった。ちょっと既存のCSSも引き継いちゃってるから、デザインとかパーツがオカシイね。

「Related Posts Title」ここのフォームを変更して保存をすると、

タイトルも変更されるよ。

「Advanced settins」の右側の矢印をクリックすると、

こんな感じでセッティングのメニューが出てくる。デフォルトは「Vertiacal(Medium)」みたいだね。

さあ、CSSでカスタマイズしよう!

デフォルトでいろいろなレイアウトがあってウレシイこのプラグインだけど、やっぱり自分のデザインにしないとならないのでカスタマイズするよ。

先程のAdvanced SettingsのLayoutで「Plain(your own css)」を選択する。

Customize部分は、僕は何も選んでいない。好みで。ちなみに赤枠部分はデフォルトで自動的に挿入されるクラスだ。デザインやレイアウトの編集をする時にここをコピーしてCSSファイルへペーストすると楽だよ。

Other Settings部分。Exclude these Categoriesは、関連記事に入れたくない場合に除くカテゴリーを選択できる。注目はここ、「Auto Insert Related Posts」、ここのチェックを外す。ここのチェックを外すと、自動で記事の下部に挿入されることがなくなり、

をphpファイルに追加することで自分で好きな場所に設置できる。

僕の場合は、記事の下部だけど、ソーシャルボタンの下、次の記事へ・前の記事への上に設置したよ。

ちなみに、htmlは上のような感じで出力される。

さっきのCSSのクラスをコピーして、

これを自由に編集すればよい!

wp_rp_contentとかwp_rp_footerとかもカスタマイズすれば少しデザインっぽくできるかな。ちなみにデフォルトで「Edit Reatedted Posts」っていうオレンジのボタンが設置されるんだけど、

じゃまならdisplay:noneで消しちゃえばいいかな。

わーい!無事設置できたね!

というか、閲覧者にとって誘導されるような関連記事をもっと沢山書きなさい!

いかがでしたでしょう!?そのままでもまぁ問題ないけど、「WordPress Related Posts」のCSS編集は簡単だから是非トライしてみてー!