2018.07.23

WordPressでページによってサイトロゴのタグをh1にしたりpにしたりするコード

コーダーのhoshidaです。Webサイト左上のサイトロゴをHTMLでマークアップする際、流派やサイト構成にもよりますが、トップページではh1タグ、トップ以外ではpタグを使用するという状況があります。

これがWordPressで構築するサイトで、かつヘッダー部分がheader.phpなどに記述されるような場合、タグをページによって切り替える必要があります。そのコードを紹介します。

コードその1 タグのみを切り替える。

<?php if(is_front_page()){ echo '<h1 id="logo">';}else{ echo '<p id="logo">';} ?>
  <a href="/">サイトロゴ</a>
<?php if(is_front_page()){ echo '</h1>';}else{ echo '</p>';} ?>

トップページかどうか判定してh1とpを出しわけているだけです。

コードその2 丸ごとを切り替える。

<?php if(is_front_page()){ ?>
  <h1 id="logo">
    <a href="/">サイトロゴ</a>
  </h1>
<?php }else{ ?>
  <p id="logo">
    <a href="/">サイトロゴ</a>
  </p>
<?php } ?>

こちらの方法でも問題ありません。分岐処理が少なくてスマートです。私は「<a href=”/”>サイトロゴ</a>」部分を頻繁に修正するときにどちらかを修正し損ねることがあるので上のコードを使いがちですが、お好みで判断してください。

たまに、この処理を怠ってトップページにh1が無いというサイトがあります。h1の扱いはいろいろ流派がありますが、トップページに存在しないというのはアウトーー！！なので、WordPressでheader.phpなどにロゴを記載している場合は必ず記述しましょう。

なお、トップページの判断は「is_front_page()」を使用していますが、これはサイトの作りによって変わりますので詳しくは以下の記事をご覧ください。

Maromaro Blog