jQueryオプション(JS)のカスタマイズ方法

jQueryプラグインを使用したテーマの場合、jQueryプラグインのオプション設定は、js/custom.jsファイルなどにまとまっていることが多いと思います。その場合、親テーマのjs/custom.jsファイルを読み込まず、子テーマのjs/custom.jsを読み込んでカスタマイズします。

親テーマでget_template_directory_uri関数が使用されている場合

多くのテーマで使われています。カスタマイズの必要がないファイルに、意図的に使われていることもあります。

  1. 子テーマのfunction.phpに以下のコードを追記します。
  2. 親テーマのjs/custom.jsファイルを子テーマにコピペします。フォルダ階層を同じにする必要があります。
  3. 子テーマのjs/custom.jsファイルをカスタマイズします。

親テーマ: functions.php

function clock_scripts() {
    wp_enqueue_script( 'clock-js-custom', get_template_directory_uri() . '/js/custom.js', array( 'jquery' ), '1.0.0', true );
add_action( 'wp_enqueue_scripts', 'clock_scripts' );

子テーマ: functions.php
親テーマのcustom.jsを読み込まず、子テーマのcustom.jsを読み込みます。
関数名が同じだとエラーが出ます。 通常、最後に読み込みます(20を変更して調整します)。

function clock_scripts_child() {
    wp_dequeue_script( 'clock-js-custom' );
    wp_enqueue_script( 'clock-js-custom-child', get_stylesheet_directory_uri() . '/js/custom.js', array( 'jquery' ), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'clock_scripts_child', 20 );

親テーマで get_theme_file_uri関数が使用されている場合

公式テーマは、get_template_directory_uri関数が使われていることが多いですが、ファイルにより、get_template_directory_uri関数とget_theme_file_uri関数が使い分けされているものもあります。

  1. 親テーマのjs/custom.jsファイルを子テーマにコピペします。フォルダ階層を同じにする必要があります。
  2. 子テーマのjs/custom.jsファイルをカスタマイズします。

親テーマ: functions.php

function clock_scripts() {
    wp_enqueue_script( 'clock-js-custom', get_theme_file_uri( '/js/custom.js' ), array( 'jquery' ), '1.0.0', true );
}

子テーマ: functions.php

// コードの追記不要