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

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

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

コメントする