WordPress テーマを作るなら get_theme_file_uri と get_theme_file_path を使いましょう

Posted on Update by admin


WordPress 4.7 から テーマ用の おいしい関数がいろいろ追加されています。
中でも get_theme_file_uri関数 と get_theme_file_path関数 を使ってくれてると 子テーマを作る際にとても幸せになります。

子テーマではテンプレート(同名のファイル)を設置するだけで子テーマ側のテンプレートを読み込みますので 楽なのですが、metaタグに出力する wp_enqueue_style や wp_enqueue_script でのファイル、画像、又はインクルード(require)されているファイルを子テーマ側で読み込ませたい場合は 変更用のコードを書かなければいけませんでした。

そんな場合 親テーマ側で get_theme_file_uri関数 と get_theme_file_path関数を使ってくれていると、こちらも同名のファイルを設置するだけで子テーマ側のファイルを読み込みますので 変更用のコードが不要になります。
　

get_theme_file_uri( string $file = ” )

テーマ内にあるファイルのパス(URL)を返します。

従来では
親テーマのURLを取得する場合は get_template_directory_uri()
子テーマのURLを取得する場合は get_stylesheet_directory_uri()
と使い分けしてたと思いますが get_theme_file_uri だけでよくなります。

get_theme_file_uri で子テーマを利用している場合
①引数 $file が無ければ子テーマのフォルダのパスを返します。
②引数 $file が子テーマにあれば 子テーマのファイルのパスを返します。
③引数 $file が子テーマに無ければ 親テーマのファイルのパスを返します。
※子テーマを利用していない場合は全て親テーマのパスを返します。

CSSの場合

// WordPress4.6 まで のサンプル
wp_enqueue_style( 'second_style', get_template_directory_uri() . '/second_style.css', array('nendebcom-style') );

// WordPress4.7 以降 のサンプル
wp_enqueue_style( 'second_style', get_theme_file_uri( '/second_style.css' ), array('nendebcom-style') );

画像の場合


// WordPress4.6 まで のサンプル
<img src="<?php bloginfo('stylesheet_directory'); ?>/img/top_bana.png">
<img src="<?php echo get_template_directory_uri(); ?>/img/top_bana.png">

// WordPress4.7 以降 のサンプル
<img src="<?php echo get_theme_file_uri( '/img/top_bana.png' ); ?>">

今までは wp_dequeue_style を使ったり wp_enqueue_style のハンドル名で上書きしたりしてましたが
get_template_directory_uri を get_theme_file_uri に 変更する事で子テーマ側に同じファイルがあると子テーマの方を読み込むようになります。
子テーマ側では特に読み込むような記述をする必要がなくなります。

サイトの装飾用の画像とかのURLも同様です。

※もし、親テーマ固定がいいのでしたら get_parent_theme_file_uri関数 を使ってください。

　

さらに get_theme_file_uri関数は アクションフィルターが設置されていますので 引数 $file を条件キーにして 例外処理も入る事ができます。

/**
 * Filters the URL to a file in the theme.
 * 親が second_style.css の場合は 子のmy-second_style.css を読むようにする
 *
 * @since 4.7.0
 * @param string $url  The file URL.
 * @param string $file The requested file to search for.
 * License: GPLv2 or later
 */
function nendebcom_theme_file_uri( $url, $file ){

	$file = ltrim( $file, '/' );
	if( $file == 'second_style.css' ){
		$url = get_theme_file_uri( '/my-second_style.css' );
	}
	return $url;
}
add_filter( 'theme_file_uri', 'nendebcom_theme_file_uri', 10, 2 );

　

スポンサードリンク



　

get_theme_file_path( string $file = ” )

テーマ内にあるファイルの絶対パスを返します。 require する時に使います。

従来では
親テーマの絶対パスを取得する場合は get_template_directory()
子テーマの絶対パスを取得する場合は get_stylesheet_directory()
と使い分けしてたと思いますが get_theme_file_path だけでよくなります。

get_theme_file_pathで 子テーマを利用している場合
①引数 $file が無ければ(空欄) 子テーマのフォルダの絶対パスを返します。
②引数 $file が子テーマにあれば 子テーマのファイルの絶対パスを返します。
③引数 $file が子テーマに無ければ 親テーマのファイルの絶対パスを返します。
※子テーマを利用していない場合は全て親テーマの絶対パスを返します。 

