1枚のheader.phpを共通利用するWordPressで、h1タグを動的に出し分ける方法。2種類の方法がある。

ひとつは、TOPページやアーカイブページではブログ名をh1タグで囲い、投稿ページや固定ページではページタイトルをh1で囲うようにする方法。

ふたつめは、条件によって出力する内容を複数連ねて記述する方法。

h1タグを動的に出し分けるheader.phpの書き方

<?php $html_tag = (is_home() || is_front_page() || is_archive() || is_404()) ? 'h1' : 'div'; ?>
<<?php echo $html_tag; ?> class="blogname">
	<a href="<?php echo esc_url(home_url()); ?>">
		<img src="<?php echo get_template_directory_uri(); ?>/img/sitelogo.png" alt="">
	</a>
</<?php echo $html_tag; ?>>

コード解説

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

h1タグを動的に出し分けているコード。

表示しているページがホーム or フロントページ or アーカイブ or 404 ならばh1で囲い、それ以外ならdivで囲うよう指示している。

ソースの確認

ブラウザでソースを表示させると、トップページではサイトロゴがh1となり、

<h1 class="blogname">
  <a href="https://sample.com">
    <img src="https://sample.com/wp-content/themes/my-theme/img/sitelogo.png" alt="サイト名">
  </a>
</h1>

投稿ページではページタイトルがh1となっている。

<h1>【WordPress】h1タグをページの種類によって出し分ける方法</h1>

条件によって出力する内容を複数連ねて記述する方法

if (is_front_page() && is_home()) {
  // デフォルトホームページ
} elseif (is_front_page()) {
  // 固定ペーシを使ったホームページ
} elseif (is_home()) {
  // ブログページ
} else {
  // それ以外
}

補足

サイトロゴのimgはbase64でエンコードされていた。

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAAAoAQAAAACTZ4ixAAAAAnRSTlMAAHaTzTgAAAASSURBVDjLY2AYBaNgFIwCCAAABBAAAYU/qnIAAAAASUVORK5CYII=" alt="サイト名" data-src="https://sample.com/wp-content/themes/my-theme/img/sitelogo.png" decoding="async" class="lazyload" width="200" height="40">

原因は、プラグインのEWWW Image Optimizerの機能の一つで、遅延読み込み設定がONになっていることだった。

OFFにすると、

エンコードされないソースに戻った。

<h1 class="blogname">
  <a href="https://sample.com">
    <img src="https://sample.com/wp-content/themes/my-theme/img/sitelogo.png" alt="すなこと">
  </a>
</h1>

EWWW Image Optimizerを調べると以下の解説を見かけた。

EWWW Image Optimizerの機能では、base64エンコードされた透過画像をかませた形でクラスlazyloadをトリガーに遅延読み込み処理を実施していたようです。

https://blog.webico.work/preview-lost-image

EWWW Image Optimizerは、EXIF情報の削除のみ有効化し、他の機能は無効化した。