Elementorのカスタムコード機能を使ってウェブサイトにHTML、JavaScript、CSSコードを追加する方法

あるWordPressウェブサイトビルダーウェブサイトの機能をカスタマイズし、最適化するには、通常、以下のことが必要です。カスタムコードスニペットの追加Elementorには、Google AnalyticsのコードやFacebook Pixelのコードなど、特定のスタイルやインタラクティブな機能をウェブサイトに簡単に追加できる強力な「カスタムコード」機能があります。これらのコードスニペットは、ウェブサイトデータのトラッキング、ユーザーエクスペリエンスの向上、さらには特定のスタイルやインタラクティブ機能の追加に役立ちます。HTML、JavaScript、CSSコードスニペットあなたのウェブサイトに追加してください。

カスタムコード機能の紹介

エレメンタカスタムコード機能では、HTML、JavaScript、CSSなど、さまざまなタイプのコードスニペットをウェブサイトに追加することができます：

DOMの調整を通してJavaScriptによるDOM要素の操作ウェブページのコンテンツは、ユーザーの行動やその他の状況に応じて動的に変更することができる。
イベント追加:できるJavaScriptを使用して、ウェブ要素にクリック、ホバー、その他のイベントを追加し、インタラクティブ性を高める。.
カスタムスタイルの適用を通してサイトのニーズに応じて特定の要素にカスタム・スタイルを追加するCSSコード.

カスタムコード機能がPHPコードスニペットをサポートしない.つまり、この機能を使ってカスタムフックを追加したり、PHPの操作を実行したりすることはできません。functions.phpファイルやサードパーティのプラグインを使用して、これらの機能を実装します。

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

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

1,Elementorのカスタムコードページに移動する。

バックエンドのメニューで Elementor > カスタムコード.カスタムコードスニペットを追加、編集、削除できるカスタムコード管理ページが表示されます。

2,新しいカスタムコードを追加する

新しいカスタムコードを追加」ボタンをクリックして、新しいコードの編集ページに移動します。ここで、コードスニペットのタイトル、位置、優先順位を設定する必要があります。

3,タイトルを入力

コードスニペットを後で簡単に識別できるように、コードスニペットの説明的なタイトルを入力します。タイトルは、「Google Analyticsトラッキングコード」や「カスタムポップアップスクリプト」など、コードスニペットの機能を説明するものにすることができます。

4,コードの場所を選択する

Elementorには以下のオプションがあります：
- <head>通常、グローバルスタイルやスクリプトのコードをページのheadタグに挿入します。
- <body> - 開始ページがロードされたときにすぐに実行される必要があるスクリプトに適しています。
- <body> - 終了ページ本文の最後にコードを挿入する。

5,優先順位の設定

のリストを作成することができます。コード・スニペットは優先順位を設定する（1～10）.複数のスクリプトが同じ場所に割り当てられている場合、優先順位によってそれらのスクリプトがロードされる順番が決まります。数字が小さいほど、優先順位は高くなります。たとえば、優先度1のスクリプトは、優先度5のスクリプトより先に実行されます。

6,入力コードのスニペット

コードブロックエディタにコードスニペットを入力またはペーストしてください。Elementorの組み込みコードチェッカーが自動的にコードをチェックし、エラーが見つかった場合は通知します。

7,リリース条件の設定

パブリッシング]領域で、[編集]をクリックしてコードスニペットの表示条件を設定します。これらの条件は、サイトのどのページまたはセクションにコードを表示するかを制御します。たとえば、管理者や訪問者など、特定のページやユーザータイプにのみコードを適用するように設定できます。

8,カスタムコードの公開

上記の手順が完了したら、"ポスト「ボタンをクリックして、コードをウェブサイトに適用します。また、カスタムコードを下書きとして保存したり、後で公開する日時を設定するオプションもあります。

カスタムコードを使用してCSSスタイルを追加する

JavaScriptコードに加えて、CSSスタイルもカスタムコード機能によってウェブサイトに追加することができます。特定の条件にCSSを適用するには、CSSコードをHTMLの<スタイルタグの間に追加し、カスタムコード機能を使ってサイトに追加します。下記はその例です：


  .custom-button {
    background-color: #1B61E6；
    color: #fff；
    padding: 10px 20px；
    border-radius: 5px; text-align: center; custom-button { background-color.
    text-align: center; cursor: pointer; text-align: pointer.
    cursor: pointer; }.
  }
</style

上記のコードでは、ファイル名をカスタムボタンクラスを作成し、スタイルを設定します。カスタムコード機能によって追加されたこれらのスタイルは、設定された条件に基づいてサイトの要素に適用されます。

はんけつをくだす

Elementorのカスタムコード機能を使えば、HTML、JavaScript、CSSのコードスニペットをWordPressウェブサイトに簡単に統合できます。トラッキングコードの追加、動的機能の追加、カスタムスタイルの追加など、この機能を使えば、深いプログラミングをすることなく、ウェブサイトの機能性とユーザーエクスペリエンスを向上させることができます。

お問い合わせ
チュートリアルが読めない？無料でお答えします！個人サイト、中小企業サイトのための無料ヘルプ！	カスタマーサービス WeChat
① 電話：020-2206-9892
② QQ咨询：1025174874
三 Eメール：info@361sale.com
④ 勤務時間: 月～金、9:30～18:30、祝日休み