WordPressで【img要素】の【src属性】をhoverなどのイベント時に変更するやり方のまとめ

fafd31fcd37bf0442e6dbd61eea92b7a.jpg

こんにちは! pinteresterのいわだて (@dutchisover) です!

Large 4508673239のコピー Fotor

img要素のsrc属性を変えるオーソドックスな方法

HTMLである【img要素】のsrc属性(画像ファイルがある場所までのパスやURLを指定するところ)は、CSSだけでは変更できません。hoverなどで画像を変更する場合はjQueryなどスクリプトで行うことになります。

オーソドックスなサンプルコード

今回は 通常時の画像ファイルを【LogicA.png】、hoverしたときの画像を【LogicAhover.png】にしてます。

で、普通のHTMLファイル上ならこれで問題ないんです。が、WordPressで制作したサイトだと問題が多々発生してくるんです。試しにさっきのサンプルコードだとこうなりますんでhoverしてみてください。

LogicA

みたいな、ですよ。なんで?というと、WordPressでimg要素のsrcを指定するときは

と、<?php bloginfo(‘template_url’); ?>というタグをsrcの頭に付けて トップのディレクトリを取得してからのルート指定をしないといけないんです。
しかし、jQueryのなかではもちろんPHPは使えません。例えばこうしてみても、

エラーになります。PHPとして展開してくれないんです。なので打開策をいくつか考えてみました。

サンプル

LogicA

CSSのみ

LogicA

jQueryでsrc変更(手打ち)

LogicA

jQueryでsrc変更(一部)

LogicA
LogicA

力技

LogicA

classで対応

どれも挙動は全く同じになります。が、やってることがけっこう違います。以下から説明しますね。

CSSのみ で対応

img要素を諦めたパターンです。正直これが一番軽いしやりやすいし後からメンテもしやすいし、で いいです。

ただ、これだと今回の記事のテーマがいらない子になります。だし、img要素を諦められないことだっていろいろとあったりすることもあるとか思います。ですよ。

なので、imgを諦めない 別パターンで行きます。

jQueryでsrc変更(手打ち) で対応

ベタ打ちで画像までのURLを頭から入れるパターンです。とりあえず対応させるならこれでいんじゃね、的なパターンです。

ただこれだと後からメンテとかけっこう大変です。あと、HTMLファイルとかを変更したときに予期せぬカタチで画像が表示されなくなったりする原因になったりするかもです。

そこでちょっとしゃれたやり方でやってみます。

jQueryでsrc変更(一部) で対応

HTMLはさっきと一緒です。

先にsrcの初期値と 変更後の値を取得してしまいます。
変更後のsrcは、画像ファイルまでのパスはそのまま流用し、画像ファイル名だけを変更して取得してます。

これだと、HTMLファイル側で何かしらの変更があっても対応しやすいです。画像ファイル自体が変わったときに、画像ファイル名だけ変えたらOKです。

力技 で対応

次はけっこうな力技です。まあ、結果が同じならいいや、的な。

show()、hide() で元画像と変更後を入れ替えてます。すさまじく無駄が多いです。でも結果は同じです。コツは親要素に【position: relative】を付けて 子要素に【position: absolute】で 子要素の位置をぴったり合わせてるところくらいです。

一応、メリットは あとからHTMLとか画像を変更とかしても、jQueryは一切いじらなくてすむ、くらい?です。

class で対応

これは一番最初のCSSで対応するパターンと近い方法で、実質CSSで切り替えしてます。

jQueryはhoverするたびに【class名 on】を付けたり外したりしているだけです。

CSSでは【span.on】で、class名 on が付いているときだけ発動するCSSを指定しておけば、classが付いたときと付いてないときをCSSで記述するだけなので汎用性が高く、応用させやすいです。

結果、どれがいいの?

わかりません(笑)が、使うサイトによって、何のために、とか 誰が使う、とか考えて使い分けてみると良いと思いました。以上!

最近の記事

Sponsored