WordPress：記事ごとにhead内タグを追加する方法

公開日: 2019年09月09日　更新日: 2024年07月03日

はじめに

通常、WordPressでhead内にタグを記述したい場合、テーマヘッダー (header.php)を用いることになると思います。しかしながらこの方法では、サイト全体に影響が及んでしまいます。

特定ページのみに限定したい場合について調べていて、比較的簡単な方法を見つけたのでここに紹介します。

こしもあんずさん
記事やページごとにhead内にタグを追加するカスタマイズ方法
https://www.wapoo-custom.com/custom_manual/head-tag-custum/

カスタムフィールドを用いた手法

テーマのための関数 (functions.php) にコードを追加する。

以下のコードをテーマのための関数 (functions.php) に追加します。[ダッシュボード]-[外観]-[テーマエディター]-[テーマのための関数 (functions.php)]で編集できます。私は、一番最後の位置へ追記しました。

// header内に任意のコードを読み込む
function head_original_load(){
if(is_single() || is_page()){
if($head_original_code = get_post_meta(get_the_ID(), 'head_load', false)){
foreach($head_original_code as $head_code){
echo $head_code . "\n";
}
}
}
}
add_action('wp_head', 'head_original_load');

// header内に任意のコードを読み込む

function head_original_load(){

if(is_single() || is_page()){

if($head_original_code = get_post_meta(get_the_ID(), 'head_load', false)){

foreach($head_original_code as $head_code){

echo $head_code . "\n";

}

add_action('wp_head', 'head_original_load');

ここまでで準備については完了です。

カスタムフィールドに値を設定

該当ページの編集画面を開きます。ここでカスタムフィールドに値を設定することにより、目的が果たされます。

デフォルトではカスタムフィールドが表示されないようなので、表示されるようにします。編集画面右上の表示オプションをクリック、カスタムフィールドにチェックが入っているかどうかを確認します。入っていないようであれば、チェックを入れます。

さて、カスタムフィールドですが、編集画面のずっと下の方にあります。ここの名前の下に新規追加というリンクがあるのでクリックすると、選択式だった名前欄が編集できるようになります。名前に head_load 、値に挿入したいタグを書いて、「カスタムフィールドを追加」します。これでタグの追加は完了です。なお、head_load はリストに登録されるので、2度目以降は新規追加でなく、リストから head_load を選ぶことができます。

まとめ

この手法は、Font Awesome を SVG with JavaScript で使用するために使っています。
名前：head_load
値：<script defer src=”/fontawesome-free-5/js/all.js”></script>

[Top]