WordPressでCSSやJavaScriptを読み込むための関数をまとめます。
目次
wp_enqueue_scripts
おなじみwp_enqueue_scripts。フロント側で読み込まれます。
function my_styles() {
wp_enqueue_style( 'my', get_template_directory_uri() . '/assets/css/style.css', array(), filemtime( get_theme_file_path( 'css/style.css' ) ), 'all' );
}
add_action( 'wp_enqueue_scripts', 'my_styles' );
function my_scripts() {
wp_enqueue_script( 'my', get_template_directory_uri() . '/assets/js/script.js', array( 'jquery' ), filemtime( get_theme_file_path( 'js/script.js' ) ), true );
}
add_action( 'wp_enqueue_scripts', 'my_scripts' );
WordPress Developer Resources
wp_enqueue_scripts – Hook | Developer.WordPress.org
Fires when scripts and styles are enqueued.
WordPress Developer Resources
get_theme_file_path() – Function | Developer.WordPress.org
Retrieves the path of a file in the theme.
enqueue_block_editor_assets
管理画面で読み込むことができるenqueue_block_editor_assets。設定したCSSやJavaScriptの内容はエディタ内のみならずUI部分も含めた全体に反映されます。
// スタイルシートの読み込み
function my_styles() {
wp_enqueue_style( 'my', get_template_directory_uri() . '/assets/css/style.css', array(), filemtime( get_theme_file_path( 'css/style.css' ) ), 'all' );
}
add_action( 'enqueue_block_editor_assets', 'my_styles' );
// スクリプトの読み込み
function my_scripts() {
wp_enqueue_script( 'my', get_template_directory_uri() . '/assets/js/script.js', array( 'jquery' ), filemtime( get_theme_file_path( 'js/script.js' ) ), true );
}
add_action( 'enqueue_block_editor_assets', 'my_scripts' );
WordPress Developer Resources
enqueue_block_editor_assets – Hook | Developer.WordPress.org
Fires after block assets have been enqueued for the editing interface.
ただし、推奨される方法ではなさそうです。
推奨される方法ではありませんが、後方互換性のため、
enqueue_block_editor_assetsを使用して、エディターコンテンツのスタイルを設定できることに注意してください。詳細は以下を参照してください。
enqueue_block_assets
CSSやJavaScriptを読み込ませることができるenqueue_block_assets。管理画面でもフロントの両方で読み込まれます。設定したCSSやJavaScriptの内容はエディタ内のみならずUI部分も含めた全体に反映されます。
function my_block_assets() {
wp_enqueue_style( 'my-block', get_template_directory_uri() . '/assets/css/block.css', array(), filemtime( get_theme_file_path( 'assets/css/block.css' ) ), 'all' );
wp_enqueue_script( 'my-block', get_template_directory_uri() . '/assets/js/block.js', array(), filemtime( get_theme_file_path( 'assets/js/block.js' ) ), true );
}
add_action( 'enqueue_block_assets', 'my_block_assets' );
WordPress Developer Resources
enqueue_block_assets – Hook | Developer.WordPress.org
Fires after enqueuing block assets for both editor and front-end.
wp_enqueue_block_style
wp_enqueue_block_styleは対象のブロックに紐づいてCSSが管理画面とフロント共に読み込まれるようになります。使っていないCSSを読み込まなくて済むのでパフォーマンスを意識する場合は活用してくと良いでしょう。
// 引用ブロック用のCSSを読み込む
function add_quote_block_style() {
wp_enqueue_block_style(
'core/quote',
array(
'handle' => 'default-quote-style',
'src' => get_theme_file_uri( 'assets/css/block/quote/default-quote.css' ),
'path' => get_theme_file_path( 'assets/css/block/quote/default-quote.css' ),
)
);
}
add_action( 'init', 'add_quote_block_style' );
WordPress Developer Resources
wp_enqueue_block_style() – Function | Developer.WordPress.org
Enqueues a stylesheet for a specific block.
add_editor_style
管理画面のエディター内だけにCSSが適応されます。他のUIには影響はありません。
function my_editor_styles() {
add_theme_support( 'editor-styles' );
add_editor_style( 'assets/css/editor-style.css' );
}
add_action( 'after_setup_theme', 'my_editor_styles' );
WordPress Developer Resources
add_editor_style() – Function | Developer.WordPress.org
Adds callback for custom TinyMCE editor stylesheets.
公式テーマを見てみる
Twenty Twenty-Fiveを見てみると、wp_enqueue_scriptsとadd_editor_styleを活用していそうでした。コメントを見るとフロントはwp_enqueue_scripts、エディターはadd_editor_styleのようなイメージなのでしょうか。
WordPress.org 日本語
Twenty Twenty-Five | WordPress Theme Directory
Twenty Twenty-Five は、シンプルさと柔軟性を重視しています。サービスページやランディングページなど、さまざまなページタイプに対応する多彩なパターンでサポートされ…
add_editor_style// Enqueues editor-style.css in the editors. if ( ! function_exists( 'twentytwentyfive_editor_style' ) ) : /** * Enqueues editor-style.css in the editors. * * @since Twenty Twenty-Five 1.0 * * @return void */ function twentytwentyfive_editor_style() { add_editor_style( get_parent_theme_file_uri( 'assets/css/editor-style.css' ) ); } endif; add_action( 'after_setup_theme', 'twentytwentyfive_editor_style' );
wp_enqueue_scripts// Enqueues style.css on the front. if ( ! function_exists( 'twentytwentyfive_enqueue_styles' ) ) : /** * Enqueues style.css on the front. * * @since Twenty Twenty-Five 1.0 * * @return void */ function twentytwentyfive_enqueue_styles() { wp_enqueue_style( 'twentytwentyfive-style', get_parent_theme_file_uri( 'style.css' ), array(), wp_get_theme()->get( 'Version' ) ); } endif; add_action( 'wp_enqueue_scripts', 'twentytwentyfive_enqueue_styles' );
投稿タイプで条件分岐する場合
投稿タイプによって、投稿ページだけ読み込みたいCSSもあるかもしれません。global $postでの判定をする場合は、enqueue_block_assetsのタイミングだと使えそうです。
以下のように作ると、管理画面とフロントの両方で投稿タイプがpostの場合だけCSSが読み込まれるようになります。
function my_block_assets() {
global $post;
if ( $post && $post->post_type === 'post' ) {
wp_enqueue_style( 'default-quote', get_template_directory_uri() . '/assets/css/block/quote/default-quote.css', array(), '1.0.0', 'all' );
}
}
add_action( 'enqueue_block_assets', 'my_block_assets' );
