【WordPress】add_theme_support( ‘title-tag’ );で出力されるタイトルをog:titleに適用する方法

07 Dec

以前にも記事にしていたのですが、WordPressのバージョン4.1以降からfunctions.php等にadd_theme_support( 'title-tag' );と記述しtitleタグを出力するという手法が推奨されました。詳しくは下記リンクからどうぞ！

https://wheelchair-coder.com/109/

この記事を書いた時点では、metaのog:titleには結局wp_title()関数を使い出力しておりました。が、調べてみると別の便利な関数が用意されているようですね！

それでは、紹介していきたいと思います。

コンテンツ一覧

使用する関数

そのページのドキュメントタイトルを取得する関数は、wp_get_document_title();になります。

この関数を使用することにより、add_theme_support( 'title-tag' );で出力されるタイトルの中身を出力することが出来ます。この関数の存在を知るまでは、結局og:titleはwp_title()関数を使い別途出力させておりました。Before, Afterにすると以下のようになります。

Before

<meta property="og:title" content="<?php wp_title( '|', true, 'right' ); bloginfo( 'name' ); ?>">

After

<meta property="og:title" content="<?php echo wp_get_document_title(); ?>">

コンテンツ一覧へ戻る

タイトルの出力内容をカスタマイズ

add_theme_support( 'title-tag' );やwp_get_document_title();で出力されるタイトルは、WordPressによる自動吐き出しです。例えばトップページの場合、以下のように出力されます。

<title>サイト名 – サイトディスクリプション</title>

トップページの時に出力されるタイトルを「サイト名」のみにしたいとしましょう。フィルターフックが用意されておりますので、結果的には以下のようになります。

<?php
function custom_title_text( $results ){
  if( is_home() ){
    $results['tagline'] = '';
  }
  return $results;
}
add_filter( 'document_title_parts', 'custom_title_text', 11 );
?>

解説していきますと、まずcustom_title_text()関数の引数になっている$resultsは配列となっております。トップページを例にすると、以下が配列の中身です。

Array
(
    [title] => サイト名
    [tagline] => ディスクリプション
)

で、今回の関数内ではこのように記述しております。

if( is_home() ){
  $results['tagline'] = '';
}

ホームの場合ディスクリプションを空にするという処理になりますね。これにより、サイトの仕様的に「このページの時はタイトルをこうしたい！」という場合にも対応することができますね！

コンテンツ一覧へ戻る

バージョンが上がるに連れて推奨とされる記述は変わっていきます。こまめにリファレンス等チェックしたり、新たなデフォルトテーマを覗いたりして、置いていかれないようにしなければですね！

About

Links