// WordPress4.6 まで のサンプル
require __DIR__  . '/inc/template-tags.php';
require get_template_directory() . '/inc/template-tags.php';

// WordPress4.7 以降 のサンプル
require get_theme_file_path( '/inc/template-tags.php' );

「require __DIR__・・」 と書かれるとお手上げですが 今までは「require get_template_directory()・・」の場合は template_directoryフィルター を使って書き換えをしていました。

この get_template_directory を get_theme_file_path に 変更する事で 子テーマ側に同じファイルがあると子テーマの方を読み込むようになります。
子テーマ側では特に読み込むような記述をする必要がなくなります。

※もし、親テーマ固定がいいのでしたら get_parent_theme_file_path関数 を使ってください。
　

さらに get_theme_file_path関数は アクションフィルターが設置されていますので 引数 $file を条件キーにして 例外処理も入る事ができます。

/**
 * Filters the path to a file in the theme.
 * 親がtemplate-tags.php指定の場合は 別の場所にある my-template-tags.php を読むようにする
 *
 * @since 4.7.0
 * @param string $path The file path.
 * @param string $file The requested file to search for.
 * License: GPLv2 or later
 */
function nendebcom_theme_file_path( $path, $file ){

	$file = ltrim( $file, '/' );
	if( $file == 'inc/template-tags.php' ){
		$path = ABSPATH . '/～/inc/my-template-tags.php';
	}
	return $path;
}
add_filter( 'theme_file_path', 'nendebcom_theme_file_path', 10, 2 );

　
　

おまけ

テーマにいろいろな機能を入れるのもいいのですが「子テーマが作りやすい」というのも機能のひとつだと思います。
readme とかに アクションフックの例とか 子テーマの作成例とか 書いておくと、よりいいですよね。

style.css

親テーマでのメインのCSS読込は以下のように、書いてますよね。

	// Theme stylesheet. 例
	wp_enqueue_style( 'nendebcom-style', get_stylesheet_uri() );

これは、子テーマを設置すると親テーマの style.cssではなく 子テーマの style.css を読みにいくようになります。

親テーマの style.css も読むようにする場合は
子テーマ側の functions.php に以下のように記述しましょう。

function nendebcom_theme_enqueue_styles() {
	//親テーマのCSSを読み込む
	wp_enqueue_style( 'nendebcom-parent-style', get_parent_theme_file_uri( '/style.css' ) );
}
add_action( 'wp_enqueue_scripts', 'nendebcom_theme_enqueue_styles' );

子テーマの style.css だけで いい場合は functions.php には何も書かなくてもよくなります。

　

後方互換

get_theme_file_uri関数 と get_theme_file_path関数 は WordPress 4.7 以降でないと使えませんので後方互換対策をした方がいいでしょうね。
つまり WordPress 4.7 未満だとテーマを有効化できなくします。

サンプルは デフォルトテーマの Twentyシリーズテーマにありますので参考にしてください。
例えば Twenty Seventeen では functions.php の冒頭に

/**
 * Twenty Seventeen only works in WordPress 4.7 or later.
 */
if ( version_compare( $GLOBALS['wp_version'], '4.7-alpha', '<' ) ) {
	require get_template_directory() . '/inc/back-compat.php';
	return;
}

と書いてあり、後方互換対策用のプログラム inc/back-compat.php を読み込むようにしています、

　

スポンサードリンク



　

参考

get_theme_file_uri() | Function | WordPress Developer Resources
https://developer.wordpress.org/reference/functions/get_theme_file_uri/

get_parent_theme_file_uri() | Function | WordPress Developer Resources
https://developer.wordpress.org/reference/functions/get_parent_theme_file_uri/

get_theme_file_path() | Function | WordPress Developer Resources
https://developer.wordpress.org/reference/functions/get_theme_file_path/

get_parent_theme_file_path() | Function | WordPress Developer Resources
https://developer.wordpress.org/reference/functions/get_parent_theme_file_path/




スポンサードリンク