ABCウェブエンジニアblog

Webデザイナー/エンジニア/講師のホームページ・ウェブサイト制作の備忘録

【Wordpress】記事ごとにhead内にタグを追加するカスタマイズ方法

f:id:webabc:20210118185640j:image

Wordpressのカテゴリーで分けた多言語化サイト化のご相談を頂きました。

その際に多言語に対応したメタタグを各記事ごとに挿入する必要があったので、調べた内容を記したいと思います。

言語化とは関係なく、記事毎にheadタグ内に何かしら記述を挿入したい時に役立つ情報かと思いますので、ご参考頂ければ幸いです。

ではやっていきましょう。

 

カスタムフィールドを使う

プラグインなどの対応方法もあるかと思いますが、一番シンプルにプラグイン無しでカスタムフィールドを使った実装方法を解説していきます。

①functions.phpに処理を記述

Wordpress管理画面からは「外観>テーマの編集>functions.php」で編集して保存。

または、FTPソフト等用いてファイル管理されている方はそのまま編集してサーバーへ反映してください。

functions.php(最終行の?>より前、PHPの記述内に追記)
// head内にhead_loadカスタムフィールド読み込み
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 . "
";
      }
    }
  }
}
add_action('wp_head', 'head_original_load');

 

②記事のカスタムフィールドに反映したい内容を設定

あとは該当の記事のカスタムフィールドの「head_load」というフィールド名の値として任意のコードを入力して更新すればOK。

管理画面から「投稿の編集」のページで、本文の入力欄の下に「カスタムフィールドを追加」という欄が無い方は、画面左上の「表示オプション▼」をクリックして開くパネルの中、「カスタムフィールド」の項目にチェックしてください。

 

Affingerなど テーマによっては最初から同機能が備わっている場合も

有料テーマなどではインストールしたらすぐに使えるよう多機能になっているものが多いです。

SEOに強いということで有名なAffingerテーマ場合は今回のカスタマイズをしなくても「head内にタグを挿入」というようなカスタムフィールドが存在している場合があります。

こういったカスタマイズが面倒だという方は初期投資として有料テーマを使うというのも手でしょう。

 

各記事ごと以外の対応方法

もし記事ごとに全く異なるコードを入れるのではなくカテゴリーごとに別のコードを足すということであれば、テーマのheader.php内でカテゴリーの条件分岐によるタグ出力を行うとよいかと思います。

もしくは、functions.phpへその処理をさせるという方法の方がスマートかもしれません。

またその処理については追記したいと思います。

 

WordPressの自由なテーマカスタマイズにはPHPの知識も身につけるのがおすすめです。

 

最後までお読みいただきありがとうございました!