WordPressでページの種類によって動的にタイトルを表示するページヘッダーを作成する
最終更新日: Update!!
WordPress案件でコーポレートサイトなどを作成する場合には、よくあるコンポーネントに下層ページのページヘッダーがあるかと思います。ページヘッダーにはそのページのタイトルが入るケースが多いようですが、ページの種類別によって動的に出力させたいような場合に使えるテクニックを今回はまとめていきたいと思います。
ここでは、WordPressに搭載されている条件分岐タグ(過去記事「WordPressでよく使うテンプレートタグのまとめ【条件分岐タグ】」を参照)などを用いて、表示されているページの種類をチェックしながら、条件によって出力されるタイトルを変えていくという感じになります。今回はサンプルとしてこのようなHTMLが出力される想定としています。
【HTML】※一部抜粋
is_tax()とhas_term()ではタームを基準にチェックしますが、対象となるタームが複数になる場合は配列で指定します。またこの2つはどちらも引数にカスタム分類とタームを指定しますが、引数の指定順が異なるので注意が必要です。このようにWordPressにはページの種類をチェックするための条件分岐ができる関数がたくさん用意されています。うまく使いこなすことで、簡単に複雑な切り分けができるようになるので是非覚えておきたいですね。
WordPressでサイト制作をしていると、よく使うようなコンポーネント要素がたくさんあると思います。それらを毎回ハードコーディングで書いていると修正や改修があった場合に思わぬコストが発生する恐れがあります。便利な関数が備わっているので、できるだけ動的に出力されるようにしておくと運用や管理が楽になるのでオススメです。
<h1 class="page-header"> <!-- ページタイトルがページの種類で動的に切り替えられる --> ページタイトル名 </h1>HTML自体はシンプルで、要素に含まれるテキスト文言を動的に切り分けて出力していきます。それでは実際にWordPress上で動的に出力していくコードを見ていきます。 【PHP】
<h1 class="page-header"> <?php // サイトトップ以外に適用 if( !is_front_page() || !is_home() ) { if ( is_page() ) { // 固定ページではそのまま記事タイトルを出力 echo single_post_title(); } else if( is_tax( 'blog_taxonomy', 'hobby' ) || ( is_singular( 'blog' ) && has_term( 'hobby', 'blog_taxonomy') ) ) { // カスタム投稿「blog」のカスタム分類「hobby」のタームがついた一覧ページと個別ページで出力するページタイトル echo '趣味のブログ'; } else if( is_post_type_archive( 'blog' ) || is_singular( 'blog' ) ) { // カスタム投稿「blog」の一覧ページと個別ページで出力するページタイトル echo 'ブログ'; } else if( is_post_type_archive( array( 'news', 'info' ) ) || is_singular( array( 'news', 'info' ) ) ) { // カスタム投稿「news」と「info」の一覧ページと個別ページで出力するページタイトル echo 'お知らせ'; } } ?> </h1>まずは、下層ページのみに使用する前提ということで、フロントページやトップページには適用させないようにしておきます。そしてそれ以降でページごとの条件分岐を指定していきます。上記のサンプルでは、含まれているコメントの通りの条件に合わせた例になります。ここでは下記の条件分岐タグを使っています。
is_page( $page_slug ) | 固定ページかどうかをチェック、引数ではスラッグなどを指定することで特定の固定ページに限定させることも可能 |
---|---|
is_post_type_archive( $post_type_slug ) | 引数で指定された投稿タイプの一覧ページであるかをチェック、複数の投稿タイプが対象になる場合には配列で指定 |
is_singular( $post_type_slug ) | 引数で指定された投稿タイプの個別ページであるかをチェック、複数の投稿タイプが対象になる場合には配列で指定 |
is_tax( $taxonomy_slug, $term_slug ) | 引数で指定されたカスタム分類タイプの一覧ページであるかをチェック、引数にはカスタム分類のスラッグと該当するタームのスラッグを指定 |
has_term( $term_slug, $taxonomy_slug ) | 引数で指定されたタームが含まれているかをチェック、引数には該当するタームのスラッグとそのタームが含まれるカスタム分類のスラッグを指定 |
sponserd
keyword search
recent posts
- GSAPとvivusを使ったSVGのドローアニメーション
GSAPとvivusを使ったSVGのドローアニメーション
- GSAPでScrollTriggerプラグインを使ったスクロール固定表示アニメーションの応用
GSAPでScrollTriggerプラグインを使ったスクロール固定表示アニメーションの応用
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #3
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #3
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #2
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #2
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #1
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #1
- ViteでReactとReact Routerを使ってみる
ViteでReactとReact Routerを使ってみる
- ViteでPugのコンパイル環境を導入する
ViteでPugのコンパイル環境を導入する
- ViteでMarkuplintとPrettierを使える環境を構築する
ViteでMarkuplintとPrettierを使える環境を構築する
categories