タグ: Opstore

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

経緯

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

速度を改善するために、

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

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

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

調査の方法メモ

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

---

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

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

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

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

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

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 の間に無理やり入れるというハックを知った

---