Ownedmedia ウェブ制作に役立つコンテンツを発信中!

WordPress 2020.02.29

WordPressでページの種類によって動的にタイトルを表示するページヘッダーを作成する

Tags: ,

WordPress案件でコーポレートサイトなどを作成する場合には、よくあるコンポーネントに下層ページのページヘッダーがあるかと思います。ページヘッダーにはそのページのタイトルが入るケースが多いようですが、ページの種類別によって動的に出力させたいような場合に使えるテクニックを今回はまとめていきたいと思います。

 

ここでは、WordPressに搭載されている条件分岐タグ(過去記事「WordPressでよく使うテンプレートタグのまとめ【条件分岐タグ】」を参照)などを用いて、表示されているページの種類をチェックしながら、条件によって出力されるタイトルを変えていくという感じになります。今回はサンプルとしてこのようなHTMLが出力される想定としています。

【HTML】※一部抜粋

<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 ) 引数で指定されたタームが含まれているかをチェック、引数には該当するタームのスラッグとそのタームが含まれるカスタム分類のスラッグを指定

 

is_tax()とhas_term()ではタームを基準にチェックしますが、対象となるタームが複数になる場合は配列で指定します。またこの2つはどちらも引数にカスタム分類とタームを指定しますが、引数の指定順が異なるので注意が必要です。このようにWordPressにはページの種類をチェックするための条件分岐ができる関数がたくさん用意されています。うまく使いこなすことで、簡単に複雑な切り分けができるようになるので是非覚えておきたいですね。

 

WordPressでサイト制作をしていると、よく使うようなコンポーネント要素がたくさんあると思います。それらを毎回ハードコーディングで書いていると修正や改修があった場合に思わぬコストが発生する恐れがあります。便利な関数が備わっているので、できるだけ動的に出力されるようにしておくと運用や管理が楽になるのでオススメです。

 

この記事を書いた人

オガワ シンヤ

DesignSupply.代表 / ディレクター・ウェブデザイナー・フロントエンドエンジニアをやっています。「ウェブとデザインでヒト・モノ・サービスを繋げ新しい価値を生み出す」をコンセプトに日々奮闘中!制作中はチョコレートが欠かせない三十路Webクリエイター。

  • Twitter

コメントフォーム

記事に関するご質問やご意見などありましたら下記のコメントフォームよりお気軽に投稿ください。なおメールアドレスは公開されませんのでご安心ください。

内容に問題なければ、お名前・ハンドルネームとメールアドレスを入力いただき、下記の「コメントを送信」ボタンを押してください。

CAPTCHA


この記事もよく読まれています

Scroll to Top
ご質問・ご相談はありませんか ?