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

公開日：2016年11月14日更新日：2017年10月29日アクセスアップ／PV数改善コンテンツ追加

【この記事の目次】－　必要な部分だけ見たいときにどうぞ　－ [表示する]

1 【WP Float Related Posts】プラグインの基本的な機能・できること
2 【WP Float Related Posts】プラグインの設定画面や表示の日本語化と翻訳
3 【WP Float Related Posts】プラグインのインストールと設定
4 【WP Float Related Posts】プラグインの基本的な使い方
- 4.1 抜粋の文字数が長すぎて「続きを読む」ボタンと重なる場合の対処
- 4.2 プログラムのバグ修正
5 【WP Float Related Posts】プラグインの便利な使い方・カスタマイズ方法など
- 5.1 ソースの改造

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

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

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

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

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

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

この記事の内容について

このプラグイン紹介記事は簡易的に動作テストをした上で紹介していますが以下の点にご注意願います

すべての環境で動作するとは限りません

できる限り最新のバージョンの情報を紹介するようにしておりますが、閲覧される時期によってはバージョンが変わり、仕様が大きく変更されている場合があります

有料版と無料版がある場合、テストは原則無料版のみで実施しています

テスト環境については文末に記載しています

使用方法で紹介しているショートコードをコピーして使用すると、環境によっては記号などが文字化けすることがあります。コピーしたのに動作しない場合は特に「”」「’」などの記号を入力し直してみてください。

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

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

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

インストールと設定方法

インストールはプラグインの新規追加でプラグイン名で検索してインストールするか、ページ先頭の画像をクリックして表示されるWordpressのプラグイン公式配布ページがダウンロードしてからアップロードインストールします。

インストール方法の詳しい解説は

Knowledge Base

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

https://www.momosiri.info/cms/wordpresspluginerror/

Wordpressと言えばさまざまな追加機能を使って思い通りの表現や動作ができるのがブログやHTMLで作ったサイトと違って楽しいところですね。ここでは基本的なプラグインの導入の仕方とトラブルが発生した場合の対処方法について解説します。いちばん簡単にプラグインを...

を参照ください

【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' )

【注意】コードをコピーして使用する前に必ずお読みください

この記事内にコードが記載されている場合、コードはそのままコピー（いわゆるコピペ）してお使いいただいても構いませんが、以下の件にご留意ください。

使用については自己責任でお願いします

コードの確認は私の管理するサイト、またはテスト環境で問題が起こらなかったものですので、お使いの環境での動作等を保証するものではありません。

万が一このコードを使用してサイトに重篤なトラブルが生じても当サイト、当サイト管理者は一切責任を負いません

コードの変換エラーなどにより動作しない場合、更新エラーが出る場合があります

コードをそのままコピーしても問題なく使えるよう文字列変換を行った上で掲載しておりますが、希に変換できていない場合があり、コードエラーとなることがあります

その場合には以下の方法で修正を行ってみてください

コードの中に全角の記号が入っていませんか？
コードの中に全角の空白（スペース）がありませんか？
上のようなことがないのに更新できない

コードを転載する場合には

ご自身のサイトで当ページのコードを転載される場合には必ず当ページへのリンクを入れていただきますようお願いいたします

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

がんばれ！わが町名古屋の地域猫&我が家...

がんばれ！わが町名古屋の地域猫&我が家の家ネコ日記

https://momosiri.nagoya

ご訪問いただき、ありがとうございます名古屋某所で皆さんから可愛がられている地域猫ちゃんたちの様子と、我が家で一緒に暮らしている元捨て猫【モモ】との日常など綴った日記サイトです日記一覧を見る＞＞日

で実際に使っています（２０１６年１１月段階で使用中ですが、閲覧時には使用していない場合があります）

プログラムのバグ修正

テスト環境では投稿に抜粋の設定をしていなかったので実装して気づいたのですが、プラグインの設定で「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',　関連記事の並び順
などなどいろいろ使えそうですね。

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

Knowledge Base

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

https://www.momosiri.info/cms/wordpresspluginerror/

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