【2024年版】WooCommerceストアを安全に更新（徹底解説）

WooCommerceストアの更新は、機能の破壊から、収益の低下を招いたり、サイトの動作に悪影響を及ぼしたりする可能性があるため、慎重に行いたいもの。

WooCommerceストア更新の際のサイト所有者の考え方には以下の4種類があります。

• 大雑把：何も考えずに「更新」ボタンを押すタイプの人。これを機に、ストアがどんどん破綻するのがよくあるパターンです。
• 怠け者：更新が必要であることを完全に無視し、存在しないかのように振る舞う人です。
• 怖がり屋：更新をすると何が起こるかと戦々恐々とし、非常に多くのプラグインやテーマを古いままにしている人です。
• 一人前：最後に、定期的なバックアップを作成し、ステージングサイトでWooCommerceの新しいリリースをテストし、問題なく本番サイトを更新する人です。

理想的には、全員が一人前になる必要があります。幸いなことに、適切なツール、適切なテストチェックリスト、いくつかの自動化を使用すれば、決して難しいことではなく、WooCommerceサイトを最新の状態に保ち、常にスムーズに運営することができます。

今回は、使用すべきツールや大規模なテスト、更新の際のチェックリストなど、WooCommerceを安全に更新するための方法を最初から最後までご説明します。

最終的な目標は、ストアの収益を向上することであることをお忘れなく。無料の電子書籍「WooCommerceの商品ページでコンバージョンを高める方法」をぜひダウンロードしてください。

準備はいいですか？それでは見てみましょう！

今少し多く時間を投資して、後から多くの時間を節約（そして不安を解消）する

まずは、こちらのベストプラクティスから。最初に新しいリリースを完全にテストすることなく、サイト、特にWooCommerceを更新しないでください。これは、メジャー、マイナー、およびパッチリリースのすべてに当てはまります。

後で多くの時間を節約するために、今少しだけ多めに時間を費やすことをいとわないでください。

即座に「更新」ボタンを押す必要はありません。 少し時間をかけて、どのような変更が行われるか、そして最も重要なこととして、その変更がサイトにどのように影響するかを理解しましょう。更新したいバージョンのWooCommerceで利用可能な新機能を読むだけで、準備する必要がある対象が把握できます。

広い視野から物事を見て、一つ一つを分解して考えるために、プラグイン、テーマ開発者の気持ちになってみましょう。というのもWooCommerceコアとWordPressコアは下位互換性がある必要があるためです。さて、あなたやあなたのクライアントのサイトで使われているプラグインの数を考えてみてください。WooCommerceの更新が一部の機能を破壊する可能性はどのくらいあるでしょうか？きっと、あなたはすでに答えを知っているでしょう。そう「非常に可能性が高い」です。

そのため、WooCommerceアップデートの発表直後は、WooCommerceを更新する前に、変更ログとWordPress.orgサポートフォーラムを確認することをお勧めします。アップデートで問題が発生した場合、99％の確率で他の誰かが最初に問題に遭遇しています。先人の知恵を借りれば、時間を大幅に節約し、自分で問題に対処する手間が省けます。

WooCommerceの更新ボタンをすぐに押さずに、プラグイン/テーマの作成者がWooCommerce関連の製品についての独自のアップデートをリリースするのを待つことも、実際には珍しくありません。そのため、忍耐強く、時間をかけて互換性を確認することは効果があります。

WooCommerceサイトのアップデートを始める

WooCommerceの更新は、4つの段階で構成され、それぞれに特別な設定が必要になります。すべてを一度実行してしまえば、そのあとは毎回、より速く簡単になることをお約束します！次のWooCommerce更新の4つのステップについて、順を追ってご説明します。

WooCommerceの更新手順：適切なツールの入手

現実的に考えて、WooCommerceを手動でテストするのは面倒で時間がかかります。そんな理由で、多くの人がスキップしたり、テストを実施したとしても、適切でなかったりして、サイトのエラーが見逃されています。

