記事の詳細

今回は「WordPressを使用してクリック位置から波紋が広がるようなエフェクトを実装する方法」を記載します。

具体的には下記のような機能になります。
※各枠内をクリックしてみてください。

オレンジ
ブルー
ブラック

参考サイト様は下記になります。
https://qiita.com/nekoneko-wanwan/items/c9f26ce049bd422e555c

参考サイト様は非常に親切に書いてあるので、ほぼ実装するだけになるのですが、WodPressでjQueryを使った機能を実装する際には、”$”によるコンフリクトを回避しなければなりません。
「そんなの技術者じゃないと分からないよ!」ということにならないように、コピペだけでいけるように編集したコードを記載します。

CSS(スタイルシート)に波紋用のスタイルを設定する

スタイルシート(”XXXX.css”のファイル。WordPressの場合は基本的に”style.css”に記載します。)に下記スタイルを追記します。

これでスタイルシートの設定は完了になります。
次に、記事にプログラムのコードを埋め込みます。

記事にHTMLタグとjQueryのコードを仕込む

WordPressの固定ページや投稿ページ内に下記のコードを仕込みます。
※このとき、ビジュアルエディタではなくテキストエディタでコードを打ち込むことに注意して下さい。

WordPressでは”$”の記述は既に別の機能で使われているため、”$”を使用する場合は”jQuery(function($)”としてスクリプトを囲うことで、囲った中の”$”だけはjQueryとして機能させる必要があります。

これで仕込みは全て完了になります、非常に簡単に機能が実装できますね!

覚えておいて損はない!jQueryのコンフリクト解消の記述方法!

いかがでしたか?

以前の私はWordPressでjQueryを使用する際には”$”を全て”jQuery”に置換をして設置していました。
ですが、コードが非常に見づらくなることと、他のシステムで使う際にまた置換をしたりと、せっかく作ったプログラムなのに汎用性がイマイチで悩んでいました。
ローカル内でのjQueryの使用方法を覚えてからはコンフリクトに悩むこともなくなり、すっきりとしたプログラムが書けるようになりました。

プログラマーさんは可読性や汎用性を気にする方が多いと思いますので、この辺りはしっかりと作りこんでいきたいですね。

ではまた!

この記事であなたの課題を解決することができましたか?

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。

The following two tabs change content below.
網干 裕介

網干 裕介

コーダーの網干裕介(あぼしゆうすけ)と申します。webサイトは見た目が非常に重要なのですが、サイトを構成するソースコードも見た目が重要だと考えています。内も外も魅力的なコンテンツが作れる人物になれるよう、日々努力しています。

ほかの投稿も読んでみませんか?

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

仕事ではパソコンが使いこなせるのが当たり前

相模原市産業会館パソコン教室

AD

ページ上部へ戻る