0%

Programmingプログラミングナレッジ

Posted:2020.02.29

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

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

 

author
この記事を書いた人オガワ シンヤ
FacebookTwitter

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

制作のご依頼やお問い合わせ・パートナー業務提携のご相談はこちら

デザインやウェブ制作についてのご依頼やご相談、その他お問い合わせなどもお気軽にご連絡ください。フットワークの軽さやレスポンスの早さ、また豊富な経験や知識、技術を活かした対応力といったフリーランスクリエイターの強みでクライアント様、パートナー企業様のお力になります。デザインからコーディングやWordPress実装といったウェブサイト構築はもちろん、写真撮影や動画編集、コンテンツ制作からサイト運用サポートまで一括してお任せください。

ホームページ制作のご検討やウェブ運用でお悩みの経営者様や企業のウェブ担当者様をはじめ、個人で店舗を営んでいらっしゃるオーナー様、フリーで活動されているビジネスオーナー様はもちろんのこと、リソース不足でお困りの制作会社様、またクリエイターをお探しの代理店様も大歓迎です。

コンタクトをご希望の方はお手数ですが、下記よりお問い合わせフォームのページへアクセスしていただき、必要事項を入力の上メッセージを送信してください。確認でき次第すぐに折り返しご連絡致します。

こんな記事も読まれています

コメントもお気軽にどうぞ

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

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

CAPTCHA


ページトップへ
大阪市天王寺区のホームページ制作デザイン事務所(SOHO)DesignSupply.【デザインサプライ】