ただ、幸いなことに、ツールを使えば、テストプロセスを高速化し、面倒な作業を減らすことができます。長年にわたって何度もWooCommerceの更新をテストしてきた結果として、お勧めできるツールをご紹介します。それぞれについて詳しく見ていきましょう。

ステージングサイト

なお、WooCommerceの最新バージョンがリリースされた後は、すぐに本番サイトを更新しないようにしてください。

ステージングサイトは、自由に編集できる安全なテスト環境に構築されています（通常、本番サイトに影響を与えることはありません）。ステージングサイトでは、WooCommerce の更新を実行し、最新のバージョンをテストすることで、本番サイトへ反映する前にサイトの状態を確認することができます。

ステージングサイトをお持ちでない場合は、Kinstaにお任せください。各サイトで無料のステージング環境が利用でき、複数のステージング環境が必要な場合には、最大5つまでプレミアムステージング環境を作成できます（アドオンの追加が必要になります）。

視覚的比較ツール

WooCommerceサイト更新後にどんな変化があったか、どのように把握できるのでしょうか？数十ページの大規模なサイトを運営している場合、書式設定の変化やウィジェットが表示されなくなった、などの小さな違いを見つけるのに時間がかかることがあります。

このチュートリアルでも使用しますが、WP Boomのような視覚的な比較ツールが便利です。サイトのスナップショットを保存し、「更新」をクリックしてから、今度は更新後のスナップショットを取得することで、それぞれの違いをすばやく見て確認できます。

ただし、視覚的な違いは、必ずしもサイトの一部の機能が壊れていることを意味しません。何かが壊れている「可能性がある」ことに気づくのが重要です。

エンドツーエンドのテストツール

視覚的な比較ツールはサイトのフォーマットやデザインの変化をすばやく見つけるのに便利ですが、エンドツーエンドのテストツールではさらに細かい確認ができます。サイトの実際の機能をテストし、何かが機能していない可能性をより正確に突き止められます。

アイテムを買い物カゴに追加して決済を行うなど、サイト内を全てクリックしてテストをするには時間がかかります。WooCommerceの更新を行って100回もテストを繰り返し…それだけでかなりの手間が生じます。

エンドツーエンドのテストツールを使用すると、このプロセスを自動化して、任せてしまうことができます。

Robot Ninjaのサービス提供が終了してしまったので、このチュートリアルでは、2種類のツールの使用方法をご紹介します。

1つ目はGhost Inspectorです。

そして、2つ目のエンドツーエンドテストツールはUsetraceです。

WooCommerceに使える自動化エンドツーエンドテストツールであり、ステージングと本番の両方で使用できます。この記事の後半で、両者の設定方法についてご説明します。また、開発者であれば、WooCommerceのE2Eテストを実行することもできます。

バックアップツール

サイトでは定期的にバックアップを取っておく必要があります。データベースのバックアップであれば、WP Migrate DB Proを使用するか、シンプルにWP-CLIを使用してエクスポートすることをお勧めします。

Kinstaをご利用の場合は、すべてのプランに毎日の自動バックアップ、手動バックアップ、バックアップ保持が付帯していますのでご活用ください。

適切なツールを用意したら、準備を始めましょう。

WooCommerceの更新手順：準備（7つのステップで進めるチェックリスト）

WooCommerceの更新をスムーズに行うために、ちょっとした準備が必要です。少し手間がかかりますが、一度準備をしておけば、あとは空欄に記入し、次に更新するときにすばやく実行できるようになります。私たちが推奨する7つの手順は以下の通りです。

ステップ1：更新するサイトを改めて理解する

サイトがどのように機能すべきかわからない場合（例えば、新しいクライアントのサイトを扱う場合など）、勉強とメモをお忘れなく。更新後にサイトがどのように機能するか忘れて混乱してしまった場合に頼りになります（実際、あなたが思うより頻繁に起こるものです）。

あなた（またはクライアント）のサイトの中でも重要なURLと機能のリストを作成することもお勧めします。具体的には、ホーム、カテゴリ、商品、「マイアカウント」、カート、決済ページなどです。

ステップ2：バックアップが最新であることを確認する

