WordPress アクションフック(wp_head, wp_footer)でヘッダーやフッターに任意のコード(CSS,JSなど)を追加する方法

ヘッダーに追加
1. サンプル
2. 複数の関数を実行するサンプル
フッターに追加
1. サンプル

ヘッダーに追加

サンプル

wp_head() が実行される <head></head>内に追加するサンプルです。下記サンプルではCSSを読み込んでいますが、JSやメタタグなども追加できます。

/**
 * アクションフックでCSSのコードを追加
 * <head></head> 内に追加
 */
function ag_add_css() {
echo <<< EOM
/* CSSのコードを記述 */
<link rel='stylesheet' href='style.css' media='all' />
EOM;
}
add_action( 'wp_head', 'ag_add_css');

複数のコードを読み込む場合は、同じ関数内に追記するか関数を複数用意して実行順を指定することも可能です。

複数の関数を実行するサンプル

add_action() の３つめの引数に実行順を指定します。

/**
 * 
 */
function ag_add1_css() {
echo <<< EOM
/* CSS１のコードを記述 */
EOM;
}
//1番目に実行
add_action( 'wp_head', 'ag_add1_css', 1);


/**
 * 
 */
function ag_add2_css() {
echo <<< EOM
/* CSS２のコードを記述 */
EOM;
}
//2番目に実行
add_action( 'wp_head', 'ag_add2_css', 2);

フッターに追加

サンプル

wp_footer() が実行される</body>の前あたりに追加するサンプルです。

/**
 * アクションフックでJavaScriptのコードを追加
 * </body> の前に追加
 */
function ag_add_js() {
echo <<< EOM
<script>
/* JavaScriptのコードを記述 */
</script>
EOM;
}
add_action( 'wp_footer', 'ag_add_js');