【WordPress】ブログの画像を拡大表示させる「ライトボックス」の実装方法

画像をクリックすると画像が拡大表示されるやつを実装したいが、どうやればいいのかな?

こんにちは、リュウセイです。

今回は、画像をクリックすると画像が拡大表示される「ライトボックス(Lightbox)」という機能を実装する方法について書きます。

こんなやつ↓※画像をクリックしてみてください

ライトボックスの例

ライトボックスを実装すれば、ブログに表示させる画像のサイズが小さくても、詳細を見たい人には拡大画像を見せられるので便利な機能ですね。

ライトボックス実装の流れは以下の通り。

  1. ライトボックス用のcssとjavascriptのファイルを用意する
  2. 上記のファイルを「子テーマ」にアップロードする
  3. functionphpとheader.phpにファイル読み込み指定用のコードを入れる
  4. ライトボックスにしたい画像に、拡大表示用の画像リンクと「rel=lightbox」を記述する

…なんだか難しそうですが、大丈夫。実際に僕がうまくいった方法をシェアするので、ライトボックスの実装だけならそう苦戦することなくできるハズです。

僕は色々あって苦戦しましたが…。

ただ、ある程度のWordPressの知識がある前提で話を進めるので、もし分からないという場合はプラグインの使用をおすすめします。

ということで、早速やり方について解説していきますね(・∀・)!

【WordPress】ブログの画像を拡大表示させる「ライトボックス」の実装方法

ライトボックス実装に必要なファイルとコードはこの記事内で提供するので、あなたのすることはほぼ「コピペ」でOKです。

①ライトボックス用のcssとjavascriptのファイルを用意する

「ライトボックス」で検索すれば公式サイトからlightboxファイルをダウンロードできます。

僕が使っているファイルを下記に添付しておくので、ぜひお使いくださいませ。

ZIPファイルがダウンロードされるので、解凍してください。「lightbox.css」と「lightbox.js」の2つのファイルが入っています。

②ライトボックス用のファイルを「子テーマ」にアップロードする

解凍したlightboxファイルを、WordPressテーマの「子テーマ」にアップロードしていきます。

親テーマにアップロードしてしまうと、テーマの更新があった際に追加したファイルは全て削除されてしまうので、更新の影響がない子テーマにアップした方がいいですね。

FTPソフトを使うか、もしくはレンタルサーバー側で用意されている「サーバーパネル」等の機能を使ってファイルを子テーマにアップしましょう。

③ファイルの読み込み指定のパスを書く

子テーマにアップしたlightboxファイルをサイトに読み込ませるために、それ用のパスを書きます。

方法はここで紹介するやつに限りませんが、僕はlightbox.css読み込みパスを「header.php」に、lightbox.js読み込みパスを「function.php」に書いています。

下記のパスを該当のphpファイルに書き入れましょう。

<link rel="stylesheet" href="CSSファイルの絶対パス" madia="all">
// JavaScriptファイルを読み込む
function add_my_scripts() {
  wp_enqueue_script( 
    'lightbox-script', 
    get_theme_file_uri( 'JSファイルの相対パス' ), 
    array( 'jquery' ), 
    false
  );
}
add_action('wp_enqueue_scripts', 'add_my_scripts');

cssパスは「header.php」の「<head></head>」内に、jsパスは「function.php」の一番下に追記する形でOKです。

ここで注意しないといけないことは、linkタグは「絶対パス」で書かなければいけないということ。つまりCSSファイルが置かれているURL全てを書き入れないと読み込めません。

【初心者向け】絶対パスと相対パスの違いについて解説 | サービス | プロエンジニア

④画像のHTMLにライトボックスの書式を入れる

ここまで来たら、あと少し。

画像のaタグに、拡大表示(ライトボックス)用の画像リンクと「rel=”lightbox”」を書き加えたら、完成です。クラシックエディタでは「テキストモード」に、ブロックエディタでは「HTMLとして編集」に切り替えて編集しましょう。

参考までに、冒頭のライトボックスのHTMLを貼り付けておきます↓

<figure class="wp-block-image size-full is-resized"><a href="https://ryusei-komada.com/wp-content/uploads/2022/08/ca3ca0a09da41dad4851699ca4001af1.jpg" rel="lightbox"><img src="https://ryusei-komada.com/wp-content/uploads/2022/08/ca3ca0a09da41dad4851699ca4001af1.jpg" alt="ライトボックスの例" class="wp-image-7150" width="150" height="113"/></a></figure>

上記のHTMLで注目するのは

<a href="https://ryusei-komada.com/wp-content/uploads/2022/08/ca3ca0a09da41dad4851699ca4001af1.jpg" rel="lightbox">

ここの部分ですね。imgタグの前にaタグを配置して、画像リンクの後に「rel=”lightbox”」をつけるだけです。

それがちょっと分からないという場合は、プラグインで実装した方がいいと思います(下記の記事を参照)。

Easy FancyBox: 画像を拡大表示できるWordPressプラグイン | ねたわん

もし当記事を読んでも、

やり方が分からない…

プラグイン無しで実装したいけど、でも手動で実装するのはめんどくさそう…

とお困りの方は、僕が『1,000円』で設定を代行させていただきます。

下記のお問い合わせフォームより、「ライトボックスの実装代行の依頼」とメッセージ本文に書き入れて送信してください。

お問い合せ | リュウセイブログ

以上、プラグイン無しでのライトボックスの実装方法でした〜

コメントを残す

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