WordPressのトップページとそれ以外のページでタグを変更する

WordPressのトップページとそれ以外のページでタグを変更する

WordPressでテーマを自作しようとしてトップページ作成から始めたのですが、トップページ以外のページ作成に進んだときに共通して使うテンプレート内のタグが、それ以外のページで重複していました。重複したタグをどのようにして変更したのかを記事にしておこうと思います。

 

トップページとそれ以外のページでタグが重複する

 

WordPressのトップページやそれ以外のページで使用するヘッダー部分は、header.phpにHTMLやPHPを記述してテンプレートを作成します。

そして作成したheader.phpをトップページならindex.phpにWordPressのテンプレートタグで繋げます。それ以外の例えば投稿ページならsingle.phpにテンプレートタグで繋げます。

このとき共通したheader.phpが出力するHTMLタグはトップページでは特に問題なかったのですが、それ以外のページ作成に進んだときに、HTMLタグが重複してました。

 

サイトタイトルのタグがh1の場合

 

WordPressのheader.phpに記述するサイトタイトルはh1でマークアップするかと思います。

 

<h1>
 <a href="<?php echo home_url(); ?>">
 <img src="<?php echo get_template_directory_uri(); ?>/images/logo.png" alt="<?php bloginfo( 'name' ); ?>"/></a>
</h1>

 

上記のコードはサイトタイトルを画像にしていますが、出力したサイトタイトルにマークアップするタグがh1の場合、WordPressのトップページ作成の段階ではタグの重複の問題がなかったのですが、single.phpで投稿ページ、つまりトップページ以外の作成に手を付け始めた段階でサイトタイトルのh1が重複していることが分かりました。

 

投稿タイトルがh1タグと重複してしまう

 

WordPressのトップページ作成のあとに投稿ページ(single.php)作成をして、ページのソースを表示したときに気づきました。

 

サイトタイトルのh1と投稿タイトルのh1で重複している。

 

Advertisement

 

1ページ内にh1タグを一度しか使用してはいけないというルールがないようなので、サイトタイトルと投稿タイトルの h1で重複していても、そのままでもいいかと思いましたがWordPressテーマ作成の練習をしている段階ということもあり、h1はそのページの中で一つにした構造で作成したい願望がありました。

 

WordPressのトップページ以外はタグを変更する

 

サイトタイトルの要素にマークアップしてるh1は、WordPressのトップページ以外にはh1ではないタグになるように変更します。

どうやって変更するのだ?の疑問はWordPressの条件分岐タグとif文で切り替えるとして、それ以前に何タグに変更しよう?というくだらない疑問にぶつかる私です。

 

トップページのサイトタイトルにはh1タグ

 

トップページの場合は始めに自作テーマ作成当初の時のままh1タグにしておきます。

それなので、このあとに条件分岐させるif文でトップページの場合はサイトタイトルをマークアップしてるタグがh1で出力できるようにすることになります。

出力したHTMLが以下のようになるようにです。

 

<h1 class="main-title">
 <a href="http://practice.local"><img src="images/logo.png" alt="practice"/></a>
</h1> 

 

それ以外のページはpタグにする

 

トップページのサイトタイトルのタグをh1としたら、それ以外のページではpタグにします。

出力したHTMLが以下のようになるようにです。

 

<p class="main-title">
 <a href="http://practice.local"><img src="images/logo.png" alt="practice"/></a>
</p> 

 

このとき一体どんなタグを使えばいいのか、私なりの答えが出なかったので、トップページ以外はサイトタイトルをpタグでマークアップすることがSEO的に正しいのかどうか自信がありません。単純に投稿記事の中でh1は投稿タイトルに使用して記事としての強調を優先したかったという理由だけです。

 

Advertisement

 

こうして最終的には、サイトタイトルをマークアップしているタグを条件分岐させることになります。

 

WordPressの条件分岐タグで変更する

 

トップページとそれ以外のページでサイトタイトルにマークアップするタグを変更するようにする場合は、WordPress条件分岐タグを使用するのが一番手っ取り早いです。

 

