特定のショートコード(ブロック)があるページのみスタイル・スクリプトを読み込む
WordPressで特定のショートコードや特定のブロックがあるページのみスタイル(.css)、スクリプト(.js)を読み込む方法を説明します。
スタイルやスクリプトの読み込みはページの速度などにも影響があるので、全部bundleしてしまうのではなく、部分的に切り離していることも多いと思います。
その場合今回説明する特定ページでの読み込みが必要となります。
通常の読み込み
通常はアクションフックで読み込む形です。
add_action( 'wp_enqueue_scripts', function() {wp_enqueue_script( 'sample-script', 'path/sample.js' );wp_enqueue_stlye( 'sample-style', 'path/style.css' );} );
これだとフロント側のすべてのページでスタイルやスクリプトが読み込まれることになってしまいます。
例えばですがお問い合わせフォームのページだけ読み込まれれば良いスタイルが投稿ページで読み込まれるのは無駄ですよね。
それではどのようにしたら良いのか見ていきましょう。
特定のショートコード(ブロック)があるページでの読み込み
特定のショートコードがあるかどうか確かめるにはWordPressの「has_shortcode」関数を使用します。
has_shortcode( string $content, string $tag )
第一引数は文字列です。任意のテキストでも良いですし、投稿の中身でも問題ありません。
第二引数は調べたいショートコード名を指定します。
同様にブロックの場合は「has_block」関数をします。
has_block( string $block_name, int|string|WP_Post|null $post = null )
第一引数には調べたいブロック名を指定します。
第二引数は投稿ID、コンテンツ(文字列)、投稿オブジェクトを指定します。指定しない場合には現在の投稿の内容が対象となります。
上記を使用して特定のショートコードや特定のブロックがある場合のみ読み込むには以下のような形になるのではないでしょうか。
add_action( 'wp_enqueue_scripts', function() {global $post;// [shortcode]がある場合のみ読み込みif ( has_shortcode( $post->content, 'shortcode' ) ) {wp_enqueue_script( 'sample-script', 'path/sample.js' );wp_enqueue_stlye( 'sample-style', 'path/style.css' );}// ギャラリーブロックがある場合のみ読み込みif ( has_block( 'gellery' ) ) {wp_enqueue_script( 'sample-script', 'path/sample.js' );wp_enqueue_stlye( 'sample-style', 'path/style.css' );}} );
一見良さそうなのですが、エラー(警告)が出る場合があります。
「$postはオブジェクトではないよ」という感じのエラーです。「$post->content」のところを指すと思います。
上記のコードでは$postが「WP_Post」である前提になっていますが、このフックが呼び出される時には必ずしも$postが「WP_Post」であるとは限りません。
そこで少し修正を加えます。
add_action( 'wp_enqueue_scripts', function() {global $post;// [shortcode]がある場合のみ読み込みif ( is_a( $post, 'WP_Post' ) && has_shortcode( $post->post_content, 'shortcode' ) ) {wp_enqueue_script( 'sample-script', 'path/sample.js' );wp_enqueue_stlye( 'sample-style', 'path/style.css' );}// ギャラリーブロックがある場合のみ読み込みif ( is_a( $post, 'WP_Post' ) && has_block( 'gellery' ) ) {wp_enqueue_script( 'sample-script', 'path/sample.js' );wp_enqueue_stlye( 'sample-style', 'path/style.css' );}} );
「is_a」関数を使用して「$post」が「WP_Post」のオブジェクトであるかを確認します。先の条件でfalseの場合には後ろの条件が確かめられることはありませんのでエラーは出ません。
これで正常に機能しそうですね。
ちなみにブロック名はエディタ―画面で「右上メニュー」⇒「コードエディタ―」にすると確認できます。「wp:」の後がブロック名です。
wordpressコアのブロックは「gallery」のように単純な形ですが、プラグイン等のブロックは「sample/gallery」のようにプレフィックス＋スラッシュを含めたものになっています。
おまけ
投稿のみ読み込み
add_action( 'wp_enqueue_scripts', function() {// 投稿の場合if ( is_single() ) {wp_enqueue_script( 'sample-script', 'path/sample.js' );}// スラッグ・タイトル「sample」投稿の場合if ( is_single( 'sample' ) ) {wp_enqueue_script( 'sample-script', 'path/sample.js' );}// 投稿ID「101」投稿の場合if ( is_single( 101 ) ) {wp_enqueue_script( 'sample-script', 'path/sample.js' );}} );
固定ページのみ読み込み
add_action( 'wp_enqueue_scripts', function() {// 固定ページの場合if ( is_page() ) {wp_enqueue_script( 'sample-script', 'path/sample.js' );}// スラッグ・タイトル「sample」固定ページの場合if ( is_page( 'sample' ) ) {wp_enqueue_script( 'sample-script', 'path/sample.js' );}// 投稿(ページ)ID「101」固定ページの場合if ( is_page( 101 ) ) {wp_enqueue_script( 'sample-script', 'path/sample.js' );}} );
カスタム投稿タイプのみ読み込み
add_action( 'wp_enqueue_scripts', function() {// カスタム投稿タイプ「blog」の場合if ( is_singular( 'blog' ) ) {wp_enqueue_script( 'sample-script', 'path/sample.js' );}// カスタム投稿タイプ「blog」でスラッグ・タイトル「sample」の場合if ( is_singular( 'blog' ) && is_single( 'sample' ) ) {wp_enqueue_script( 'sample-script', 'path/sample.js' );}// カスタム投稿タイプ「blog」で投稿ID「101」の場合if ( is_singular( 'blog' ) && is_single( 101 ) ) {wp_enqueue_script( 'sample-script', 'path/sample.js' );}} );
カテゴリ―ページのみ読み込み
add_action( 'wp_enqueue_scripts', function() {// カテゴリ―ページの場合if ( is_category() ) {wp_enqueue_script( 'sample-script', 'path/sample.js' );}// スラッグ・カテゴリー名「sample」のカテゴリ―ページ場合if ( is_category( 'sample' ) ) {wp_enqueue_script( 'sample-script', 'path/sample.js' );}// カテゴリ―ID「101」の場合if ( is_category( 101 ) ) {wp_enqueue_script( 'sample-script', 'path/sample.js' );}} );
タグページのみ読み込み
add_action( 'wp_enqueue_scripts', function() {// タグページの場合if ( is_tag() ) {wp_enqueue_script( 'sample-script', 'path/sample.js' );}// スラッグ・カテゴリー名「sample」のタグページ場合if ( is_tag( 'sample' ) ) {wp_enqueue_script( 'sample-script', 'path/sample.js' );}// タグID「101」の場合if ( is_tag( 101 ) ) {wp_enqueue_script( 'sample-script', 'path/sample.js' );}} );
カスタムタクソノミーページのみ読み込み
add_action( 'wp_enqueue_scripts', function() {// カスタムタクソノミー「coffee」のタクソノミーページの場合if ( is_tax( 'coffee' ) ) {wp_enqueue_script( 'sample-script', 'path/sample.js' );}// スラッグ・タクソノミー名「sample」のタクソノミーページの場合if ( is_tax( 'coffee', 'sample' ) ) {wp_enqueue_script( 'sample-script', 'path/sample.js' );}// タームID「101」のタクソノミーページの場合if ( is_tax( 'coffee', '101' ) ) {wp_enqueue_script( 'sample-script', 'path/sample.js' );}} );