バックアップが最新でないなら、この段階で作成しましょう。バックアップツールの使い方はよく把握しておいてください。最も重要なのは「正しく機能していることを確認」し「サイトを以前のスナップショットに戻す方法をちゃんと理解」することです。

ステップ3：WP Boomを設定する

このツールの設定にかかるのは、ものの1分です。記憶力やメモの取り方に問題があった時（誰もがミスをおかすものです）、WP Boomを使ってサイトのスクリーンショットを見ることで理解の溝が埋められます。ダイエット企画の「ビフォー」写真だとお考え下さい。

最初のサイトのスナップショットを作成することから始めます。これで、ステージング環境更新前の視覚的な比較対象が確保できます。

通常、決済画面（カートに商品が必要になります）と保護されているページのスクリーンショットを撮ることはできませんが、以下のいずれかのツールが使えます。

補足：WP Boomを設定し使用する方法については、この記事の後半でご説明します。

ステップ4：自動テストツールを設定する

仮にWooCommerceを手動でテストするのであれば、ここでサイトチェックの手順を決めることになります。つまり、サイトを開いて、商品をカートに追加し、決済画面に進み、支払い情報を入力し…といった具合です。

幸いなことに、Ghost InspectorとUsetraceの両方が自動的にこれをすべて実行してくれます。これらツールの設定方法については追って説明します。

ステップ5：テストが必要となるサイトの他の部分を特定する

次に、先ほど作成しておいた重要なURLと機能のリストに基づいて、テストすべきサイトの他の部分を特定します。具体的には、お問い合わせフォームやポップアップなどの機能、または、スライドショーやギャラリーなどの要素が考えられます。

もちろん、これらを手動でテストすることも、技術的な知識がある場合には、このステップを独自に自動化することもできます。

ステップ6：WooCommerce最新バージョンの新機能を確認する

また、今から利用するバージョンのWooCommerceに実装されている新しいアップデートと機能を確認することもお勧めします。具体的には、利用中のプラグイン、テーマと互換性があるかどうかを確認しましょう。

繰り返しになりますが、のちのちの無駄や不安を解消するために、今しばらく時間を費やすことをお勧めします。WooCommerce.comでのリリースのお知らせ、変更ログ、GitHubでの問題、WordPressサポートフォーラム を確認してください。

ステップ7：本番サイトをステージング環境に複製する

WooCommerce Subscriptionsなど、ステージングモードを備えたプラグインを使用している場合は、その機能をオンにするか、またはプラグインそのものを無効化します。同様に、メールも無効にする必要があります。

次に、ステージング環境が本番サイトをできる限り忠実に再現できているか確認しましょう。また、この時点でWordPressデバッグモードを有効にして、今後の問題発生に備えることをお勧めします。

重要：サイトをステージング環境に複製したら、潜在的な注文の受け付けミスは回避したいものです。そのために、WooCommerceストアをメンテナンスモードにすることをお勧めします。これにより、更新とテストの間に注文が入ることがなくなります。

WooCommerceの更新手順：ステージング環境の更新とテスト（7つのステップで進めるチェックリスト）

これで準備が整いました。次は、ステージング環境の更新という楽しい本題へと進みます。ステージング環境のすばらしい点として、ここでサイトが壊れても何も問題はありません。単なる複製ですので心配ご無用。それでは、これの詳しい中身を見てみましょう。

ステップ1：WP Boomでサイトのスナップショットを撮る

最初に、WP Boomでサイトのスナップショットを撮ります。これにより、ステージング環境における更新前の視覚的な比較対象が確保できます。

ステップ2：テストツールを実行しちゃんと機能するか確認する

前述のように、Ghost InspectorやUsetraceなどのエンドツーエンドテストツールを使用して、テストを自動化できます。この記事の後半では、両方のツールを使用してテストを実行する方法、テストが正しく行われたかどうかを確認する方法を順を追ってご説明します。

ステップ3：プラグインとテーマを更新する

準備段階では、プラグインとテーマが、更新後のWooCommerce最新バージョンと互換性があるかどうかを確認することについて触れました。プラグインまたはテーマが古く、WooCommerceの最新バージョンと互換性がないことに気付いた場合は、この段階で、互換性のあるバージョンに更新してください。

