ワードプレス

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

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

WordPressのテーマには、親テーマと子テーマという2つのタイプがあります。

親テーマは、テーマのデザインや機能を定義する基本的なテーマです。一方、子テーマは親テーマを継承し、親テーマのデザインや機能を拡張することができるテーマです。

具体的には、親テーマはWordPressの基本的な機能やデザインを定義し、子テーマはそれを継承して、より詳細なカスタマイズを可能にします。たとえば、子テーマでカスタムCSSを追加することで、親テーマのデザインを変更できます。

また、子テーマは親テーマとは独立して機能するため、親テーマの更新によってカスタマイズ内容が上書きされることを防ぐことができます。

WordPressでは、親テーマと子テーマの作成方法が用意されており、それぞれ別々のフォルダに保存されます。親テーマは「wp-content/themes/」の中に、子テーマは「wp-content/themes/親テーマ名-child/」の中に保存されます。

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

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

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

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

親テーマと子テーマ

子テーマの作成

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

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

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

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

子テーマの階層

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

子テーマのフォルダーにはstyle.cssというファイルが必要であり、ここで子テーマの情報を記述します。

例えば、親テーマが「themesthemes」という名前であれば、その下に「themesthemes-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を反映させる場合は下記ポイント通りの記述になります。

コード詳細内容

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()

現在アクティブになっているテーマのスタイルシートが置かれているディレクトリのURIを取得するWordPressの関数です。

<link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri(); ?>/style.css" />

このコードは、現在アクティブになっているテーマのディレクトリ内にある「style.css」というファイルを読み込むために使用されます。get_stylesheet_directory_uri()は、このファイルのURIを取得するために使用されます。

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

add_action( );

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

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

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

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

is_front_page() ){}

is_front_page()は、WordPressで現在のページがトップページ(フロントページ)かどうかを判定する関数です。この関数は、フロントページでtrue、それ以外の場合はfalseを返します。例えば、以下のように使うことができます。

if ( is_front_page() ) {
  // トップページの場合の処理
} else {
  // トップページ以外の場合の処理
}

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

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

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA


上にスクロール 下にスクロール