こんにちは！Office163スタッフのあべちゃんです！
皆さんWordPressでオリジナルテーマを作成していて「トップページのロゴはH1がいいけど、下層ページのロゴはdivにしたいなぁ」なんて時ありませんか？
今回はそんな「ロゴのマークアップをトップページとそれ以外で分けてマークアップする方法」についてお話したいと思います。

ロゴのマークアップはサイトによって色々ある

ロゴのマークアップって、単純そうで、複雑ですよね（小物感）。

よくあるパターンとしては
①トップページのH1はロゴ、下層ページではロゴはdiv等で見出しがH1
②ロゴは常にH1、見出しはH2から
③ロゴも見出しもH1
④ロゴはdiv等でトップページのH1はメインコピー
あたりではないかと思います。

そして「常にロゴのマークアップが変わらない」ならいいのですが「ページによってマークアップが変わる」場合、コードを書き換えなければなりません。

条件分岐で表示するコードを分けよう

やりたいこと
ロゴ：トップページはH1、それ以外のページはdivでマークアップ
記載ファイル：header.php

今回はheader.phpにロゴに関する記述をするので、そのまま<h1>ロゴだよ！</h1>など記載してしまうとトップページでも下層ページ（投稿ページや固定ページ等）でもロゴのマークアップがH1になってしまいます。
そうなると「header.phpにロゴの記述をまとめたいけど、どうやってトップページだけ分けるの？」となりますよね。
そこで使うのが条件分岐です。条件分岐を使ってトップページとそれ以外を判別することでHTMLを出し分けることができます。

トップページを判別する条件分岐

今回使う条件分岐はこちら。トップページかそれ以外かで出しわけます。

<?php if ( is_front_page() || is_home() ): ?>
　表示されているのがトップページの時の内容
<?php else : ?>
　表示されているのがトップページ以外の時の内容
<?php endif; ?>

これは「もしフロントページ（トップページ）であれば〜」という条件分岐になります。
is_front_page()やis_home()に関してはまた別の記事で記載したいと思いますが、こちらで概要を理解していただくといいかと思います。
参考サイト：条件分岐タグ – WordPress Codex 日本語版

ではこのコードに実際表示させたい内容を記載してみましょう。

<?php if ( is_front_page() || is_home() ): ?>
　　　<h1>ロゴが入るよ</h1>
<?php else : ?>
　　　<div>ロゴが入るよ</div>
<?php endif; ?>

これによりトップページではh1、それ以外ではdivによってマークアップされたロゴが表示されるようになります！
ぜひ試してみてください。

まとめ

今回は条件分岐を使用してロゴのマークアップを変更しました。条件分岐では「カテゴリーや」「固定ページ」なども判定できるので場面にあわせて使っていきたいですね！

ライター

あべちゃん

コーディングを中心にウェブ制作を行なっています。初心者さんに寄り添った記事作成を心がけています。タコスが好きで、トウモロコシ粉を常にストックしています。