WordPressウェブサイトに外部CSSまたはJavascriptを追加する方法

初心者のWPユーザーであれば、WordPressに外部CSSまたはJavascriptを追加する方法を決定するのは少し難しいです。 そのため、Webサイトに外部CSS/Javascriptを追加する手順を説明する前に、外部CSSを使用する必要がある2つの主な領域を説明したいと思います:

1)ウェブサイトのカスタマイズ

外部CSSとJavascriptを使用すると、簡単にコードを維持し、ファイルやコードを編集して保持することができるので、ウェブサ ただし、これらのカスタマイズは、ミニカスタマイズと大きなカスタマイズの2つの主なタイプに分割する必要があります。 後でこれらのタイプに戻り、CSS/JSコードを追加する方法がさまざまな状況に適しているかどうかを説明します。

2)サードパーティのサービス統合

ご存知のように、一部のサービスでは、フォームサービス、チャットボックス、Facebookピクセルコードの追加、Googleアナリティクスなど、webサイトに追加する必要があるCSSおよびJSファイルが提供されています。 例として、私たちはGoogle Analyticsをサポートし、実際に私たちのテーマオプションで統合プロセスは非常に簡単でシンプルですが、あなたはいくつかの異なる分析を追跡し、別の方法でしたい場合は、Googleによって生成された外部コードを使用する必要があります。

外部CSS/JavaScriptを追加する3つの方法

テーマオプションを使用して

あなたは他のコードを追加したり、ウェブサイトをカスタマイズするために迅速かつ小 これは、組み込みの機能だとあなたのWordPressのダッシュボードから簡単にアクセスできます。

Jupiter>テーマオプション>高度な>カスタムCSSまたはカスタムJSセクションに移動します。

テーマオプションに外部CSSまたはJavaScriptを追加する際に、カスタムJSセクションに<script></script>で始まるコードを追加することはできません。 カスタムJSセクションで記述したコードは既に<script></script>タグで公開されているため、コード内の<script></script>を削除する必要があります。

:

  • JupiterでCSSとJavascriptで小さなものをカスタマイズするための最良の方法
  • JupiterでミッドレンジのCSSとJavacscriptコードに小さなものを追加するための最良の方法

:

  • ファイルを直接追加することはできません(.cssまたは.jsファイル外部）AJAXコーディングを知っている場合を除きます。
  • wp_headerまたはwp_footerでコードをプッシュするかどうかを選択することはできません。

プラグインの使用

プラグインはWordPressを使用している間、私たちの忠実なヘルパーです。 また、ヘッダーやフッターの挿入などのプラグインを使用してコードを追加することもできます。 それはあなたのウェブサイトにあなたのコードを追加するのに最適な方法だし、それは私たちの組み込み機能と同じように動作します。 このプラグインの良いところは、コードをフッターまたはヘッダー領域に追加するかどうかを選択できることです。

組み込みソリューションとは異なり、ヘッダーとフッターの挿入プラグインに<script></script>タグを追加できます。

長所:

  • あなたは、コードの場所を選択することができます
  • 私たちの組み込みのソリューションに代わる素晴らしい
  • FacebookのピクセルまたはカスタムGoogleアナリティクス
  • サードパーティの統合のための素晴らしい方法

短所:

  • プラグインのインストール/セットアップが必要
  • 維持し、更新するのは難しい
  • あなたは私たちの組み込みのソリューションのように直接ファイルを追加

子テーマとEnqueqeスタイルの使用

子テーマを使用することは、ウェブサイトをカスタマイズする最も安全な方法であるため、中規模から大規模なカスタマ 子テーマを使用すると、コードを維持し、コアテーマファイルを簡単に更新することができます。

あなたは私たちの公式の子テーマをインストールするか、独自に作成することができます。 その後、あなたのCSSコードを追加し、外観>エディタですぐにあなたのウェブサイトをカスタマイズするために開始することができます。 ただし、外部CSSファイルとJavascriptsファイルを追加する場合は、それを呼び出して関数にいくつかのコードを記述する必要があります。php。

ここでは、それがどのように行くのですか:

  1. CSSまたはJavascriptファイルを準備するか、リモートソースの場合はリンクを準備してください。
  2. functionsという名前のファイルを作成します。php
  3. 関数に次のコードを追加します。php

<?php

function add_theme_codes(){

wp_enqueue_style(‘style’,get_stylesheet_directory_uri().’/myexternalcode.css’,’すべて’);

}

add_action(‘wp_enqueue_scripts’,’add_theme_codes’ );

?>

このコードでは、スタイルシートの新しいアクションを作成し、child-themeディレクトリから呼び出しています。 あなたが”カスタム”を持っているとしましょう。あなたのウェブサイトに追加する必要があるcss”ファイル。 Ftp経由でwp-content/themes/jupiter-childにそのファイルを追加し、関数を作成します。phpファイル。 次に、上記のコードを追加し、’/myexternalcodeを変更します。css”を”カスタム”に変更しました。css’またはあなたのファイル名が何であれ。 最後に、関数を追加する必要があります。あまりにもあなたの子供のテーマにphp。

ここでは、ファイルがないがリモートソースを追加する必要がある場合の別の例を示します:

<?php

function add_theme_codes(){

wp_enqueue_style(‘style’,’https://code.jquery.com/jquery-3.2.1.js’,’all’,’all’,’all’,’all’,’all’,’all’,’all’,’all’,’all’,’all’,’all’,’all’,’all’,’all’,’all’,’all’,’all’,’all’);

}

add_action(‘wp_enqueue_scripts’,’add_theme_codes’ );

?>

上記の例では、ソースファイルがリモートであるため、get_stylesheet_directory_uri()を使用しませんでした。 また、上記のようなリンクを使用して、サーバーから異なるファイルを呼び出すこともできます。

:

  • あらゆる種類のカスタマイズに最適
  • サードパーティや複雑な統合に最適
  • 保守と編集が簡単
  • ローカルまたはリモートのファイルを直接追加できます
  • 更新のための最も安全な方法の一つ

短所:

  • 設定の少しが必要
  • コーディングの知識の少しが必要です（または少なくともあなたが学ぶために喜んでする必要があります）
  • 小さなカスタマイズのための最速の方法ではありません

どのいずれかが異なる状況に最適なオプションですか？

あなたは迅速な変更やカスタマイズを行いたい場合は、テーマオプションはあなたのための最良の選択肢になります。 ただし、コードとコードの場所の柔軟性と制御が必要で、小規模から中規模のカスタマイズがまだある場合は、ヘッダーとフッターの挿入が適切に機能します。

しかし、大規模なカスタマイズやサードパーティの統合を行いたい場合、または保守可能な開発環境を持ちたい場合は、子テーマが最善の策です。 あなたのウェブサイトに外部CSSやJavascriptを追加する際にさらに助けが必要な場合は、いつでもArtbees Careの助けを借りることができます。

Write a Comment

メールアドレスが公開されることはありません。