<?php
if(トップページの場合) {
  出力する内容
} else {
 トップページ以外で出力する内容
}
?>

 

上記のPHPコードのようにif文とWordPressの条件分岐タグで条件式を組み合わせます。

if(もし)「トップページの場合は」という条件に当てはめるときは、その条件下に記述する内容を出力します。

if(もし)「トップページの場合は」の条件に当てはまらない場合には、elseの下でトップページ以外の出力ができるようにします。

 

トップページの場合

 

条件分岐するときにトップページの場合に条件が当てはまるWordPressの条件分岐タグは以下のようにif文と組み合わせて記述します。

 

<?php
if(is_home() || is_front_page()) {
  $title_start = '<h1 class="site-title">';
  $title_end = '</h1>';
} else {
  トップページ以外で出力する内容
}
?>

 

is_homeが「ブログ投稿ページ」がある場合。is_front_pageがフロントページがある場合のWordPress条件分岐タグです。

このときの記述では、is_homeとis_front_pageの間に||を記述します。||は「トップページだけに表示」したい条件にすることができます。

そしてトップページの場合に当てはまる条件の下でh1タグ出力部分の記述をします。

$title_startと$title_endという変数を作成して値はclass属性付きのh1開始タグを$title_startに代入します。そして$title_endの値はh1終了タグを代入します。

 

それ以外のページの場合

 

WordPressのトップページのサイトタイトルをh1にした後は、それ以外のページのサイトタイトルにマークアップするタグ、今回を例にするとpタグでマークアップできるように分岐させます。

 

<?php
if(is_home() || is_front_page()) {
  $title_start = '<h1 class="site-title">';
  $title_end = '</h1>';
} else {
  $title_start = '<p class="site-title">';
  $title_end =  '</p>';
}
?>

 

トップページの場合の条件に当てはまらない場合の内容をelseの部分で記述します。

 

  • $title_startにはp開始タグ
  • $title_endにはp終了タグ

 

このように記述することで条件分岐のコードは完成したので、最後に完成したPHPコードで出力する目的のテンプレートに記述します。今回だとheader.phpです。

 

条件分岐のコードをheader.phpに記述

 

WordPressのサイトタイトルはheader.phpに記述してあるので、トップページとそれ以外でサイトタイトルの設定を変更するのは<header></header>の中のdiv要素とかに記述することになるかと思います。

 

<div id="header">
 <?php
 if(is_home() || is_front_page()) {
  $title_start = '<h1 class="main-title">';
  $title_end = '</h1>';
 } else {
  $title_start = '<p class="main-title">';
  $title_end =  '</p>';
 }
 ?>
 
 <?php echo $title_start; ?>
  <a href="<?php echo home_url(); ?>">
   <img src="<?php echo get_template_directory_uri(); ?>/images/logo.png" alt="<?php bloginfo( 'name' ); ?>"/>
  </a>
 <?php echo $title_end; ?>
</div> 

 

もともとサイトタイトルをマークアップしているh1開始タグと終了タグを外して、以下と差し替えます。

 

  • <h1>は<?php echo $title_start; ?>に差し替え
  • </h1>は<?php echo $title_end; ?>に差し替え

 

この記述により、トップページとそれ以外のページに記述してるget_headerが読み込まれたときに出力するサイトタイトルのタグは条件分岐され、トップページはh1タグで、トップページ以外のページならpタグでマークアップされ変更できます。

 

トップページの場合

 

それ以外の場合

 

まとめ

 

今回使用した条件分岐はWordPressのトップページだけに当てはまる場合とトップページに当てはまらない、それ以外のページで分岐するようにタグを変更するパターンでした。

私のようなWordPressの自作テーマ作成初心者向けの内容かと思いますが、もし今後サイトタイトルのタグを、それ以外のページと切り替えたタグにしたい場合があったときには何かの参考になればと思います。

WordPress使い方カテゴリの最新記事