WordPressの画像をモーダルウィンドウで表示しよう!

WordPress の記事に追加した画像をクリック(タップ)すると、ブラウザに画像が読み込まれて大きく表示されますよね?

その際、画像をクリックする → ブラウザに画像が読み込まれる → 元のページに戻るという経緯をたどりますが、元のページに戻った時に、再度ページの読み込みが発生するので、ページの表示に時間がかかってしまいます。

パソコンからのアクセスの場合は回線が速いので、あまり気になりませんが、スマートフォンからアクセスしたときに、再度ページを読み込むと、時間がかかるので読者にストレスを与えることになってしまいます。

そこでおすすめしたいのが、モーダルウィンドウでの画像表示です。

モーダルウィンドウってなに?


触ってもらうとわかりやすいと思います。以下の画像をクリック(タップ)してみてください。

黒い背景になって中央に画像が表示されましたね。これがモーダルウィンドウです。モーダルウィンドウを使って画像を表示するメリットは、ブラウザの URL が変わらず、同じページ内に画像を拡大して表示するので、ブラウザの戻るボタンを押す必要がなく、ページの再読み込みも発生しないことです。

ブログ記事の画像をすべてモーダルウィンドウで表示すると、拡大したい画像だけを読み込んでページ内に表示できるようになるので、とても快適になります。

この記事では、画像をモーダルウィンドウで表示する方法を解説しています。これまでに投稿した記事のタグを変更することなく、モーダルウィンドウで表示できるようになりますので、興味のある方はぜひ試してみてください。

HTML と JavaScript を追加できる環境を作る


まずは HTML と JavaScript を追加できる環境を作ります。このブログでは Simple Custom CSS and JS というプラグインの利用を推奨しています。HTML や JavaScript の知識のない方でも、コピペするだけで簡単にできるように解説していますので、怖がらずにチャレンジしてみてください。

Simple Custom CSS and JS をインストールしていない方は、以下のページを参考にインストールしてみてください。

WordPressに自作のCSS・JavaScript・HTMLを追加するには? – Simple Custom CSS and JS

HTML を追加する


モーダルウィンドウは jQuery( WordPress でも使われている JavaScript のライブラリ ) の Magnific Popup というプラグインを利用して実装します。HTML のタグを利用してプラグインを読み込みましょう。

ちょっと難しい単語が出てきていますが、わからない方は気にせず解説にそってコピペするだけで OK です。

 

1. HTML を追加するページに移動する

ダッシュボード > Custom CSS & JS > Add Custom HTML を選んでください。

 

2. HTML のコードを追加する

画像のページに移動したら、タイトルに Magnific Popup CDN と入力して、その下の <!– –> に囲まれた赤文字の英文をすべて削除して、以下のコードをコピーして貼り付けてください。

 

そしてページ右側の Where on page と書かれている部分で、Footer を選択してください。それが終わったら公開ボタンを押しましょう。これでブログにプラグインの読み込みが行われます。

JavaScript を追加する


さきほどの設定で読み込まれるようになったプラグインを動作させるために、JavaScript を追加する必要があります。

 

1. JavaScript を追加するページに移動する

ダッシュボード > Custom CSS & JS > Add Custom JS を選んでください。

 

2. JavaScript のコードを追加する

画像のページに移動したら、タイトルに Magnific Popup JS と入力して、その下の /* */ に囲まれた赤文字の英文をすべて削除して、以下のコードをコピーして貼り付けてください。

 

そしてページ右側の Where on page と書かれている部分で、Footer を選択してください。それが終わったら公開ボタンを押しましょう。これでモーダルウィンドウの設定は完了です。

画像をチェックする


ブログの記事の画像をクリック(タップ)して、モーダルウィンドウが正常に表示されるかチェックしてみてください。

こんな感じに表示されると成功です。

対応画像を増やす


デフォルトでは記事内の GIF・PNG・JPEG 画像がモーダルウィンドウに表示されます。その他の画像もモーダルウィンドウに表示したい場合は、JavaScript のコードを編集して、以下の設定を追記してください。

jQuery('.entry-content a[href$=".png"],a[href$=".gif"],a[href$=".jpg"],a[href$=".jpeg"]')
     ↓↓↓
jQuery('.entry-content a[href$=".png"],a[href$=".gif"],a[href$=".jpg"],a[href$=".jpeg"],a[href$=".svg"],a[href$=".svgz"]')

上記では拡張子が .svg と .svgz の画像を追加しました。他にもモーダルウィンドウで表示したい画像の種類がある場合は、赤文字のように、,a[href$=”.ファイルの拡張子”] を追加することで表示されるようになります。

最後に


画像をモーダルウィンドウで表示するようにすると、ブログの使い勝手がすごく良くなります。無駄な読み込みも減らせますので、より快適に記事を読んで貰えるようになります。

ぜひこの記事を参考に設定してみてください。

コメントを残す

メールアドレスが公開されることはありません。

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)