chrome firefox IE safari chain youtube-play pocket hatena facebook feedly github google-plus rss twitter search code envelope-o home pencil website works calendar drawer tag
2015/04/13

[WP]WordPressのfunctions.phpでCSSの読み込みを管理・制御する方法

functions.phpでCSSの読み込みファイルを分岐する方法をご紹介いたします。CSSの読み込みを一カ所にまとめることにより、CSSの管理がしやすくなります。前回の投稿である、WordPressでのjQueryの読み込みを変更する方法と使い方は似ております。参考になれば幸いです。

functions.phpでCSSの読み込みを管理する

WordPressのテーマ作成の時は、どのようにCSSを読み込んでいますか?

header.phpや、それぞれのテンプレートに読み込み等をさせるなど自由に読み込みが出来ますが、

今回は、functions.phpでCSSの読み込みを管理する方法をご紹介致します。

CSSの読み込みを一カ所にまとめることにより、CSSの管理がしやすくなります。

前回紹介した「[WP]WordPressで読み込むjQueryをCDN経由の読み込みに変更しつつフォールバックに対応する

と使い方はほぼ同じです。

※functions.phpに記述していく為、条件分岐やPHPの記述ミスによりページが真っ白になる事があります。

バックアップを取り、テストを充分に行ってください。

 

functions.phpに書いて行きます。

function register_stylesheet() {
    /*
    * 一括でスタイルシートを登録しておく
    */
    wp_register_style('common', get_bloginfo('template_directory').'/common/css/general.css', array(), null, 'all');
    wp_register_style('single', get_bloginfo('template_directory').'/style.css', array(), null, 'all');
}

function load_stylesheet() {
    /*
    * スタイルシート登録関数を実行させる
    */
    register_stylesheet();

   /*
   * 全ページ共通CSS
   */
   wp_enqueue_style('common');

   /*
   * 詳細ページ用CSS
   */
   if ( is_single() ) {
       wp_enqueue_style('single');
   }
}
add_action('wp_enqueue_scripts', 'load_stylesheet');

ソースコードの簡単な解説

今回実行されるのはフロント側のみで、管理画面には影響はありません。

まずは、register_stylesheet()から。(関数名は適当に決めてます)

wp_register_style

Register a CSS stylesheet.

WordPress Developer Resources

CSSファイルの登録を行います。

引数はこんな感じになっています。

 

wp_register_style( $handle, $src, $deps, $ver,$media )
$handle(string/None) 登録名となります。※必須
$src(string/None) 読み込むCSSパス(URL,パス) ※必須
$deps(array/array()) 読み込みの依存関係。指定した登録名のすぐ後に登録されます。
$ver(bool/false) パラメーターを付けるかどうか。trueの場合はWordPressのバージョン番号が付与される。nullを入れる事によりパラメーターの付与されなくなる。
$media(string/all) linkタグに付けるmedia属性デフォルトはall

 

今回の場合は、

wp_register_style(‘common’, get_bloginfo(‘template_directory’).’/common/css/general.css’, array(), null, ‘all’);

$handle = 「common」という登録名

$src = テンプレート内のCSSをパスとして登録しております。

$deps = array()で空です。

$ver = nullを入れているのでパラメーターの付与はなしです。

$media = デフォルトのallを入れております。

 

続いてload_stylesheet()です。(こちらも適当に名前をつけています)

まずはregister_stylesheet()を実行して、先ほどのwp_register_style()を動作させています。

これで、WordPressにCSSを登録までしています。

wp_enqueue_style

Enqueue a CSS stylesheet.
Registers the style if source provided (does NOT overwrite) and enqueues.

WordPress Developer Resources

登録したスタイルシートを読み込みキューに追加します。wp_enqueue_styleの引数はこのような感じになっております。

 

wp_enqueue_style( $handle, $src, $deps, $ver,$media )
$handle(string/None) 登録名となります。※必須
$src(string/None) 読み込むCSSパス(URL,パス)
$deps(array/array()) 読み込みの依存関係。指定した登録名のすぐ後に登録されます。
$ver(bool/false) パラメーターを付けるかどうか。trueの場合はWordPressのバージョン番号が付与される。nullを入れる事によりパラメーターの付与されなくなる。
$media(string/all) linkタグに付けるmedia属性デフォルトはall

 

前回紹介したのと同じで、wp_enqueue_styleは登録からキュー追加までを一度に行います。

対する、wp_register_styleは登録までを行い、キュー追加はしません。

ページによって読み込みする、しないの分け方は条件分岐を使用しましょう。

 

最後の実行するタイミングに関しては、wp_enqueue_scriptsの実行時に動作するように設定しております。

WordPress3.3以前までは、wp_print_stylesを使用していましたが、非推奨となりwp_enqueue_scriptsを代わりに使用するとなっております。

複数のCSSを読み込みをする場合は、是非使用してみてはいかがでしょうか。

 

今後の励みになりますので、良かったらシェアをお願いします。

このエントリーをはてなブックマークに追加