Diviで外部JavaScriptスニペットを使用するためのベストプラクティス

公開: 2019-08-23

WordPressとDiviは、ウェブサイトの構築を簡単にするために、箱から出してすぐに多くの素晴らしいことを行います。ただし、JavaScriptでのみ実現できるより高度な機能が必要になる場合があります。

Diviを使用すると、子テーマが設定されていない場合でも、プラグインなしでJavaScriptまたはjQueryスニペット（コードのチャンク）をテーマまたはWebページに簡単に追加できます。このチュートリアルでは、Diviで外部JavaScriptスニペットを使用するためのいくつかのベストプラクティスについて説明します。

JavaScriptとjQueryに関する簡単な説明

JavaScriptは、Webサイトに表示される動的機能の背後にある魔法です。これは、Web用に構築されたクライアント側のコーディング言語であり、すべてのテーマファイルにアクセスし、HTMLやCSSだけでは不可能なブラウザを介してすべてのタイプの機能を実行できます。

JQuery（最も人気のあるJavaScriptライブラリの1つ）により、さまざまなブラウザタイプで機能するJavaScriptスニペットをWebサイトに簡単に追加できるようになりました。そのため、今日Webサイトで多くのjQueryが使用されています。 JQueryはWordPressにも組み込まれているため、Diviに追加したjQueryコードは、適切にフォーマットされていれば機能します。

Divi / WordPressでの適切なJQueryスニペットフォーマット

ドキュメントレディ機能の使用

ほとんどの場合、jQueryスニペットで$(document).ready()を使用することをお勧めします。 $(document).ready()追加されたJavaScriptは、JavaScriptを実行する前に、ドキュメント（またはDOM）がロードされて準備ができていることを確認します。これにより、ページを安全に操作する準備ができていないときにJavaScriptが実行される可能性がある特定の状況が回避されます。

Diviでは、関数は次のようになります…

jQuery( document ).ready(function() {

    // Add jQuery code here to be loaded once the DOM is ready

});

WordPressでjQueryを使用するときに「$」の代わりに「jQuery」を使用する

WordPressには互換モードのjQueryのバージョンがすでに付属しているため、jQueryの標準の$は機能しません。これは、WordPressで使用する場合と使用しない場合がある他のJavaScriptライブラリと競合しないようにするためです。代わりに、 $ショートカットの代わりにjQueryを使用する必要があります。

したがって、この…

$(document).ready(function(){
  $("p").click(function(){
    $(this).hide();
  });
});

これに変える必要があるだろう…

jQuery(document).ready(function(){
  jQuery("p").click(function(){
    jQuery(this).hide();
  });
});

ただし、コードの肥大化を抑え、それらの$ショートカットを維持したい場合は、ドキュメントレディ関数に渡される引数として$を追加すると、 jQuery代わりに$を使用できます。これにより、その関数に含まれるjQueryスニペットに$を保持できます。

これがどのように見えるかです…

jQuery( document ).ready(function( $ ) {
    // Add jQuery code here, using $ to refer to jQuery.
    $( "div" ).hide();
});

または、このような単純な関数とドキュメント準備関数を使用して、 jQuery $を渡すことができます…

(function($) {
    
    // Add jQuery code here, using $ to refer to jQuery.
    $(document).ready(function(){

      $( "div" ).hide();

    });
    
})( jQuery );

JavaScriptスニペットをフォーマットする方法に関するいくつかのベストプラクティスを理解したので、それらをDiviサイトに適切に追加する方法を見ていきましょう。

コードモジュールを使用してJavaScriptスニペットを単一ページに追加する

Javascript（またはjquery）スニペットをDiviの単一ページに追加する場合は、コードモジュールを使用できます。これにより、JSがすべてのページに不必要に読み込まれることがなくなり、それを必要としないページのページ読み込み時間がわずかに増加します。

これがその方法です。まず、JSスニペットが必要なページを編集するときにdiviビルダーをアクティブにします。次に、ページにコードモジュールを追加します。

divijavascriptスニペット

コードはページのどこでも機能するので、どこに配置するかはあなた次第です。

コードモジュールを追加したら、JavaScriptスニペットを貼り付けます。コードがJavaScriptとして認識されるように、必ず<script>タグでコードをラップしてください。

divijavascriptスニペット

コードがJavaScriptとして認識されるように、スニペットを<script>タグでラップして、適切にフォーマットされていることを確認することを忘れないでください。また、jQueryを使用している場合は、ドキュメントの準備ができたときにいつでも読み込まれるように、ドキュメントの準備ができた関数を含めます。また、スニペットでは、省略形の$代わりにjQueryを使用する必要があります。

それでおしまい！スニペットは期待どおりにページ上で実行されます。

注： <script>タグでは通常、スクリプトのメディアタイプを次のように指定する必要があります…

<script type="text/javascript">
</script>

ただし、「text / javascript」はデフォルトのタイプであるため、JavaScriptコードスニペットに使用する場合は省略してもかまいません。

