WordPressでbody閉じタグの直前に出力する内容をfunctions.phpに記述する方法についてご紹介したんですが、headタグ内に出力したいものもbody閉じタグ直前に出力したいものもあって、それらを一括管理した方が楽だったりします。
というわけで、今回はheader.phpやfooter.phpに直接記述せず、functions.phpのみでcssやjsなどをどこに出力するのかを簡単に管理できる書き方についてご紹介します。
目次
WordPressのfunctions.phpだけでcssやjsの出力を管理する
今回紹介するのは、「wp_head();」と「wp_footer();」に出力するコードをfunctions.phpに記述するという方法です。
WordPressのテンプレートに「wp_head();」と「wp_footer();」が入ってないことはないと思いますが、一応header.phpとfooter.phpの中身をご確認ください。
では、functions.phpだけでcssやjsの出力を管理するためのコードをご紹介します。
add_action( 'wp_enqueue_scripts', function () {
// style.cssをheadタグ内に出力
wp_enqueue_style( 'style_css', get_stylesheet_directory_uri() . '/style.css', '', '' );
// 追加したいcssのファイルをheadタグ内に出力
wp_enqueue_style( 'notosansjapanese', '//fonts.googleapis.com/earlyaccess/notosansjapanese.css', '', '' );
wp_enqueue_style( 'main_css', get_template_directory_uri() . '/css/main.css', '', '' );
// 追加したいjsのファイルをbody閉じタグ直前に出力
wp_enqueue_script( 'main_js', get_template_directory_uri() . '/js/main.js', '', '', true );
// jQueryを削除
wp_deregister_script('jquery');
// 固定ページのスラッグが「contact」のページにのみcontact form 7のcssファイルを読み込む
if ( is_page( 'contact' ) )
wp_enqueue_style( 'contactform7_css', plugins_url() . '/contact-form-7/includes/css/styles.css', '', '', false );
}, 11 );
今回のコードについて、参考にした記事はこちらです。より詳しい内容はこちらをご覧ください。
上記のコードにコメントを添えてますが、一つずつバラして、順番に詳しくご紹介していきますね。
style.cssをheadタグ内に出力
add_action( 'wp_enqueue_scripts', function () {
wp_enqueue_style( 'style_css', get_stylesheet_directory_uri() . '/style.css', '', '' );
}, 11 );
style.cssをheadタグ内に出力するだけであればこれだけ記述すればOKです。
最後の行の11という数字は表示順で、こちらは任意の数字に実際出力される位置を確認しながら調整してみてください。
それと、「wp_enqueue_style」と書かれた直後に出てくる「style_css」もここのコードの名前をつけてあげてるだけなので任意なものに変更して大丈夫です。
追加したいcssのファイルをheadタグ内に出力
add_action( 'wp_enqueue_scripts', function () {
wp_enqueue_style( 'notosansjapanese', '//fonts.googleapis.com/earlyaccess/notosansjapanese.css', '', '' );
wp_enqueue_style( 'main_css', get_template_directory_uri() . '/css/main.css', '', '' );
}, 11 );
cssを出力したい場合は「wp_enqueue_style」という関数を使います。デフォルトでheadタグ内に出力されます。
追加したいjsのファイルをbody閉じタグ直前に出力
add_action( 'wp_enqueue_scripts', function () {
wp_enqueue_script( 'main_js', get_template_directory_uri() . '/js/main.js', '', '', true );
}, 11 );
jsを出力したい場合は「wp_enqueue_script」という関数を使います。こちらもデフォルトではheadタグ内に出力されるため、body閉じタグ直前に出力したい場合は最後に「true」と書きます。これだけで出力する場所を「wp_head();」から「wp_footer();」へと変更することができます。
jQueryを削除
add_action( 'wp_enqueue_scripts', function () {
wp_deregister_script('jquery');
}, 11 );
こちらはついでにご紹介しておきましたが、jQueryが必要ない場合はこの1行を追加するだけです。最近はjQueryが重くて使わないことが増えてきたのでこのコード1行を入れておくことが増えました。
特定のページにだけcssやjsを読み込ませるために条件分岐させる
add_action( 'wp_enqueue_scripts', function () {
if ( is_page( 'contact' ) )
wp_enqueue_style( 'contactform7_css', plugins_url() . '/contact-form-7/includes/css/styles.css', '', '', false );
}, 11 );
最後に応用編。特定のページのみ適用させたい場合に条件分岐も使えます。
Contact Form 7というメールフォームプラグインのcssをお問い合わせページにだけ出力させるという例をご紹介しました。必要ないページで必要ないコードを出したくない場合に便利です。
今回ご紹介した方法は、wp_head();やwp_footer();のあるところに出力するようにfunctions.phpに書いた訳ですが、もちろんheader.phpやfooter.phpに直接書いてもheadタグ内やbody閉じタグ直前に任意のコードを挿入することは可能です。
header.phpやfooter.phpに書いた方が管理しやすいのであればそれでも問題ないと思いますが、functions.phpだけで管理できるという手軽さから今回ご紹介したfunctions.phpのみで管理する方法をおすすめしています。
僕自身これまでにどちらの方法も使ったことがありますが、特に最近はfunctions.phpのみで管理する方が分かりやすくミスしにくいため重宝してます。
最後に
WordPressを知れば知るほどfunctions.phpって便利なファイルだなと感じます。
これまでにWordPressについていろいろと記事をまとめてますので、よかったらこちらもご覧ください。