ページの表示から一定時間放置すると関連記事をポップアップ表示するプラグイン「WP Float Related Posts」

公開日：2016年11月14日
更新日：2017年10月29日

「WP Float Related Posts」は、通常本文下などに表示する「関連記事」を、ページ上部から一定の割合に達したとき、またはページを表示してから一定時間過ぎたときに今表示されているページの上に小さな関連記事表示窓を出すプラグインです。

私見ですが、文末に広告などを挿入していると広告表示と関連記事表示が被ってしまい、双方の効果に影響が出る可能性があるので、今使っている関連記事の表示はそのままにしておき、一定時間経過したとき（画面放置したとき）にこのプラグインでの関連記事表示をするようにした方がいいような気がします。

また、タグベースで関連記事を抽出していますから、タグを設定していない場合は使用してもランダム記事が表示されるだけになります。関連度についても高度な関連記事表示プラグインと比べるとネタがタグだけですから限定的になります。

【WP Float Related Posts】プラグインの基本的な機能・できること

ページ上部から一定の割合に達したときに関連記事を別窓で表示
開いたページを一定時間放置したときに関連記事を別窓で表示

ソースを見る限りではタグベースで関連記事を抽出しているようです。

本記事を参考にWordPressサイトへプラグインの導入を検討される方へ

WordPressは古くから無料で配布されているサイト作成ツール（CMS）で、随時改良が加えられており、さまざまなバージョンが存在します。

さらにWordPressを動かすためのプログラムであるPHP、サイトのデータを保存しておくためのデータベースについても様々なバージョンがあります。

そしてWordPress本体同様にプラグインについてもさまざまなバージョンが存在します。

本記事を参考にプラグインの導入をお考えの方は、以下に留意の上でインストールするようにしてください。

テスト環境での動作に基づいた紹介記事ですので、すべての環境で正常に動作するかどうかは不明です
※本記事の内容についてはページ内に記載しているプラグインバージョンのものになります。現在のバージョンと異なる場合、機能や日本語対応の状況などが異なる場合があります。
※また、テスト環境、テストしたプラグインバージョン等の表示が本文内にない場合、ページタイトル下にある最終更新日当時の情報となりますので、現在のバージョンでは全く違う機能となっているかも知れません。
プラグインに無料版と有料版（Pro版）がある場合、特に記載がなければ無料版の情報のみを紹介しています
このページでプラグインを使用する際に必要なショートコードやコードなどは、コピーして使用することができますが、環境によっては記号などが文字化けすることがあります。コピーしたのに動作しない場合は特に「”」「’」などの記号を入力し直してみてください。
プラグイン本体の動作不具合や質問などは公式サイトのフォーラムなどで行ってください（ここでは質問にお答えすることはできません）

【WP Float Related Posts】プラグインの設定画面や表示の日本語化と翻訳

【WP Float Related Posts】プラグインは言語の変更に未対応ですので表示のまま設定することになります

【WP Float Related Posts】プラグインのインストールと設定

インストール方法

インストールはプラグインの新規追加でプラグイン名を入力して検索してインストールするか、WordPressのプラグイン公式配布ページからダウンロード後、管理画面からアップロードインストールしてください（プラグインの公式ページは本ページ内記載のリンクをクリック、もしくは、WordPress公式サイトで検索してください）。

WordPressを使い始めて間もない方（初心者の方）は、より詳細なプラグインのインストール手順や、インストール時に起こる問題などへの対処方法をまとめた【WordPress】プラグインのインストール＆追加方法とエラー対処の方法も併せてご覧ください。

【WP Float Related Posts】プラグインの基本的な使い方

ダッシュボードから「Related Posts」をクリックして編集します

Title／関連記事ウインドウ先頭に表示するタイトルを設定します
Read more text／続きを読む文言を設定します
Mode／「scroll down（ページの一定割合に達したときに表示する）」、または、「time out（一定時間ページ表示が続いたときに表示する）」から選択します
Percent of scrolling／割合の場合はパーセント、時間の場合は時間（ミリ秒）で設定します
Effect／関連記事ウインドウを表示する際のアクション

