ワードプレス

子テーマでJSを読み込む方法【WordPress】

子テーマアイキャッチ画像

WordPressのテーマを使っている場合、親テーマに独自のJSを追加して動かす事が出来ますが、親テーマのアップデートがあると編集内容が上書きされて独自のJSは消えてしまいます。

子テーマに施したカスタマイズは、親テーマをアップデートしても影響はありません。

サイトをカスタマイズする場合は基本子テーマに記述していかなければなりません。そこで必要になってくるのが、JSファイルを子テーマで読み込みです

ブログサイトなどで独自のJSを追加したい場合のファイル構成と追加コードについて解説したいと思います。

プル

子テーマがない方はまず子テーマを作りましょう。

親テーマと子テーマ

子テーマの作成

themestheme-childstyle.css子テーマのディレクトリを用意して、その中にstyle.cssをアップロードし次のように記述します。

/*
Theme Name: Child-Themes
Template: Child-Theme
*/

有料テーマなどを使用している方は、テーマに子テーマが用意されていると思いますので、指定の場所から子テーマをダウンロードしましょう。

WordPressの新しい機能やブロックエディタの面倒なことは、親テーマがしっかり対応しています。やりたいことに集中しながら、工程をおさえることができます。

子テーマの階層

親テーマthemeがある階層に子テーマtheme-childを置くことによって、子テーマで編集した内容が親テーマに反映されます。

テーマ階層
テーマ階層

子テーマフォルダにJSフォルダその中にjavascript.jsファイルをFTPソフトでアップロードします。javascript.jsに独自のJSを記述。

javascript追加
javascript追加

しかし、JSファイルは子テーマにフォルダを作っただけでは読み込みは行われません。
子テーマのfunctions.phpで子テーマのJSファイルを読み込む必要があります。

※このサイトは「jin」テーマを使用しているので子テーマはjin-childになっています。

function.php
function.php

子テーマのfunctions.phpに記述(css)

「外観」→「テーマファイルエディター」→「編集するテーマを選択:」で「child」を選択で子テーマに記述したコメントを確認することができます。

子テーマのstyle.css
子テーマのstyle.css

下記コードを入力することで親テーマのstyle.css読み込み後に子テーマのstyle.cssが読み込まれる仕様に変更できます。

// 親テーマのstyle.css読み込み後に子テーマのstyle.cssが読み込まれる
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' ); 
function theme_enqueue_styles() { 
	wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}

functions.phpを選択し入力します。

子テーマstyle.cssが後に読み込み
子テーマstyle.cssが後に読み込み

子テーマのfunctions.phpに記述(JS)

front_page()(トップページのみ)にJSを反映させる方法になります。

//子テーマ内のJS読み込み
function my_scripts() {
	if( is_front_page() ){
		wp_enqueue_script( 'js', get_stylesheet_directory_uri().'/js/javascript.js',true);
		}
	}
add_action('wp_enqueue_scripts', 'my_scripts' );

上記のコードを子テーマfunctions.phpに記述して、子テーマJSjavascript.jsに独自のJSを記述すると反映されます。

front_page()のみにjs適応
front_page()のみにjs適応

後は、子テーマのjavascript.jsに自身のコードを記入して動作するか確認してJSが機能していたら完了です。

すべてのページにJSを反映させる場合は下記ポイント通りの記述になります。

プル

function.phpのコード詳細は下記に書きましたので、コードの理解を深めたい方はご確認ください。

↓WordPressの応用が身についたお勧めの本です。

一歩先にいくWordPressのカスタマイズがわかる本
一歩先にいくWordPressのカスタマイズがわかる本

▪一歩先にいくWordPressのカスタマイズがわかる本
WordPressの入門書を読みながら一度サイトを制作した方でも、もっと「ああしたい」「こうしたい」というときになって、よくわからなかったり、うまくいかなったりして困った方が意外と多いです。自社のサイトを制作するWeb担当者も、お客様の要望に応えるWebデザイナーも、読めば得する一冊です。

コード詳細内容

wp_enqueue_script( );

wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );

スクリプトファイルを「重複しないように」また「適切な順番」で読み込むように制御してくれる関数です。

$handleスクリプトの識別名区別するハンドル名を指定します。【必須】
$srcスクリプトのパスURLを指定します。
$deps依存スクリプト。引数で読み込み順を制御できます。
$ver任意のスクリプトのバージョン。
※バージョン情報はスクリプトのURLにパラメータとして追加されるので、ブラウザキャッシュ対策に使えます。
$in_footerスクリプトの読み込み位置を指定します。(trueで/body前、falseで/head前)
関数リファレンス

get_stylesheet_directory_uri()

get_stylesheet_directory_uri();

「テーマまたは子テーマのスタイルシートディレクトリのURIを取得する」

子テーマで使用した場合は子テーマのJSが格納されているディレクトリまでのURLを返します。
子テーマの運用でファイルを読み込みたいという場合は、get_stylesheet_directory_uriを使い、親テーマを利用してテンプレート作成をしたい場合はget_template_directory_uriを使います。

add_action( );

add_action( );

アクションフックはテーマなど直接改変したくない時に使用
「デフォルトだとこの挙動だけど、ページの種類や個別毎に挙動を変えたい」デフォルトの挙動をカスタマイズしたい箇所が出てきます。
アクションフックはWordPressの特定のタイミングで独自の関数で処理を行う。

「値(データ)を受け渡しするかどうか」でアクションフックは基本的に値を受け渡しません。WordPressの特定のタイミングで独自の処理を登録するためのものなので、処理は完結しており値を返す必要がありません。

改変したいテーマファイルを子テーマを優先して実行してくれます。
しかし、一部分改変したいだけなのにファイルごと変更してしまうと、テーマのアップデートで影響を受けやすくなってしまいます。そういった時にアクションフックはとても有効です。

my_scripts関数が呼び出された時にget_stylesheet_directory_uri()でスクリプトファイルを読み込んでjavascript.jsを実行しています。

is_front_page() ){}

is_front_page()
is_home()

条件分岐タグで、フロントページまたはブログ投稿インデックスページのみで処理させます。is_front_page()もしくはis_home()を使用します。

is_front_page()フロントページ(トップページ)かどうかを判定します。
is_home()投稿インデックスページかどうかを判定します。
関数リファレンス

↓下記本は自身のWordPressの応用が身についたお勧めの本です。

WordPress標準デザイン講座 20LESSONS
WordPress標準デザイン講座 20LESSONS

▪WordPress標準デザイン講座 20LESSONS【第2版】
WordPressは、Web制作の定番スキルとなっており、かんたんなブログサイトから高機能なCMSサイトまで効率的に制作することができます。実際に作りながらスキルを身につける「実習」パートからなる、合計20のLESSONを順番にステップアップしながら学んでいけます。

book
created by Rinker
¥2,838 (2022/10/05 00:18:26時点 楽天市場調べ-詳細)

コメントを残す

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

CAPTCHA