やらなくてもいいけどやってもいい。
どういうアレか
<head>に各ページのcssとかjsとかを設置するにあたり、大掛かりなWEBサイトだとheader.phpに記述するとボリュームがえらいことになる。管理面でしんどくなるので別ファイルに逃がそうよっていう感じのやつ。jsのライブラリとか1個につき複数ファイルを読ませるんで、分けられると便利だよねっていう。
個別に読み込みを振り分けるんじゃなく、例えば全部style.cssに書いちゃってるとか、個別にファイルは分けてるけどstyle.cssに全部@importして<head>には1行しか書かないよってパターンもあるのでやるかどうかは状況による。
functions.phpで設定して、<?php wp_head(); ?>で書き出す中に混ぜちゃおうって方法。
注意点
header.phpをページ別で振り分けてる場合でも <?php wp_head(); ?> は共通だから、基本的に一貫して読ませるけど特定のページは読ませたくないなって場合が発生したときの処理がめんどくさい。
事前準備
親ページ指定の条件分岐
条件分岐は該当ページピンポイントでしか振り分けられないので、親ページを指定できるようにしておく。これをやっておけば楽になることが色々ある。
//親ページ条件分岐用
function is_parent_slug() {
global $post;
if ($post->post_parent) {
$post_data = get_post($post->post_parent);
return $post_data->post_name;
}
}使い方例
ページスラッグ「form」もしくは親ページスラッグ「form」だったら。
<?php if(is_page('form')|| is_parent_slug() === 'form'): ?>
<link rel="stylesheet" href="<?php echo esc_url(get_template_directory_uri()); ?>/css/form.css?<?php echo date('Ymd'); ?>">
<?php endif; ?>functions.phpに別ファイルを読ませる
functinos.phpに全部書くとボリュームすごくなって訳わからんくなるのを回避するために、任意のカテゴリで別ファイルに分けて読み込む。別に困らないよってんならやらなくていい。
require_once locate_template('functions/head.php', true);読み込むファイルはfunctions.phpと同様の内容を書けばいい。別段なにか宣言しなきゃいけないとかはない。ちなみに、「include」で読ませるとエラーを吐いた。
例
<?php
function add_headFiles() {
if(is_admin()) return;
if (is_home() || is_front_page()):
wp_enqueue_style('index-css', get_template_directory_uri() .'/css/index.css?'.date('Ymd'), array());
endif;
}
add_action('wp_enqueue_scripts', 'add_headFiles');今回はページ別の読み込みなんで、管理画面は関係ないんで、管理画面読み込み時に除外する「if(is_admin()) return;」を最初に入れる。
functions.phpでcssとjsを読ませる
<?php
function add_headFiles() {
if(is_admin()) return;
if (is_home() || is_front_page()):
wp_enqueue_style('index-css', get_template_directory_uri() .'/css/index.css?'.date('Ymd'), array());
wp_enqueue_script('index-js', get_template_directory_uri() .'/js/index.js?'.date('Ymd'));
endif;
}
add_action('wp_enqueue_scripts', 'add_headFiles');条件とファイル名をいじったら動く。
date()は最新を読み込むためのどうのこうのなので削っても大丈夫。
css、jsの読み込みの詳細については専門のページで。
ここでバージョン指定できるんだけど、functions.phpを毎度更新するのもめんどいですね。
cssのみを読ませる場合はこう。
<?php
function add_headFiles() {
if(is_admin()) return;
if (is_home() || is_front_page()):
wp_enqueue_style('index-css', get_template_directory_uri() .'/css/index.css?'.date('Ymd'), array());
endif;
}
add_action('wp_enqueue_scripts', 'add_headFiles');jsだけだろうがcssだけだろうがcssとjsがセットだろうが、add_actionはwp_enqueue_scriptsにする。
ちなみにcssとjsをどんな順番で並べたとしても、css→jsの順で整理して書き出される。
そんな感じで。
jQueryライブラリの読み込み
wpは初期状態でjQueryが読まれてるとか書いてあったりするけど、まっさらな状態から自作する場合は非設置みたいなんで、こっちで書き込む必要がある。
絶対パスでの指定もできるんでこんな感じ。
//外部から引っ張る
wp_enqueue_script('jQuery-lib', 'https://code.jquery.com/jquery-3.6.0.js');
//内蔵のを読み込む
wp_enqueue_script('jquery');内蔵のを読み込む場合は全部小文字で’jquery’にしないとダメ。注意。
内蔵の場合のバージョン指定がなんかよくわからんので、既存のやつを使うのはちょっとアレかなーって感じ。ちゃんと調べてないけど。
コメント