KumaTechLab
2021-09-05/2023-05-23

特定のページでスタイル・スクリプトの登録

特定のページでスタイル・スクリプトの登録
  • 「Wordpressで特定のページのみスタイルを適用したい」
  • 「Wordpressで特定のページのみスクリプトを読み込みたい」

この記事では上記のような問題を解決します。

プラグインを使用して解決する形ではなく、コードを書く人向けの記事です。

フロントエンドで特定のページのみスタイル・スクリプトを適用したい場合

まず、通常のフロントエンドでスタイル・スクリプトを適用する形は以下のようになります。

add_action( 'wp_enqueue_scripts', 'my_script_style' );


function my_script_style() {
  wp_enqueue_style( 'my-style', get_template_directory_uri() . '/assets/css/style.css' );
  wp_enqueue_script( 'my-script', get_template_directory_uri() . '/assets/js/script.js' );
}

これを特定のページにも利用するには以下のようにします。

add_action( 'wp_enqueue_scripts', 'my_script_style' );


function my_script_style() {
  if ( is_single( 'special-style-script' ) ) {
     wp_enqueue_style( 'my-style', get_template_directory_uri() . '/assets/css/style.css' );
     wp_enqueue_script( 'my-script', get_template_directory_uri() . '/assets/js/script.js' );
  }
}

上の例では投稿のスラッグが「special-style-script」のページにのみ「style.css」と「script.js」を読み込んでいます。

フロント側でスタイル・スクリプトを読み込む方法は上記のようにパターンに分けていく方法がメインになります。

管理画面で特定のページのみスタイル・スクリプトを適用したい場合

こちらも同様に通常の全体適用パターンから見ていきましょう。

add_action( 'admin_enqueue_scripts', 'admin_script_style' );


function admin_script_style() {
  wp_enqueue_style( 'admin-style', get_template_directory_uri() . '/assets/css/admin.css' );
  wp_enqueue_script( 'admin-script', get_template_directory_uri() . '/assets/js/admin.js' );
}

上の例では全体適用なので使用していませんが、「admin_enqueue_scripts」には引数を一つ受け取ることができます。

その受け取ることができる引数には文字列で「現在の管理画面ページ」が格納されています。

これをうまく使うことで管理画面ではスタイル・スクリプトの適用を変えることができます。

add_action( 'admin_enqueue_scripts', 'admin_script_style' );


function admin_script_style( $hook ) {
  wp_register_style( 'admin-style', get_template_directory_uri() . '/assets/css/admin.css' );
  wp_register_script( 'admin-script', get_template_directory_uri() . '/assets/js/admin.js' );
  if ( $hook === 'edit.php' ) {
    // 投稿一覧画面
    wp_enqueue_style( 'admin-style' );
  } elseif ( $hook === 'edit-tag.php' && isset( $_GET['taxonomy'] ) && $_GET['taxonomy'] === 'category' ) {
    // カテゴリー一覧画面
    wp_enqueue_script( 'admin-script' );
  } elseif ( $hook === 'toplevel_page_custom_page' ) {
    // add_menu_pageで追加した管理画面 'toplevel_page_'にスラッグをつけた形
    wp_enqueue_style( 'admin-style' );
    wp_enqueue_script( 'admin-script' );
  }
}

上記は「投稿一覧画面」「カテゴリ―一覧画面」「add_menu_pageで追加した画面」でスタイル・スクリプトを出し分けています。

「$hook」にはクエリは含まれていないので、カテゴリーや、タグ、タクソノミー、カスタム投稿ページに対してスタイル・スクリプトを適用したい場合は「$_GET」などを使用して条件を組み立てましょう。

まとめ

基本的な使い方は知ってるけど特定のページだけ適用だと、どのように適用していいのか迷ってしまう人もいると思います。

是非、上記を参考にしてみてください。

面倒くさがってなんでもかんでも全体適用だと意図してないところに作用する可能性もありますので注意しましょう。

2020 KumaTechLab.