ステップ4：ステージング環境でWooCommerceを更新する

プラグインとテーマを更新し、互換性の問題がないことを確認したら、ステージング環境でWooCommerceを最新バージョンに更新する準備OKです。ステージング環境で更新することにより、WooCommerceの更新を本番サイトに適用してしまう前に、解決すべき潜在的なエラーを特定できます。

ステップ5：エラーがないかログを確認する

プラグイン、テーマ、WooCommerceを更新したら、ログをチェックして、エラーが発生していないか見てみましょう。クイックスキャンから、トップ画面や管理画面にアクセスできるかどうか確認してください。

「死の真っ白画面」が表示される場合、または他の回復不可能な状況で行き詰まってしまった場合は、サイトの以前のスナップショットで復元することができます。そして自分で解決するか、プロに助けを求めましょう。

ステップ6：2つ目のスナップショットを作成して違いを比較する

ここまでのすべてが順調に進んでいるなら、WP Boomを再び実行して、2つ目のスナップショットを作成します。変更前と変更後のスナップショットを比較して、何が変わったのか確認してください。

WP Boomの秀逸な点として、前回のスナップショット作成からサイトがどの程度変わっているのかが、よくわかります。

たとえば、2つのスナップショット間で7％の視覚的な変化があると表示されたとします。これは必ずしもサイトが壊れているという訳ではありませんが、ある程度のスタイルの調整は必要になるかもしれません。

ステップ7：Ghost InspectorまたはUsetraceを再び実行して、すべてが問題なく機能しているか確認する

次に、Ghost InspectorまたはUsetrace（またはあなたのお好みのエンドツーエンドテストツール）を使用してテストを実行し、決済の流れに問題がないか確認します。お問い合わせフォームなど、サイトの他の機能について手動または自動のチェックを実行することもできます。

期待どおりに機能しないものがあれば、直ちに報告または修正しましょう。

サイトで独自のコードを実装している場合（つまり、サードパーティのプラグイン/拡張機能の開発者によって管理されていないコード）、コードを調整し、更新の実行前または実行後に（問題の種類によって異なる）修正内容が本番サイトに適用されるようにしましょう。

サイトをGitに置くなどのバージョン管理は、変更をより適切に管理することにつながります。バグの報告方法は、使用しているプラグインやサポート体制の種類により異なります。プラグイン/テーマの新しいリリースを待ってから再開するか、もしくは、自分で修正しコードを更新する必要があります。

どちらにしても、本番サイトは壊れていないため、消費者は引き続き買い物が楽しめます。さらに、すべてが期待どおりに機能し満足できるまで、必要なだけプロセスを繰り返すことも可能です。

WooCommerceの更新手順：本番サイトの更新とテスト（8つのステップで進めるチェックリスト）

ステージング環境を更新し、スムーズに機能させ、機能不全やバグがあれば修正し…これらすべてを終えたら、本番サイトを更新する準備完了です。

それでは、本番WooCommerceサイトの更新手順を見てみましょう。その多くは、ステージング環境のテスト中に実行したものと同様です。

ステップ1：本番サイトのバックアップを取る

まずは、本番サイトのバックアップを作成しましょう。この手順を飛ばさないことが重要です。Kinstaであれば、幾つもの種類のバックアップオプションが利用できます。もちろん、バックアッププラグインを使用することでも対処可能です。

ステップ2：サイトの別のスナップショットを作成する

次に、WP Boomを使用してサイトの別のスナップショットを作成します。これにより、更新前の本番サイトの視覚的な比較対象が確保できます。

ステップ3：Ghost InspectorまたはUsetraceを実行しちゃんと機能するか確認する

ここでも、テストの記録にChrome拡張機能を使用するかオンラインツールを使用するかに応じて、Ghost InspectorまたはUsetraceを使用できます。これは、サイト更新前の別の比較対象となります。

ステップ4：変更内容を本番環境に適用する

