如何在Elementor中使用自定义代码：完整指南

エレメンタカスタムコード機能は、HTML、JavaScript、CSSのコードスニペットをウェブサイトに追加します。Google AnalyticsやFacebook Pixelなどのサードパーティツールからコードを挿入したり、カスタムスタイルや動的インタラクションをサイト要素に追加する必要がある場合に便利です。Elementorにカスタムコードを追加する方法の完全なガイドはこちらです。

カスタムコード機能の概要

エレメンタカスタムコード機能は、HTML、JavaScript、CSSコードスニペットの追加をサポートしており、ウェブサイトに追加のカスタマイズを簡単に追加できます。任意のJavaScriptコードを挿入して、DOM（Document Object Model）を変更したり、イベントや動的効果を追加したりすることができます。さらに、CSSコードスニペットを使用して、サイトのあらゆる要素をカスタムスタイルにすることができます。

銘記するカスタムコードはPHPコードスニペットをサポートしていません。そのため、この機能でカスタムフックやアクションを追加することはできません。PHPコードについては functions.php ファイルまたはサードパーティのプラグインを使用してください。

カスタムコードの追加方法

Elementorにカスタムコードを追加するには、以下の手順に従ってください：

ステップ1：WP Adminにログイン

WordPressの管理画面のバックエンドに移動します。

ステップ 2: Elementor > カスタムコードに移動します。

ワードプレスのダッシュボードで Elementor > カスタムコード今回表示される回数は、「1.0.0.0.0.0.0.0.0.コードページの定義.

ステップ3：「新しいカスタムコードを追加」をクリックします。

打込む 新しいカスタムコードの追加 ボタンをクリックすると、新しいコードのページが表示されます。

ステップ4：コード情報の入力

新しいコードのページで、以下の手順に従って情報を入力してください：

キャプション - コード・スニペットにタイトルを追加し、その後の識別と管理に利用できます。

プレースメント - 以下のオプションを選択して、Web ページ内のコード・スニペットの場所を決定します：

<head> - ページのヘッダーに追加
<body> - スタート - ページ本文の冒頭に追加
<body> - 終了 - ページ本文の最後に追加

優先順位 - コードスニペットの優先順位を設定します（1～10）。複数のスクリプトが同じ場所に割り当てられている場合、優先度の値によって実行順序が決まり、値が小さいほど優先度が高くなります。例えば優先度1のスクリプトは優先度5のスクリプトより先に実行されます。.

コードブロックエディタ - コードブロックエディタにコードスニペットを入力または貼り付けます。Elementorの組み込みコード検出器が自動的にコードをチェックし、エラーがあれば表示します。

ステップ5：投稿条件の設定

ある出版エリア内をクリック編集出版の条件を整えるために。公開設定 ウィンドウが表示されます。

必要に応じて条件を設定し、コードスニペットを表示するページやコンテンツタイプを指定します。

ステップ6：コードスニペットの公開

設定が完了したことを確認したら出版カスタムコードを公開するか、コードを下書きとして保存するか、公開日時を遅らせて設定するかを選択します。

CSSコードの追加

JavaScriptスクリプトに加えて、CSSを <スタイル タグで指定します。このようにして、設定された条件に基づいて、CSSを特定のページに選択的に適用することができます。例

.custom-class {
    color: blue; font-size: 18px；
    font-size: 18px；
  }

概要

Elementorのカスタムコード機能を使用することで、トラッキングコード、イベントトリガー、ダイナミックエレメント、カスタムスタイルなど、様々なカスタムエフェクトをウェブサイトに追加することができます。この機能は、ウェブサイトのコアファイルを変更することなく、ウェブサイトのパーソナライズと機能を強化することができます。

この記事へのリンク

論文執筆者

光子ゆらぎ

プライバシーポリシー

サービス

使用ジェネレータ

利用規約

NC-SA 4.0

終わり