【WordPress】サムネイルをクリックすると画像が切り替わるコンテンツを作る方法、動作不具合時の対応|Knowledge Base

公開日：2021(令和3)年5月12日／最終更新日： 2021(令和3)年5月14日

Amazonなどをはじめとする通販サイトなどでよくある、いくつかの画像を切り替えて表示するコンテンツ。何かを売ったり紹介したりするサイトではよく使う技だと思います。動作を言葉にすると、以下のように感じかと思います。

１つ大きな画像が表示されている
下などに小さな画像がいくつか表示されている
小さな画像のうちのどれかをクリックすると上の大きな画像が切り替わって表示される

うーーん。やっぱり言葉で書いてもなかなか伝わらないと思うので、一番基本的な形で表示させた以下のサンプルをご覧いただき、上の説明通りに小さな画像をポチポチして操作してみてください。

【WordPress】サムネイルをクリックすると画像が切り替わるコンテンツを作る方法、動作不具合時の対応|Knowledge Base

これでようやくお分かりいただけたかも・・（ちなみにサンプルは我が家の「モモ」を１年ごとに撮影した成長記録画像です）。

画像切り替えコンテンツについては、検索すると結構たくさんやり方が掲載されています。しかしながら本当に初心者の方が理解して動かして、ちょっとカスタマイズしてという流れになっているものは少なく、「動く？動かない？」というものが多いと思います。

かくいう私も今回使う「jQuery」については、書かれているものを見れば何となくわかる程度の初心者ですし、WordPressで実装したいという方が多いと思いますので、本コンテンツを実装するにあたっては、WordPressではどうする？ということを基本にしながら進めていきます。コピペ、ではなく私と一緒に仕組みを勉強していくつもりで本記事をお読みいただければ幸いです。

まずは作ってみよう！としたいところではありますが、私の経験から「やってみたけどダメだった」→「役に立たない記事だ！」なんて思う方もいるかもしれませんし、何よりそんな風に思われたりするのはアレなので、本当に基本の基本から紹介していきますから、１つ１つ飲み込みながら進めていただくとより理解が深められると思います。

WordPressで画像切り替えコンテンツを作成するのに必要なスキル

いろいろな情報を見ていると「テーマのheader.phpやfooter.phpへコードをコピーして」と書かれていたり、何もかかれていないこともありますから、WordPressではどうすればいいかについて先に触れておきます。

基本的には、今回のものを含めて「jQuery」+「HTML」+「CSS」で何か動きのあるものを表示させる場合に必要なのは、以下の２つのスキルです。

ブロックエディタ（Gutenberg）のカスタムhtmlブロックを使う（または旧テキストエディタを使う）ことができるか？
テーマの「追加CSS」へデザインコードを追加することができるか？

カスタムhtmlブロックについては、投稿編集画面からブロックを追加する時にいろいろあるものの中から「カスタムhtml」ブロックを追加するだけですし、テーマの追加CSSについては管理画面から「外観」→「カスタマイズ」をクリックした画面に出てくる「追加CSS」メニューをクリックするだけなので分からない方はいないと思いますのでこの程度にしておきます。

カスタムhtmlブロックの追加方法がわからない、「追加CSS」の開き方がわからないという方は残念ながら本記事は役に立たないと思いますので、他の方の記事を参考にしていただいた方がいいと思います。

言われた通りにコピペしたのに動かないときは

本記事のコードに関わらず、その記事に書かれているようにしたのに動かない・・こんなケースよくあると思います。それは記事のコードがダメ！なのではなく、大抵の場合ここから紹介するエラーが発生していると思われます。確認方法含めよくあるパターンを６つ紹介しておきますので確認してみてください。

もしもそれでもダメな場合は、改めてコードを見直す必要があり、jQueryの知識が必要になりますから、スキルがなければあきらめた方がいいでしょう。

動かない場合に確認するためのツールと使い方

Google Chromeブラウザの場合というのを前提に紹介します（他のブラウザでもだいたい同じです）。

動作しないページ（投稿）のプレビュー、または公開済みの場合は実際のページ（投稿）を表示して、画面のどこかで右クリックします。

すると小さいメニューが表示され、一番下あたりに「検証」というのが表示されるのでクリックします。

新しく表示された画面（環境により右側だったり、画面一番下だったりします）に「x」と表示された箇所があるのでクリックします。

すると、画面のどこかに以下のようなエラー内容が表示されます。

ここまでが調べる手順になります、エラー内容に対する対策の仕方は以下で１つずつ紹介していきます。

jQueryが動かないケースと対処方法

