wp_title(タイトルタグ)をページタイプごとに分岐させて表示する、ワンランク上のテクニック
こんにちは！
はじめに、この記事の概要と目次です。本編は少しスクロールすると始まります。
今回は、WordPressの自作テーマ開発やテーマのアレンジで、タイトルタグをより最適化するテクニックを紹介します。タイトルを整頓することでミスが減らせたり、クローラーに合わせたユーザーフレンドリーなタイトルが設定できるので、SEO効果アップも期待できます。コピペもたくさん用意しているので、テーマの編集が苦手な方にも参考になると嬉しいです。
目次
今回編集するところ
今回の記事で触れるところは、タイトル(wp_title)の一点です。
タイトルはホームページや各ページの最も重要な部分の1つで、主に検索結果に表示されるタイトルや、ブックマーク追加時の名前に使われています。
タイトルタグはSEO最適化の面でも、言うまでもなくめちゃくちゃ大切なのですが、初めに設定したら、意外とそのあと触らない部分でもあります。
そこで今回は、「どうせ触らないなら、タイトルタグをいい感じに振り分けておこう」をテーマに紹介していきたいと思います。
テンプレートパーツは足りなくてもOK
特にWordPressテーマを自作している人の中には、category.phpやarchive.phpなど、細かいテンプレートを用意していない方もいると思います(僕がそうなので)。
ですが、その場合もindex.phpさえきちんと書いていれば、今回使用するコードでも、WordPress側がトップページか、カテゴリページかを振り分けてくれるため、気にせず使うことができます。
タイトルタグの基本コード
タイトルタグの基本のコードの確認です。あくまで一例なので、設定されているテーマや、参考書等により多少違う場合がありますが、気にしなくて大丈夫です。
|
1 2 3 4 |
<title><?php bloginfo('name'); ?> | <?php bloginfo('description'); ?></title> // ①トップページ <title><?php wp_title(''); ?> | <?php bloginfo('name'); ?></title> // ②記事 |
①トップページの場合は、「サイトのタイトル｜キャッチフレーズ」の人が多いかなと思います。ご自身の設定は、WordPressダッシュボードの「設定」→「一般」から確認できます。
記事の場合は、先に記事のタイトルを表示させるサイトが多く、②のようなコードが主流です。
使用したテンプレートタグと、その用途はこちらです。
- bloginfo(‘name’)：サイトのタイトルを取得
- bloginfo(‘description’)：サイトのキャッチフレーズを取得
- wp_title(”)：記事のタイトルを取得
それではここから、本題に入ります。テーマの編集が苦手な方や、簡単に使いたい方向けに、コピペ用コードもたくさん用意したので、ご自身のサイトに合わせて、色々試してみてください！
分岐するwp_titleの基本型
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<title> <?php if(is_home() || is_front_page()): ?> <?php bloginfo('name'); ?> | <?php bloginfo('description'); ?> <?php elseif(is_category() || is_tag()): ?> <?php wp_title(''); ?>に関する記事 | <?php bloginfo('name'); ?> <?php elseif(is_archive()): ?> <?php echo get_query_var('year') . '年' . get_query_var('monthnum'); ?>月の記事 | <?php bloginfo('name'); ?> <?php else: ?> <?php wp_title(''); ?> | <?php bloginfo('name'); ?> <?php endif; ?> </title> |
はじめに、if(もしも)を使って、主なページタイプを分岐させた基本型です。それぞれのタグと関連するページタイプは、下記を参考にしてください。
- is_home：トップ画面
- is_front_page：トップページに任意の固定ページを設定している場合
- is_category：カテゴリアーカイブページ
- is_tag：タグアーカイブページ
- is_archive：年月別アーカイブページ
- else(その他)：その他のページ(今回は記事・固定ページなど)
また、ホームとフロントページ、カテゴリとタグの間にある2本の縦棒(||)は、「または」を表しています。
対して、wp_titleとbloginfoの間などにある1本の縦棒(|)は、見栄えを良く見せるための、ただの飾りです。こちらは好みに合わせて「-」ハイフンや、「>」大なり記号に変えて大丈夫です。
トップページのタイトル
|
1 2 3 4 5 6 7 8 |
<title> <?php if(is_home() || is_front_page()): ?> <?php bloginfo('name'); ?> | <?php bloginfo('description'); ?> ... <?php endif; ?> </title> |
アレンジ例
トップページは、シンプルな構成で設定しています。もしここでのキャッチフレーズを変えたい場合や、タイトル表記を変えたい場合は、以下のように、description/nameの箇所を直接編集します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
// サイトのキャッチフレーズを変えたい場合 <title> <?php if(is_home() || is_front_page()): ?> <?php bloginfo('name'); ?> | タイトル用のオリジナルのキャッチフレーズを設定 ... <?php endif; ?> </title> // サイトタイトルにここだけ手を加えたい場合 <title> <?php if(is_home() || is_front_page()): ?> タイトル用のオリジナルのサイトタイトル | <?php bloginfo('description'); ?> ... <?php endif; ?> </title> |
もちろん、サイトタイトルと説明文の、両方を変えることもできます。
カテゴリとタグアーカイブのタイトル
|
1 2 3 4 5 6 7 8 9 10 |
<title> <?php if(is_home() || is_front_page()): ?> ... <?php elseif(is_category() || is_tag()): ?> <?php wp_title(''); ?>に関する記事 | <?php bloginfo('name'); ?> ... <?php endif; ?> </title> |
カテゴリアーカイブとタグアーカイブページの例では、タイトルは同じ形(〜に関する記事)に設定しています。
アレンジ例
カテゴリとタグの分岐を、さらに細分化したバージョンです。それぞれの表記を変えたい場合に便利です。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<title> <?php if(is_home() || is_front_page()): ?> ... <?php elseif(is_category()): ?> <?php wp_title(''); ?>カテゴリの記事 | <?php bloginfo('name'); ?> <?php elseif(is_tag()): ?> <?php wp_title(''); ?>タグの記事 | <?php bloginfo('name'); ?> ... <?php endif; ?> </title> |
また、カテゴリ名やタグ名は固有名詞なことも多いので、かぎかっこなどで囲うのもおすすめです。ユーザー側が、「何のカテゴリなのか」わかりやすくなります。
|
1 2 3 4 5 6 7 8 9 10 11 |
<title> <?php if(is_home() || is_front_page()): ?> ... <?php elseif(is_category()): ?> 「<?php wp_title(''); ?>」カテゴリの記事 | <?php bloginfo('name'); ?> <?php elseif(is_tag()): ?> タグ「<?php wp_title(''); ?>」がついた記事 | <?php bloginfo('name'); ?> ... <?php endif; ?> </title> |
年月別アーカイブページのタイトル
|
1 2 3 4 5 6 7 8 9 10 |
<title> <?php if(is_home() || is_front_page()): ?> ... <?php elseif(is_archive()): ?> <?php echo get_query_var('year') . '年' . get_query_var('monthnum'); ?>月の記事 | <?php bloginfo('name'); ?> ... <?php endif; ?> </title> |
年月別のアーカイブページでは、日本語の関係でうまく西暦と月が抽出できないため、get_query_var(任意の値を取得)を使って、西暦と月を取り出しています。
その他のページのタイトル
|
1 2 3 4 5 6 7 8 9 |
<title> <?php if(is_home() || is_front_page()): ?> ... <?php else: ?> <?php wp_title(''); ?> | <?php bloginfo('name'); ?> <?php endif; ?> </title> |
最後に、上記以外のページでは、投稿時に設定した「記事タイトル」が反映されるように設定しています。
「その他」に該当するのは主に「投稿記事」と「固定ページ」で、elseを使う構文で残り全てのページに対応しています。
さらにアレンジしてみよう
投稿記事と固定ページを細分化
シンプルな型では「投稿記事」と「固定ページ」で同じスタイルを取っていましたが、さらに細分化したい方は、こちらのコードが有効です。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<title> <?php if(is_home() || is_front_page()): ?> ... <?php else: ?> <?php wp_title(''); ?> | <?php bloginfo('name'); ?> <?php endif; ?> ↓ <?php if(is_home() || is_front_page()): ?> ... // is_singleで投稿記事のみに対応 <?php elseif(is_single()): ?> // 投稿記事用 <?php wp_title(''); ?> | <?php bloginfo('name'); ?> // is_pageで固定ページのみに対応 <?php elseif(is_page()): ?> // 固定ページ用 <?php wp_title(''); ?> | <?php bloginfo('name'); ?> <?php else: ?> // その他のページ用 <?php wp_title(''); ?> | <?php bloginfo('name'); ?> <?php endif; ?> </title> |
また、特に投稿記事は、サイトによってはカテゴリを含めたい場合もあります。そのようなときは、投稿記事用に、別途カテゴリを取得するコードを追加します。
|
1 2 3 4 5 6 7 8 9 10 11 |
<title> <?php if(is_home() || is_front_page()): ?> ... <?php elseif(is_single()): ?> // カテゴリも含んだ投稿記事 // 例) 記事名 | カテゴリ名 | サイト名 <?php wp_title(''); ?> | <?php echo get_the_category()[0]->name; ?> | <?php bloginfo('name'); ?> ... <?php endif; ?> </title> |
マルチサイトに対応したタイトル
マルチサイト化させたWordPressのサイトの場合は、子サイトにも親サイトのサイト名を含めるなど、より細かく分岐する必要があります。
例えば、①親サイトではトップページに通常のindex.phpを使用、②子サイトでは固定ページをトップページに設定している(front_page)場合では、以下のような分岐をさせます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<title> // 親サイトのトップページ <?php if(is_home()): ?> <?php bloginfo('name'); ?> | 親サイトの説明文 // 子サイトのトップページ(固定記事をトップページに使用) <?php elseif(is_front_page()): ?> <?php bloginfo('name'); ?>トップ | 親サイト名 // それ以外のページ(親・子サイトの投稿記事や固定ページ、各種アーカイブページ) <?php else: ?> <?php wp_title(''); ?> | <?php bloginfo('name'); ?> // 表示するページが子サイトの場合、以下を追加 <?php if(!is_main_site()): ?> | 親サイト名 <?php endif; ?> <?php endif; ?> </title> |
- 親サイトのトップページ：親サイト名 | 親サイトの説明文
- 子サイトのトップページ：子サイト名 | 親サイト名
- 親サイトの各種記事・アーカイブページ：記事タイトル | 親サイト名
- 子サイトの各種記事・アーカイブページ：記事タイトル | 子サイト名 | 親サイト名
子サイトの記事にも親元のサイト名を含めるため、13行目の!is_main_siteで、「親サイトではない」という分岐を追加して、親サイト名を追加しています。
次に、親サイトも子サイトも、トップページにindex.phpを使う場合は、以下のようなコードになります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<title> // 親サイトのトップページ <?php if(is_home() && is_main_site()): ?> <?php bloginfo('name'); ?> | 親サイトの説明文 // 子サイトのトップページ(固定記事をトップページに使用) // 例) 子サイト名+トップ | 子サイトの説明文 | 親サイト名 <?php elseif(is_home() && !is_main_site()): ?> <?php bloginfo('name'); ?>トップ | <?php bloginfo('description'); ?> | 親サイト名 ... <?php endif; ?> </title> |
違いがわかりにくいですが、is_main_siteの前に「！(エクスクラメーション)」が入っているかどうかで分岐させています。
また、「&&」は「かつ」を表しています。今回は1つめ(3行目〜)で「トップ画面かつ親サイト」、2つめ(6行目〜)で「トップ画面かつ親サイトではない」を条件にしています。
まとめ
今回は、WordPressのタイトルタグに関連する基本型と、ハイブリッドに分岐するアレンジ型をまとめました。色々な例に対応するため、記事作成に半日以上かかった気がします…。
基本的に、初めのほうに触れた「分岐するwp_titleの基本型」をもとに派生しているだけなので、作成中のサイトに合わせて、より良い感じにアレンジしてもらえたら嬉しいです。
コメント