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

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

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

画像をクリックすることで拡大表示できる機能は、「ライトボックス(Lightbox)」と呼びます。

例として、下記の画像をクリックしてみてください。

ライトボックスの例

テーマによっては標準搭載されていたり、プラグインで簡単に実装できたりします。

しかし、あくまで手動で実装したいという人は、下記の手順で実装しましょう。

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

…なんだか難しそうですが、大丈夫。

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

ただ、どうしても難しいと思う場合は、プラグインの使用がおすすめですね。

プラグインについては、記事の最後でリンクを貼ります。

ということで、早速始めていきましょう。

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

ライトボックス実装に必要なファイルとコードは、この記事内で提供します。

なので、あなたのすることはほぼ「コピペ」だけですよ。

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

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

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

ZIPファイルがダウンロードされるので、解凍してください。

「lightbox.css」と「lightbox.js」の2つのファイルが入っています。

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

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

子テーマにアップすれば、テーマの更新があっても上書きされる心配はありません。

アップロード方法
  1. FTPソフトを使う
  2. レンタルサーバーの管理画面から行う

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

lightboxファイルをサイトに読み込ませるために、パスを書きます。

lightbox.css読み込みパスを「header.php」に、lightbox.js読み込みパスを「function.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として編集」に切り替えて編集しましょう。

<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プラグイン | ねたわん

それでは、以上です。
ありがとうございました。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です