関連記事を表示させる(YARPP)

公開:2015-04-08 / WordPress 制作・開発 / , , , , ,
更新:2017-02-09

WordPressでブログをやっている人であれば、

 

今見ている記事に関連した他の記事を自動で表示させたいなぁ~

 

なんて思ったことはないでしょうか。

 

ひと昔前のブログではそんな気の利いた機能はなかったので、ブログを書いている最中に、過去に関連する記事を書いたことを思い出し、ブログの文脈に合わせてリンクを貼っていました。

 

手動で対応する場合は過去に書いた記事を覚えている必要があり、かつ、新たに関連する記事を書いた場合は、過去記事も含めて導線を見直すなど影響が大きいのでとても大変です。

 

WordPressでは、表示している記事ページに関連している記事を表示する「Yet Another Related Posts Plugin」というプラグインが存在するので、本日はそちらを紹介したいと思います。

 

Yet Another Related Posts Pluginのいいところ

今読んでいるページに関連した記事を表示させるプラグインは他にも存在します。

 

メジャーなプラグインとしては、以下3点があります。

  • Yet Another Related Posts Plugin
  • WordPress Related Posts
  • Similar Posts

 

この中でSimilar Postsに関しては、本日現在で7年以上更新されていないため、残りの2つを選択するのがよいと思います。

 

僕が「Yet Another Related Posts Plugin」を選んだ理由としては、Google先生に尋ねたところ「Yet Another Related Posts Plugin」を紹介しているサイトがたくさん出てきたので、長いものに巻かれたしだいです(笑)

 

でもこれだと、

 

自分の意見はないのかい!

 

と言われてしまうので、ちゃんと使ってみました(汗)

 

僕が使ってみた限りでは、以下3つの点においてYet Another Related Posts Pluginのほうが優れていると思います。

  1. 関連記事の精度がコントールしやすい。
  2. 関連記事の表示形式は、「リスト」「サムネイル」の他にオリジナルのテンプレート「カスタム」から選べる。
  3. 投稿、固定ページに対応している。(メディアも対象に含めることも可能)

 

そんなわけで、僕の関連記事プラグインレコメンドである「Yet Another Related Posts Plugin」の実装について説明していきます。

 

実装手順

WordPress管理画面にログインし、左メニューのプラグインからプラグイン新規追加より「Yet Another Related Posts Plugin」の文字列で検索します。

 

すると「Yet Another Related Posts Plugin」が表示されるのでインストールボタンをクリックします。

906-1_

 

インストールが完了したら「プラグインを有効化」をクリックします。

906-2

 

下の画面の通り「プラグインを有効化しました」の文字が出たら成功です。

早速サイトを表示してみましょう。

906-3

なお、画面上に英語で文字列が出ていますが、簡単に要約すると「YARPPを使ってくれてありがとう。サービスをよりよくするために調査をさせてもらってもいいですか」と言っていますので、皆さんの良心で判断しましょう。

 

記事ページをみると、記事本文の下に「関連する記事」が表示されていると思います。

 

下のキャプチャでは「No related posts」が表示されていますが、これは「関連記事がない」という意味ですね。

906-4

投稿記事が少ないと、「No related posts」が表示されやすいです。

 

YARPPの設定を変更することで表示されますので、以降「設定方法」で説明します。

(もちろん、たくさん投稿記事がある場合は、より関連度の高い記事を表示させることができます)

 

設定方法

WordPress管理画面左メニューの「設定」にある「プラグイン」より「YARPP」をクリックします。

906-5

 

すると、以下の通りYARPPの設定画面が表示されます。

いくつか項目がありますので、それぞれ詳細に説明していきます。

906-6

 

フィルター設定

除外カテゴリ・タグの指定や、パスワードでロックしているコンテンツの表示、対象記事の期間を設定できます。

906-7

ここは項目名でわかると思うので詳しい説明は省きます。

 

関連スコア設定

ここでは、表示記事に対してどの程度関連している記事を出すかの設定です。

 

YARPP内独自で「関連スコア」という点数を算出するロジックを持っており、そのスコア次第で表示が変わってきます。

906-8

「関連スコア」は記事タイトル、記事内容、カテゴリ、タグにあるワードにマッチングをかけて算出しています。

それぞれの重み付けを調整することで、関連スコアに変化を出しています。

 

表示する最低関連スコア

数字が大きいとより関連した記事が表示されますが、関連スコアに満たないと表示されずに「No related posts」になってしまいます。

 

なので、記事が少ない内は少ない値にしておくのがいいです。

(僕は公開当初、記事が少ないサイトではここの値を「1」にしています)

 

次にタイトル・内容ですが、こちらはユニークな文字列を形態素解析をかけて名詞・動詞など単語を抽出して重みをつけています。