ケース１　jQueryの読み込み順が違っている

特にWordPressでは、このエラーが多いと思います。この場合、前述した方法でエラー表示をしたとき、以下のような文章の警告が表示されます。

Uncaught ReferenceError: jQuery is not defined…

意味としては「ページ内に書かれている（出力されている）jQueryは正常動作してませんよ」というものです。

本当にコードに誤りがあれば仕方ないですが、多くの場合原因となりがちなのが以下の２つです。

テーマの設定や仕様により動作が妨げられている
高速表示プラグインの設定や仕様により動作が妨げられている

今回使う「jQuery」のコードは、WordPress本体が「jQueryが使えるようになってますよ」という処理（読み込み）をした後で、動かしたい「jQuery」のコードが読み込まれないとエラーとなってしまうというものです。

これが原因なのかどうかは、ページ内に挿入した「jQuery」のコードの上に以下のコードを追加してみると判別できます。

<script type="text/javascript" src="/wp-includes/js/jquery/jquery.min.js" id="jquery-core-js"></script>

これで動くようになれば、上記２つのどちらか（または両方）が原因なのですが、それらの機能は必要だから設置・設定されているものなのですから停止したりせず、ページ（投稿）で「jQuery」のコードを使う場合は、一番上に上記のコードを付けるようにすれば解決できます。

Uncaught ReferenceError: jQuery is not defined…エラーは総合的に「動かない」ことを意味するエラーなので、これだけが原因とは限りません。

ケース２　jQueryのコードがWordPress用になっていない

以下のようなエラーが表示されます。このエラーはどこかの記事でコードをコピペした時に発生することが多いです。

Uncaught TypeError: $ is not a…

これは「WordPressでは「$」という文字から始まる命令を処理できませんよ！」というものです。

すごく簡潔に説明しますが、WordPressでは何かの変数（変わった文字や数字を代入する可能性のある要素）の先頭に$という文字を使うため、変数なのか？jQueryの命令なのか？が間違って認識されないよう、命令を示す「jQuery」という文字列を指定することになっています。

つまり、命令の先頭（接頭辞）を「$」ではなく、「jQuery」に変え、コードに問題がなければ動作するようになるということです。

説明した通り「命令の先頭（接頭辞）」であり、普通に変数として「$」を使っている箇所がありますから、１つ１つ確認しながら編集する必要がありますのでご注意ください

ちなみに今回紹介する「jQuery」のコードでは、命令に「jQuery」、変数に「$」を使う典型的なパターンですので、後ほど実装時によく見てみてください。

逆に「命令の先頭（接頭辞）」を$のままで使いたいときには、以下の行を先頭に追加することで、WordPress仕様のjQueryではなく一般的なjQueryとして認識されるようになります。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

私的には、せっかくWordPress内部でjQueryを使えるようになっているのに、何でわざわざ時間のかかる外部スクリプトを読み込むのかなぁと思います。ちなみに、WordPress仕様のjQueryコードで動作しない場合は、上記のコードではなく、前項の「jQueryの読み込み順が違っている」で紹介しているコードを利用してください。

ケース３　jQueryのコードであるという宣言がない

これもどこかの紹介記事からコードをコピーした時によくあるケースです。

「jQuery」は「jQueryですよ！」と認識させるために、コードを以下で囲む必要があります。

<script>
動作させるためのコード
</script>

「シロートでもあるまいし、そんなことはしない」とお思いかも知れませんが、私のようにどこかからのコード引用に慣れていて？も、時々気づかず「何で？」となることがありますから、確認してみましょう。

ケース４　そもそもjQueryのコードを書く場所が違っている

実装段階で改めて紹介しますが、WordPressでは「jQuery」のコードを書いて実行されるのは、テーマのプログラム上か、ページ（投稿）のカスタムhtmlブロックのみとなっています。

原則段落ブロックなどへは貼り付けられなくなっているようですが、カスタムhtmlブロック以外に貼り付けた場合には、コードがそのまま表示されますから容易に判別が可能です。

ケース５　jQueryが動かない環境になっている

WordPressは標準で「jQuery」を使う環境になっているプログラムですので、ケースの１としましたがこれはひとまず除外してもいいのではないかと思います。

確認したい場合には、ページを表示（プレビュー）した状態で、以下の操作と確認をします。

ページのどこかで右クリック→「ソースを表示」をクリックします
出てきたソース内のどこかをクリックする
「Ctrl」＋「F」をクリックし、表示された窓に「jquery-core-js」と入力し、右側のスクロールバーに色付きで表示されれば読み込みの問題ではない（検索せず、目で探すこともできます）

