BizVektorでtitleタグをカスタマイズする方法

BizVektorのカスタマイズ

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

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

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

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

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タグを自由に変更することができます。ページのタイトルとブラウザのタイトルを変えたい方は参考にしてください。