IE(Internet Explorer)ではページが正常に表示されない可能性があることを表示するプラグイン「WP IE Buster」

IE(Internet Explorer)ではページが正常に表示されない可能性があることを表示するプラグイン「WP IE Buster」

サイトに訪問してくれてる方がどんな環境で閲覧してくれてるのか?運営している側からすると結構気になるものですね。調べてみると、Google Chrome、Mozilla Firefox、Apple Safari、Microsoft Edge、Microsoft Internet Explorerなどメジャーなものをはじめ、いろいろな環境からのアクセスがあることに半ばびっくりすると思います。

その中で現在開発は終了したものの、利用者が多いのがMicrosoft Internet Explorer。当サイトでもおおよそ5%程度のアクセスがあります。このブラウザは現在のシステム(ページ表示の仕組み)には合わない部分が結構あって、自分のサイトをあえてIEで表示させてみると、表示されていないところや、表示のおかしいところがあってびっくりします(このサイトもそのうちの1つです)。

もちろん、この機能は対応してるの?を「Can I Use」や「MOBILE HTML 5」などを使って個別、全体的に調べることは可能ですし、多くのサイトで紹介されていますが、結局は実際にIE(Internet Explorer)で表示して、不都合な部分は出力しないようにしたり、IE用にしたり、IEでも大丈夫なようにしたりしなければならず、結構大変です。

そこで、5%のIEを使ったアクセスにどう対応しよう・・という時にぴったりなのが今回紹介する「WP IE Buster」。ざっくりいうとIEでアクセスした方に「正常にページが表示されないかも知れませんよ」というのを画面隅にずっと表示させるプラグインになります。

前述したように、常に不具合(不都合)をチェックして修正していれば必要ないですが、そうではない場合がほとんどだと思いますので、「推奨するブラウザで見てくれたらきれいに表示できますよ」とお知らせできるだけでも意義のあるプラグインなのではないかと思います。

【WP IE Buster】プラグインの用途や機能

前述した通り、IEでアクセスされたページすべてに、追従型のメッセージを出せるようになります。表示されるのはこんな内容です(自分用にデフォルトから変えてます)。

IE(Internet Explorer)ではページが正常に表示されない可能性があることを表示するプラグイン「WP IE Buster」|Knowledge Base

ページ上にずっと表示してくれるので、「できれば最新のEdgeやChromeで見て!」というメッセージが伝わると思い、このサイトでも使っていますから、実際どう表示されるかはこのページをIEでアクセスいただくとより分かりやすいと思います。

本ページを最後に編集したときの環境・バージョンなど

プラグインは製作者によって日々更新されていくため、この紹介記事が最新バージョンのものであるとは限りません。参考までにこの記事の最終更新日時点におけるテスト環境、プラグインバージョン、プラグイン導入時の留意点などを記載しておきます。

プラグインを使用(試用)したテスト環境

  • テストサーバー:カラフルボックス
  • WordPressのバージョン:5.6
  • PHPのバージョン:7.4.6
  • テーマ:ha-Basic(オリジナルテーマ)
  • プラグインのバージョン:本記事で紹介しているバージョン1.2.2/最新バージョン 1.4.0
  • 公式サイト(wordpress.org上):https://wordpress.org/plugins/wp-ie-buster/
  • 公式サイト(作者サイト):

本記事を参考にWordPressサイトへプラグインの導入を検討される方へ

WordPressは古くから無料で配布されているサイト作成ツール(CMS)で、随時改良が加えられており、さまざまなバージョンが存在します。

さらにWordPressを動かすためのプログラムであるPHP、サイトのデータを保存しておくためのデータベースについても様々なバージョンがあります。

そしてWordPress本体同様にプラグインについてもさまざまなバージョンが存在します。

