エレメンタ カスタムコード機(jī)能は、HTML、JavaScript、CSSのコードスニペットをウェブサイトに追加します。Google AnalyticsやFacebook Pixelなどのサードパーティツールからコードを挿入したり、カスタムスタイルや動(dòng)的インタラクションをサイト要素に追加する必要がある場(chǎng)合に便利です。Elementorにカスタムコードを追加する方法の完全なガイドはこちらです。
![イメージ[1] - Elementorでカスタムコードを使用する方法:完全ガイド](http://gqxi.cn/wp-content/uploads/2024/11/20241108135700461-image.png)
カスタムコード機(jī)能の概要
エレメンタ カスタムコード機(jī)能は、HTML、JavaScript、CSSコードスニペットの追加をサポートしており、ウェブサイトに追加のカスタマイズを簡(jiǎn)単に追加できます。任意のJavaScriptコードを挿入して、DOM(Document Object Model)を変更したり、イベントや動(dòng)的効果を追加したりすることができます。さらに、CSSコードスニペットを使用して、サイトのあらゆる要素をカスタムスタイルにすることができます。
銘記カスタムコードはPHPコードスニペットをサポートしていません。そのため、この機(jī)能でカスタムフックやアクションを追加することはできません。PHPコードについては functions.php
ファイルまたはサードパーティのプラグインを使用してください。
カスタムコードの追加方法
Elementorにカスタムコードを追加するには、以下の手順に従ってください:
ステップ1:WP Adminにログイン
WordPressの管理畫面のバックエンドに移動(dòng)します。
![イメージ[2] - Elementorでカスタムコードを使用する方法:完全ガイド](http://gqxi.cn/wp-content/uploads/2024/11/20241108135046737-image.png)
ステップ 2: Elementor > カスタムコードに移動(dòng)します。
ワードプレスのダッシュボードで Elementor > カスタムコード今回表示される回?cái)?shù)は、「1.0.0.0.0.0.0.0.0.コードページの定義.
![イメージ[3] - Elementorでカスタムコードを使用する方法:完全ガイド](http://gqxi.cn/wp-content/uploads/2024/11/20241108135113977-image.png)
ステップ3:「新しいカスタムコードを追加」をクリックします。
打點(diǎn) 新しいカスタムコードの追加 ボタンをクリックすると、新しいコードのページが表示されます。
![イメージ[4] - Elementorでカスタムコードを使用する方法:完全ガイド](http://gqxi.cn/wp-content/uploads/2024/11/20241108135149785-image.png)
ステップ4:コード情報(bào)の入力
新しいコードのページで、以下の手順に従って情報(bào)を入力してください:
キャプション - コード?スニペットにタイトルを追加し、その後の識(shí)別と管理に利用できます。
プレースメント - 以下のオプションを選択して、Web ページ內(nèi)のコード?スニペットの場(chǎng)所を決定します:
- ページのヘッダーに追加
<body> - スタート
- ページ本文の冒頭に追加<body> - 終了
- ページ本文の最後に追加
優(yōu)先順位 - コードスニペットの優(yōu)先順位を設(shè)定します(1~10)。複數(shù)のスクリプトが同じ場(chǎng)所に割り當(dāng)てられている場(chǎng)合、優(yōu)先度の値によって実行順序が決まり、値が小さいほど優(yōu)先度が高くなります。例えば優(yōu)先順位1のスクリプトは、優(yōu)先順位5のスクリプトより先に実行されます。.
コードブロックエディタ - コードブロックエディタにコードスニペットを入力または貼り付けます。Elementorの組み込みコード検出器が自動(dòng)的にコードをチェックし、エラーがあれば表示します。
ステップ5:投稿條件の設(shè)定
ある 出版 エリア內(nèi)をクリック 編集 出版の條件を整えるために。公開設(shè)定
ウィンドウが表示されます。
![イメージ[5] - Elementorでカスタムコードを使用する方法:完全ガイド](http://gqxi.cn/wp-content/uploads/2024/11/20241108135406404-image.png)
必要に応じて條件を設(shè)定し、コードスニペットを表示するページやコンテンツタイプを指定します。
![イメージ[6] - Elementorでカスタムコードを使用する方法:完全ガイド](http://gqxi.cn/wp-content/uploads/2024/11/20241108135425485-image.png)
ステップ6:コードスニペットの公開
設(shè)定が完了したことを確認(rèn)したら 出版 カスタムコードを公開するか、コードを下書きとして保存するか、公開日時(shí)を遅らせて設(shè)定するかを選択します。
![イメージ[7] - Elementorでカスタムコードを使用する方法:完全ガイド](http://gqxi.cn/wp-content/uploads/2024/11/20241108135433902-image.png)
CSSコードの追加
![イメージ[8] - Elementorでカスタムコードを使用する方法:完全ガイド](http://gqxi.cn/wp-content/uploads/2024/11/20241108135459605-image.png)
JavaScript スクリプトに加えて、CSS コードもコードスニペットに追加できます。 <スタイル
タグで指定します。このようにして、設(shè)定された條件に基づいて、CSSを特定のページに選択的に適用することができます。例
.custom-class {
color: blue; font-size: 18px;
font-size: 18px;
}
概要
Elementorのカスタムコード機(jī)能を使用することで、トラッキングコード、イベントトリガー、ダイナミックエレメント、カスタムスタイルなど、様々なカスタムエフェクトをウェブサイトに追加することができます。この機(jī)能は、ウェブサイトのコアファイルを変更することなく、ウェブサイトのパーソナライズと機(jī)能を強(qiáng)化することができます。
お問い合わせ | |
---|---|
チュートリアルが読めない?無(wú)料でお答えします!個(gè)人サイト、中小企業(yè)サイトのための無(wú)料ヘルプ! |
![]() カスタマーサービス WeChat
|
① 電話:020-2206-9892 | |
② QQ咨詢:1025174874 | |
三 Eメール:info@361sale.com | |
④ 勤務(wù)時(shí)間: 月~金、9:30~18:30、祝日休み |
この記事へのリンクhttp://gqxi.cn/ja/25614この記事は著作権で保護(hù)されており、必ず帰屬表示を付けて複製してください。
コメントなし