WordPressのh1タグを、ページごとに動的に変更させる方法【解説コード付き!】

トップページの場合は、サイト名をh1タグにします。

記事ページや固定ページなどの場合は、記事ページのタイトルや固定ページのタイトルをh1タグにします。


例えば、記事ページのときに、サイト名もh1、記事ページのタイトルもh1だと、SEO的に推奨されてませんので、以下のコードで、h1タグをページごとに変化させてください。



コードのカラーがうまく付きませんので、ご了承ください。

三項演算子を用いた条件分岐

個人的に、コンパクトなコードの、こちらを利用しております。

<?php $tag = (is_home() || is_front_page()) ? 'h1' : 'div'; ?>
<<?php echo $tag; ?> class="logo">
  <a href="<?php echo esc_url(home_url()); ?>">
    <img src="<?php echo esc_url(get_theme_file_uri('img/')); ?>" alt="">
  </a>
</<?php echo $tag; ?>>

解説しますね!

<?php $tag = (is_home() || is_front_page()) ? 'h1' : 'div'; ?>

まず、一行目の部分ですが、

$tag = (条件式) ? (trueの場合) : (falseの場合);
($tag は、任意の名前で問題なしです。)

を表しており、

$tag = (現在のページが、トップページかどうか?) ? (トップページの場合は、h1を$tagに代入) : (トップページ以外の場合は、divを$tagに代入);

というように、現在のページがトップページかどうか?で、$tagに代入する値を決めています。

<<?php echo $tag; ?> class="logo">

二行目の部分は、$tagに代入した値を出力しています。

</<?php echo $tag; ?>>

最後の行(6行目)部分は、二行目と同じで、$tagに代入した値を出力しています。

ちなみに、(is_home() || is_front_page()) の、『 || 』の部分は、『もしくは、または、』という意味です。


三項演算子を用いた条件分岐は、読めない方が多いという、可読性の悪さから、コーディング規約で禁止されているようですが、

エンジニアの僕からすると、「ググって、調べてよ…」と言いたくなるのが、本音です。

if文を使った条件分岐

こちらの方が、スッと理解しやすいかと…。

<?php if (is_home() || is_front_page()) : ?>
  <h1 class="logo">
    <a href="<?php echo esc_url(home_url()); ?>">
      <img src="<?php echo esc_url(get_theme_file_uri('img/')); ?>" alt="">
    </a>
  </h1>
<?php else: ?>
  <div class="logo">
    <a href="<?php echo esc_url(home_url()); ?>">
      <img src="<?php echo esc_url(get_theme_file_uri('img/')); ?>" alt="">
    </a>
  </div>
<?php endif; ?>

SNSでもご購読できます。

コメントを残す

前の記事

次の記事