WordPressでのページごとのCSSやJSの読み込みの振り分けをfunctions.phpで一括設定する
規模がある程度以上大きなサイトでWordPressを利用する場合、
ディレクトリやページごとに読み込むCSSやJSを変更する必要が出てくることが多々あります。
header.phpやfooter.php、または各種テンプレート内でこれらを振り分けることも可能ではありますが、
振り分けるファイルの数が多くなると、
これらの方法では、コードが見づらくなってしまったり、管理が煩雑になってしまいます。
WordPressでは、functions.phpでadd_action()という関数を使うことで、WPの特定のアクションに対して、様々な設定することができますが、
その設定の中で、wp_print_styles、wp_print_scriptsというアクションに対して、wp_enquete_style()、wp_enqueue_script()という関数を合わせることで、
管理のしやすい状態で、CSS、JSの振り分けを行うことができるようになります。
方法
- functions.php内でアクションのwp_print_stylesまたは、wp_print_scriptsに紐付ける関数を準備し、wp_register_style()、wp_register_script()で読み込むCSS、JSを登録
- 1で用意した関数内でis_home()やis_page()などで場合分けし、wp_enqueue_style()またはwp_enqueue_script()で登録したCSS、JSを呼び出す
- add_action()でアクションと1の関数を紐付ける
1. functions.php内でアクションのwp_print_stylesまたは、wp_print_scriptsに紐付ける関数を準備し、wp_register_style()、wp_register_script()で読み込むCSS、JSを登録
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | function add_styles() { //wp_register_style(スタイルの名称, CSSファイルの場所)でスタイルを登録 wp_register_style('home', get_bloginfo('template_directory').'/css/home.css'); wp_register_style('about', get_bloginfo('template_directory').'/css/about.css'); wp_register_style('blog', get_bloginfo('template_directory').'/css/blog.css'); wp_register_style('info', get_bloginfo('template_directory').'/css/info.css'); ・・・ } function add_scripts() { //wp_register_style(スクリプトの名称, JSファイルの場所)でスクリプトを登録 wp_register_script('home', get_bloginfo('template_directory').'/js/home.js'); wp_register_script('about', get_bloginfo('template_directory').'/js/about.js'); wp_register_script('blog', get_bloginfo('template_directory').'/js/blog.js'); wp_register_script('info', get_bloginfo('template_directory').'/js/info.js'); ・・・ } |
2. 1で用意した関数内でis_home()やis_page()などで場合分けし、wp_enqueue_style()またはwp_enqueue_script()で登録したCSS、JSを呼び出す
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | function add_styles() { ・・・ wp_register_style('home', get_bloginfo('template_directory').'/css/info.css'); if (is_home()) { wp_enqueue_style('home'); //wp_enqueue_style(wp_register_styleで登録したスタイルの名称) } elseif (is_page('about')) { wp_enqueue_style('about'); } elseif (is_singular('post') || is_post_type_archive('post')) { wp_enqueue_style('blog'); } elseif (is_singular('info') || is_post_type_archive('info') ) { wp_enqueue_style('info'); } } function add_scripts() { ・・・ wp_register_script('home', get_bloginfo('template_directory').'/js/info.js'); if (is_home()) { wp_enqueue_script('home'); //wp_enqueue_style(wp_register_scriptで登録したスタイルの名称) } elseif (is_page('about')) { wp_enqueue_script('about'); } elseif (is_singular('post') || is_post_type_archive('post')) { wp_enqueue_script('blog'); } elseif (is_singular('info') || is_post_type_archive('info') ) { wp_enqueue_script('info'); } } |
3. add_action()でアクションと1の関数を紐付ける
|
1 2 | add_action('wp_print_styles', 'add_styles'); add_action('wp_print_scripts', 'add_scripts'); |
これでCSS、JSの読み込みの振り分けは完了です。
CSSやJSの場所が大きく変わってしまった場合などでも、一か所で管理できるので、
運用の多いサイトなどでも重宝する方法だと思います。
Author Profile
SHARE
