リリース情報【14.テーマ探求力を磨く】

第14章「テーマ探求力を磨く」コースが追加されています

もうご覧になりましたか?
色々なテーマを細かく探求していくコースです。

コース内容

  1. テーマ探求のまとめ
  2. Sydneyの探求(1)
  3. Sydneyの探求(2)
  4. 探求しよう
  5. 【補足】Sydneyと Elementor
  6. Hestiaを探求する
  7. Hestia探求2
  8. テーマを探求するコツ
  9. GOテーマを探求
  10. 海外有名テーマのまとめ
  11. BusinessPress テーマ
  12. Lightningテーマ
  13. まとめ

第14章「テーマ探求力を磨く」

無料登録でプレビュー公開中!

現在、無料登録でコース内のレッスンを一部プレビューすることができます。
章によっては、なんと全部!プレビューできるものもあるので、とってもお得です。

ぜひ【Webシステムマスターコース】の中をのぞいてみてくださいね!

※ページ中ほどに無料受講のボタンがあります。

このコースで学んだこと

私なりに学んだこと、発見は以下の通りです。

全体の感想

  • 丁寧すぎるほど丁寧に探求してくれている!と感じた
  • ここまでやってくれたら、もう自分では探求しなくてもいいような気がしてしまった笑

14-10 海外有名テーマのまとめ

  • 色々な探求の後にまとめてくれたのはとてもありがたいと思った。色々みると、あとで「あれ、これはどれの話だっけ?」となるので、最後にそれぞれのポイントを押さえてもらったのは嬉しい。

14-11 BusinessPress テーマ

  • ゴミ箱からドラッグ&ドロップでインストールしたところが衝撃だった
  • safariが解凍された状態でダウンロードされるということが、解凍して、zipファイルはゴミ箱に移動されて、解凍されたものがデスクトップに保存されている、ということは知らなかった(考えもしなかった)。
  • 見出しのテキスト欄にHTMLでボタン設置ができるのか!と驚いた。
  • フッタークレジットがなんぞや?という説明があるといいかなと思った。

参考になれば幸いです!


🚩お知らせ

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

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

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

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

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

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

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

です。


背景

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対策、ビジネスモデル、ビジネスシステム構築技術を身につけ、仕事を受注できるようになるためのオンラインコースを準備しています。

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

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

テーマの中身を解析して、カスタマイズの例(Opstoreテーマ)

あるショップ(タイで広く健康、寝具の販売をしている会社)の依頼で、カスタマイズすることになりました。その際の経緯、手順をメモします。

経緯

ショップの表示が非常に遅く、GoogleのSEO効果が下がってしまった。あまりの表示の遅さに、直帰率も増えてしまった。レンタルサーバーを変更するなどの前に、可能な限りのことを行うこととなった。

速度を改善するために、

  • JetPackのインストール : JetPackのパフォーマンス向上で画像をWordPress.org の CDNを使うように修正(これで5秒ぐらい速度アップ)
  • Loading Animationのオフ : ページが完全に読み込まれるまで、ローディングイメージが現れるので、それを止める

この2つに取り組みました。JetPackは、すんなり行ったのですが、Loading Animationをとめるオプションがテーマの設定にありませんでした。

そこで、ソースコードをチェックして、修正をすることにしました。

調査の方法メモ

使っていたテーマは、Opstore というものです。

Opstoreを使うと、ショッピングサイトが簡単に作れる。Elementorに対応

ローディングアニメーションを要素の検証

ローディングアニメーションが行われている間に、要素の検証を実行します。すると、以下のようになりました。

これは、ブラウザが解析した結果なので、実際のHTMLソースで箇所を確認します。リソースタブを表示して、チェックします。気持ち悪いことに、head と body の間に無理やり、挿入されています。

テーマファイルのチェック

上記のを行なっているソースコードをテーマファイルでチェックします。扱いやすいようにテーマファイルを丸ごと、ローカルPCにダウンロードします。body タグの前ということで、header.php あたりが怪しいと思ってチェックします。

まさに、ここです。head と body タグの間に出力しています。うーん、気持ち悪い。

opstore_before_body_output フィルター(テーマ開発者が用意したもの)を実行するようになっています。このキーワードでソースコードを検索すれば、止める方法などを見つけられそうです。

Codaなどのエディターで全文検索をします。そうしたら、opstore-hooks.php と、なんとも怪しい(怪しくはない)ファイルを見つけました。ソースコードを開いてチェックしてみます。

なんと、get_theme_mod メソッドを使っています。つまり、カスタマイザーで設定した値を取り出していることになっています。ということは、カスタマイザーで設定できる!ということです。

名前が、opstore_preloader_option となっているので、Preloader という感じの設定項目っぽいです。

このように、名前から推測を広げると良いです

解決

外観 > カスタマイズ > General Settings > Additional Settings > PRELOAD SETTING を開いて、DISABLE にします。

学んだこと

  • Loading Animation は、PRELOADER と呼ぶこともある
  • その線で、探せば見つかったかもしれない
  • ソースコードを解析することで、body と head の間に無理やり入れるというハックを知った

🚩お知らせ

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

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

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