【WordPress】headに子テーマ独自のタグを追加する方法

この記事では、HTMLのheadに子テーマ独自の要素を追加する方法を記載します。

headには、メタタグやCSS参照を記載しますが、子テーマ独自のメタタグやCSS参照を「追加」したい場合があります。例えば、Font awesomeを使いたい場合などです。

あくまで、親テーマで出力するheadの要素の値を変えたい、という場合には使用できません。

手順

1. function.phpに以下のソースコードを追加します。

/*
 * head内にカスタム用のコードを追加する
 */
add_action( 'wp_head', 'custom_addhead', 99);
function  custom_addhead() {
  // 子テーマの独自ヘッダの出力（EOM～EOM;の間にヘッダの内容を記載する）
  $headcustomtag = <<<EOM
  
  <!-- ここに出力内容を記載する -->
  
  EOM;
  
  echo  $headcustomtag;
}

<!-- ここに出力内容を記載する -->の箇所に出力したいコードを記載します。例えば、BulmaとFont awesomeのであれば以下のようになります。

/*
 * head内にカスタム用のコードを追加する
 */
add_action( 'wp_head', 'custom_addhead', 99);
function  custom_addhead() {
  // 子テーマの独自ヘッダの出力（EOM～EOM;の間にヘッダの内容を記載する）
  $headcustomtag = <<<EOM
  
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.0/css/bulma.min.css">
  <link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
  
  EOM;
  
  echo  $headcustomtag;
}

EOM～EOM;はヒア文字列といわれるものです。この間の文字列は改行も含むことができるので、複数行のヘッダを出力したい場合は、EOM～EOM;の間に記載すればOKです。

最後まで読んでいただきありがとうございます。
また読んでくださいませ。
そんじゃーね。

関連記事