A3 Code Note

11/12/2022

#6 Theme Development | enqueue stylesheet

WordPressで stylesheet を読み込ませるとき
https://developer.wordpress.org/reference/functions/wp_enqueue_style/

function テーマ名_enqueue_scripts() {
    wp_enqueue_style( 'style-css', get_stylesheet_uri(), [], filemtime( get_template_directory() . '/style.css'), 'all' );
}

add_action( 'wp_enqueue_scripts', 'テーマ名_enqueue_scripts' );

filemtimeはタイムスタンプです。
検証で確認するとバージョン番号がstyle.cssの後ろについていると思います。
これをつけることによって、何度もキャッシュを削除して読み込みしなくても新しいstylesheetを読み込んでくれます。
どのようなものが出力されるのか見たい場合、functionより前に以下のようにechoで出力して確認
数字が出力されます。

echo '<pre>';
print_r( filemtime( get_template_directory() . '/style.css' ) );
wp_die();

style.cssを書き換え、保存して再度echoで出力すると番号が変わります。

get_stylesheet_uri()
これだけでstyle.cssまでのパスを補完してくれます。
どのようなものが出力されるのか見たい場合、functionより前に以下のようにechoで出力して確認

echo '<pre>';
print_r( get_stylesheet_uri() );
wp_die();

get_template_directory() . ‘/style.css’
これでもtemplateまでのディレクトリ+ style.cssをつなげても良いです。
どのようなものが出力されるのか見たい場合、functionより前に以下のようにechoで出力して確認

echo '<pre>';
print_r( get_template_directory() . '/style.css' );
wp_die();