【WP】function.phpでCSS、JSの一元管理

投稿日: 投稿者: %s shiroinu
HTML5

CSSやJSの外部ファイルの読み込みはheaderやfooterに記述することでも可能ですが、function.phpで読み込むことが推奨されています。

こんなことが出来ます

  • 管理のしやすいコード記述
  • 読み込みのタイミングの指定
  • 特定のページのみの読み込み指定

外部ファイルの読み込み

CSSの読み込み

wp_enqueue_style($handle, $src, $deps, $ver, $media);

パラメータ

$handle 文字列 必須 スタイルシートのハンドルとして使われる名称
$src 文字列/真偽値 オプション スタイルシートのURL
$deps 配列 オプション このスタイルシートより前に読み込まれる必要があるスタイルシート
$ver 文字列/真偽値 オプション スタイルシートのバージョン番号を指定する文字列 (存在する場合)
$media 文字列/真偽値 オプション スタイルシートが定義されているメディアを指定する文字列

Javascriptの読み込み

wp_enqueue_script($handle, $src, $deps, $ver, $in_footer);

パラメータ

$handle 文字列 必須 スクリプトのハンドルとして使われる名称
$src 文字列 オプション スクリプトのURL
$deps 配列 オプション このスクリプトより前に読み込まれる必要があるスクリプト
$ver 文字列 オプション スクリプトのバージョン番号を指定する文字列 (存在する場合)
$in_footer 真偽値 オプション スクリプトは通常 HTML ドキュメントの <head> に置かれるが、もしこのパラメータが true の場合</body>終了タグの前に配置される。

CSS、Javascriptをまとめて読み込み

//js,cssの読み込み
add_action( 'wp_enqueue_scripts', function () {
  wp_enqueue_style( 'main_css', get_template_directory_uri() . '/css/main.css', "", '1.0.0' );
  wp_enqueue_script( 'main_script', get_template_directory_uri() . '/js/main.js', "", '1.0.0', true );  
} );

特定のページのみ読み込みさせる

//特定のページでjs,cssの読み込み
add_action( 'wp_enqueue_scripts', function () {
if( $page_selected ){
    wp_enqueue_style( 'specific_css', get_stylesheet_directory_uri() . '/css/specific.css', "", '1.0.0' );
    wp_enqueue_script( 'specific_script',get_stylesheet_directory_uri() . '/js/specific.js',"", '1.0.0', true );
    }
} );

“$page_selected”の表記の仕方

is_home() 何れかの個別の固定ページが表示されている場合。
is_page() 何れかの固定ページが表示されている場合。
is_single() 何れかの投稿ページが表示されている場合。

()の中身 ex.固定ページ

is_page( 42 ) ID が 42 の固定ページが表示されている場合。
is_page( ‘Contact’ ) post_title が “Contact” である固定ページが表示されている場合。
is_page( ‘about-me’ ) post_name（スラッグ）が “about-me” である固定ページが表示されている場合。

詳しくはWORDPRESS Codexを確認してください。

組み合わせると…

//js,cssの読み込み
add_action( 'wp_enqueue_scripts', function () {
  wp_enqueue_style( 'main_css', get_template_directory_uri() . '/css/main.css', "", '1.0.0' );
  wp_enqueue_script( 'main_script', get_template_directory_uri() . '/js/main.js', "", '1.0.0', true );  
  //特定ページのみ
  if( $page_selected ) ){
        wp_enqueue_style( 'specific_css', get_stylesheet_directory_uri() . '/css/specific.css', "", '1.0.0' );
        wp_enqueue_script( 'specific_script',get_stylesheet_directory_uri() . '/js/specific.js',"", '1.0.0', true );
    }
} );

必要な時に必要なものだけ読み込むようにすれば、当然ページの読み込み速度も上がります。
すっきりしたコードを目指していきましょう！