次に、ステージング環境と本番環境の動作方法によっては、ステージングサイトと本番サイトの間で変更点を同期するだけでOKな場合があります。または、プラグインとコードを再度更新する必要がある場合もあります。

ちなみにKinstaを使用している場合は、ワンクリックで変更内容を本番環境に適用することができます。

そして、WooCommerceストアのメンテナンスモードを解除します。

ステップ5：エラーがないかログを確認する

更新の同期が完了したら、エラーログを再度見て、問題が発生していないか確認します。引き続きトップページ、管理画面にアクセスできることも確認しましょう。

ステージング環境の場合と同様に「死の真っ白画面」が表示されるか、回復不可能な状況が発生した場合は、以前のスナップショットを使うことでサイトを復元して、トラブルシューティングを行うか、プロによるサポートを利用してください。

ステップ6：WP Boomで別のスナップショットを作成する

次に、もう一度WP Boomを実行して2回目のスナップショットを作成します。変更前と変更後のスナップショットを比較し、何か違いがあるか確認します。

ステップ7：Ghost InspectorまたはUsetraceをもう一度使ってサイトが問題なく機能しているか確認する

ここでも、自動化ツールを使用したテストを実行して、すべてが正常に機能しているかどうか確認できます。この時点で、お問い合わせフォームなど、サイトの他の機能について、手動（または自動）でのチェックを実施することもできます。

ステージングサイトの更新中に問題に対処していれば（プラグインコードと独自のカスタムコードの競合など）、この段階で多くの修正は必要ないはずです。

ステップ8：最後の見た目のチェックを行う

これで、ほぼ完了です。あとは、重要なURLと機能のリストをもう一度確認して、すべてが問題なく動いていることを確認しましょう。

問題がなければ、これで終わりです。更新済みのWooCommerceがちゃんと公開されました。

WP Boomの使い方

WP Boomは、WordPress向けに開発された視覚的なテスト、比較ツールです。設定を終えると、サイトの更新前と更新後のスクリーンショットを比較したり、自動更新でサイトに視覚的な変化が発生するたびにアラートを受け取ったりすることができます。

WP Boomを利用するには、無料アカウントを作成します。メールとパスワードを入力すると、サイトと接続するための画面が現れます。

情報を入力し「Create Site」をクリックすると、WP Boomがサイトの最初のスナップショット作成を開始します。これには、サイトのページ数に応じて、1〜2分かかります。

これが完了すると、ページが再読み込みされます。サイトの名前をクリックすると、スナップショットの概要が表示されます。スナップショットを作成した時間やサイトのページ数などが確認できます。

2つ目のスナップショットを作成する準備ができたら、WP Boomダッシュボードに戻り、サイトを選択して「Snapshot Selected Sites」をクリックします。

WP Boomに含まれる他の優れた機能には、毎週のスナップショットをスケジュールするものや、サイトの視覚的な変更の詳細が記載されたレポートをメールで送信するものがあります。これは、大量のサイトを管理していて、自動更新をONにしている場合に便利です。

テスト自動化ツールの説明—Ghost InspectorとUsetrace

決済プロセスだけでなく、更新後にWooCommerceサイト全体の機能が適切に機能していることをテストして確認することが重要です。

お客さんが使おうとした時に、お問い合わせフォームやライブチャットが機能しないとします。それを、テストすることなく、あなたがどのように把握できるというのでしょうか？

手動テストは簡単に実行できます。サイトを開いて、お問い合わせフォームに入力したり、ライブチャットウィンドウを開いてみたりするだけです。

このプロセスを自動化するには、重要な機能をリストにして、手動でテストを実行する際の方法をまとめます（「サイトを開く、お問い合わせページに移動する、フォームに入力する」など）。これにより、手動テスト実行時に手順を見落とす心配がなくなります。

このプロセスを自動化したい場合、自動テストを細かく制御したい場合、または、高度にカスタマイズしたサイトや機能を使用したい場合は、Ghost InspectorやUseTraceを利用してみることをお勧めします。

PHPへの慣れがなく、スクリプトやコードをいじりたくない場合は、どちらも優れた選択肢です。これらの両方に、決済テストを自動化する同様の機能があります。

