【コピペ】WordPressのヘッダーとフッターへのCSS・JS読み込みをfunction.phpで管理する方法

WordPressでカテゴリーページや投稿記事ページなどに個別にCSSやJSを読み込む場合
どのように読み込みしていますか? シンプルな方法としてはheader.phpやfooter.phpに直接書き込むのがわかりやすいかもしれません。

しかし読み込む個別CSS,JSが増えてくるとソースコードがどうしてもかさばってしまいます。
今回はその解決方法としてfunctions.phpで管理する方法をご紹介します。

wp_enqueue_style、wp_enqueue_script のアクションフックを利用した読み込み方法です。

関数を使ってファイルを登録・読み込みキューに追加する

スタイルシートの場合

wp_enqueue_style() を使います。

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

  • $handle: スタイルシートの識別名( 任意の識別名 例:temp-style )
  • $src: スタイルシートの URL( デフォルト: ” )
  • $deps: 依存スタイルシート識別名の配列( デフォルト: array() )
  • $ver: バージョン文字列(デフォルト: false)
  • $media: スタイルシートのメディア指定(デフォルト: ‘all’)

スクリプトの場合

wp_enqueue_script() を使います。

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

  • $handle: スクリプトの識別名( 任意の識別名 例:temp-script )
  • $src: スクリプトの URL( デフォルト: ” )
  • $deps: 依存スクリプト識別名の配列( デフォルト: array() )
  • $ver: バージョン文字列( デフォルト: false )
  • $in_footer: true で </body> 1つ上の行に読み込み
    デフォルトは false で </head> 1つ上の行に読み込み( デフォルト: false )

サンプルコード

functions.phpにコピペして利用してください。

 

Sidebar