WordPress4.4以降のtitleタグをフィルターフックを使ってカスタムフィールドで入力した内容に置き換える方法

2017年7月19日WordPressフィルターフック, カスタマイズ

今までのワードプレスではタイトルタグの中身を<?php wp_title(); ?>で出力していましたが、バージョン4.4以降からはfunctions.phpに下記の記述をする事で、わざわざタイトルタグをheadタグ内に記述せずとも自動でタイトルタグが生成される仕組みができました。

/* タイトルタグ表示*/
add_theme_support( 'title-tag' );
  • 既にwp_titleがheadタグ内に記述されている場合はタイトルタグが2重になってしまうのでwp_titleを削除する事。

まあそれは良いんですが私のこのブログでのカスタマイズの一環として、記事のタイトルタグの内容を別に作ったカスタムフィールドに記載した内容に置き換える、という事をしていました。

何でそんな事をしていたのかを説明すると、記事のタイトルとなるh1タグはキーワードを詰め込みつつ記事の内容がある程度分かるほどの文章にしたい。しかしGoogleやyahooといった検索エンジンで表示されるtitleタグは32文字までに文字数を抑えたい。という考えからです。

titleタグとh1タグを別々に設定する事で結果どの程度SEO的に効果があるのかは正直分かりませんが、私はその方が見やすいと思ってるのでこんな事をやっています。

  • 検索エンジンに表示されるタイトルタグの文字数は大体32文字まで。

話を戻しますが上記のadd_theme_supportでタイトルタグを自動生成する方法だと、今までのようにtitleタグの内容を条件分岐でカスタムフィールドの内容に置き換えるという事ができないのでこの仕組みを使うことに二の足を踏んでいました。

WordPress4.4以降のタイトルタグをカスタムフィールドで入力した内容にフィルターフックで置き換える

ちなみに今までのheadタグ内に記述していたwp_titleのカスタムフィールドでの置き換える時の条件分岐はこのように指定していました。

<title><?php $ctm = get_post_meta($post->ID, 'my_title', true);?>
<?php if(empty($ctm)):?>
<?php wp_title(); ?>
<?php else:?>
<?php echo post_custom('my_title');?>
<?php endif;?></title>

正確にはもう少し違うカスタマイズをしてましたが話がややこしくなりそうなので簡単に書いてます。『my_title』というフィールド名のカスタムフィールドに文章を入力すると、その内容がtitleタグの内容に丸々置き換わります。何も入力しなければ記事のタイトルがtitleタグに反映されます。

ここから本題。

WordPress4.4以降のadd_theme_supportでtitleタグを自動生成する方法でカスタムフィールドの内容を置き換える方法は、こちらの『WordPress4.4以降でカスタムフィールドを使い、投稿ごとにタイトルタグを自由に編集する方法(フィルターフック使用)』という記事で紹介されてました。

実際にこのブログで使わせてもらったコードを引用させて頂きます。下記のコードをfunctions.phpに記述しました。

function mypace_custom_title( $title ){
  if( is_singular() ){ //タイトルタグカスタマイズの範囲を条件分岐で指定
     $post_id = get_the_ID(); //投稿IDを取得
     $my_title = get_post_meta( $post_id, 'my_title', true ); //カスタムフィールドの値を取得
     if( $my_title ){ //カスタムフィールドに値がある時
        return esc_html( $my_title ); //エスケープして出力
    }
  }
  return $title; //条件外の時はWordPressコアで定義されているタイトルのまま出力
}
//WordPressのバージョンを判定
global $wp_version;
if ( version_compare( $wp_version, '4.4', '>=' ) ) {
  add_filter( 'pre_get_document_title', 'mypace_custom_title', 10, 2 ); //新フィルターフックで処理を上書き
} else { // if ( $wp_version < '4.3.x' )
  add_filter( 'wp_title', 'mypace_custom_title', 10, 2 ); //旧フィルターフックで処理を上書き
}

これで『my_title』というフィールド名のカスタムフィールドに文章を入力すると、その内容がadd_theme_supportで自動生成したtitleタグの内容に丸々置き換わります。何も入力しなければ記事のタイトルがtitleタグに反映されました。

ありがてぇ!!

やりたかった事がそのまま実現できました。『マイペースクリエイターの覚え書き』様、ありがとうございました。