たくさんの動作から選択できますので自身のサイトに合ったものをテストしてください

Track clicks in Google Analytics／この窓を使ってクリックされたものをGoogle Analyticsへ記録する場合はチェックします
Show excerpt instead／「抜粋」へ入力した内容を表示する場合はチェックします
Show random posts when there aren’t related posts／関連記事がないときにランダムで記事を表示する場合はチェックします

抜粋の文字数が長すぎて「続きを読む」ボタンと重なる場合の対処

英語ベースのプラグインなので仕方ないとは思うのですが、そのまま使うと「記事の要約（抜粋）」部分が長くなりボタンと重なってしまうことがあります。これを解消するにはプラグインの編集を行います。

「プラグイン」→「プラグイン編集」を開く
「Wp Related Posts」を選択する
「wp-float-related-posts/templates/default.php」をクリックする
出てきたソースの下の方にある「１４５」を任意の数字へ変更する

実際のソース

echo mb_substr( strip_tags( $relatedpost->post_content ), 0, 145, 'utf-8' )

テスト環境では７０位にするとちょうどいい感じに表示されます。

プログラムのバグ修正

テスト環境では投稿に抜粋の設定をしていなかったので実装して気づいたのですが、プラグインの設定で「Show excerpt instead」にチェックを入れた場合には

投稿の抜粋に入力がある場合は「抜粋」を表示
抜粋がない場合には本文の先頭から何文字かを表示

となるはずが、チェックを入れると全部の関連記事の説明が今表示されている記事本文の先頭文字になってしまいました。

以下の記述を修正することで改善できます

「プラグイン」→「プラグイン編集」を開く
「Wp Related Posts」を選択する
「wp-float-related-posts/templates/default.php」をクリックする
出てきたソースの内容を変更する

変更前「the_excerpt();」→修正後「echo $relatedpost->post_excerpt;」

内容としては今表示している記事の抜粋を表示しなさいとなっているところを「プラグインで選択した記事の抜粋を表示しなさい」に変更するものです。

サポートフォーラム上に掲載されていました。

ただ、抜粋へ入力した文字数文字数が多いときにはボタンと被ってしまうので、さらに一工夫して「the_excerpt();」を以下のコードに置き換えます

echo mb_substr( strip_tags( $relatedpost->post_excerpt), 0, 70, 'utf-8' ) . '...';

これで、抜粋があるときは抜粋が表示され、しかも文字数は７０文字にするという設定になるので問題解決です。

おそらくこの不具合などに関してはアップデート時に修正されると思われますが、せっかくいい機能のプラグインなので下の内容で更新されることを願っています。

【WP Float Related Posts】プラグインの便利な使い方・カスタマイズ方法など

より便利に使うカスタマイズ技やテストサイトで使用した結果や感想、WordPressのプラグイン公式配布ページには書かれていない事柄などを紹介します。

ソースの改造

ソース中の

global $post;
$tags = wp_get_post_tags( $post->ID, array( 'fields' => 'names' ) );
$args = array(
'posts_per_page' => 3,
'offset' => 0,
'orderby' => 'date',
'order' => 'DESC',
'include' => '',
'exclude' => '',
'post__not_in' => array($post->ID),
'post_type' => 'post',
'post_status' => 'publish',
'tag' => implode(',', $tags),
'suppress_filters' => true
);

の部分を改造することでいろいろな条件が追加できそうです。

例えば・・・
‘posts_per_page’ => 3　関連記事の表示数を変更する
‘post_type’ => ‘post’,　ここにカスタム投稿タイプを追加する
‘orderby’ => ‘date’,　関連記事の並び替えをする条件
‘order’ => ‘DESC’,　関連記事の並び順
などなどいろいろ使えそうですね。

万が一プラグインを改造してエラーが出たときは

【WordPress】プラグインのインストール＆追加方法とエラー対処の方法

を参考に修復してください。