WordPress記事

WordPressのPHPとJqueryをダブルカスタマイズする方法(スライダー画像をズームイン及びフェイドアウトさせる)

2024/01/20

WordPressのPHPとJQueryのダブルカスタマイズ

0  はじめに  

私は、WordPressの「STINGER+」というテーマを気に入っており、5年位前から重宝して使用しております。

使っている中で、不満は少ないのですが(むしろ満足いくほうが多い。時折困った場合はcss,html、phpのカスタマイズで修正する)

今回は、phpとJQueryの同時カスタマイズを行うことができました。

php内にあるソースコードの塊(かたまり:一連のループ)を削除し、今まで使っていたJQuery(slick.js)から新しいオリジナルJava script sliderに乗り換えようというものです。

自分にとっては画期的なことでありました。その方法を記録させていただきます。同じようにWordPressのカスタマイズにチャンレンジされている方などの参考になれば幸いです。

1 事前準備

まず最初に大事なことは、模範となるサイトやソースコードを探すことです。今回実施する、フェイド・インする動き(アニメーション)を実現するには、Java scriptのソースコードが必要です。そのフェイドして切り替わるプログラムを公開してくれる先達様をなんとかGoogle検索または、code pen(世界中から自作のソースコードが公開されているサイト)などから探し出し、模範とすることです。それをできれば、自分のcode pen内にコピーしておきます。

ネットから探したスライダーでZOOMinする記事

2 既存の不要なスライダーをheader.phpから削除する

既存のテーマのheader.phpに記載されている今回差し替えるスライダーのソースコード(php)を削除します。

しかし、ここで注意が必要なのはこの塊(かたまり:一連のループ)の中に、カスタムメニューを表示するソースコード(php)も含まれており、これも一緒に削除してしまうとメニューが出なくなるので、外枠に出しておく必要があるということです。以下の図では、赤枠が削除する部分ですが、その中の黄色枠の部分がグローバルメニューを出す記述なので、外に外して残しておく必要があります。

header.phpから不要なソースを削除

3 新しいソースコード(ズーム・イン)への書き換え

うまく、スライダー部分だけが削除できたら、今後は、事前に用意した自分のcode pen内に保管されているソースコード(画像がzoomしながらフェイド・インする)のうち、html部分をst-header-image.php内で上記2で削除した場所に全コピーして張り換えます。以下では赤枠が張り替えたhtml部分です。

重要なのは、タグの中にonload="sliderstart()"と書いてある部分がJavascriptと連携してJSの動きをさせる要素部分です。 

新しいスライダー部分のhtml

4 スライダーの大枠(wrapper)や、画像の高さや幅などが書かれたCSSを追加

header.phpの書き換えが終わったら、次は、WordPress(ダッシュボード)の「カスタマイズ」にある追加CSSに当該スライダーを形成するCSSを追加します。

CSSのカスタマイズ

5 Jqueryを実装する

header.phpとCSSのカスタマイズが終わったら、最後に今回使用するJavascript(名前はtest.jsとした)をWordPressのJSフォルダ中に追加します。

JSフォルダーというものが、WordPressにはデフォルトであるので、その中に入れます。

サーバーのFTPツールを使うより、フリーのFTPツールであるfilezillaを使ったほうが便利です。

JSフォルダー内に新しいJSを入れる

6 code penに記載したJsのディレクトリーをWordPress内の正しいディレクトリー(保存場所)に指定する

5でJSをうまくJSフォルダーにいれられてもここでも注意が必要です。それは、code penでは、test.jsの保存場所が 相対パスになっていますが、WordPress内に保管する場所は絶対パスにする必要があるということです。https://から始まる(インターネット上のアドレス)です。 

7 結果を確認する

上手くいくとこ以下のようなスライダーができます。

ホームページのちょっとしたアニメーションでも、アクセントにはなりますよね。 

最後までお読みいただき、ありがとうございました。

また、JQueryとphpのカスタマイズのスキルを磨いていきたいと思います。

-WordPress記事