万が一読み込まれていないようでしたらWordPress本体の問題か、何かの制限などがかかっているので、それを改善する、もしくはケース１を試してみるとよいでしょう。それでもダメな場合は、検証と改善スキルが必要になりますから・・あきらめた方が無難でしょう。

ケース６　動くけど表示がおかしい（崩れる）

このケースが発生する原因は以下の２点が考えられます

紹介されている「jQuery」「html」「CSS」に整合性がない
テーマのデザイン設定が紹介されている「CSS」では対応できない

上は非常によくあるパターンで、結構いい加減なものもあり、ひどいものでは一見して「どこかから拾ってきたコードの寄せ集め」と分かるものもあります。そうしたページではデモ表示のないものが多い（文字で説明されているだけ）ので、修正する知識がなければ使用しない方がよいでしょう。

また、経験上、いかにも簡単なjQueryコードで実装できそうなものは、結構破綻していることが多いです。それを修正するには、そもそも本当にそのコードで動作するのかの判断を含め、結構な知識が必要かと思われます。

下は、デモなどで紹介されている記事に多く、その紹介記事で使っているテーマでは動く、または、当時の環境ではきれいに表示されるというものであり、表示（見た目）に関しては「jQuery」の問題ではなく、デザインコード（CSS）の問題であることが多いですから、CSSの知識を得て自身で自身のサイトのテーマに合った形へ修正するほかありません。

本記事でも、本記事で使用している自作テーマ「HABONE」テーマでは冒頭のデモのように表示されますというものであり、すべての環境できれいに表示できる保証はありません。

ここまで長々と説明させていただきましたが、これを理解された上でいよいよ実装です。

クリックで画像が切り替わるコンテンツの作成方法

ここまで読んでいただいて、必要なこと、起こり得る不具合と解消方法については理解いただけたと思います。実は、ここまでの内容を知らずにどこかでコードをコピーしてダメ、コピーしてダメという方が実際に多いんです。

今回使うjQueryでなくても、WordPressを動作させるプログラム言語であるPHPも然り、CSSも然り、何でそうなるの？という予備学習なしでは、知らない間にサイトを壊してしまうかも知れません。

と前置きをした上で、いよいよ実装です。作成するのは以下のデモのような動作をする、画像切り替えコンテンツです。

うーーん、我が家のモモはやっぱりかわいい💛・・じゃなかった、こんな感じのものが本記事で作成できます。では順に手順を紹介していきます。

１．切り替え用画像の準備

まずは切り替えに使う画像を準備しなくてはなりません。できれば一旦同じものを貴環境で作ってみてほしいので、以下のような画像を用意します。

幅800ピクセル、高さ600ピクセルの画像（幅・高さとも前後誤差はある程度大丈夫です）
画像は３枚用意する

適当な画像がない場合はPixabayなどの無料画像を適当に用意いただくといいかと思います。

ここでサイトへアップロードする前にしておいていただきたいことが２つあります。

画像サイズを揃えること→こちらのサイトなどで無料・オンラインでできます
画像を軽量化すること→こちらのサイトなどで無料・オンラインでできます

画像サイズは表示崩れを極力防止する意味で、画像の軽量化はページの容量を減らして表示速度を低下させないという意味があります。

画像をきちんと加工してからアップロードすることで、訪問者がページを閲覧する際の時間を短縮でき、かつ、余計に大きな画像を縮小して表示しないので、「きちんとしているページ」と認識され、検索エンジンから良い評価がされやすくなります。
（WordPressは結構いい加減に巨大な画像をアップロードしても表示はしてくれるので、案外画像処理の重要性に気付かない人が多いです）。

画像が用意できたら、メディアへアップロードしましょう。

アップロードした画像の編集画面を開き、URLをコピーしてメモ帳などに貼り付けておきましょう。

画像URLは以下の画像の「これが画像のURL」で示す場所にあるボタンでコピーします。画像タイトル下に表示されているURLは画像ページのURLで、画像のURLではありませんのでご注意ください。

２．デザインコード（追加CSS）の追加

管理画面から「外観」→「カスタマイズ」→「追加CSS」を開き、以下のコードをひとまずそのままコピペしてください。

既に追加CSSへ記述がある場合は、一番下へ改行をした後に追加してください。誤って既存のコードを削除すると、表示不良が起きたりデザインがおかしくなったりしますから注意が必要です。

/***** 画像入れ替え *****/
.thumb-container img {
    max-height: 60px;
    object-fit: cover;
    padding: 5px;
}

#change-image {
    height: 500px;
    width: 800px;
    object-fit: cover;
}

