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

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

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

Gutenbergは、ブロックにclassは設定できるのですが、data-属性が設定できません。ちなみに、wow.jsは、data-属性で「duration（スピード）」や「delay（遅延）」を設定することができます。なので、デフォルトのままでよければまったく問題ありません。おそらく、この記事を読んで頂いている方も、デフォルトで満足できない状況と思います。

今回は、横に並んだブロックを遅延しながらフェードインしたかったので、いろいろ代替案を調査しました。まずは、プラグイン。「animation.it」などプラグインがありましたが、durationやdelayが細かく指定できませんでした。

だったら、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-●●●」を追加しています。ただそれだけです。大きな画面ではもたつく可能性もありますので、そのへんは要検証ですね。こういうやり方もあるよ…という参考にしていただければ幸いです。