【WordPress】headタグ中身の設定自動出力

ワードプレスheadタグ内でタイトルや言語を設定から自動で出力するコードの書き方等をメモしていきます

ある程度設定から出力するようにすれば、管理画面で設定を変更することが簡単になります。

  1. 全体
  2. 部分

全体

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
  <meta charset="<?php bloginfo('charset'); ?>">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title><?php wp_title('|', true, 'right'); ?><?php bloginfo('name'); ?></title>
  <meta name="description" content="<?php bloginfo('description'); ?>">

  <!-- OGP設定 -->
  <meta property="og:locale" content="ja_JP">
  <meta property="og:image" content="<?php echo get_stylesheet_directory_uri(); ?>/img/og-image.jpg">
  <meta property="og:title" content="<?php bloginfo('name'); ?>">
  <meta property="og:description" content="<?php bloginfo('description'); ?>">
  <meta property="og:url" content="<?php echo esc_url(home_url('/')); ?>">
  <meta property="og:site_name" content="<?php bloginfo('name'); ?>">
  <meta property="og:type" content="website">
  <meta name="twitter:card" content="summary_large_image">

  <?php wp_head(); ?>
</head>

※ちなみにワードプレスではほとんどのテーマはHeadタグにOGPのプレフィックスをつけてません。別にいれなくてもちゃんと動作しているのでなくて大丈夫らしいです。

部分

<html <?php language_attributes(); ?>>

ワードプレスの設定言語を出力する

<meta charset="<?php bloginfo('charset'); ?>">

bloginfo() はWordPressの管理画面の[設定]で定義された情報を表示します。
WordPressの文字セット、UTF-8が出力されます。

<title><?php wp_title('|', true, 'right'); ?><?php bloginfo('name'); ?></title>

wp_title($sep, $display, $seplocation)
現在のページのタイトルを出力（引数３つ、表示と区切り文字に関連したもの）

  1. $sep（区切り文字）: タイトルと前後のテキストを区切る文字列。デフォルトは空文字列。
  2. $display（表示フラグ）: タイトルを表示するかしないか。trueの場合は表示し、falseの場合は表示しない。デフォルトはtrue。
  3. $seplocation（区切り文字の位置）: 区切り文字の位置列。right（タイトルの右側）またはleft（タイトルの左側）デフォルトは''。

bloginfo(‘name’)
サイト全体のタイトルを出力

例えば、サイト名「●●株式会社」、ページタイトル「プライバシーポリシー」だったら、上のような書き方のときは、タイトルが
「プライバシーポリシー|●●株式会社」
となる。

<meta name="description" content="<?php bloginfo('description'); ?>">

bloginfo(‘description’)
[設定 > 一般]で設定されたキャッチフレーズを表示。

<meta property="og:image" content="<?php echo get_stylesheet_directory_uri(); ?>/img/og-image.jpg">

テーマのフォルダ内から画像を出力する
ogp用の画像は1200px×630px(推奨サイズ)

<meta property="og:url" content="<?php echo esc_url(home_url('/')); ?>">

esc_url()
ユーザー入力や設定値に不正なコードや処理が書かれていた時にエスケープします

home_url()
サイトのトップページURLを出力

<meta name="twitter:card" content="summary_large_image">

Xでのカード表示。summary_large_imageは画像が大きいカード
summaryは画像が正方形、テキストが横についてる形のカードになります。
プレビューは以下より
https://cards-dev.x.com/validator