最終的に、どちらを選択するかは、テストにChrome拡張機能を使用するか、オンラインツールを使用するかによって決まります。また、デベロッパーであり、自分で細かくいじりたい場合には、Codeceptionが便利です。

Ghost Inspectorの使い方

Ghost Inspectorは、WooCommerceサイトのテストを自動化し、適切に機能しているかどうか確認するためのツールです。最高のウリは、プログラミングやテストの特別な経験が一切必要ないことです。

Ghost Inspectorは、ChromeまたはFirefoxブラウザに拡張機能を追加して使用します。すると、拡張機能がサイトを記録し、自動的にテストを実行してくれます。

利用を開始するには、Ghost Inspectorのサイトへ移動して「Start Your Free Trial」をクリックします。フォームに情報を入力し「Create Account」を押します。

これで、ウェルカムページが表示されます。下部にある「Install Test Recorder」ボタンをクリックします。

すると新しいタブでChromeウェブストアが開きます。そこで「Chromeに追加」ボタンを押します。

Ghost Inspector拡張機能がブラウザに自動的に追加され、右上隅に表示されます。初回クリックで、ユーザー情報の入力とログインが求められます。

ブラウザを再読み込みします。テストを実行する準備ができたら、あなたのWooCommerceサイトにアクセス（ストアからはログアウトした状態で）して、ブラウザ拡張機能をクリックします。

プルダウンメニューから「Create a new test」を選択して「Start Recording」ボタンを選択します。

サイトのテストを実行すると、Ghost Inspectorがすべてのアクションを記録します。完了したら、拡張機能をもう一度クリックして「I’m Finished Recording」を押します。

その後、テストに名前を付けて保存できます。「View My Test」を選択すると、Ghost Inspectorダッシュボードが表示されます。

ここからテストの詳細が見られます。関連するステップがリスト形式で表示され、編集することもできます。テストが成功したかどうかがわかり、失敗の場合には、その手順に問題があることがわかります。詳細については、Ghost Inspectorのドキュメントをご覧ください。

Usetraceの使い方

特定のブラウザに限定されない自動テストツールとなると、Usetraceがあります。このツールを使用すると、Usetraceオンラインエディタでワークフローを記録して「トレース」を作成できます。次に、それを使用してサイトを自動でテストできます。

開始するには、Usetraceのウェブサイトに移動し、「Sign Up and Start Testing Now」をクリックします。アカウントを作成すると、Usetraceダッシュボードにリダイレクトされます。ここから「Start by creating a new trace」を選択します。

ウィンドウの左側には、トレースステップと設定があります。右側はテスト対象のサイトです。テストを開始するには「Record Steps」をクリックします。

プログラムがサイトの挙動を記録し始めます。カートへのアイテムの追加やお問い合わせフォームへの入力などのアクションを実行するたびに、左側のトレースステップにチェックポイントが追加されます。

完了したら「Save Steps」ボタンをクリックします。

トレース全体を実行してすべてが機能しているかどうか確認するには、左下隅の「Run Trace」を選択します。

完了すると「Success!」というメッセージが表示されます。

「Details」をクリックして各ステップの詳細を確認するか、完了したら「OK」を押します。詳細なガイダンスと手順については、Usetraceのドキュメントをご覧ください。

まとめ

適切なツール、ゆとりをもった準備、しっかりしたチェックリストがあれば、WooCommerceの更新準備（テスト）と実行を問題なくこなすことができます。WooCommerceの更新に関する不安を取り除くためには、プロセスの曖昧な点を排除することが重要です—そんな訳で、今回は詳しくご紹介しました。この内容が、皆さんのWooCommerceサイトを最新に保つための便利なガイドとなりましたら幸いです。

また、ストアのトランザクションメールもテストすることが重要ですが、これはまた別のテーマになります。

さて、続いては皆さんの番です。あなたは、WooCommerce、WordPressサイトを更新するとき、視覚化またはスクリーンショットツールを使用していますか？更新の際には、他にどのようなツールやワークフローを使用していますか？以下のコメント欄から教えてください！