３．投稿への実装

投稿を新規作成し、「カスタムhtml」ブロックを２つ追加します。

まず１つ目の「カスタムhtml」ブロックへ以下のコードをコピペしてください。

<script>
jQuery(document).ready(function($){

$('.parent-image').on({
     'click': function(){
         $('#change-image').attr('src','ページを表示したときに表示される画像のURL');
     }
 });
 
$('.child-image01').on({
     'click': function(){
         $('#change-image').attr('src','１つめの切り替え画像のURL');
     }
 });
 
$('.child-image02').on({
     'click': function(){
         $('#change-image').attr('src','２つめの切り替え画像のURL');
     }
 });
});
</script>

次に２つめの「カスタムhtml」ブロックへ以下をコピペしてください。

<!-- 大きく表示される画像 -->
<img id="change-image" src="ページを表示したときに表示される画像のURL"  alt="【WordPress】サムネイルをクリックすると画像が切り替わるコンテンツを作る方法、動作不具合時の対応|Knowledge Base" />
<!-- サムネイル（小さい）画像 -->
<div class="thumb-container">
<img class="parent-image" src="ページを表示したときに表示される画像のURL">
<img class="child-image01" src="１つめの切り替え画像のURL">
<img class="child-image02" src="２つめの切り替え画像のURL">
</div>

メディアにアップロードした３枚の画像URLを挿入した上記２つのコードへ書き換えていきます。

「ページを表示したときに表示される画像のURL」（３か所あります）
「１つめの切り替え画像のURL」（２か所あります）
「２つめの切り替え画像のURL」（２か所あります）

ここまで行ったら、一旦下書き保存して、プレビューで見てみましょう。

どうですか？表示されましたか？？

もしも動作しない場合は前述した「jQueryが動かないケースと対処方法」をご覧になり対処してみてください。

小さい画像の表示が大きくなってしまっている（巨大な画像が４つ並んでいる）場合には、キーボードの「Ctrl」＋「F5」をクリックして、一時保存されている情報（キャッシュ）を削除してみてください（サンプルのような感じにならないときはテーマデザインとの兼ね合いかと思いますので、知識を得て調整していただく必要があります）。

うまく表示されたら、ひとまず画像切り替えコンテンツはできあがりです。

コードの解説

先程「カスタムhtml」ブロックのうち、１つめにコピーしたのが「動きを持たせるプログラム（jQuery）」、２つめにコピーしたのが実際に表示させるためのhtmlになります。

この２つのコードには相関関係があります。

まずは、htmlの一番上にある「ページを表示したときに表示される画像のURL」を入れた行の先頭付近「#change-image」の指定が、最初に表示される画像になります。

それ以外の画像は、手順通りに行えば、jQueryとhtmlとで「parent-image」「child-image01」「child-image02」となっている行に同じ画像URLが入っているはずです。

動きとしては、以下のような流れになります。

まずは、「change-image」になっている画像を大きく表示します
小さい画像がクリックされたら、その画像のURLを「change-image」になっていた１の画像と置き換えます（要はクリックされた画像が大きい画像として表示されます）
その他の小さい画像をクリックすると、再び「change-image」の画像URLが代わり、クリックした画像が大きい画像として表示されます（あとはクリックごとに繰り返えされます）

説明がおぼつかなくてスミマセン・・・と一応謝っておきます（笑）。コードをじっくり見てイメージをつかんでいただければと思います。

従って、上下のコードで「change-image」「parent-image」「child-image01」「child-image02」の文字列が異なると正常に動作しません（このあたりがコピペでっていう記事ではずれていることが多々あります）。

jQueryに関しては、以下のような流れになります。

まずは、jQueryで切り替える前、すなわちページを表示した時は、htmlの「change-image」に指定されているURLの画像を表示します（この部分がjQueryによって置き換わります）

２行目で「jQueryですよ！」という宣言と、「$という変数を使って表示の切り替えをさせますよ！」という命令をしています。そして最終行でこの命令を閉じています。

jQuery(document).ready(function($){
$という変数で表示の切り替えをさせる内容
});

４～８行目で、htmlの「parent-image」に指定されている画像をクリックしたら、「change-image」の場所に「parent-image」の画像を表示させています

$('.parent-image').on({
     'click': function(){
         $('#change-image').attr('src','ページを表示したときに表示される画像のURL');
     }
 });

同じように、１０～１４行目でhtmlの「child-image01」に指定されている画像をクリックしたら、「change-image」の場所に「child-image01」の画像を表示させています

