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

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

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

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

スポンサーリンク



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

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

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

この記事の内容について
このプラグイン紹介記事は簡易的に動作テストをした上で紹介していますが以下の点にご注意願います
  1. すべての環境で動作するとは限りません
  2. できる限り最新のバージョンの情報を紹介するようにしておりますが、閲覧される時期によってはバージョンが変わり、仕様が大きく変更されている場合があります
  3. 有料版と無料版がある場合、テストは原則無料版のみで実施しています
  4. テスト環境については文末に記載しています
  5. 使用方法で紹介しているショートコードをコピーして使用すると、環境によっては記号などが文字化けすることがあります。コピーしたのに動作しない場合は特に「”」「’」などの記号を入力し直してみてください。

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

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

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

インストールと設定方法

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

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

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

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

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

  1. Title/関連記事ウインドウ先頭に表示するタイトルを設定します
  2. Read more text/続きを読む文言を設定します
  3. Mode/「scroll down(ページの一定割合に達したときに表示する)」、または、「time out(一定時間ページ表示が続いたときに表示する)」から選択します
  4. Percent of scrolling/割合の場合はパーセント、時間の場合は時間(ミリ秒)で設定します
  5. Effect/関連記事ウインドウを表示する際のアクション
  6. たくさんの動作から選択できますので自身のサイトに合ったものをテストしてください

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

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

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

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

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

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

で実際に使っています(2016年11月段階で使用中ですが、閲覧時には使用していない場合があります)

プログラムのバグ修正

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

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

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

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

  1. 「プラグイン」→「プラグイン編集」を開く
  2. 「Wp Related Posts」を選択する
  3. 「wp-float-related-posts/templates/default.php」をクリックする
  4. 出てきたソースの内容を変更する
  5. 変更前「the_excerpt();」→修正後「echo $relatedpost->post_excerpt;

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

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

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

    echo mb_substr( strip_tags( $relatedpost->post_excerpt), 0, 70, 'utf-8' ) . '…';
    これで、抜粋があるときは抜粋が表示され、しかも文字数は70文字にするという設定になるので問題解決です。

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

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

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

    Wordpressの本

    Amazonの人気商品楽天市場の人気商品
    CS Shop
    【中古】 WordPressレッスンブック ステップバイステップ形式でマスターできる / エビスコム / ソシム [単行本]【メール便送料無料】【..

    【中古】 WordPressレッスンブック ステップバイステップ形式でマスターできる / エビスコム / ソシム [単行本]【メール便送料無料】【..

    323 円 (税込)
    著者:エビスコム出版社:ソシムサイズ:単行本ISBN-10:4883377245ISBN-13:9784883377244■通常24時間以内に発送可能です。午後1時までのご注文は通常当日出荷。■メール便は、1冊から送料無料です。※宅配便の場合、2,500円以上送料無料です。※あす楽ご希望の方は、宅配便を..
    【新品】【本】小さなお店&会社のWordPress超入門 初めてでも安心!思いどおりのホームページを作ろう! オリジナルのテーマであっと..

    【新品】【本】小さなお店&会社のWordPress超入門 初めてでも安心!思いどおりのホームページを作ろう! オリジナルのテーマであっと..

    2,138 円 (税込)
    ■ISBN:9784774182186★日時指定・銀行振込をお受けできない商品になりますタイトル【新品】【本】小さなお店&会社のWordPress超入門 初めてでも安心!思いどおりのホームページを作ろう! オリジナルのテーマであっという間にホームページができる! 星野邦敏/著 大胡由紀/..
    楽天ウェブサービスセンター CS Shop

    プラグインに関するお問い合わせ

    「こんなプラグインないの?」「設定方法をもっと詳しく教えてほしい」「プラグインを少しカスタマイズして使いたい」などのご相談は、こちらのリンクからお願いします(【ココナラ】のサイトへ移動します)。

    ココナラ Wordpress プラグイン探し バナー

    似たようなプラグインをお探しですか?

    このプラグインはに分類されています。リンクをクリックすると同じような機能を持つプラグインの紹介記事一覧が表示されますので、プラグイン探しに是非ご活用ください。
トップへ戻る