WordPressのヘッダーとフッターにMETAタグ、スクリプト、スタイルシートを追加する

2021年8月9日

ヘッダーやフッターにスタイルシートやスクリプトを条件付きで注入したい場合や、テンプレートファイルにHTMLを直接記述するのではなく、PHPでリソースを注入したい場合があります。 WordPressの強力な機能であるadd_filter関数は、スタイルシートやスクリプトをヘッダーやフッターに注入する方法を提供します。その方法をご紹介します。

// Add items to the header!
function shimify() {
	echo '<!--[if lt IE 9]><script src="/wp-content/themes/mytheme/shim.js"></script><![endif]-->';
	echo '<style>/* some styles here */</style>';
	echo '<meta http-equiv="content-type" content="text/html;" />';
}
add_filter('wp_head', 'shimify');

// Add items to the footer
function add_requirejs() {
	echo '<script src="/wp-content/themes/mytheme/requirejs.js"></script>';
}
add_filter('wp_footer', 'add_requirejs');

// Add items to the header!

function shimify() {

echo '';

echo '<style>/* some styles here */</style>';

echo '<meta http-equiv="content-type" content="text/html;" />';

}

add_filter('wp_head', 'shimify');

// Add items to the footer

function add_requirejs() {

echo '<script src="/wp-content/themes/mytheme/requirejs.js"></script>';

}

add_filter('wp_footer', 'add_requirejs');

add_filter 関数は、フィルタタイプ、アクション関数、オプションの優先度を指定して、スタイルシートや JavaScript ファイルを必要な場所に注入する手段を提供します。ホスト名に応じて異なるコンテンツを読み込むWordPressを使用している場合は、異なるGoogle Analyticsアカウントを条件付きで注入することができます。プラグインのスタイルシートやスクリプトを追加する場合は、このテクニックを使用しないでください。これらは、適切なWordPress関数で追加する必要があります。