$('.child-image01').on({
     'click': function(){
         $('#change-image').attr('src','１つめの切り替え画像のURL');
     }
 });

同じように、１６～２０行目でhtmlの「child-image02」に指定されている画像をクリックしたら、「change-image」の場所に「child-image02」の画像を表示させています

$('.child-image02').on({
     'click': function(){
         $('#change-image').attr('src','２つめの切り替え画像のURL');
     }
 });

これで、「クリックされたら〇〇の画像を「change-image」の場所へ表示させる」という切り替えができるのです。再度説明下手でスミマセン・・お分かりいただけることを願いつつ・・。

ここまで理解できていれば、画像を増やす方法はもうお分かりになりますよね？（分かった段階で増やしてください）。

そうです、jQueryへ選択肢である

$('.指定する文字列').on({
     'click': function(){
         $('#change-image').attr('src','切り替え画像のURL');
     }
 });

の部分を追加し（jQurdy最終行の「});」は先頭行の「jQuery…」の閉じ子なのでその上）、htmlへ

<img class="指定する文字列" src="切り替え画像のURL">
</div>

を最終行の「</div>」の上に追加して「指定する文字列」を同じものにすればOKです。

２つのコードの「指定する文字列」の文字列は半角英数字で同じもの、かつ、コード中で使っていないものにする必要があります

以上、まずはサンプルコードの通り、３つの画像でチャレンジし、うまくいったら画像を増やしたり減らしたりしてみるという風にすれば、切り替え画像コンテンツの作成はOKでしょう。

ちなみに今回は、同じ画像のURLを複数箇所に直書きしていますが、それをjQueryで引っ張り出して１つのURLで済むように・・としている紹介記事が多数あります。知識が進めば理にかなっている方法なのですが、この記事を書く段階の私のような知識では動作しなかったときに修正ができませんから、まずは今回のコードを使い倒してみることをおすすめします。

おまけ　１つのページに複数の切り替え画像コンテンツを入れたいときは

これを紹介すると混乱しそうなのでどうかとも思ったのですが一応・・。

先程画像を追加する際に

２つのコードの「指定する文字列」の文字列は半角英数字で同じもの、かつ、コード中で使っていないものにする必要があります

と説明しました。これは画像だけでなくプログラムそのものにも言えることで、今回のサンプルコードでは既に「change-image」「parent-image」「child-image01」「child-image02」という文字列を使っていますから、

「change-image」を「cange-image2」にしてjQuery、htmlすべての箇所を書き換える
「parent-image」を「parent-image1」にしてjQuery、htmlすべての箇所を書き換える
「child-image01」を「child-image101」にしてjQuery、htmlすべての箇所を書き換える
「child-image02」を「child-image102」にしてjQuery、htmlすべての箇所を書き換える

という風にすればもう１つ設置できます（３つめ以上も同様です）。

【ちょっと応用】画像をふわっと入れ替えるようにする方法

基本コード（サンプルコード）の構造や動きが分かってくると、いろいろできそうな感じがしてきました。そこで、基本のコードではパッと切り替わっていた画像をふんわり入れ替わるようにしてみましょう。

使うのは、「.fadeOut()」「.fadeIn()」というメソッド（動きの指示のことを「メソッド」というそうです）です。

画像１つ１つに対する基本コードは、以下の塊でしたね。

$('.指定する文字列').on({
     'click': function(){
         $('#change-image').attr('src','切り替え画像のURL');
     }
 });

この塊では

'click': function(){
－－内容－－
      }

というくくりでクリックされたら「－－内容－－」に書かれている動きをしなさいという風になっています。そして、「－－内容－－」の部分は

$('#change-image').attr('src','切り替え画像のURL');

「#change-image」という部分（行）に書かれている「src」で指定されているURLを「切り替え画像のURL」へ置き換えなさいという指示がされています。

そこで、画像を入れ替えた時に、一旦非表示（.fadeOut()）させ、その後時間をかけて表示（.fadeIn()）しなさいというのを付加していきます。上記の塊にこのメソッドを追加すると以下のようになります。

$('.指定する文字列').on({
     'click': function(){
         $('#change-image').attr('src','切り替え画像のURL').fadeOut(0).fadeIn(500);
     }
 });

「.fadeOut()」「.fadeIn()」の()内は時間の指定ができるので、上記のコードでは.fadeOut(0)で「時間ゼロでフェードアウト」させ、.fadeIn(500)で500ミリ秒でフェードインさせるという指示をしています。

