2022-07-04/2023-05-23

特定のショートコード(ブロック)があるページのみスタイル・スクリプトを読み込む

特定のショートコード(ブロック)があるページのみスタイル・スクリプトを読み込む

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' );
}
} );
2020 KumaTechLab.