WordPress個別サポート

BizVektorで制作中のWordPressサイトでtitleタグを自由に変更する方法を紹介します。投稿や固定ページの「タイトル」として入力した文字とは別の文字をtitleタグに設定することで、SEO対策などにも役立つでしょう。

ページタイトルとtitleタグを違う内容にしたい

ブラウザのタイトルバー(titleタグ)(1)とページのタイトル(2)を違う内容にしたい

スポンサーリンク

WordPressテーマ「LOTUS (TCD039)」

タイトルを入力するフィールドの作成

個々の投稿や固定ページの編集画面でタイトルとは別のカスタマイズ用タイトルを入力できるように、カスタムフィールドを作ります。

Advanced Custom Fieldsプラグインのインストール

「プラグイン」‐「新規追加」メニューからAdvanced Custom Fieldsプラグインをインストール、有効化します。

Advanced Custom Fieldsプラグインのインストール

Advanced Custom Fieldsプラグインのインストール

カスタムフィールドの作成

「カスタムフィールド」メニューを開いて「フィールドグループ」‐「新規追加」メニューをクリックします。

「フィールドグループ」‐「新規追加」メニューをクリック

「フィールドグループ」‐「新規追加」メニューをクリック

任意のタイトル(1)(例:タイトルカスタマイズ用)を入力して、「フィールドを追加」ボタン(2)をクリックします。

カスタムフィールドを追加

カスタムフィールドを追加

開いた画面で次のように設定します。

  • フィールドラベル(1) --- 編集画面に表示する項目名を入力(例:SEOタイトル)
  • フィールド名(2) --- 任意のフィールド名を英数字で入力(例:seo_title)
  • フィールドタイプ(3) --- 「テキスト」を選択
フィールドラベル・フィールド名・フィールドタイプの設定

フィールドラベル・フィールド名・フィールドタイプの設定

画面を下にスクロールして「ルール」を設定します。これは、カスタムフィールドを表示する条件の設定です。タイトルのカスタマイズを投稿のみで行う場合は「投稿タイプ・等しい・post」に設定します。

投稿のみでタイトルのカスタマイズを行う場合

投稿のみでタイトルのカスタマイズを行う場合

固定ページでもタイトルをカスタマイズする場合は、「Add rule group」をクリックします。

「Add rule group」をクリックして条件を追加

「Add rule group」をクリックして条件を追加

2つ目の条件に「投稿タイプ・等しい・page」を追加します。

「投稿タイプ・等しい・page」を追加

「投稿タイプ・等しい・page」を追加

条件は「投稿タイプ・等しい・post」または「投稿タイプ・等しい・page」になります。このカスタムフィールドを投稿または固定ページで使用可能にするということです。うまくいかないときは条件を見直してみましょう。

これで投稿と固定ページのタイトルをカスタマイズできるようになります。画面を上にスクロールして、「公開」ボタンをクリックすると設定完了です。

カスタマイズ用タイトルの入力

投稿または固定ページの編集画面を開いて画面を下にスクロールすると、「SEOタイトル」が入力できるようになっています。試しにtitleタグに表示したい内容を入力してみましょう。

titleタグに設定するタイトルを入力

titleタグに設定するタイトルを入力

「更新」ボタンをクリックすると設定完了です。これで、ページのタイトル(1)とは異なるカスタマイズ用のタイトル(2)を入力できました。

タイトルとは別のカスタマイズ用タイトルを入力できた

タイトル(1)とは別のカスタマイズ用タイトル(2)を入力できた

あとは、カスタマイズ用に入力したタイトル(SEOタイトル)をブラウザのタイトルバー(titleタグ)に反映すれば完了です。

titleタグのカスタマイズ

BizVektorではtitleCustomフックを使うことで、titleタグをカスタマイズすることができます。それには、次のようなコードを子テーマのfunctions.phpなどに入力します。

/* titleタグのカスタマイズ */
function my_titleCustom($value) {
    if (get_field('seo_title')) {
        $value = get_field('seo_title');
    }

    return $value;
}
add_filter('titleCustom', 'my_titleCustom');
functions.phpを編集するときは画面が真っ白になることを想定して必ずFTPツールを使うようにしてください。「外観」-「テーマの編集」メニューで編集するのは危険です。不安な方はWordPress個別サポートにご相談ください。作業をサポートします。

「seo_title」は、作成したカスタムフィールドの名前に合わせて変更してください。

これにより、カスタムフィールド「SEOタイトル」に何か入力されている投稿や固定ページでは、その文字がtitleタグ(1)に設定されます。ページのタイトル(2)とは違った内容になります。

ページタイトルとtitleタグが違う内容になる

ページタイトルとtitleタグが違う内容になる

何も入力されていない場合は通常通り投稿や固定ページのタイトルがtitleタグに反映されます。

カスタマイズ用のタイトルを設定していない場合は変化なし

カスタマイズ用のタイトルを設定していない場合は変化なし

まとめ

このように、カスタムフィールドとtitleCustomフックを使うと、BizVektorで投稿や固定ページのtitleタグを自由に変更することができます。ページのタイトルとブラウザのタイトルを変えたい方は参考にしてください。

この記事をSNSで共有する
WordPressでお困りのときはご相談を
この記事を書いた西沢直木が直接、WordPress個別サポートで対応します。
こんなときはご相談を
  • WordPressの使い方(ページやメニューの作り方を教えてほしい)
  • カスタマイズ(機能の追加やデザイン調整をお願いしたい)
  • トラブル対応(画面真っ白・「ログインできない」を解決したい)
マンツーマンなので相談内容は自由です。いただいた課題をその場で解決、CSSやPHPも目の前で修正します。気軽にご相談ください。
WordPress講座の問い合わせ先

関連記事

WordPressカスタマイズ

WordPressによるサイト作成のヒント

WordPressプラグイン

スポンサーリンク
西沢直木によるWordPress講座の紹介
ホームページ作成講座WordPress個別サポート