本記事を参考にプラグインの導入をお考えの方は、以下に留意の上でインストールするようにしてください。

  • テスト環境での動作に基づいた紹介記事ですので、すべての環境で正常に動作するかどうかは不明です
    ※本記事の内容についてはページ内に記載しているプラグインバージョンのものになります。現在のバージョンと異なる場合、機能などが異なる場合があります。
    ※また、テスト環境、テストしたプラグインバージョン等の表示が本文内にない場合、ページタイトル下にある最終更新日当時の情報となりますので、現在のバージョンでは全く違う機能となっているかも知れません。
  • プラグインに無料版と有料版(Pro版)がある場合、特に記載がなければ無料版の情報のみを紹介しています
  • このページでプラグインを使用する際に必要なショートコードやコードなどは、コピーして使用することができますが、環境によっては記号などが文字化けすることがあります。コピーしたのに動作しない場合は特に「”」「’」などの記号を入力し直してみてください。
  • プラグイン本体の動作不具合や質問などは公式サイトのフォーラムなどで行ってください(ここでは質問にお答えすることはできません)

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

【WP IE Buster】プラグインは有効化すると日本語で使用できるようになっていますので、英語が分からない方でも安心して使えます

【WP IE Buster】プラグインのインストールと設定

インストール方法

インストールはプラグインの新規追加でプラグイン名を入力して検索してインストールするか、WordPressのプラグイン公式配布ページからダウンロード後、管理画面からアップロードインストールしてください(プラグインの公式ページは本ページ内記載のリンクをクリック、もしくは、WordPress公式サイトで検索してください)。

WordPressを使い始めて間もない方(初心者の方)は、より詳細なプラグインのインストール手順や、インストール時に起こる問題などへの対処方法をまとめた【WordPress】プラグインのインストール&追加方法とエラー対処の方法も併せてご覧ください。

基本的な設定方法と使用方法

基本的には有効化するだけで、表示が開始されます。私のように内容を変えたいという方は、「設定」→「WP IE Buster」から変更ができます。

以下公式サイトにあるスクリーンショットです

IE(Internet Explorer)ではページが正常に表示されない可能性があることを表示するプラグイン「WP IE Buster」|Knowledge Base
IE(Internet Explorer)ではページが正常に表示されない可能性があることを表示するプラグイン「WP IE Buster」|Knowledge Base

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

このプラグインをより便利に使うカスタマイズ技、テストサイトで使用した結果や感想、WordPressのプラグイン公式配布ページには書かれていない情報、発見した不具合などを紹介します。

表示を画面下部に移動する方法

当サイトもそうなのですが、タイトルスペースが狭いサイトの場合、上部にドーンと表示されてしまうのはちょっと不都合です。またこのプラグインの設定画面には表示場所の設定がありませんので、ちょこっとカスタマイズして表示を画面下に移動する方法を紹介しておきます。

CSSに少し明るい方ならご存じかと思いますが、デザインの記述がインラインで行われていますので、読み込まれる順番の問題などからテーマのCSSへ変更する記述をしても言うことを聞いてくれませんから、プラグインのファイルを直接加工するのが一番手っ取り早いと思います。

プラグインエディターから「WP IE Buster」を選択したら、「includes」→「class-wp-ie-buster.php」を開いてください。

47行目にある「top: 0px;」を「bottom: 0px;」へ変更すれば最下部へ常に表示されるようになります。

このページの更新履歴

更新日更新内容
2020年12月22日「WP IE Buster」の紹介記事を公開しました

サイトへの支援をお願いします

最後までお読みいただきありがとうございました。本記事の内容がお役に立てましたら幸いです。
今後もよりよい情報を提供し続けることができるよう、投げ銭によるサイトへの支援、およびSNSによる拡散をお願いします

作者:

☆最後までお読みいただきありがとうございました。記事作者のひまあーとです。
☆Wordpressでサイトをカスタマイズしていく上で有用な情報を配信しつつ、「ココナラ」でサイトカスタマイズのお手伝い、不具合の修復、サイト引っ越し代行などをさせていただいております。

年齢:40代 趣味/園芸・ペット・卓球