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
同じカテゴリーのコンテンツ