ワードプレスのヘッダー(head)に任意のJAVASCRIPTやスタイルシートCSSを追加する方法

ワードプレスサイトのheadタグ内に任意のJAVASCRIPTやスタイルシートCSSのコードを出力するPHPコードをご紹介いたします。

wp_head アクションでワードプレスのヘッダーに任意のJSやStyleを出力する

ワードプレスには、アクションというあらゆるワードプレスの処理に割り込む仕組みが提供されています。
headタグ内に任意のコードを出力することができるアクションはwp_head　でこのアクションを使うと下記のように任意のJAVASCRIPTやスタイルを出力できます。

javascriptコードを出力する例は下記となります。

function my_custom_header_code() {
    echo '<script>alert("このjsはヘッダーで実行されます")</script>';
}
add_action( 'wp_head', 'my_custom_header_code' );

スタイルシートを出力する例は下記となります。

function my_custom_header_code() {
    echo '<style>p{color:red;}</style>';
}
add_action( 'wp_head', 'my_custom_header_code' );

スタイルシートに限らず、ヘッダー(headタグ)に含めることができるmetaタグ、linkタグ等あらゆるコードを出力できます。

function my_custom_header_code() {
    echo '<meta name="description" content="…">';
}
add_action( 'wp_head', 'my_custom_header_code' );

アクションについてより詳しく使い方を知りたい方はこちらを参考にされて見てください
ワードプレスの機能を自作プログラムで利用するactionとfilterの仕組み

WordPress ワードプレスのテーマやプラグインの作成・カスタマイズ、エラーの修正等のご依頼・ご相談はWPドクターまでお気軽にお送りください