テーマを跨いでサイトをリニューアル（WordPress）

Diviという世界的に有名なテーマを使用して作っていたサイトがあったのですが、日本語フォントを入れて作成すると非常に重たくなってしまったので、テーマを変更してサイトをリニューアルすることになりました。

テーマ変更前のスピードを測定する

Diviで作成したサイトをGTメトリックスにて測定します。以前サイトのスピード改善を行ったので、測定上ではいいスコアが出ました。しかし、なぜか体感としては明らかに読み込みが遅いことを感じました。

バックアップをとる

今回はこちらのサイトを参考に、プラグインの「BackWPup – WordPress Backup Plugin」でバックアップを取りました。

  1. BackWPupプラグインを検索して、インストールし、有効化。
  2. 管理画面の左サイドメニューのAdd new job よりバックアップの設定をします。一般タブよりバックアップの名前を入力、アーカイブフォーマットをTar Gzipに変更し、スケジュールタブよりバックアップの頻度を入力します。あまり多くバックアップを取りすぎると容量を食ってしまうので気をつけましょう。マニュアルで必要な都度とるのでも十分かと思います。
  3. Jobsよりバックアップを開始します。100パーセントになれば完了です。

ステージングサイトを作る

ステージングサイトとは、ウェブサイトを破壊することなくWordPressテーマを変更するために、本番ウェブサイトと並行して編集出来る環境です。本番環境と同一のシステム構成で、表示や動作に問題がないかを裏で検証します。今回はこちらのサイトを参考に「WP Staging」というプラグインでステージングサイトを作成しました。

ただ、こちらのステージングサイトの問題点は「有料版」でないと、本番環境にステージングサイトを持っていくことができません。無料版だけの場合あまり作り込まず、表示や動作に問題がないかを確認するだけにとどめておいた方が良いです。

  1. WP Stagingプラグインを検索して、インストールし、有効化。
  2. 管理画面の左サイドメニューの「WP Staging」のメニューから「Sites / Start」メニューをクリックし、「CREATE NEW STAGING SITE」ボタンをクリックします。
  3. ステージングサイトに名前をつけ、「START CLONING」ボタンをクリックします。
  4. 「Open staging site」ボタンをクリックし、ワードプレスと同じユーザーネームとパスワードでログインします。ステージングサイトはサイト上部と管理画面にオレンジのバーが表示されます。
  5. サイトを作成します。今回はプラグインの「エレメンター」を使って作成しました。詳しくは以下にまとめました。テーマやプラグインに不具合がないか確認します。
  6. ステージングサイトで完成したデザインを、本番環境に持ってきます。本番ウェブサイトの管理画面 に戻り、管理画面の左サイドメニューの「WP Staging」からOpenを選択してステージングサイトを開きます。

Diviテーマを離れて、エレメンタープラグインで作成しました

Diviテーマとエレメンタープラグインは、どちらもコーディング無しに直感的にウェブサイトを作ることができるところが似ていますが、Diviテーマは日本語フォントを使うと動作が重くなるという難点があります。そこで今回エレメンタープラグインに切り替えたわけなのですが、そうなるとなにかしらエレメンターと相性の良いテーマを選択する必要があります。テーマによってはElementorが遅くなるそうです。

こちらのサイトを参考にさせて頂き、Astraというテーマを選びました。以下のテーマが相性がいいとのことです。
https://nocodeweb.jp/elementor/best-themes-for-elementor/

  • Astra
  • Hello
  • OceanWP
  • Layers
  • GeneratePress
  • Heista
  • Zakra
  • Neve
  • Sydney

（番外編）モバイルの右側に白い余白が…

大誤算であるとき突然モバイルの右側に白い余白が出来てしまい、これをなおすために5時間は時間を割かれてしまいました。。どうやって治ったか書き残しておきます。

１、リビジョンを戻してみる。

ワードプレスでは、デフォルト設定のままであれば過去の状態を保存していてくれます。そこで崩れる前に遡ってみました。しかし、それでも右側に余白ができたままです。

２、検証

私はヘッダーとフッターをAstraのテーマ、コンテンツをエレメンタープラグインで作成しています。

クロムを使っているので「検証」でどこがおかしいのか見ていきました。閲覧モードをモバイルモードに切り替えると、「ヘッダーの幅」が本来あるべきところからはみ出ていることがわかりました。ということはおそらくテーマがおかしい。

可能性としては、パディングがはみ出している、もしくはオーバーフローがhiddenになっていないのが原因かもしれないと思いながら見ていきました。

３−１、テーマやプラグインの設定がおかしい？

念の為、一つ一つヘッダーとコンテンツ全てのパディングと、オーバーフローを確認し、デフォルト設定になっていたところも適切な設定に入力し直しました。しかし、、、それでも治らない。。

  • Astraテーマの基本設定をいじってしまった。←これかなぁ
  • Astraテーマのビジュアル設定をいじってしまった。←これかなぁ
  • エレメンタープラグインの基本設定をいじってしまった。
  • エレメンタープラグインのビジュアル設定をいじってしまった。

３−２、テーマやプラグインがばぐった？

右の余白が出ないようにCSSをいじる？とも考えましたが、ほとんどCSSをいじっていない状態だったので考えにくかったです。それよりも何かの拍子でバグってしまったのかもしれないとも思いました。

そこで一旦、Astraを辞め、Helloというテーマに変更してみました。すると、モバイル右の余白が無くなったではないですか！！Astraを削除し入れ直し、Astraに戻しました。すると右の余白がまた出現。ということは、確実にAstraの設定がおかしい….

３ー３、ヘッダーではなく、フッターの幅設定。。

クロムの検証によって「ヘッダーの幅」が本来あるべきところからはみ出ていることは分かっていました。しかしどうしてもなにを右側の余白が消えない。そしてついに原因を見つけました。。

外観→カスタマイズ→フッター→ギア→Widthが「Custom Width」になっていた。。まさかのフッターの設定が原因。確かに設定をいじった記憶があるところだけれど、すっかり忘れていました。

（次回）テーマ変更後のスピードを上げるための施策をする

無駄に５時間を取られてしまって半泣きですが、ついに目的だったスピード改善作業に取り掛かります。

現時点、GTメトリックスで測ると、あれ、あれれ、、、サイトが遅いのってもしかしてDiviテーマのせいでは無い？？解決するオススメの一番は「Eliminate render-blocking resources」と出ています。