WordPressの記事内の画像をポップアップにする方法として、プラグインを導入する方法が紹介されています。
しかし、この方法の場合、投稿する人がその画像にリンク設定をして初めてポップアップ表示されるようになります。
投稿する人目線でいえば理想は何も設定する必要なく画像は自動でポップアップしてくれることですよね。
この記事でご紹介している方法を使えば完全自動で画像がポップアップ表示されるようになる方法をご紹介したいと思います。

記事内の画像をポップアップ表示する方法

WordPressの投稿で記事内に埋め込んだ画像をクリックした時、ポップアップ表示する方法はこちら。

完成コード

まずは「jQuery」を読み込みます。CDN経由で読み込む場合はこちらを読み込みます。

<script src="https://code.jquery.com/jquery-3.7.1.slim.min.js"></script>

続いて「HTML」「CSS」「js」のコードです。

・HTMLはこちら。

<?php if( have_posts() ): while( have_posts() ): the_post(); ?>
<div class="editor"><?php the_content(); ?></div>
<?php endwhile; endif; ?>
<div class="popup">
    <div class="popup__inner">
        <span class="popup__close"></span>
        <figure class="popup__image"></figure>
    </div>
</div>

・CSSはこちら。

.editor img{
    cursor: pointer;
    transition: .3s all ease-in-out;
}
.editor img:hover{
    opacity: .6;
}
.popup{
    width: 100%;
    height: 100%;
    padding: 5rem;
    background: rgba(0,0,0,.75);
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    visibility: hidden;
    opacity: 0;
    transition: .3s all ease-in-out;
}
.popup.-on{
    opacity: 1;
    visibility: visible;
}
.popup__inner{
    max-width: 50rem;
    max-height: 50rem;
    position: relative;
}
.popup__close{
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: #000;
    border: 2px solid #fff;
    right: -1rem;
    top: -1rem;
    position: absolute;
    box-shadow: 0 0 1.5rem rgba(0,0,0,.25);
    transition: .3s all ease-in-out;
    cursor: pointer;
}
.popup__close:hover{
    transform: scale(.9);
}
.popup__close::before,
.popup__close::after{
    width: 1.2rem;
    height: 2px;
    position: absolute;
    left: 0;
    right: 0;
    top: calc(50% - 1px);
    margin: 0 auto;
    background: #fff;
    display: block;
    content: "";
}
.popup__close::before{
    transform: rotate(45deg);
}
.popup__close::after{
    transform: rotate(-45deg);
}
.popup__image{
    width: 100%;
    height: 100%;
}
.popup__image img{
    width: 100%;
    height: 100%;
    object-fit: contain;
}

・jsはこちら。

$(function(){

    /* ポップアップを作成・表示 */
    $('.editor img').on('click',function(){

        /* 表示されている画像からフルサイズ画像のURLを取得 */
        let img_src = $(this).attr('src');
        let split_img_src = img_src.split('-');
        let popup_img_src = split_img_src[0] + "-" + split_img_src[1] + ".jpg";
        let popup_img = "<img src='" + popup_img_src + "'>";

        /* フルサイズ画像をポップアップ部分のHTMLにセット */
        $('.popup__image').html(popup_img);

        /* ポップアップ表示 */
        $('.popup').addClass('-on');

    });

    /* ポップアップを閉じる */
    $('.popup__close').on('click',function(){
        $('.popup').removeClass('-on');
    });

});

こちらの各種コードをコピペすることで実装することが出来ます。

コードの解説

記事内容を出力する部分は以下のように<div class="editor"></div>の中に出力するようにします。

<div class="editor"><?php the_content(); ?></div>

後述する「jQuery」の処理で<div class="editor"></div>の中で使われている<img>をクリックした際に処理を実行するためです。

ポップアップ部分は予め画像を除き以下のようにHTML内に記述しておきます。

<div class="popup">
    <div class="popup__inner">
        <span class="popup__close"></span>
        <figure class="popup__image"></figure>
    </div>
</div>

この部分はdisplay: none;で隠しておきます。

CSS部分はお好みで調整してください。

js部分は「ポップアップ画像生成の生成して表示する」と「ポップアップ画像を非表示にする」の大きく分けて2つの処理に分かれています。

「ポップアップ画像生成の生成して表示する」の部分の処理は以下の流れで構成されています。

• 【STEP1】表示されている画像からフルサイズ画像のURLを取得
• 【STEP2】フルサイズ画像をポップアップ部分のHTMLにセット
• 【STEP3】ポップアップ表示

/* 表示されている画像からフルサイズ画像のURLを取得 */
let img_src = $(this).attr('src');
let split_img_src = img_src.split('-');
let popup_img_src = split_img_src[0] + "-" + split_img_src[1] + ".jpg";
let popup_img = "<img src='" + popup_img_src + "'>";

WordPressのメディアで「●●●.jpg」という画像をアップすると、その画像はリサイズされ「●●●-横サイズx縦サイズ.jpg」というファイル名になります。
そしてWordPressのディレクトリ構成では「wp-content」となっているのでJavaScriptのsplit()関数を使い「-（ハイフン）」で分割すると

配列名[0] + "-" + 配列名[1] + ".jpg"

とすることで「フルサイズ」の画像のURLを取得することが出来ます。

だだし注意点としてこの方法では「-（ハイフン）」で分割するため、「テーマディレクトリ名」と「アップする画像名」では「-（ハイフン）」は使用出来ません。
この点のみ注意しましょう。

取得した「フルサイズ」の画像URLをポップアップ部分のHTMLにセットするコードはこちら。

/* フルサイズ画像をポップアップ部分のHTMLにセット */
$('.popup__image').html(popup_img);

ポップアップを表示するコードはこちら。

/* ポップアップ表示 */
$('.popup').addClass('-on');

表示されいてるポップアップを非表示するコードはこちら。
×ボタンをクリックすることでポップアップは非表示になります。

/* ポップアップを閉じる */
$('.popup__close').on('click',function(){
    $('.popup').removeClass('-on');
});

以上がコードの解説です。

まとめ

いかがでしたか？
WordPressの投稿で記事内の画像を完全自動でポップアップにする方法をご紹介しました。
プラグインを使う方法もありますが、この場合、投稿する人が画像投稿時にリンク設定が必要になってしまいます。
しかし、今回ご紹介した方法であれば、投稿する人は何もする必要がなく、完全自動で投稿内の画像がポップアップ表示されます。
便利なので是非活用してみて下さい。