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

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

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

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

スポンサーリンク

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

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

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

この記事の内容について
このプラグイン紹介記事は簡易的に動作テストをした上で紹介していますが以下の点にご注意願います
  1. すべての環境で動作するとは限りません
  2. 閲覧される時期によってはバージョンが変わり、仕様が大きく変更されている場合があります
  3. テストは原則無料版のみで実施しています
  4. テスト環境については文末に記載しています

【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で作ったサイトと違って楽しいところですね。ここでは基本的なプラグインの導入の仕方とトラブルが発生した場合の対処方法について解説します。

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

    Amazonの人気商品楽天市場の人気商品
    いちばんやさしいWordPressの教本第3版 人気講師が教える本格Webサイトの作り方 (「いちばんやさしい教本」)

    いちばんやさしいWordPressの教本第3版 人気講師が教える本格Webサイトの作り方 (「いちばんやさしい教本」)

    • 価   格:¥ 1,706
    • 販 売 者: Amazon.co.jp
    • 評   価:
    • 商品の概要:ASIN: 4295000795
      インプレス

    本当によくわかるWordPressの教科書 はじめての人も、挫折した人も、本格サイトが必ず作れる

    本当によくわかるWordPressの教科書 はじめての人も、挫折した人も、本格サイトが必ず作れる

    • 価   格:¥ 1,685
    • 販 売 者: Amazon.co.jp
    • 評   価:
    • 商品の概要:ASIN: 4797395168
      SBクリエイティブ

    はじめてのブログをワードプレスで作るための本

    はじめてのブログをワードプレスで作るための本

    • 価   格:¥ 1,944
    • 販 売 者: Amazon.co.jp
    • 評   価:
    • 商品の概要:ASIN: 4798052817
      秀和システム

    CS Shop
    WordPress 仕事の現場でサッと使える!デザイン教科書【電子書籍】[ 中島真洋(著)ロクナナワークショップ(監修) ]

    WordPress 仕事の現場でサッと使える!デザイン教科書【電子書籍】[ 中島真洋(著)ロクナナワークショップ(監修) ]

    • 価   格:3,002 円 (税込) 送料込
    • 販 売 者: 楽天Kobo電子書籍ストア
    • 評   価:
    • 商品の概要:【ご注意:本書は固定レイアウト型の電子書籍です。ビューア機能が制限されたり、環境により表示が異なる場合があります】Webデザイナー養成講座シリーズは,プロのデザイナーとして仕事をする上で,必須のスキルを身につけるためのシリーズです。本書では,WordPressをこれ..
    ビジネスサイトをこれからつくる WordPressデザイン入門サイト制作から納品までのはじめの一歩【電子書籍】[ 秋元 英輔 ]

    ビジネスサイトをこれからつくる WordPressデザイン入門サイト制作から納品までのはじめの一歩【電子書籍】[ 秋元 英輔 ]

    • 価   格:2,592 円 (税込) 送料込
    • 販 売 者: 楽天Kobo電子書籍ストア
    • 評   価:
    • 商品の概要:<p>ハイ・クオリティなビジネスサイトを作る</p> <p>※この電子書籍は固定レイアウト型で配信されております。固定レイアウト型は文字だけを拡大することや、文字列のハイライト、検索、辞書の参照、引用などの機能が使用できません。</p> <p>プログラミングの知識..
    WordPress 仕事の現場でサッと使える! デザイン教科書 (Webデザイナー養成講座) [ 中島真洋著 ]

    WordPress 仕事の現場でサッと使える! デザイン教科書 (Webデザイナー養成講座) [ 中島真洋著 ]

    • 価   格:3,002 円 (税込) 送料込
    • 販 売 者: 楽天ブックス
    • 評   価: 評価 5
    • 商品の概要:Webデザイナー養成講座 中島真洋著 ロクナナワークショップ監修 技術評論社WordPress シゴトノゲンバデサッ トツカエルデザインキョウカショ ナカシマ マサヒロ チョ ロクナナワークショップ カンシュウ 発行年月:2015年06月 ページ数:368p サイズ:単行本 ISBN:97847741..
    楽天ウェブサービスセンター CS Shop

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

    最後までお読みいただきありがとうございました。 内容の相違、導入後のトラブル、設定方法のお問い合わせなどはこちらのリンクからお願いします。
    さまざまな情報をいただくことで、プラグインの紹介記事をより正確でよりわかりやすく、よりいろいろな方のお役に立てる情報にしていきたいと考えておりますので、ぜひともご協力をお願いいたします。
    役に立つ情報でしたらぜひSNSやメールでシェアしてください
    •  
    •  
    •  
    •  
    •  
    •  
    •  
    •  
    •  
    •  
    •  
    •  
    •  
    •  
    •  
    •  
    •  

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

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

メニューを表示できません

ページ先頭へ