WordPressのスラッグ（slug）をヘッダーに英字タイトルとして表示させる方法 | 西尾市・岡崎市・名古屋のホームページ制作はネイビーモバイル

WordPressのスラッグを利用して英字と日本語を組み合わせたヘッダータイトルにする方法をご紹介します。

閉じる

投稿タイトルを英字にせずスラッグを取得して表示
スラッグは英数字とハイフンのみ
カスタム投稿タイプの投稿タイプ名はアンダースコを使用
大文字はCSSのtext-transformで対応
投稿者アーカイブページはユーザーネームを取得
各ページのスラッグとタイトルの取得
まとめ

投稿タイトルを英字にせずスラッグを取得して表示

企業サイトやデザインを重視したサイトでよく採用されてる英字と日本語を組み合わせたヘッダータイトルはデザインのアクセントにもなってカッコいいです。
Google FontsなどのサービスによりWEBフォントも気軽に導入できるようになったので、英字タイトル部分のフォントを変えると更にデザインの幅も広がります。
ですが、SEOを考慮すると投稿タイトルは日本語にするのがベターです。
そこで各ページのスラッグを取得して英字タイトルとし、日本語タイトルと組あせて利用します。

ページ数が少ないホームページなら各ページ毎にタイトル部分を作ってもさほど手間はかからないのですが、ページ数が多くなるとタイトルの変更作業をする度にHTMLを修正する必要がありとても面倒です。
なるべく処理は自動化して作業コストを下げられるように、投稿ページだけではなくアーカイブページのタイトルまで含めてスラッグを取　得して、英字タイトルとして使用します。

スラッグは英数字とハイフンのみ

英字タイトルの場合、単語間にスペースを挿入したいことがあります。
そこで、スラッグ名の記述ルールを決めておき、スラッグの取得後に str_replace() 関数でスペースに置換します。

スラッグの変更は以下のようにパーマリンクの編集をクリックして行えます。
スラッグの入力方法

基本的なルール

スラッグはアルファベットと数字とハイフンまたはアンダースコアを使用
スペースはハイフンまたはアンダースコアを置換して表示
アルファベットの大文字はスラッグ取得後にCSSかPHPで変換して対応

カスタム投稿タイプの投稿タイプ名はアンダースコを使用

カスタム投稿タイプのアーカイブページには投稿タイプ名を取得して表示させます。
カスタム投稿タイプを登録する register_post_type() 関数の第一引数の投稿タイプ名にハイフンを使用すると問題が生じるので、アンダースコア（アンダーバー）を使用します。
このためカスタム投稿タイプのアーカイブページの分岐条件 is_post_type_archive()) 内では、取得した投稿タイプ名に含まれるアンダースコアをスペースに置換します。

カスタム投稿タイプの投稿タイプ名以外はハイフンを使用します。アンダースコア（アンダーバー）ではなくハイフンとするのはSEO的にGoogleが推奨する方法に統一させるためです。

大文字はCSSのtext-transformで対応

スラッグは小文字で取得されるため、そのままでは大文字で表示できません。
取得したスラッグを英字タイトルとして利用する際に、大文字にしたり、頭文字だけ大文字にしたい場合はCSSのtext-transformプロパティで変換させます。

capitalize – 単語の先頭文字を大文字にする
uppercase – 全ての文字を大文字にする

PHPで変換する場合

PHPの strtoupper 関数でも大文字に変換できます。
似たような大文字変換ができる関数は以下の通り。

strtoupper() – 文字列を大文字にする
strtolower() – 文字列を小文字にする
ucfirst() – 文字列の最初の文字を大文字にする
ucwords() – 文字列の各単語の最初の文字を大文字にする
mb_strtoupper() – 文字列を大文字にする

用途に応じてPHPの関数で変換するか、CSSのtext-transformプロパティで変換するか選びます。今回はシンプルにCSSのtext-transformで変換します。

投稿者アーカイブページはユーザーネームを取得

投稿者名のニックネームは日本語で入力される可能性があります。このため投稿者別アーカイブページの英字タイトル部分は英字入力のユーザー名を取得します。

各ページのスラッグとタイトルの取得

個別の記事ページ（シングルページ）、固定ページ、記事一覧ページ（アーカイブページ）のタイトルを英字と組み合わせるため、各ページのスラッグを取得します。

<?php
$hero_en_title = null;
$hero_title = null;

if(is_front_paeg() || is_home()){
  // ブログインデックス
  $hero_en_title = str_replace('_' , ' ', get_post( get_option( 'page_for_posts' ) ) -> post_name );
  $hero_title = strip_tags(get_post( get_option( 'page_for_posts' ) ) -> post_title);
}elseif(is_category()){
  // 投稿カテゴリ
  $hero_en_title = str_replace('_' , ' ', $wp_query->queried_object->slug);
  $hero_title = strip_tags(get_the_archive_title());
}elseif(is_post_type_archive()){
  // 投稿アーカイブ
  $hero_en_title = str_replace('_' , ' ', $wp_query->queried_object->name);
  $hero_title = strip_tags(get_the_archive_title());
}elseif(is_author()){
  // 投稿者別アーカイブ
  $hero_en_title = str_replace('_' , ' ', get_queried_object()->data->user_nicename );
  $hero_title = strip_tags(get_the_archive_title());
}elseif(is_archive()){
  // タクソノミーアーカイブ
  $hero_en_title = str_replace('_' , ' ', $term);
  $hero_title = strip_tags(get_the_archive_title());
}elseif(is_page()){
  // 固定ページ
  $hero_en_title = str_replace('-' , ' ', attribute_escape( $post->post_name ) );
  $hero_title = esc_html( strip_tags( get_the_title() ) );
}elseif(is_singular()){
  // シングル
  $hero_en_title = str_replace('-' , ' ', attribute_escape( $post->post_name ) );
  $hero_title = esc_html( strip_tags( get_the_title() ) );
}elseif(is_404()){
  // エラーページ
  $hero_en_title = '404';
  $hero_title = '404 not found';
}
?>

HTML

<h1 class="title">
   <div class="title__main"><?php echo $hero_en_title; ?></div>
   <div class="title__sub"><?php echo $hero_title; ?></div>
</h1>

CSS

@import url('https://fonts.googleapis.com/css?family=Tomorrow:700&display=swap');

.title{
  margin-bottom: 1.6rem;
}
.title__main{
  line-height: 1.2;
  font-size: 4.0rem;
  font-family: 'Tomorrow', sans-serif;
  text-transform: uppercase;
}
.title__sub{
  font-size: 1.6rem;
}

必要に応じて分岐条件を変更してください。

まとめ

あとは共通のヘッダータイトル表示部分に貼り付けるだけ。
投稿ページにカスタムフィールドでサブタイトルを作り取得する方法よりも、アーカイブまで含めた各ページに細かく対応できます。