【WordPress】画像クリックでコンテンツを切り替えるCSS

左側のボタンをクリックするとボタンに応じて右側のコンテンツが切り替わるという機能をELEMENTOR上で実現するためのCSSとJavaScriptです。よくある機能ですが、実装するとなると少し複雑なのでステップごとにまとめました。

1

ここには1のコンテンツが表示されます。ここには1のコンテンツが表示されます。ここには1のコンテンツが表示されます。ここには1のコンテンツが表示されます。ここには1のコンテンツが表示されます。ここには1のコンテンツが表示されます。ここには1のコンテンツが表示されます。ここには1のコンテンツが表示されます。ここには1のコンテンツが表示されます。ここには1のコンテンツが表示されます。ここには1のコンテンツが表示されます。ここには1のコンテンツが表示されます。ここには1のコンテンツが表示されます。ここには1のコンテンツが表示されます。ここには1のコンテンツが表示されます。ここには1のコンテンツが表示されます。

2

ここには2のコンテンツが表示されます。ここには2のコンテンツが表示されます。ここには2のコンテンツが表示されます。ここには2のコンテンツが表示されます。ここには2のコンテンツが表示されます。ここには2のコンテンツが表示されます。ここには2のコンテンツが表示されます。ここには2のコンテンツが表示されます。ここには2のコンテンツが表示されます。ここには2のコンテンツが表示されます。ここには2のコンテンツが表示されます。ここには2のコンテンツが表示されます。ここには2のコンテンツが表示されます。ここには2のコンテンツが表示されます。ここには2のコンテンツが表示されます。ここには2のコンテンツが表示されます。

3

ここには3のコンテンツが表示されます。ここには3のコンテンツが表示されます。ここには3のコンテンツが表示されます。ここには3のコンテンツが表示されます。ここには3のコンテンツが表示されます。ここには3のコンテンツが表示されます。ここには3のコンテンツが表示されます。ここには3のコンテンツが表示されます。ここには3のコンテンツが表示されます。ここには3のコンテンツが表示されます。ここには3のコンテンツが表示されます。ここには3のコンテンツが表示されます。ここには3のコンテンツが表示されます。ここには3のコンテンツが表示されます。ここには3のコンテンツが表示されます。ここには3のコンテンツが表示されます。

4

ここには4のコンテンツが表示されます。ここには4のコンテンツが表示されます。ここには4のコンテンツが表示されます。ここには4のコンテンツが表示されます。ここには4のコンテンツが表示されます。ここには4のコンテンツが表示されます。ここには4のコンテンツが表示されます。ここには4のコンテンツが表示されます。ここには4のコンテンツが表示されます。ここには4のコンテンツが表示されます。ここには4のコンテンツが表示されます。ここには4のコンテンツが表示されます。ここには4のコンテンツが表示されます。ここには4のコンテンツが表示されます。ここには4のコンテンツが表示されます。ここには4のコンテンツが表示されます。

コンテンツの準備

Elementor上で2カラムレイアウトを作成し、左側のカラムには1〜4のボタン(画像)を2列2行に配置します。

右側のカラムには1〜4のインナーカラムを配置しコンテンツ1〜4を入力します。コンテンツ部分は自由に文章や画像、ビデオなどを配置して構いません。

Attributeの設定

画像1を選択し、Advanced>Attributesを選択し、

				
					data-showme|id1-content
				
			

と入力をします。同様に2〜4の画像に対してもAttributesを割り当てます。

				
					#画像2
data-showme|id2-content
#画像3
data-showme|id3-content
#画像4
data-showme|id4-content
				
			

コンテンツのインナーカラムへのCSS ID設定

コンテンツのインナーカラム1を選択し、Advanced>CSS IDに先ほど定義した id1-content を入力します。同様に2〜4のカラムにもid2-contentid4-contentを入力します。

次にCSS Classesにall-contentと登録します。これは1〜4まで全て同じall-contentで登録します。

JavaScriptの登録

先ほど登録したレイアウトの下部に新たにHTMLウィジェットをドラッグ&ドロップして配置します。

下記コードを登録します。

				
					<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
var $ = jQuery
$(document).ready(function(){
    $('[data-showme]').on('click', function(){
        var showme = $(this).attr('data-showme')
        
        $('.all-content').hide()
        $('#' + showme).show()
    })
})
</script>
				
			

テスト

これで1〜4の各ボタンをクリックすると、右側のカラムのコンテンツがボタンに応じて1〜4で変更されます。尚、各ボタンにはa href=”#”と空リンクを貼って、カーソルがボタンにロールオーバーした時に指カーソルに変更するようにしています。