calendarcodediamondfacebookfingerglobalgoogleplushatenahomepagetopplainpocketrssservicetwitterwordpresshome2searchfoldernext-arrowback-arrowfirst-arrowlast-arrow

WordPress：タイトルを自在にカスタマイズする方法

  • 作成：2019/03/11
  • 更新：2019/03/12
  • WordPress

WordPress Title Custom

WordPress4.4以降においてtitleタグを自動出力するには、非推奨のwp_title()関数の代わりに、テーマの機能を設定する関数add_theme_support( 'title-tag' );をfunctions.phpに記述します。functions.phpの中に書くことで保守性もよくなります。

PR
IT/WEB業界への転職なら
Sponsored Link

WordPress4.4以降のtitleの記述方法

functions.php

function mytheme_set() {
  add_theme_support( 'title-tag' );
}
add_action( 'after_setup_theme', 'mytheme_set' );

after_setup_themeは全てのテーマが読み込まれた後にテーマの機能を設定するフックです。タイトルが重複するのでheader.phpにはtitleタグを記入しないようにします。

これでhead内にタイトルが自動で出力されますが、body内にタイトルを表示したい場合は、wp_get_document_title()をテンプレートファイルの任意の場所に記述します。

<?php echo wp_get_document_title(); ?>

document_title_parts

document_title_partsはタイトルの一部をフィルタリングするフックです。

タイトルをページごとに変更したい場合はdocument_title_partsをfunctions.phpに記述します。

add_filter('document_title_parts', '関数名');

条件分岐させる基本的な形

function 関数名($title){
  if(条件){
    $title['title'] = 変更後のタイトル値 ;
  }
  return $title;
};
add_filter('document_title_parts', '関数名');

document_title_partsの$titleパラメータ

* titleは閲覧したページタイトル
* taglineはホームページのサイト説明
* pageは番号付きページ番号
* siteはホームページにない場合はサイトのタイトル

文字「○ページ目」を削除

情報を削除するにはunsetを使います。例えば、ブログ一覧ページなどで、ページ番号の情報（例：ページ 2）をタイトルから削除する場合はこのように書きます。

function remove_title_pagenation($title){
  unset( $title['page'] );
  return $title;
};
add_filter('document_title_parts', 'remove_title_pagenation');

サイトの説明を削除

ホームページのキャッチフレーズ（サイトの説明）を削除する場合は、このような記述になります。

function remove_title_description ( $title ) {
  if ( is_home() || is_front_page() ) {
    unset( $title['tagline'] );
  }
  return $title;
}
add_filter( 'document_title_parts', 'remove_title_description', 10, 1 );

検索結果ページの和欧混植を置換・変更する

検索結果のページタイトルはデフォルトでダブルクォーテーションが付与されているので和欧混植になっています。これを以下のように日本語の記述名に置換してみましょう。

変更前：“○○” の検索結果
↓
変更後：「○○」を検索しました

// ページタイトル「検索結果」の一部を変更する
function change_title($title){
  if(is_search()){
    $search = array('&#8220;','&#8221;','の検索結果');
    $title = str_replace( $search, '', $title );
    $title['title'] = '「' . $title['title'] . '」を検索しました';
  }
  return $title;
};
add_filter('document_title_parts', 'change_title');

条件分岐タグので検索結果を指定して、消したい文字を配列に入れて、str_replaceで置換しています。条件分岐タグを変えていけば、アーカイブ・404・カスタムポストなどのページも好きなように変更できます。

検索結果だけ変更したい場合は、サイト内検索を行ったときのクエリ文字列を取得するget_search_query()を使うと記述量を減らすことができます。

function change_title($title){
  if(is_search()){
    $title['title'] = '検索結果：' . get_search_query();
  }
  return $title;
};
add_filter('document_title_parts', 'change_title');

404ページのタイトルを変更する

条件分岐で404ページなどを追加して個別に変更します。

// ページごとにタイトルを変更する
function change_title($title){
  if(is_search()){
    $title['title'] = '検索結果：' . get_search_query();
  } elseif(is_404()){
    $title['title'] = 'お探しのページは見つかりません' ;
  }
  return $title;
};
add_filter('document_title_parts', 'change_title');

以上、SEO対策にもなる、最近のWordPressタイトルカスタマイズでした。

WordPressカスタマイズに便利なテクニック一覧

スポンサード リンク

この記事を書いた人
投稿者：commte

株式会社コムテ代表取締役。2015/8：弊社にてWeb制作スクールを開始。 WebDesign + Web制作 (最新情報 配信)。おっとりした話し方をするおっさん。

URL：西田 鉄平
この後によく読まれている記事

Comments

Leave a Comment

コメントする

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。