ページの表示から一定時間放置すると関連記事をポップアップ表示するプラグイン「WP Float Related Posts」
公開日：2016年11月14日 アクセスアップ／PV数改善 コンテンツ追加
「WP Float Related Posts」は、通常本文下などに表示する「関連記事」を、ページ上部から一定の割合に達したとき、またはページを表示してから一定時間過ぎたときに今表示されているページの上に小さな関連記事表示窓を出すプラグインです。
私見ですが、文末に広告などを挿入していると広告表示と関連記事表示が被ってしまい、双方の効果に影響が出る可能性があるので、今使っている関連記事の表示はそのままにしておき、一定時間経過したとき（画面放置したとき）にこのプラグインでの関連記事表示をするようにした方がいいような気がします。
また、タグベースで関連記事を抽出していますから、タグを設定していない場合は使用してもランダム記事が表示されるだけになります。関連度についても高度な関連記事表示プラグインと比べるとネタがタグだけですから限定的になります。
【WP Float Related Posts】プラグインの基本的な機能・できること
- ページ上部から一定の割合に達したときに関連記事を別窓で表示
- 開いたページを一定時間放置したときに関連記事を別窓で表示
ソースを見る限りではタグベースで関連記事を抽出しているようです。
この記事を参考にプラグインの導入をする際以下に留意ください
このプラグイン紹介記事は簡易的に動作テストをした上で紹介していますが以下の点にご注意願います
- すべての環境で動作するとは限りません
- できる限り最新のバージョンの情報を紹介するようにしておりますが、閲覧される時期によってはバージョンが変わり、仕様が大きく変更されている場合があります
- 有料版と無料版がある場合、テストは原則無料版のみで実施しています
- テスト環境については本文中に記載しています
- 使用方法で紹介しているショートコードやコードなどをコピーして使用すると、環境によっては記号などが文字化けすることがあります。コピーしたのに動作しない場合は特に「"」「'」などの記号を入力し直してみてください。
【WP Float Related Posts】プラグインの設定画面や表示の日本語化と翻訳
【WP Float Related Posts】プラグインは言語の変更に未対応ですので表示のまま設定することになります
【WP Float Related Posts】プラグインのインストールと設定
インストール方法
インストールはプラグインの新規追加でプラグイン名で検索してインストールするか、ページ先頭の画像をクリックして表示される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」をクリックする
- 出てきたソースの下の方にある「１４５」を任意の数字へ変更する
- コードの中に全角の記号が入っていませんか？ 半角にすることで解消できます
- コードの中に全角の空白（スペース）がありませんか？ 半角にすることで解決できます
- コードは合っているはずなのに更新できないときは 特にエラーの出た行内に日本語での文字列が入っている場合には全角での文字列があるということでエラーになる場合があり、Wordpressのエディタチェックではこれを「'」や「)」など閉じ子のエラーとして認識され更新できないことがあります。エラーとして返される行の先頭に空白がある場合には空白をなくすことできちんと認識され更新されるようになることが多いです。
- 「何かが間違っています．．．」と表示され、更新できないときは このエラーは本当に何がエラーなのかをWordpressのチェックが判断できない場合に発生します。解決策としてはその画面を開き直すことなのですが、その際希に元のコードがすべて削除されてしまう場合がありますので、今表示されているコードを一旦どこかへコピーしてからページの再読み込みをするようにしてやり直します。
実際のソース
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」をクリックする
- 出てきたソースの内容を変更する
- コードの中に全角の記号が入っていませんか？ 半角にすることで解消できます
- コードの中に全角の空白（スペース）がありませんか？ 半角にすることで解決できます
- コードは合っているはずなのに更新できないときは 特にエラーの出た行内に日本語での文字列が入っている場合には全角での文字列があるということでエラーになる場合があり、Wordpressのエディタチェックではこれを「'」や「)」など閉じ子のエラーとして認識され更新できないことがあります。エラーとして返される行の先頭に空白がある場合には空白をなくすことできちんと認識され更新されるようになることが多いです。
- 「何かが間違っています．．．」と表示され、更新できないときは このエラーは本当に何がエラーなのかをWordpressのチェックが判断できない場合に発生します。解決策としてはその画面を開き直すことなのですが、その際希に元のコードがすべて削除されてしまう場合がありますので、今表示されているコードを一旦どこかへコピーしてからページの再読み込みをするようにしてやり直します。
- コードの中に全角の記号が入っていませんか？ 半角にすることで解消できます
- コードの中に全角の空白（スペース）がありませんか？ 半角にすることで解決できます
- コードは合っているはずなのに更新できないときは 特にエラーの出た行内に日本語での文字列が入っている場合には全角での文字列があるということでエラーになる場合があり、Wordpressのエディタチェックではこれを「'」や「)」など閉じ子のエラーとして認識され更新できないことがあります。エラーとして返される行の先頭に空白がある場合には空白をなくすことできちんと認識され更新されるようになることが多いです。
- 「何かが間違っています．．．」と表示され、更新できないときは このエラーは本当に何がエラーなのかをWordpressのチェックが判断できない場合に発生します。解決策としてはその画面を開き直すことなのですが、その際希に元のコードがすべて削除されてしまう場合がありますので、今表示されているコードを一旦どこかへコピーしてからページの再読み込みをするようにしてやり直します。
変更前「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関連の本
インプレス
大きな画面の操作手順で迷わない。人気のテーマで、パソコン＆スマホ両対応のＷｅｂサイトを作れる！ソーシャルメディアとの連携やＳＥＯ対策、バックアップなどの運用面も丁寧に解説。
※表示している価格は単行本のものです
※表示している価格は単行本のものです
参考価格：１,７３８円
※参考価格です。サービスやショップ、掲載時期などにより価格は異なりますのでご注意ください
インプレス
WordPressは無料かつ高機能で、シェア率No.1のCMS（コンテンツ管理システム）です。その拡張性の高さから企業のホームページ制作にも利用されているほどで、ホームページで情報発信をするに当たって、個人でも本気度の高い方はWordPressを利用していることが多いです。本書はそんなWordPressの初期設定から制作、カスタマイズ、運用のノウハウまで幅広く学べる1冊です。
※表示している価格は単行本のものです
※表示している価格は単行本のものです
参考価格：１,６２８円
※参考価格です。サービスやショップ、掲載時期などにより価格は異なりますのでご注意ください
このページはモバイル端末でもご覧いただけます
左のQRコードを読み取っていただくと、このページのURLが表示され、簡単にアクセスできます。ぜひモバイル端末でもご覧ください。
WordPressのカスタマイズ・不具合対応などご相談ください
Wordpressのカスタマイズ、不具合解消のご相談はすべてココナラ
のダイレクトメッセージからお受けしております。まずはこちらのバナーからお気軽にお問い合わせください。
【スポンサーリンク】
