Jizo Games
WordPress

head内のメタタグの設定を行う

はじめに

head内の記述をいろいろ引き算したので、今度は足し算です。head内のメタタグの設定を行います。

今回も、サイトの見た目はなにも変わらないのでモチベーションが上がらないかもしれませんが、重要な設定なのでしっかりと整えておきましょう。

メタタグの設定を行う

「inc」フォルダに新しく「head.php」ファイルを作成します。

このファイルにhead内の設定をまとめ、あとからfunctions.phpからincludeします。少し長くなりますので、最初に全体のコードを載せておきます。

<?php
if ( ! defined( 'ABSPATH' ) ) exit;

/**
* head内の設定を行う.
*/

function insert_head() {
    if ( is_tag() || is_date() || is_search() || is_404() ):
    ?>
    <meta name="robots" content="noindex">
    <?php endif;
    if ( is_single() && ! is_home() || is_page() && ! is_front_page() ) {
        $title = get_the_title();
        if ( ! empty( $post->post_excerpt ) ) {
            $description = preg_replace( '/\s+/', ' ', strip_tags( $post->post_excerpt ) );
        } elseif ( ! empty( $post->post_content ) ) {
            $description = preg_replace( '/\s+/', ' ', strip_tags( $post->post_content ) );
            if ( function_exists( 'mb_strlen' ) ) {
                $description_count = mb_strlen( $description, 'utf-8' );
                if ( $description_count > 120 ) {
                    $description = mb_substr( $description, 0, 120, 'utf-8' ) . '...';
                }
            } else {
                if ( strlen( $description ) > 120 ) {
                    $description = substr( $description, 0, 120 ) . '...';
                }
            }
        } else {
            $description = get_bloginfo( 'description' );
        }
    } else {
        if ( is_archive() ) {
            $title = single_cat_title( '', false ) . 'の記事一覧';
            $term_description = term_description();
            if ( ! empty( $term_description ) ) {
                $description = strip_tags( $term_description );
            } else {
                $description = single_cat_title( '', false ) . 'の記事一覧ページです。';
            }
        } else {
            $title = get_bloginfo( 'name' );
            $description = get_bloginfo( 'description' );
        }
    }
    ?>
    <title><?php echo $title; ?></title>
    <meta name="description" content="<?php echo $description; ?>">
    
    <link rel="icon" href="<?php echo get_template_directory_uri() . '/favicon.ico'; ?>" sizes="32x32">
    <link rel="icon" href="<?php echo get_template_directory_uri() . '/icon.svg'; ?>" type="image/svg+xml">
    <link rel="apple-touch-icon" href="<?php echo get_template_directory_uri() . '/apple-touch-icon.png'; ?>">
    <link rel="manifest" href="<?php echo get_template_directory_uri() . '/manifest.webmanifest'; ?>">

    <meta name="format-detection" content="telephone=no, email=no, address=no">
    <meta name="color-scheme" content="light dark">
    <meta name="theme-color" content="#007b43">
    <?php
}
add_action( 'wp_head', 'insert_head', 1 );

insert_head()関数での処理を分かりやすくまとめると

  1. テンプレートごとに出力するタイトル・概要をそれぞれ変数に登録する。
  2. HTMLタグ内で出力する。
  3. ファビコンなどを設定する。
  4. そのほかのメタタグを設定する。

といった感じです。

テンプレートごとにタイトル・概要を変数に登録する

まずタグアーカイブや検索結果ページ、404ページなどの場合は検索エンジンにインデックスされない設定をしておきます。

if ( is_tag() || is_date() || is_search() || is_404() ):
?>
    <meta name="robots" content="noindex">
<?php endif;

次に、固定ページや投稿ページの場合の処理です。

