ファイルの読み込みをページ別で切り分けるお話

WordPressではcssやjsファイルの読み込みをheader.phpとかfunctions.phpで制御できます。

基本的には全ページで読み込ませるのですが、特定のページだけ個別のファイルを読み込ませたいときがあります。

いろいろ方法があるので確認していきたいと思います。

コード記述

まずはheader.phpやfooter.phpに記述する場合です。

固定ページならis_page関数、投稿ページならis_single関数で処理する感じになります。

例えば「hoge」というスラッグの固定ページでファイルを読み込みたいときは任意の箇所に下記のように記述します。

<?php if ( is_page( 'hoge' ) ) { ?>
    <link rel="stylesheet" href="/css/hoge.css" />
    <script type="text/javascript" src="/js/hoge.js" ></script>
<?php } ?>

テーマによりけりですが子テーマにheader.phpやfooter.phpがなければfunctions.phpでも処理できます。

自作テーマならどちらでもやりやすい方で対応すればよいかと思います。

functions.phpの場合はwp_enqueue_style関数とwp_enqueue_script関数を使って下記のように記述をします。

function my_styles_add() {
    if ( is_page( 'hoge' ) ){
        wp_enqueue_style('hoge-css','/css/hoge.css');
    }
}
add_action('wp_print_styles', 'my_styles_add');

function my_scripts_add() {
    if ( is_page( 'hoge' ) ){
        wp_enqueue_script('hoge-js','/js/hoge.js');
    }
}
add_action('wp_enqueue_scripts', 'my_scripts_add');

利用しているプラグイン等と干渉する場合があるので、読み込む順番や重複がないかなどは気をつけないといけないかと思います。