Initial Site

Initial Site

Initial Site

WordPressで出力内容が動的に変わる固定ページの<title>を変更

  • モリヤ  2019/08/20 17:12
無題

こんにちは
開発部のモリヤです。

先日、以下のような仕様のページを作成する際に動的に<title>を変更する必要があったため、手法をご紹介します。

動的に出力内容を変える固定ページ

URLクエリパラメータをkeyとして、出力内容をテーブルから取得・表示内容を切り替える。
ページのタイトルは、固定ページのタイトルではなく取得データのタイトル情報にする。
動作環境は「WP 5.2.2」で、使用テーマは標準の「twentynineteen」

まずはそのままページを確認する。

特に手を加えず、該当ページを開いたところ、タイトルは固定ページのタイトルが表示されています。

  1. <head>
  2.     <meta charset=”UTF-8″>
  3.     <meta name=”viewport” content=”width=device-width, initial-scale=1″>
  4.     <title>商品ページテンプレート<title>
  5.     ~
  6. </head>

 

タイトル出力の仕組みを知る。

タイトル部分の出力方法を知るため、テーマ内にある「header.php」を確認、以下の記述となっていました。

  1. <head>
  2.     <meta charset=”UTF-8″>
  3.     <meta name=”viewport” content=”width=device-width, initial-scale=1″>
  4.     <?php wp_head(); ?>
  5.     ~
  6. </head>

 

wp_head()で<title>が出力される仕組みとは?

調べてみたところ<title>は、WordPress4.4より前は「wp_title()」という処理を使って出力していたようですが、4.4以降は非推奨となり、現在はfunction.php内に「add_theme_support( ‘title-tag’ );」を記述することで、wp_head()で自動的にタイトルが出力される仕組みとなっているようです。
※実際のところ「非推奨」は取り下げて 当分の間復活されたようですが、いつまた使えなくなるかわからないので使わないほうが良い気がします。。。

>> 【WordPress】wp_titleは非推奨!titleタグにタイトルを出力する方法

固定ページのみ動的にタイトルを切り替えるにはどうするか?

functions.phpに以下を記述することでページタイプごとにタイトルを切り替えることが可能なようです。
固定ページのパーマリンクを「shop_list」とし、固定ページであるか判定する「is_page()」を組み合わせて判定することで特定の固定ページのタイトルを変更することが可能となりました。

  1. function change_title_tag( $title ) {
  2.   if ( is_page(‘shop_list’) ) {
  3.     $title = ‘任意のタイトル’;
  4.   }
  5. }
  6. add_filter( ‘pre_get_document_title’, ‘change_title_tag’ );

 

  1. <head>
  2.     <meta charset=”UTF-8″>
  3.     <meta name=”viewport” content=”width=device-width, initial-scale=1″>
  4.     <title>任意のタイトル<title>
  5.     ~
  6. </head>

 

ここから更に、動的にタイトルを変更するために固定ページ側とfunction.php側に「global $page_title;」を定義し、wp_head()実行前にページタイトルを設定、function.php側で変数を指定することで設定したタイトルが表示されるようになりました。

  1. function change_title_tag( $title ) {
  2.   global $page_title;
  3.   if ( is_page(‘shop_list’) ) {
  4.     $title = $page_title;
  5.   }
  6. }
  7. add_filter( ‘pre_get_document_title’, ‘change_title_tag’ );

 

  1. <head>
  2.     <meta charset=”UTF-8″>
  3.     <meta name=”viewport” content=”width=device-width, initial-scale=1″>
  4.     <title>商品名|リンゴ<title>
  5.     ~
  6. </head>

固定ページ以外でも「is_category()」や「is_tag()」を使うことで判定・タイトル変更が可能となります。


この記事の作者

アバター
モリヤ


総記事本数:11

この記事へのコメント

    • 匿名 さん
      2020年2月7日 11:31 AM
    • 返信

    タイトル以外のメタタグなどの変更もしたかった場合には、

    「固定ページ編集」>「ページ属性」>「テンプレート」

    テンプレートを自分で任意に作成し割り当てしてから、そのテンプレート内のget_header(ファイル名指定)で細かく設定する方法もあります。

    自由度が高いですが、ヘッダー部分に影響するプラグインのアップデートがされないというデメリットもあります。

      • モリヤ さん
        2020年2月7日 2:43 PM

      匿名さん

      > テンプレートを自分で任意に作成し割り当てしてから、そのテンプレート内のget_header(ファイル名指定)で細かく設定する方法もあります。

      コメントありがとうございます。

      タイトル以外も細かく分けたい場合、その手法のほうが楽に管理できそうですね!

コメントをどうぞ

知識の記事

  1. gahag-0075639565
    サブスクリプションの整理をしよう
  2. complete
    ReactとFirebase(Cloud Firestore)を使って独り言WEBアプリをつくる
  3. E5DxwzVgVHYHr411581668296_1581668370
    わたしは公家ではありませんでした(多分)
  4. PAK86_smonitatocode20140517_TP_V
    All in One SEO Packの必要性

おすすめ記事

  1. E5DxwzVgVHYHr411581668296_1581668370
    わたしは公家ではありませんでした(多分)
  2. 1b8493ba94ff68762824c3c7274b3128-e1499313795652
    イオンの保存容器はジップロック超えた!?※主観的視点