【Elementor　✕　javascript】

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

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

「Simple Custom CSS and JS」
javascriptを使用してみる

「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」をインストールします。インストールが完了したら、有効化します。

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

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

javascriptを使用してみる

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

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

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

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

JSコードを追加する

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

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

“/* ここに 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);