【Elementor ✕ javascript】

Elementor-JS Elementor

Elementorで動きのあるサイトを作るにはどうすればいいの?
そんな方に、Elementor で自由な動きを実現する方法を紹介します!

本記事を見ることで、Elementorでは設定できない動作を実現することができます。

「Simple Custom CSS and JS」

Elementorで作成したサイトにJavaScriptを導入することで、自由な動きのサイトを作成することができます。

ElementorにJavaScriptを導入するには、「Simple Custom CSS and JS」プラグインを使用することがおすすめです。このプラグインを使えば、JavaScriptを簡単に導入することができます。本記事では、Simple Custom CSS and JSの使い方も合わせて解説していきます。

まず、WordPressの管理画面から、「Simple Custom CSS and JS」をインストールします。インストールが完了したら、有効化します。

Simple-Custom-CSS-and-JS

プラグインがインストールされたら、WordPressの管理画面の「Custom CSS & JS」を選択します。ここで、CSSやJSのコードを追加することができます。ここでは「JS コードの追加」を選択します。

カスタムCSS-and-JS

次からは実際にJavaScriptを使用した例を元に、実装方法を解説していきます!

javascriptを使用してみる

今回はjavascriptを使用する例として、画面のスクロールによってヘッダーの色を変化させる動作を実装していきます。

ウィジェットにIDを付与する

ヘッダーと交差対象(トップ画像)にIDを付与していきます。
ヘッダーの編集画面を開き、ヘッダーのセクションを選択します。セクションのCSS ID(例:header)を指定します。

ヘッダー-css-id

対象の固定ページの編集画面を開き、対象のセクションを選択します。セクションのCSS ID(例:top-img)を指定します。

トップページ-css-id

JSコードを追加する

付与したIDのセクションに対して、JavaScriptを追加していきます。

「Custom CSS & JS」からカスタムJSを編集画面を開きます。タイトルには、分かりやすい名前を付けておきます。

JavaScript-コード

“/* ここに JavaScript のコードを追加” の上にJavaScriptのコードを記述していきます。
以下のコードでは、headerがtop-imgと交差した時に、background-colorの取り外しを行っています。

const cb = function(entries, observer) {
    entries.forEach(entry => {
        if(entry.isIntersecting) {
            document.querySelector("#header").style.removeProperty("background-color");
        } else {
        document.querySelector("#header").style.setProperty("background-color", "#c00",         "important");
        }
    })
}
const headerimg = document.querySelector("#top-img");
const io = new IntersectionObserver(cb);
io.observe(headerimg);

「Custom CSS & JS」の設定

「Custom CSS & JS」のオプションを設定していきます。
必須の設定として、「表示位置」<footer>要素内に変更する必要があります。

表示位置

「表示位置」を<footer>要素内に変更することで、javascriptが正常に読み込まれるようになります。

設定が完了したら「更新」ボタンを選択して、導入が完了です!

Elementorに「CSS」を追加する方法も以下で解説しています!

タイトルとURLをコピーしました