なので、関連スコアには影響が出るように、検討する・検討する(重要視)を選択しておいたほうがよいでしょう。

906-9

その下の、カテゴリ・タグについては、一般的には文章ではなく、単語が入っていると思うのでそれのマッチングで重み付けをしています。

 

同一カテゴリ・同一タグには関連する記事が書かれるはずなので、個人的にはここを「検討する(重要視)」にしています。

 

ここで、先ほど有効化したが「No related posts」だったサイトpenguinweb.netで以下の設定にして投稿記事ページを見てみると、

906-10

 

この通り、関連記事が表示されるようになりました。

906-11

(っても1件ですね。。。参考サイトだからまぁいいか)

 

表示設定(ウェブサイト用)

続いて記事ページでの表示設定です。

表示対象は投稿ページだけでなく、固定ページ、メディア(画像など)も対象にできます。

 

また、テキストだけのリスト 型、サムネイル画像込みのサムネイル表示、また表示を独自にカスタマイズすることもできます。

 

リスト・サムネイル表示

下のキャプチャはリスト型ですが、表示するテキスト情報を囲むタグも指定できます。

906-12

 

サムネイル型を選択すると、以下キャプチャのとおり設定項目(オレンジの箇所)が変わります。

デフォルト画像(URL)は、サムネイル画像がないときに表示させる画像を指定することが出来ます。

906-13

 

なお、サムネイル画像はアイキャッチで設定されている画像が表示されます。

 

penguinweb.net でサムネイル型を指定すると以下の通り表示されました。

アイキャッチは指定してないので表示されている画像はすべて、デフォルト画像(アイキャッチがない場合)です。

906-14

表示件数を4としているので、段落ちしてますね。

(表示件数を3にすればいい感じに見えようになります)

 

カスタマイズ表示

さらに、表示をカスタマイズしたい場合は専用のテンプレートファイルを作成し、事前にサーバにアップしておく必要があります。

906-15

たとえば、上記のようなソースを記述します。

header.php、sidebar.phpなどと同様にindex.phpやsingle.phpに読み込まれる一部分として記述します。

 

格納する場所は、今使っているテーマのディレクトリの配下になります。

(注意:ファイル名はプレフィックスに「yarpp-template-」を入れないとNGです)

906-16

 

準備が整ったら、YARPPの設定画面から「カスタム」を選択します。

すると、以下キャプチャのとおり設定項目(オレンジの枠)が変更になり、テンプレートファイルのプルダウンに先ほどアップロードしたファイル名が選択できるようになります。

906-17

 

他サイトになりますが、僕は以下のような表示にして使っています。

906-18

(htmlだけだと無理なのでstyle.cssもいじっています)

 

表示設定(RSS/Atomフィード)

RSSリーダでの表示設定です。

WordPressは意識していなくてもRSS配信してくれますので、気にしていない方もいいかもしれません。

906-19

 

上記、チェックボックスをクリックすると、表示設定(ウェブサイト用)と同じことができます。

906-20

 

以上で設定は完了です。

 

最後に

とても便利なプラグインですが、最後に僕の所感でメリットとデメリットを紹介して終わりたいと思います。

 

メリット

導入後に記事が増えたら、新しい記事・過去の記事問わず関連が強ければ導線を表示してくれるところですね。

(冒頭で説明した通り、手動対応だと、過去記事に対応するのがとても大変です)

 

もう1点は、配置箇所を間違えなければユーザに良い体験を提供できます。

 

どういうことかというと、UX/UIを意識してサイトを構築すると、ユーザ体験を意識して「コンテンツ本文を読んで満足 → さらなる興味喚起」といった態度変容を考えます。

 

その時、今読んでいる記事に関連した記事を案内してあげることで、ユーザはさらに記事を読み進めます。

具体的には、以下のような画面設計をすると、効果が発揮されます。

906-1

 

デメリット

関連スコアのロジックが複雑なためか、記事が増えてくるとアプリ・データベースに負荷がかかるため、ページの表示が遅くなります。

(詳しくは、Xserverから高負荷アラートが来た。その1を参照してください)

 

レンタルサーバなど制約条件のある環境で利用する際には、この機能がボトルネックになる可能性は往々にしてありますので、気をつけましょう。

 

 

いかがでしたでしょうか。

みなさん、良いWordPressライフを!

 

Author:yukio iizuka
プロフィール画像
フリーランスとしてUX視点で業務支援しています。 HCD-Net認定 人間中心設計専門家 LEGO®︎ SERIOUS PLAY®︎ メソッドと教材活用トレーニング修了認定ファシリテーター Hi-Standard好きです。
http://yukioiizuka.com
mislead
MISLEADの記事に共感いただけましたら
いいねをお願いします。

コメント一覧

コメントはありません

コメントする

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください



       

© yukio iizuka All Rights Reserved...