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

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

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

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

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

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

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

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

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

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

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

コードの中に全角の記号が入っていませんか？
コードの中に全角の空白（スペース）がありませんか？
コードは合っているはずなのに更新できないときは
「何かが間違っています．．．」と表示され、更新できないときは

これらのエラー対処については以下のページが参考になるかも知れません

Knowledge Base

【WordPress】コードは合っているのにfunctions.phpの更新ボタンをクリックすると...

https://www.momosiri.info/cms/%E3%80%90wordpress%E3%80%91%E3%82%B3%E3%83%BC%E3%83%89%E3%81%AF%E5%90%88%E3%81%A3%E3%81%A6%E3%81%84%E3%82%8B%E3%81%AE%E3%81%ABfunctions-php%E3%81%AE%E6%9B%B4%E6%96%B0%E3%83%9C%E3%82%BF%E3%83%B3/

コードは合っているのにfunctions.phpの更新ボタンをクリックすると「PHP Parse error: syntax error, unexpected T_STRING in…php on line．．．」が出るのはなぜ？実体験から解消方法を紹介します

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

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

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

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

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

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' ) . '…';

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

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

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

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

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

コードの中に全角の記号が入っていませんか？
コードの中に全角の空白（スペース）がありませんか？
コードは合っているはずなのに更新できないときは
「何かが間違っています．．．」と表示され、更新できないときは

これらのエラー対処については以下のページが参考になるかも知れません

Knowledge Base

【WordPress】コードは合っているのにfunctions.phpの更新ボタンをクリックすると...

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

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

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

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

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

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

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

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

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

コードの中に全角の記号が入っていませんか？
コードの中に全角の空白（スペース）がありませんか？
コードは合っているはずなのに更新できないときは
「何かが間違っています．．．」と表示され、更新できないときは

これらのエラー対処については以下のページが参考になるかも知れません

Knowledge Base

【WordPress】コードは合っているのにfunctions.phpの更新ボタンをクリックすると...

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

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

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

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

Knowledge Base

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

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

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

いちばんやさしいWordPressの教本第4版 5.x対応人気講師が教える本格Webサイトの作り方 (「いちばんやさしい教本」シリーズ)

インプレス

大きな画面の操作手順で迷わない。人気のテーマで、パソコン＆スマホ両対応のＷｅｂサイトを作れる！ソーシャルメディアとの連携やＳＥＯ対策、バックアップなどの運用面も丁寧に解説。
※表示している価格は単行本のものです

参考価格：１,７３８円

※参考価格です。サービスやショップ、掲載時期などにより価格は異なりますのでご注意ください

Amazonで詳細を見る

楽天市場で探す

Yahoo!で探す

WordPressのカスタマイズ・不具合対応などご相談ください

Wordpressのカスタマイズ、不具合解消のご相談はすべてココナラのダイレクトメッセージからお受けしております。まずはこちらのバナーからお気軽にお問い合わせください。

【スポンサーリンク】

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

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

この記事を参考にプラグインの導入をする際以下に留意ください

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

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

インストール方法

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

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

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

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

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

プログラムのバグ修正

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

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

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

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

ソースの改造

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

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

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

WordPressのカスタマイズ・不具合対応などご相談ください

RSSフィードに画像を追加するプラグイン「RSS Image Feed」

サイドバーへ閲覧しているページのQRコードを表示するプラグイン「WP QR Code Generator」

タブコンテンツを固定ページや投稿などへ挿入するプラグイン「Tabs Responsive」

画面移動せずにログイン／ログアウトでき、新規登録もできるようになるプラグイン「Login With Ajax」

画面の指定した場所へ常に表示される（追従型）コンテンツを作成するプラグイン「Advanced Floating Content」