Diviテーマオプションを使用してすべてのページ/投稿にJavaScriptスニペットを追加する（子テーマは必要ありません）

JavaScriptスニペットは、テーマオプションの下にあるDiviのコード統合タブを使用してDiviに追加することもできます。この方法は、Webサイトのすべてのページ/投稿にロードするJSスニペットに適しています。これは、子テーマがない場合や、Diviサイトに追加する必要のあるJSのスニペットがいくつかあり、それらを外部JSファイルに含めたくない場合にも適しています。

コード統合セクションを見つけるには、[Divi]> [テーマオプション]に移動し、[統合]タブをクリックします。

divijavascriptスニペット

JavaScriptスニペットを配置する場所を見つける

そこで、Diviサイトにカスタムコードを追加できる4つの領域が表示されます。ほとんどの場合、JSスニペットを本文に追加するのが最善です。これにより、実際にはスニペットがページの下部に配置され、他のすべての後に読み込まれるようになります。これは、ページの読み込み速度に最適です。場合によっては、コードをヘッドに追加して、コードをより早くロードできるようにすることができます（または、ドキュメントがより早く実行されるJavaScriptに依存している場合）。したがって、パフォーマンス、タイミング、および機能の最適なバランスを提供する最適なオプションをテストして決定する必要があります。

たとえば、ヘッダーにスタイルを追加するjQueryスニペットがあるとします。その場合、スニペットが読み取られるまでヘッダーはそのスタイルなしで最初に読み込まれるため、本文（ページの最後）に読み込むことは望ましくありません。これにより、折り目の上の部分が訪問者にとって醜いものになります。ただし、ヘッドにロードした場合は、スタイリングにそれほど遅延はありません。

ブログ投稿にのみ適用されるコードがある場合は、投稿の下部にJSスニペットを追加することもできます。これにより、コードが他のページに不必要に読み込まれるのを防ぐことができます。

divijavascriptスニペット

コード統合領域はコードをページに直接追加するため、コードスニペットを<script>タグでラップする必要があります。

divijavascriptスニペット

別のJSファイルからDiviにJSスニペットを追加する（子テーマを使用）

Diviサイトには子テーマを使用することを常にお勧めします。また、子テーマを正しく設定したら、カスタムJSスニペットを保持するために使用できるJSファイルを組み込むこともできます。
これは間違いなくWordPressサイトでjavascriptを処理するための好ましい方法であり、Diviでもうまく機能します。

子テーマでJSファイルを作成する

特にテーマファイルに変更を加える予定がある場合は、Diviの子テーマを設定することをお勧めします。 Diviの子テーマを作成したら、すべてのJSスニペットを1か所に配置できるJavaScriptファイルを簡単に作成できます。

これがその方法です。

JavaScriptファイルを作成し、それを子テーマフォルダーに追加します

コードエディタを使用して、新しいファイルを作成し、JavaScriptファイルとして保存します。たとえば、ファイルを「scripts」という名前の「js」タイプとして保存した場合、完全なファイル名は「scripts.js」になります。ここで、Diviに追加するすべてのjsスニペットを追加します。ファイルはjsファイルとして保存されるため、スニペットを<script>タグでラップする必要はありません。

divijavascriptスニペット

ファイルが作成されたら、子テーマフォルダーに追加する必要があります。整理しやすくするために、カスタムjsファイルを保持するjsフォルダーを作成するのが好きです。これを行うには、子テーマフォルダーのルートに「js」という名前の新しいフォルダーを作成し、そのフォルダーに「scripts.js」ファイルを追加するだけです。

divijavascriptスニペット

子テーマのFunctions.phpファイルにスクリプトをエンキューする

次に、jsファイルをキューに入れてDiviにロードする必要があります。子テーマをすでに作成している場合は、functions.phpファイルを作成し、子テーマのstyle.cssファイルをキューに入れておく必要があります。これは次のようになります…

function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );

次に、新しいjsファイルに対して同じことを行う必要があります。これを行うには、次のスニペットを関数に追加する必要があります。

    wp_enqueue_script( 'custom-js', get_stylesheet_directory_uri() . '/js/scripts.js', array( 'jquery' ), '1.0.0' , true );

style.cssファイルとscripts.jsファイルをエンキューするために必要な最終的なコードは次のようになります…

function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
    wp_enqueue_script( 'custom-js', get_stylesheet_directory_uri() . '/js/scripts.js', array( 'jquery' ), '1.0.0' , true );
}
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );

最終的な考え

Webデザインを初めて使用する場合、またはDiviを使い始めたばかりの場合は、JavaScriptやJavaScriptをWebサイトに追加する方法に慣れていない可能性があります。うまくいけば、この投稿が正しい方向を示し、経験豊富なWeb開発者でも理解できるいくつかのベストプラクティスを提供するのに役立つことを願っています。

コメントでお返事をお待ちしております。

乾杯！