WordPressのwow.jsにdata属性を追加したい（Gutenberg使用時）

簡単にアニメーションを実装できる便利なライブラリ「wow.js」

WordPressでもさくっと追加できちゃうのでよく使わせてもらっておりますが、Gutenbergを使う時はちょっと困った事が起こります。

wow.jsは、data-属性で「duration（スピード）」や「delay（遅延）」を個別に設定することができるのですが、Gutenbergはそれが設定できません。

たとえば、横に並んだブロックを遅延しながらフェードインしたいとかですね。

wow.js以外の候補もいろいろ探してみました。

WordPressプラグインの「animation.it」などでしょうか。でも、期待に応えることはできませんでした。

だったら、data属性が追加できるプラグインはないか？と探してみはみたものの、いまひとつ。

こうなったら、最後の手段JavaScriptでカスタマイズすることにしました。

というわけで、そちらのソースを載せておきたいと思います。

JavaScript

JavaScriptのソースに以下を追加してください。jQueryを使っています。このソースはwow.jsより前に読み込まれるようにしてあげてください。

   /**
    * ＊nana.hp scripts＊
    * wow.js class→data変換
    * wow-delay-0.1s → data-wow-delay="0.1s"
    * wow-duration-0.1s → data-wow-duration="0.1s"
    */
   $("[class*='wow-']").each(function (i){

        const attrs = ["delay", "duration"];
        
        let obj = $(this);
        let classAttr = obj.attr("class");
        let classAttrs = classAttr.split(" ");
        let check = 0;
        for( let i=0; i<classAttrs.length; i++) {
            let classValue = classAttrs[i];
            for( let j=0; j<attrs.length; j++) {
                let wowKey = "wow-" + attrs[j];
                if(classValue.indexOf(wowKey + "-") >= 0) {
                    let wowValue = classValue.replace(wowKey + "-", "");
                    obj.attr("data-" + wowKey, wowValue);
                    check++;
                }
            }
            if (check == attrs.length) break;
        }
    });

上のサンプルは「delay」と「duration」だけが対象になっています。設定を追加したい場合は、以下のように配列に対象のパラメーターを追加してあげてください。

const attrs = ["delay", "duration", "offset", 'iteration'];

WordPressの管理画面の設定

ブロックの「高度な設定」ー「追加 CSS クラス」に以下を入れます。

wow fadeInUp wow-delay-0.5s wow-duration-0.5s

「wow fadeInUp」はwow.jsの標準仕様です。その後ろが今回追加するクラスになります。

かんたんな解説

画面が読み込まれると、wow-●●●がセットされているタグを探して、みつかったらそのタグにdata属性「data-delay-●●●」を追加しています。参考にしていただければ幸いです。