KnowAllテーマのトップページタイトルの変更

この記事は、ほとんどの人にとって関係がありません。後学のために、あるいは、同じように困っている人は、ご覧ください。

この記事が直接役立つ人は、

  • Know Allテーマを使って、ブログ機能を有効にしている人
  • また、Yoast SEOなども使って、さらに状況が悪化している人
  • WordPressのカスタマイズの手順の具体例を知りたい人

です。


背景

このサイトは、「KnowAll」というナレッジベースを使っています。KnowAllは、デフォルトではブログ機能がOffになっています。しかし、バージョンアップが行われて、ブログ機能を使えるオプションが用意されました。

しかしながら、この機能とYoast SEOを使った場合、トップページ(フロントページ)のヘッダー内のタイトルタグが「最新の(下書きも含め)ナレッジ記事のタイトル」になってしまいます。

サポートに問い合わせたものの、返事がすぐにはこないので、自分で調べて修正することにしました。


どのような問題なのか?

KnowAllでブログ機能をOnにして、トップページを「Knowlege Base Archive」にすることで発生します。

ブログ機能をオンにする方法

KnowAll というテーマを使います。このテーマは、ナレッジベース専用です。デフォルトでは、トップページは「固定ページ」でも、「ブログ一覧」でもありません。

カスタム投稿タイプの「ナレッジのカテゴリー一覧」などを表示します。

トップページの様子
カスタム投稿のカテゴリ(カスタムタクソノミー)

デフォルトでは、KnowAllはブログ機能がオフになっています。ブログ機能をオンにするには、

  • 管理画面 > カスタマイズ > ホームページ設定 > KnowAll Blog Support で
  • 「Enable Blog and Static Page Support」を選択します

いつも通り、ブログ一覧を固定ページに割り当てます。一方で、トップページは固定ページを選択することになりますが、「ナレッジカテゴリ一覧」が出ません。

そこで、以下をします。

  • 管理画面 > 設定 > 表示設定で、固定ページの一覧から、Knowledge Base Archive を選ぶ

ざっとソースコードをチェックする限りですが、この固定ページは「KnowAllによって、管理画面の固定ページ一覧には表示させない」ようになっています。ユーザーが間違って削除しないようにしているようです。

とにかく、以下のようにすることで、ブログ機能を使えます。

  1. 固定ページで、ブログを割り当てるページを作る
  2. 外観 > カスタマイズ > ホームページ設定で、KnowAll Blog Support で、Enable Blog and Static Page Support を選択する
  3. 投稿ページに、(1)のページを割り当てる
  4. 固定ページをとりあえず、何か割り当てる
  5. 設定 > 表示設定 を開き、ホームページの表示で、固定ページ一覧から「Knowledge Base Archive」を選択し、保存

ブログ機能を有効にすることによる不具合

不具合というわけではないですが、この設定によって、フロントページ(トップページ)のタイトルが、

  • Knowledge Base Archive – サイト名

となります。Knowledge Base Archive を修正しようにも、固定ページ一覧には該当のページがないので直せません(トップとかに変更したくても、できない)。

Yoast SEOを有効化することで、さらに問題が発生

この状態で、Yoast SEOを有効化します。Yoast SEOはタイトルタグをカスタマイズする機能があります。この機能によって、「不具合」と呼べるほどの問題が起こります。

それは、ナレッジの最新記事(しかも、下書き)のタイトルが、トップページのタイトルに使われるようになります。

これは、かなり問題です・・・。

根本的な問題

KnowAllは、トップページを特殊な形で表示しています。そのための内部のルールが色々と変更があります。その結果、トップページの「条件タグ」が、以下のようになります。

  • is_archive(), is_singular() が true

という状態です。本来は、 is_front_page() が true になるところ、そのようにはなっていません。

Query Monitor で条件文をチェックしている様子

この状態をサポートに問い合わせしておきましたが、解決には時間がかかりそうです。

そこで、この状況を逆手にとって、簡単な修正を行いました。

タイトルタグの修正方法

以下のようなコードを追加することで、解決しました。

add_filter( 'pre_get_document_title', 'my_front_page_title', 99 );
function my_front_page_title() {
	if ( is_archive() && is_singular() ) {
		return get_bloginfo( 'name' );
	}

	return '';
}

pre_get_document_title という headerの中の titleタグを修正するためのフックを使います。このフックに値が入っていると、それを優先して使われます。条件を、 is_archive() かつ is_singular() と本来はあり得ないけど、KnowAllのトップページの条件を設定しました。

なお、Yoast SEOも使っているため、Yoast SEOよりも後で使われるように、優先順位を99にしました。

実際の作業は以下のとおりです。

  1. Code Snippets プラグインをインストールし、有効化
  2. Snippets として、上記のコードを追加
Code Snippet プラグインを使えば、functions.php などに書き込まなくて済みます

補足 : pre_get_document_title についての調べたプロセス

WordPressのheaderのtitleタグを修正するために調べたところ、wp_titleに行き当たりました。調べるときは、英語サイトを中心に調べています。

User Contribute Note をチェックすると、非推奨!と書いてある。その代わり、こっちを見るようにと案内がある。

pre_get_document_title フックについてのページに行くと、 wp_get_document_title() の中で使われているとのこと。このメソッドで、titleタグを出力しているみたい。

一応、 wp_get_document_title() のソースコードも閲覧すると、 pre_get_document_title が empty でない場合に、title タグをそのまま出力することがわかる。

つまり、pre_get_document_title を設定したら、無条件で「タイトルタグ」を、自分で設定したものにしてくれるという事を知る。


まとめ・学び

  • WordPressの仕組みを少し知っておくと、本職プログラマーではないのに、カスマイズできる
  • 若干のPHPプログラミングと、フックの概念を知っているだけで、本職プログラマーでないのに、問題を解決できる
  • QueryMonitor で状況を分析し、起こっている事をしっかりと見極めると解決に繋がる
  • pre_get_document_title については、WordPressのドキュメントを読んで理解した。つまり、一次情報を嫌がらず、チェックすることが大事

🚩お知らせ

toieeLabでは、知識・経験ゼロから、「単なる製作代行ではなく」、WordPressの仕組み、デザイン、コピー、SEO対策、ビジネスモデル、ビジネスシステム構築技術を身につけ、仕事を受注できるようになるためのオンラインコースを準備しています。

ただのオンラインコースではなく、オンラインコースサポートサイト学習コミュニティ(非公開)、個別サポート、オンラインワークショップを通して、一人ひとりの学習をサポートするサポート型のオンラインコースです。

現在、オンラインコースの一部を無料公開しています。ご興味のある方は、ぜひ、ご覧ください。

コメントする