WordPress スタイルシートファイルとJavaScriptファイルを出し分ける

  WordPress

【home.php】や【single.php】などで、表示するページにより読み込むスタイルシートファイルやJavaScriptファイルを出し分けてみます。

 

 

wp_enqueue_scripts

wp_enqueue_scriptsをアクションフックに使います。

add_action('wp_enqueue_scripts', '任意のファンクション');

 

WordPress Codex : Plugin API/Action Reference/wp enqueue scripts

 

 

スタイルシートファイルの場合

wp_register_style()wp_enqueue_style() を使ってスタイルシートファイルの情報を登録し、条件分岐でファイルの出し分けを指定します。

WordPress の生成するページへ CSS スタイルを安全に追加もしくはキューに加えます。wp_register_style() で先に登録されていればこのハンドルで追加できます。

WordPress Codex : 関数リファレンス/wp register style

 

WordPress が生成したページに CSS スタイルファイルを安全に (キューへ) 追加します。wp_register_style() で最初に登録されていれば、そのハンドルを使って追加することができます。

WordPress Codex : 関数リファレンス/wp enqueue style

 

例えば、【home.php】用のスタイルシート と【single.php】用のスタイルシートを出し分ける場合。

テーマフォルダに【home.php】用のスタイルシート { テーマフォルダ }/css/my-home.css と【single.php】用のスタイルシート { テーマフォルダ }/css/my-single.css を用意します。
※ファイル名は任意の名前で良いです。

次に【functions.php】に記述します。

function register_style() {
  wp_register_style('style', get_bloginfo('template_directory').'/style.css', array(), false, 'all');
  wp_register_style('my-home-css', get_bloginfo('template_directory').'/css/my-home.css', array(), false, 'all');
  wp_register_style('my-single-css', get_bloginfo('template_directory').'/css/my-single.css', array(), false, 'all');
}
function add_stylesheet() {
  register_style();
  wp_enqueue_style('style');
  if (is_home() || is_archive()) {
    wp_enqueue_style('my-home-css');
  } elseif (is_single()) {
    wp_enqueue_style('my-single-css');
  }
}
add_action('wp_enqueue_scripts', 'add_stylesheet');

 

以上で完了です。

 

JavaScriptファイルの場合

同じように wp_register_script()wp_enqueue_script() を使ってJavaScriptファイルの情報を登録し、条件分岐でファイルの出し分けを指定します。

Registers a script file in WordPress to be linked to a page later using the wp_enqueue_script() function, which safely handles the script dependencies.

WordPress Codex : 関数リファレンス/wp register script

スクリプトファイルがまだインクルードされていない場合、また、すべての依存するスクリプトが登録済みの場合、依存関係に従った適切なタイミングでファイルを生成されたページにリンクします。スクリプトのリンクは、wp_register_script() 関数ですでに登録済みのハンドル、またはこの関数に必要なパラメータを与えることで行えます。
これは WordPress が生成するページに JavaScript をリンクする際に推奨されている方法です。

WordPress Codex : 関数リファレンス/wp enqueue script

 

例えば、【single.php】だけで使用するJavaScriptファイルを指定する場合。

テーマフォルダに【single.php】だけで使用するJavaScriptファイル { テーマフォルダ }/js/my-single.js を用意します。
※ファイル名は任意の名前で良いです。

次に【functions.php】に下記を記述します。

if (!is_admin()) {
  function register_script(){
    wp_register_script('my-single-js', get_bloginfo('template_directory').'/js/my-single.js', array( 'jquery' ), NULL, true );
  }
  function add_script() {
    register_script();
    if (is_single()) {
      wp_enqueue_script('my-single-js');
    }
  }
  add_action('wp_enqueue_scripts', 'add_script');
}

 

以上で完了です。

  WordPress     by