WordPressでロゴのマークアップをページ毎に変更する方法
こんにちは!Office163スタッフのあべちゃんです!
皆さんWordPressでオリジナルテーマを作成していて「トップページのロゴはH1がいいけど、下層ページのロゴはdivにしたいなぁ」なんて時ありませんか?
今回はそんな「ロゴのマークアップをトップページとそれ以外で分けてマークアップする方法」についてお話したいと思います。
目次
ロゴのマークアップはサイトによって色々ある
ロゴのマークアップって、単純そうで、複雑ですよね(小物感)。
よくあるパターンとしては
①トップページのH1はロゴ、下層ページではロゴはdiv等で見出しがH1
②ロゴは常にH1、見出しはH2から
③ロゴも見出しもH1
④ロゴはdiv等でトップページのH1はメインコピー
あたりではないかと思います。
そして「常にロゴのマークアップが変わらない」ならいいのですが「ページによってマークアップが変わる」場合、コードを書き換えなければなりません。
条件分岐で表示するコードを分けよう
やりたいこと
ロゴ:トップページはH1、それ以外のページはdivでマークアップ
記載ファイル:header.php
今回はheader.phpにロゴに関する記述をするので、そのまま<h1>ロゴだよ!</h1>など記載してしまうとトップページでも下層ページ(投稿ページや固定ページ等)でもロゴのマークアップがH1になってしまいます。
そうなると「header.phpにロゴの記述をまとめたいけど、どうやってトップページだけ分けるの?」となりますよね。
そこで使うのが条件分岐です。条件分岐を使ってトップページとそれ以外を判別することでHTMLを出し分けることができます。
header.phpでなくそれぞれのテンプレートに記載すればいいのでは?という考えもありますが、変更があった場合多くのテンプレートを修正する必要が出てくるのであまりお勧めの方法ではないかと思います。
トップページを判別する条件分岐
今回使う条件分岐はこちら。トップページかそれ以外かで出しわけます。
<?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によってマークアップされたロゴが表示されるようになります!
ぜひ試してみてください。
まとめ
・ロゴのマークアップはいろんな方法があるのでサイトの構成に見合った付け方が必要
・WordPressでは条件分岐を使ってトップページとそれ以外の判別が可能
今回は条件分岐を使用してロゴのマークアップを変更しました。条件分岐では「カテゴリーや」「固定ページ」なども判定できるので場面にあわせて使っていきたいですね!