よく掲載されているコードでは、画像が完全に表示される前にクリックされると、クリックして入れ替わった画像が一瞬表示されてから消えて再び表示されるという感じになってしまうので、.fadeIn(500)メソッドのみを追加して、CSSで一旦画像を非表示にしてから処理する・・・という流れのものが多いですが、フェードインの時間が短ければこれで十分に動作します

以下は基本コードと同じ画像を使ってふわっと表示させるサンプルです。

いかがでしょう。メソッドをちょっと追加するだけでいい感じになりましたね。

基本が分かるといろいろできそうな気がしてきました（自画自賛）。

【更に応用】画像の数を自由に足し引きできるようにする方法

これまで紹介した方法では、jQueryとhtmlのそれぞれに、呼応した数の変更指示と画像URLの設定を行う必要がありました。画像切り替えコンテンツの画像を頻繁に変更することもないでしょうし、間違った設定をしなければ特に動作には問題はありませんが、もう１歩進んで、htmlの画像URLを書いた行を追加（削除）するだけで動作するようにしてみましょう。

WordPressの投稿や固定ページ本文へ画像切り替えコンテンツを表示する方法の基本は今までの手順と変わりありません。読み飛ばして不明というた方は、今一度ページ先頭からじっくりご覧ください。

jQueryの記述は以下のようにします

<script>
jQuery(function(){
   jQuery('.subimage img').click(function(){
       // サムネイルの取得
       let $thisImg = jQuery(this).attr('src');
       let $thisAlt = jQuery(this).attr('alt');

       // メインイメージを一度非表示にする（アニメーション付与のため）
       jQuery('.mainimage img').hide();

       // メインイメージとサムネイルを切り替える
       jQuery('.mainimage img').attr({src:$thisImg,alt:$thisAlt}).fadeIn(500);
   });
});
</script>

htmlの記述は以下のようにします

<div class="mainimage">
    <img src="最初に表示する画像"  alt="【WordPress】サムネイルをクリックすると画像が切り替わるコンテンツを作る方法、動作不具合時の対応|Knowledge Base">
</div>
<div class="subimage">
    <img src="最初に表示する画像"  alt="【WordPress】サムネイルをクリックすると画像が切り替わるコンテンツを作る方法、動作不具合時の対応|Knowledge Base">
    <img src="切り替えて表示させる画像１"  alt="【WordPress】サムネイルをクリックすると画像が切り替わるコンテンツを作る方法、動作不具合時の対応|Knowledge Base">
    <img src="切り替えて表示させる画像１"  alt="【WordPress】サムネイルをクリックすると画像が切り替わるコンテンツを作る方法、動作不具合時の対応|Knowledge Base">
    <img src="切り替えて表示させる画像１"  alt="【WordPress】サムネイルをクリックすると画像が切り替わるコンテンツを作る方法、動作不具合時の対応|Knowledge Base">
    <img src="切り替えて表示させる画像１"  alt="【WordPress】サムネイルをクリックすると画像が切り替わるコンテンツを作る方法、動作不具合時の対応|Knowledge Base">
</div>

追加CSSに記述するデザインコードは以下のようにします

/*** 自由に増減できる画像切り替えコンテンツ ***/
.mainimage img{
    width: 800px;
    height: 500px;
    max-width: 100%;
    object-fit: cover;
}

.subimage img {
    max-height: 60px;
    object-fit: cover;
    padding: 5px;
}

ついでに、alt要素も入れ替わるようにして、画像の切り替えもふわっとするようにしています。

動作させると下のコンテンツになります

え？さっきのとおんなじじゃん！！と思った方、ほぼほぼ正解です👏👏

前述したように、htmlの画像URLの行だけを増減させれば、jQuery側は変更しなくてもよいという方法なのですから・・。つまり、どちらでも後から自分で見て内容が分かる方法でいい訳です（私はまだまだ慣れていないので今までの方法が確実かなと感じています）。

とはいえ、jQuery側を変える必要がないので、各段に間違いを起こす可能性は減らすことができますから、こちらの方が便利でしょう。

ここからはコードの解説をします。便宜上htmlの方から進めます。

htmlの記述に関する解説

今までのhtmlでは、以下のように書いていました。

親画像（大きな画像）を囲むdiv要素
子画像（小さな画像）を囲むdiv要素
子画像ごとに画像クラス（img class=”〇〇”）を指定

これが、今回のhtmlコードでは、子画像ごとの画像クラスが無くなっています。つまり、子画像のどれかをjQueryに判別してもらおうという形になっているのです。

jQueryの記述に関する解説

一見簡単に書いていますが、実に巧妙？なことをしています。

