🏡まったのブログ

WordPressで子テーマのjsファイルを読み込む

目次

    子テーマのfunctions.phpにて親テーマのjs子テーマのjsという順番で読み込み順を指定することで、ファイルとしては2つとも出力されるが、後から読み込んだ子テーマのjsの方が適用されることで上書きできるようだ。

    // 子テーマの function.php の theme_enqueue_styles() の下とかに追記
    
    function theme_enqueue_scripts() {
      //親テーマのsample.js
    	wp_enqueue_script(
        'parent-func', // ハンドル名。ここは親テーマに書いてあるハンドル名と揃える
        get_template_directory_uri() . '/js/sample.js',
        array(), // $deps, 依存関係。よく 'jquery' とかが入る
        null // $ver か $in_footer のどちらかだけど、なぜfalseじゃなくてnullなのかは不明
      );
      //子テーマのsample.js
      wp_enqueue_script(
        'child-func', // 親テーマの
        get_stylesheet_directory_uri() . '/js/sample.js',
        array( 'parent-func' ), // ここで親テーマのjsに依存関係を持たせるらしい
        null
      );
    }
    add_action( 'wp_enqueue_scripts', 'theme_enqueue_scripts' );

    ただ親テーマで読み込んでいるファイル群すべてを子テーマ側でも呼ばないと不具合が起きるらしい‥。いつもダイナシイエスタデイさんの記事に辿り着くが、この記事とこの記事の2つがあるので注意。また記事の上部にあるコードをパットコピペしたりせず、ちゃんと文章読みましょう。

    <?php wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer ); ?>

    https://wpdocs.osdn.jp/%E9%96%A2%E6%95%B0%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9/wp_enqueue_script