functions.phpでCSS・JavaScriptを管理

WordPressでJavascriptやCSSをheader.phpに記述しないどfunctions.phpから一括で管理する方法です。

JavaScriptが動かない時に読み込み順を変える時にも便利です。

記述を間違えるとWordPressの内部システムに大きく影響しエラーが出てしまいますのでご注意ください。

テーマディレクトリ

WordPressテーマディレクトリの URI を呼み込む場合の関数が

get_template_directory_uri()

子テーマのディレクトリ

子テーマのディレクトリの URI を呼み込む場合の関数は

get_stylesheet_directory_uri()

サンプル

//CSSとJavaScriptの読み込みコードを関数にまとめる
 function my_scripts()  {   
  
 // 管理画面では読み込まない
  if ( !is_admin() ) {    
   
  // スタイルシートディレクトリーを取得する。
 $dir = get_stylesheet_directory_uri();  
  
 // Googleから読み込む 
 wp_deregister_script( 'jquery' );  
wp_register_script( 'jquery', '//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js' );   
 
 // Google Maps APIを読み込む 
 wp_enqueue_script( 'google-maps-api', '//maps.google.com/maps/api/js?sensor=false', array(), NULL );    
  
// 特定のページでスクリプトを出したい場合
  if ( is_front_page() ) {  wp_enqueue_script( 'wow', $dir.'/js/wow.js' );  } 
   
   
// スタイルシートも基本同じように使えます。  
wp_enqueue_style( 'my-css', $dir.'/css/my-css.css' );    
 
  }    
 
  }  
   
add_action( 'wp_enqueue_scripts', 'my_scripts' );