まず大きく違うのは、「let」というのを使って変数として子画像を扱っていることです。以下がその部分で、「小さい画像（subimageで囲まれた場所のimgタグで書かれているもの）がクリックされたらクリックされた画像のsrc属性に指定されているもの（画像URL）を$thisimgという変数として格納し、alt属性に指定されているもの（画像の代替文字列）を$thisAltという変数として格納する」というコードになります。

   jQuery('.subimage img').click(function(){
       // サムネイルの取得
       let $thisImg = jQuery(this).attr('src');
       let $thisAlt = jQuery(this).attr('alt');

これを以下のコードで「大きい画像（mainimageで囲まれたimgタグ）の場所へ先ほどの変数を入れて表示させなさい」としています。ついでに先ほども使ったfadeinを使って画像をフェードイン表示（ふわっと表示）させるように指示しています。

       // メインイメージとサムネイルを切り替える
       jQuery('.mainimage img').attr({src:$thisImg,alt:$thisAlt}).fadeIn(500);

ただこれだと入れ替わった画像が再びフェードインされることになってしまうので、以下のコードで一旦非表示にしてからフェードインさせるようにしています。

       // メインイメージを一度非表示にする（アニメーション付与のため）
       jQuery('.mainimage img').hide();

こうなると簡素に書いてあるように見えて、なかなかいろいろなことさせているなぁという感じになりますし、このレベルになると最初から自分で書くというよりはコピペで・・ってなりますね。

そして、体裁を整えるために、追加CSSへ前述したデザインコードを追加すれば完成！となります。

また、この方法でも、１ページの中に複数の画像切り替えコンテンツを設置する場合、１つ目のCSSクラスとは別名にし、jQueryとhtmlで呼応しているCSSクラスそれに変更すれば実装できます。

CSSクラスが変更になるのですから、追加CSSもそれに合わせて追記する必要があります。・・というのは多分もうここで書かなくても大丈夫でしょう。

おまけ　PageSpeed Insightsで指摘されないようにするには

今までのコードを使ってPageSpeed InsightsやSearch Consoleでページ解析をすると、画像の扱いに関する指摘を受けることがあります（スコア低下を起こすこともあります）。

これを解消するには「画像を遅延読み込みにする」「画像の縦横比を明確にする」「サムネイル画像（小さい画像）を変更して、適切な大きさの画像にする」の大きく３つの対策が必要です。

最後に紹介したhtmlを例にして修正していきましょう。まず以下は元のコードです。

<div class="mainimage">
    <img src="最初に表示する画像"  alt="【WordPress】サムネイルをクリックすると画像が切り替わるコンテンツを作る方法、動作不具合時の対応|Knowledge Base">
</div>
<div class="subimage">
    <img src="最初に表示する画像"  alt="【WordPress】サムネイルをクリックすると画像が切り替わるコンテンツを作る方法、動作不具合時の対応|Knowledge Base">
    <img src="切り替えて表示させる画像１"  alt="【WordPress】サムネイルをクリックすると画像が切り替わるコンテンツを作る方法、動作不具合時の対応|Knowledge Base">
    <img src="切り替えて表示させる画像１"  alt="【WordPress】サムネイルをクリックすると画像が切り替わるコンテンツを作る方法、動作不具合時の対応|Knowledge Base">
    <img src="切り替えて表示させる画像１"  alt="【WordPress】サムネイルをクリックすると画像が切り替わるコンテンツを作る方法、動作不具合時の対応|Knowledge Base">
    <img src="切り替えて表示させる画像１"  alt="【WordPress】サムネイルをクリックすると画像が切り替わるコンテンツを作る方法、動作不具合時の対応|Knowledge Base">
</div>

画像を表示するためのタグはすべて同じですので１つ修正したら、すべての画像タグに同じことをすればOKです。

まず、画像の遅延読み込みについて。画像を読み込むのに時間がかかってそれ以外のものを表示するのに待ち時間が出てしまう場合（特にページの上の方でこのコンテンツを設置した場合）に対策が必要です。

これは単純に画像タグの中に、遅延読み込みしてくださいという属性（loading=”lazy”）を追加するだけです。実際に追加したものが以下になります

<img loading="lazy" src="最初に表示する画像"  alt="【WordPress】サムネイルをクリックすると画像が切り替わるコンテンツを作る方法、動作不具合時の対応|Knowledge Base">

次に、画像の縦横比を明確にする件。これは、画像タグの中に「この画像の幅・高さはこれですよ！」と書くことで、ブラウザに表示される際、この比率を基に画像を拡大縮小するために使われます（つまりブラウザがどんなサイズの画像？と解析しなくてもいいようにして効率化させるための指定です）。

これを行うには、実際の画像サイズを調べなければなりません。

実際の画像サイズは、メディアの詳細画面にコンテンツに挿入している画像を開き、画面右側に表示されている場所（以下）を確認します。

画像の例では縦800ピクセル、600ピクセルの画像ですので、その画像のimgタグ内へ以下を追記します。

width="800" height="600"

実際に挿入するとこのような記述になります。

<img loading="lazy" src="最初に表示する画像"  alt="【WordPress】サムネイルをクリックすると画像が切り替わるコンテンツを作る方法、動作不具合時の対応|Knowledge Base" width="800" height="600">

コンテンツ内のすべての画像がこのサイズならそのままコピーでOKですが、そうでない場合には個別に調べて設定した方が正しく表示されます。

ここまでの措置で、このコンテンツに関わるある程度の指摘は避けることができます。

が・・できたできたとページを表示すると、サムネイルの表示がおかしいですよね？横にビローンと長い画像が表示されていると思います。これはこのコンテンツに対するCSSでサムネイル表示する画像の幅を指定していないからですので、以下のように幅の指定を追加すればよいでしょう（上のコードが基のコード、下が改善後のコードです）。

/*** 自由に増減できる画像切り替えコンテンツ ***/
.mainimage img{
    width: 800px;
    height: 500px;
    max-width: 100%;
    object-fit: cover;
}

.subimage img {
    max-height: 60px;
    object-fit: cover;
    padding: 5px;
}

/*** 自由に増減できる画像切り替えコンテンツ ***/
.mainimage img{
    width: 800px;
    height: 500px;
    max-width: 100%;
    object-fit: cover;
}

.subimage img {
    max-height: 60px;
    max-width: 100px;
    object-fit: cover;
    padding: 5px;
}

あとがき

今回の画像入れ替えコンテンツに関して欲を言えば以下のような要件を満たしたいと思われる方がいらっしゃるかも知れません。

サムネイル（小さい画像）はきちんとWordPressが生成したサムネイル画像にしたい
大きい画像の右（または左）にサムネイルが表示されるようにしたい

他にもまだまだあるかも知れませんね。

１については、サムネイル画像のURLを調べて入れ替えれば可能

２についてはCSSやhtmlタグについての知識が必要

ですので、それぞれをカスタマイズするしかありませんから、それぞれについてご自身で調べていただくほか方法はありません。

最後になりましたが、今回のコードは次の記事を参考にさせていただきました：jQuery replace an image on click

更新日	更新内容
2021年 5月12日	記事を公開しました
2021年 5月13日	画像の入れ替えをふんわりさせる方法を追加しました通常のjQueryで動作するようになる方法を加筆しました画像数を自由に増減できるコード例の紹介を追加しました
2021年 5月14日	コンテンツを複数設置する方法を追加しました。 PageSpeed InsightsやSearch Consoleで画像に対して受ける指摘の改善方法を追加しました。

【WordPress】サムネイルをクリックすると画像が切り替わるコンテンツを作る方法、動作不具合時の対応

WordPressで画像切り替えコンテンツを作成するのに必要なスキル

言われた通りにコピペしたのに動かないときは

動かない場合に確認するためのツールと使い方

jQueryが動かないケースと対処方法

ケース１ jQueryの読み込み順が違っている

ケース２ jQueryのコードがWordPress用になっていない

ケース３ jQueryのコードであるという宣言がない

ケース４ そもそもjQueryのコードを書く場所が違っている

ケース５ jQueryが動かない環境になっている

ケース６ 動くけど表示がおかしい（崩れる）

クリックで画像が切り替わるコンテンツの作成方法

１．切り替え用画像の準備

２．デザインコード（追加CSS）の追加

３．投稿への実装

コードの解説

おまけ １つのページに複数の切り替え画像コンテンツを入れたいときは

【ちょっと応用】画像をふわっと入れ替えるようにする方法

【更に応用】画像の数を自由に足し引きできるようにする方法

htmlの記述に関する解説

jQueryの記述に関する解説

おまけ PageSpeed Insightsで指摘されないようにするには

あとがき

ケース１　jQueryの読み込み順が違っている

ケース２　jQueryのコードがWordPress用になっていない

ケース３　jQueryのコードであるという宣言がない

ケース４　そもそもjQueryのコードを書く場所が違っている

ケース５　jQueryが動かない環境になっている

ケース６　動くけど表示がおかしい（崩れる）

おまけ　１つのページに複数の切り替え画像コンテンツを入れたいときは

おまけ　PageSpeed Insightsで指摘されないようにするには