Learning site for website creation

25:ページごとのタイトルタグを出力

公開日:2019年07月14日 更新日:2019年07月15日

トップページもカテゴリ一覧ページも同じタイトルが出力されています。

ページ内容に合わせたタイトルを出力します。

タイトルタグ出力

「functions.php」に以下のコードを記述することで「タイトル – サイト名」と出力されます。

add_theme_support( 'title-tag' );

「wp_head()」で自動的にタイトルが出力されるため、headタグ内の「title要素」を削除します。

区切り文字変更

function change_title_separator( $separator ) {
  $separator = '|'; return $separator;
}
add_filter( 'document_title_separator', 'change_title_separator' );

functions.php

追記

/*********************************
 タイトルタグを自動出力する
**********************************/
add_theme_support( 'title-tag' );
// サイト名とページタイトルの区切り文字変更
function change_title_separator( $separator ) {
  $separator = '|'; return $separator;
}
add_filter( 'document_title_separator', 'change_title_separator' );

header.php

titleタグを削除します。

変更前

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <title>ポートフォリオサイト</title>
  <link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">
  <?php wp_head(); ?>
</head>

変更後

タイトルタグを削除します。

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">
  <?php wp_head(); ?>
</head>

このページで出てくる関数

WordPress関数は「公式サイトのドキュメント」で確認しましょう。

WordPress関数

add_theme_support() add_filter()

表示確認

以下URLにアクセスするとトップページが表示されます。

http://localhost/WordPressフォルダ名/

以下URLにアクセスするとカテゴリー一覧が表示されます。

http://localhost/WordPressフォルダ名/category/カテゴリースラッグ/

ページに合わせたタイトルが表示されていることを確認しましょう。

トップページタイトル

カテゴリー一覧ヘッダー

 

※欠席者対応:lesson16 – lesson17