Inc.WordPressWordPressのスラッグ(slug)をヘッダーに英字タイトルとして表示させる方法2019.12.022019.12.02WordPressのスラッグを利用して英字と日本語を組み合わせたヘッダータイトルにする方法をご紹介します。企業サイトやデザインを重視したサイトでよく採用されてる英字と日本語を組み合わせたヘッダータイトルはデザインのアクセントにもなってカッコいいです。FontsなどのサービスによりWEBフォントも気軽に導入できるようになったので、英字タイトル部分のフォントを変えると更にデザインの幅も広がります。SEOを考慮すると投稿タイトルは日本語にするのがベターです。そこで各ページのスラッグを取得して英字タイトルとし、日本語タイトルと組あせて利用します。ページ数が少ないホームページなら各ページ毎にタイトル部分を作ってもさほど手間はかからないのですが、ページ数が多くなるとタイトルの変更作業をする度にHTMLを修正する必要がありとても面倒です。得して、英字タイトルとして使用します。スラッグは英数字とハイフンのみ英字タイトルの場合、単語間にスペースを挿入したいことがあります。関数でスペースに置換します。スラッグの変更は以下のようにパーマリンクの編集をクリックして行えます。基本的なルールスラッグはアルファベットと数字とハイフンまたはアンダースコアを使用スペースはハイフンまたはアンダースコアを置換して表示アルファベットの大文字はスラッグ取得後にCSSかPHPで変換して対応カスタム投稿タイプの投稿タイプ名はアンダースコを使用カスタム投稿タイプのアーカイブページには投稿タイプ名を取得して表示させます。関数の第一引数の投稿タイプ名にハイフンを使用すると問題が生じるので、アンダースコア(アンダーバー)を使用します。内では、取得した投稿タイプ名に含まれるアンダースコアをスペースに置換します。カスタム投稿タイプの投稿タイプ名以外はハイフンを使用します。アンダースコア(アンダーバー)ではなくハイフンとするのはSEO的にGoogleが推奨する方法に統一させるためです。大文字はCSSのtext-transformで対応スラッグは小文字で取得されるため、そのままでは大文字で表示できません。取得したスラッグを英字タイトルとして利用する際に、大文字にしたり、頭文字だけ大文字にしたい場合はCSSのtext-transformプロパティで変換させます。関数でも大文字に変換できます。似たような大文字変換ができる関数は以下の通り。文字列を大文字にする用途に応じてPHPの関数で変換するか、CSSのtext-transformプロパティで変換するか選びます。今回はシンプルにCSSのtext-transformで変換します。投稿者名のニックネームは日本語で入力される可能性があります。このため投稿者別アーカイブページの英字タイトル部分は英字入力のユーザー名を取得します。個別の記事ページ(シングルページ)、固定ページ、記事一覧ページ(アーカイブページ)のタイトルを英字と組み合わせるため、各ページのスラッグを取得します。1.6rem;}必要に応じて分岐条件を変更してください。まとめあとは共通のヘッダータイトル表示部分に貼り付けるだけ。投稿ページにカスタムフィールドでサブタイトルを作り取得する方法よりも、アーカイブまで含めた各ページに細かく対応できます。WordPressのスラッグ(slug)をヘッダーに英字タイトルとして表示させる方法Contactお問い合わせご相談、お打ち合わせ、お見積りなどお気軽にお問い合わせください。