if ( is_single() && ! is_home() || is_page() && ! is_front_page() ) {
    $title = get_the_title();
    if ( ! empty( $post->post_excerpt ) ) {
        $description = preg_replace( '/\s+/', ' ', strip_tags( $post->post_excerpt ) );
    } elseif ( ! empty( $post->post_content ) ) {
        $description = preg_replace( '/\s+/', ' ', strip_tags( $post->post_content ) );
        if ( function_exists( 'mb_strlen' ) ) {
            $description_count = mb_strlen( $description, 'utf-8' );
            if ( $description_count > 120 ) {
                $description = mb_substr( $description, 0, 120, 'utf-8' ) . '...';
            }
        } else {
            if ( strlen( $description ) > 120 ) {
                $description = substr( $description, 0, 120 ) . '...';
            }
        }
    } else {
        $description = get_bloginfo( 'description' );
    }
}

タイトルは、記事のタイトルをそのまま取得し$titleという変数に代入しています。

概要については、抜粋があれば抜粋を、なければ本文を取得しています。本文を取得する場合、長くなりすぎないよう先頭から１２０字までを取得するようにしています。なお、本文もない場合はサイト自体の概要が取得されます。

続いて、同じようにアーカイブページの設定を行います。

} else {
    if ( is_archive() ) {
        $title = single_cat_title( '', false ) . 'の記事一覧';
        $term_description = term_description();
        if ( ! empty( $term_description ) ) {
            $description = strip_tags( $term_description );
        } else {
            $description = single_cat_title( '', false ) . 'の記事一覧ページです。';
        }
    } else {
        $title = get_bloginfo( 'name' );
        $description = get_bloginfo( 'description' );
    }
}
?>

タイトルは、「（カテゴリー・タグなどの名前）の記事一覧」になります。概要は、カテゴリー・タグの概要を取得しますが、設定されていないは「（名前）の記事一覧ページです。」となります。

HTMLタグ内で出力する

登録したタイトル・概要を出力します。

<title><?php echo $title; ?></title>
<meta name="description" content="<?php echo $description; ?>">

ファビコン

ファビコンの設定については、こちらの記事を参考にしました。

<link rel="icon" href="<?php echo get_template_directory_uri() . '/favicon.ico'; ?>" sizes="32x32">
<link rel="icon" href="<?php echo get_template_directory_uri() . '/icon.svg'; ?>" type="image/svg+xml">
<link rel="apple-touch-icon" href="<?php echo get_template_directory_uri() . '/apple-touch-icon.png'; ?>">
<link rel="manifest" href="<?php echo get_template_directory_uri() . '/manifest.webmanifest'; ?>">

適切なサイズ・形式の画像ファイルを用意し、テーマフォルダのしかるべき場所に保存しておきましょう。

そのほかのメタタグを設定する

以降の設定は、必ずしも必要ではありません。サイトのコンセプトや目的に合うよう、必要であれば設定してください。

<meta name="format-detection" content="telephone=no, email=no, address=no">

例えば「090-000-000」などと並んでいる数字を、ブラウザが勝手に「電話番号だ！」と認識することを防ぎます。ほかにもメールアドレスや住所などを、勝手に認識しないようにしています。

<meta name="color-scheme" content="light dark">

ライトモード、ダークモードをサポートします。本格的なデザインはCSSで行いますが、CSSが読み込めない場合でも、デフォルトのラジオボタンの色合いを調整してくれるらしいとどこかの記事で読んだ気がします。

<meta name="theme-color" content="#007b43">

Androidのブラウザなどで、アドレスバー部分の背景色になるようです。すべてのブラウザで有効なわけではありませんが、世界観をつくるのにちょうどよいので設定しています。

おわりに

これで、head内に出力されるHTMLはあらかたカスタマイズできました。

ここまでくると、もはや「べた書きでそのままheader.phpに書いてしまっていいのでは？」と思ってしまうくらいです。しかし、それだとWordPressを使う意味もありませんし、wp_head()を使わないとプラグインが動かなくなることもあるみたいなので、headのカスタムはwp_head()を通してするのが間違いありません。

でも、そろそろ見た目もいじりたくなってきたなぁ……

X Facebook LINE Pocket