Invest a Little Time Now to Save a Lot of Time (And Anxiety) Later

Before we dive in, best practices tells us that you never update your site, especially WooCommerce, without thoroughly testing any new releases first. これは、メジャー、マイナー、およびパッチ リリースに関係ありません。

後で多くの時間を節約するために、今少し時間を費やすことをいとわない必要があります。 少し時間をかけて、どのような変更が行われるのか、そして最も重要なことは、それがあなたのサイトの他のすべてにどのような影響を与える可能性があるのかを理解することです。

物事を整理し、いかに簡単に物事が壊れるかを理解するために、プラグインやテーマの開発者の視点から少し考えてみてください。 ここで、あなたやあなたのクライアントサイトが使用しているプラグインの数を考えてみてください。 WooCommerceのアップデートによって、どの程度の確率でいくつかの機能が壊れるでしょうか？

そのため、WooCommerce のアップデート発表の直後は、WooCommerce をアップデートする前に、変更履歴と WordPress.org サポート フォーラムを常に確認することをお勧めします。 もしアップデートに問題があったとしても、99%は他の人が先にその問題に遭遇しており、自分で問題に対処する時間と手間を大幅に節約できます。

また、WooCommerce のアップデートをすぐに自分のサイトに反映することを控え、プラグイン/テーマの作者が WooCommerce 関連製品のアップデートをリリースしてから自分のサイトも更新することも珍しくありません。

WooCommerceサイトのアップデートに関して、あなたは🤠カウボーイ、🥔カウチポテト、🙀びびり猫、😎マーベリックのように行動しますか? Click to Tweet

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

WooCommerceのアップデートに取り組む際には、4つの重要な段階があり、それぞれに決まった手順があります。 一度すべてを実行すれば、毎回より早く、より簡単になります。 WooCommerce の更新について、次の 4 つの段階をそれぞれ説明します。 適切なツールを入手する

率直に言って、WooCommerce を手動でテストするのは面倒で時間のかかる作業です。 このような理由から、多くの人がテストを行わなかったり、行ったとしても適切にテストが行われず、サイトのエラーを見逃してしまうのです。 長年にわたって数え切れないほど WooCommerce のアップデートをテストしてきた私たちが推奨するツールは、以下のとおりです。

Staging Site

これは譲れないところです。 WooCommerceの新リリース後、すぐに本番サイトを更新することは絶対に避けなければなりません。 ステージング サイトは、自由にものを壊せる (通常は影響なし) テスト環境を提供します。

そこでは、WooCommerce の更新を実行し、新しいバージョンをテストし、ライブ サイトを更新する前にサイトの反応を見ることができます。 ステージングサイトを持っていない場合は、Kinstaがお手伝いします（ワンクリックでステージング環境を提供します）:

MyKinsta のワンクリック ステージング環境

Visual Comparison Tools

WooCommerceアップデート後に自分のサイトに変化があったかどうかを知るにはどうすればよいですか。 何十ものページを持つ大規模なサイトを運営している場合、フォーマットの小さな変化や、表示されなくなったウィジェットを追跡するのに時間がかかることがあります。

このチュートリアルで使用する WP Boom のような視覚的な比較ツールを使用すると、サイトのスナップショットを取り、「更新」を押して、2 番目のスナップショットを取ることができるので、何が変わったかをすぐに確認することができます。

WP Boom

ここで重要なのは、見た目の変化が必ずしもサイトの機能の一部が壊れていることを意味しない、ただ壊れている可能性があることを指摘することです。

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

視覚的な比較ツールは、サイトのフォーマットやデザインの変更をすばやく見つけるのに役立ちますが、エンド ツー エンド テスト ツールはさらにその先を行きます。 サイトの実際の機能をテストし、何かが動作していないときに、より確実性を高めます。

カートにアイテムを追加してチェックアウトするなど、テストを完了するためにサイトをクリックすると、時間がかかります。

エンドツーエンド テスト ツールを使用すると、このプロセスを自動化し、自動的に実行することができます。

1 つ目は Ghost Inspector:

Ghost Inspector

次に試すことのできるエンドツーエンド テスト ツールは Usetrace:

Usetrace

これは WooCommerce 用の自動エンドツーエンド テスト ツールですが、段階評価サイトとライブサイトの両方で使用することができます。 この記事の後半で両方のセットアップ方法を説明します。 WooCommerce には、開発者向けの E2E テストもあります。

Backup Tools

サイトのバックアップは定期的に実行する必要があります。 データベースのバックアップに関心があるなら、WP Migrate DB Pro、または単に WP-CLI を使用してクイック エクスポートを実行することをお勧めします。

Kinstaを使用している場合、毎日の自動バックアップ、手動バックアップポイント、およびバックアップ保持をすべてのプランで提供しています。

MyKinsta backups

正しいツールを手に入れたら、いくつかの事前準備を行う時間です。 Prepping (A 7-Step Checklist)

WooCommerceのアップデートをスムーズに行うには、いくつかの下準備をする必要があります。 多少の手間はかかりますが、一度準備をしておくと、次回更新の際に空白を埋めやすくなり、手早く行うことができます。 以下は、当社が推奨する7つの準備ステップです。

Step 1: 更新するサイトに再度慣れる

自分のサイトがどのように機能するのか分からない場合（新しいクライアントのサイトなど）、いくつかメモを取っておくとよいでしょう。 これにより、更新後にサイトがどのように機能するかについて混乱した場合 (これは予想以上によくあることです) に、不安を和らげることができます。

また、重要な URL とサイト (と顧客) の機能性のリストを作成することをお勧めします。 これには、ホーム、カテゴリ、製品、「マイ アカウント」、カート、およびチェックアウト ページなど、サイトの重要なページが含まれます。

Step 2: バックアップが最新であることを確認する

バックアップが最新ではない場合、今こそ別のバックアップを実行する時です。 バックアップ ツールに再度慣れ親しんでください。 7520>

Step 3: Set Up WP Boom

このツールのセットアップには、ほんの 1 分しかかかりません。 記憶やメモの取り方がうまくなくても（誰でも間違いはあります）、WP Boom はサイトのスクリーンショットでギャップを埋めるのに役立ちます。 減量プロモーションの「前」の写真のように考えてください。

最初のサイトのスナップショットを撮ることから始めると、更新前のステージング サイトの視覚的なベースライン レコードができます。

Note: WP Boom のセットアップと使用方法は、この記事の後半で説明します。

Step 4: 自動テスト ツールのセットアップ

WooCommerce を手動でテストする場合、これはテスト シナリオのリストを作成する部分です。 たとえば、サイトを開く、製品をカートに追加する、チェックアウトに移動する、支払い情報を入力するなどです。

幸い、Ghost Inspector と Usetrace の両方が、このすべてを自動で行ってくれます。

Step 5: テストしたいサイトの他の部分を特定する

次のステップでは、先に作成した重要な URL と機能のリストに基づいて、テストしたいサイトの他の部分を特定します。 これは、コンタクトフォームやポップアップなどの機能、またはスライドショーやギャラリーなどの要素です。

これらのものを手動でテストすることができますが、技術に明るい方は、このステップも自動化することに挑戦できます。 具体的には、使用しているプラグインやテーマが対応しているかどうかを確認します。

繰り返しになりますが、後で時間と不安を解消するために、今、時間をかけたほうがよいでしょう。 WooCommerce.com のリリース アナウンス、変更履歴、GitHub の課題、および WordPress サポート フォーラムを確認することをお勧めします。

Step 7: ライブ サイトをステージング環境に複製する

WooCommerce Subscriptions など、ステージング モードに対応するプラグインを使っている場合、それらをオンにするか単に無効にしてください。 同様に、メールも無効にします。

次に、ステージング環境がライブ サイトをできるだけ忠実に模倣していることを再度確認します。 また、この時点で WordPress のデバッグ モードを有効にして、今後の問題解決を支援することをお勧めします。

重要: サイトをステージングに移行した後、通過した注文を失いたくありません。 これを避けるために、私たちの推奨は、WooCommerce ストアをメンテナンス モードにすることです。 これは、更新とテストを実行している間、注文が行われないことを保証します。 ステージングサイトの更新とテスト（7ステップのチェックリスト）

さて、準備が整ったところで、いよいよ楽しい部分、ステージングサイトの更新です。 ステージング サイトの素晴らしいところは、サイトが壊れても問題ないことです。

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

最初に行いたいことは、WP Boom でサイトのスナップショットを撮ることです。

Step 2: テスト ツールを実行して、テストが合格していることを確認する

前述のとおり、Ghost Inspector や Usetrace などのエンドツーエンド テスト ツールを使用して、テストを自動化することができます。 この記事ではさらに、両方のツールを使用してテストを実行し、テストが合格していることを確認する方法を説明します。

Step 3: プラグインとテーマを更新する

準備段階で、プラグインとテーマが更新する WooCommerce の最新バージョンと互換性があるかどうかを確認すると説明しました。 7520>

Step 4: Stageing Site で WooCommerce をアップデートする

プラグインとテーマをアップデートして互換性の問題がないことを確認したら、Staging Site を WooCommerce の最新バージョンにアップデートする準備ができています。 ステージング サイトを更新することで、WooCommerce の更新をライブ サイトにプッシュする前に解決すべき潜在的なエラーを特定できます。

Step 5: エラーがないかログをチェックする

プラグイン、テーマ、WooCommerce を更新したら、ログをチェックして更新によるエラーがないか確認することが賢明です。 ホームページと管理領域にまだアクセスできることを確認するためにクイックスキャンを行います。

死の白い画面が表示されたり、他の回復不可能な状況に陥ったりした場合は、サイトの以前のスナップショットに戻すのに良い時期です。 7520>

Step 6: 変更を比較するために 2 番目のスナップショットを取得する

これまでのところすべてがうまくいっているなら、WP Boom をもう一度実行して 2 番目のスナップショットを取得します。

WP Boom の優れた点は、前回のスナップショット以降にサイトがどのくらい変化したかを教えてくれることです。

今すぐ購読する

Step 7: Ghost Inspector または Usetrace を再度実行してすべてが正しく動作することを確認する

次に、Ghost Inspector または Usetrace（または選択したいずれかのエンドツーエンド テスト ツール）を使用して別のテストを実行し、チェックアウト フローが正しく動作する状態を確実に確認します。 また、コンタクト フォームなど、サイトの他の機能についても手動または自動でチェックを行うことができます。

何か期待通りに動作しないものがある場合、今こそ報告または修正するときです。 サードパーティのプラグイン/拡張機能開発者によって保守されていないコード）を使用している場合、それを修正し、アップデートを実行する前または後に、修正がライブ サイトに適用されていることを確認する必要があります (問題によって異なります)。 バグをどこに報告するかは、使用しているプラグインとサポートの手配に依存します。 ここからは、プラグイン/テーマの新しいリリースを待って、再度プロセスを試みるか、自分で修正に取り組み、コードを更新する必要があります。

良い知らせは、ライブ サイトは壊れておらず、顧客はまだ購入することができるということです。 さらに、すべてが期待どおりに動作していると確信できるまで、時間をかけて必要なだけこのプロセスを繰り返すことができます。 WooCommerce の更新: 本番サイトの更新とテスト (8 段階のチェックリスト)

ステージング サイトを更新して、壊れた機能を修正し、すべてのバグを修正して、スムーズに動作するようになったら、本番サイトを更新する準備が整いました。

WooCommerce の本番サイトを更新する手順を見てみましょう。その多くは、ステージング サイトのテスト中に行ったものと同様です。 このステップを逃さないようにすることが重要です。 Kinstaのユーザーであれば、さまざまなバックアップオプションから選択することができます。 しかし、バックアッププラグインを使用することもできます。

Step 2: Take Another Snapshot of Your Site

次に、WP Boomでサイトの別のスナップショットを取得したいと思うでしょう。

Step 3: Ghost Inspector または Usetrace を実行し、テストが合格していることを確認する

Chrome 拡張またはオンライン ツールを使用してテストを記録するかどうかによって、繰り返しますが、Ghost Inspector または Usetrace をこのために使用することができます。

Step 4: 変更をライブで同期してプッシュする

次に、ステージング環境とライブ環境がどのように動作するかに応じて、ステージング サイトとライブ サイト間で変更を単に同期する必要がある場合があります。

Kinsta を使用している場合、ワンクリックで変更をライブにプッシュできます:

The MyKinsta push staging to live option

WooCommerce store を最初にメンテナンス モードから解除するのを忘れないでください。

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

アップデートの同期が完了したら、その結果発生した可能性のある問題について、エラーログを再度確認します。 ステージング サイトと同様に、死の白い画面が表示されたり、回復不可能な状況に陥ったりした場合は、サイトの以前のスナップショットに戻して、トラブルシューティングを行うか、助けを求めるのが最善です。

Step 6: WP Boomで別のスナップショットを撮る

次に、WP Boomをもう一度実行し、スナップショットの2セット目を取得します。 7520>

Step 7: Ghost Inspector または Usetrace をもう一度実行して、サイトが正しく動作することを確認する

もう一度、自動ツールを使用して別のテストを実行し、すべてが正常に動作することを確認できます。 この時点で、コンタクト フォームなど、サイトの他の機能について手動 (または自動) でチェックすることもできます。

Staging サイトの更新中に、競合するプラグイン コードや独自のカスタム コードなどの問題に対処して修正した場合、この段階で修正する問題は (もしあれば) あまり多くはないはずです。

すべてがうまくいっているようであれば、それで終わりです!

Getting Started with WP Boom

WP Boom は WordPress 用のビジュアル テストおよび比較ツールです。 一度セットアップすると、サイトを更新する前と後のスクリーンショットを比較したり、自動更新によってサイトの外観が変化したときにアラートを受け取ったりすることができます。

The WP Boom sign-up form

詳細を入力し、「サイトを作成」をクリックすると、WP Boomはあなたのサイトの最初のスナップショットを作成する作業に取り掛かります。 ページ数にもよりますが、1～2分ほどで完了します。 サイト名をクリックすると、撮影時刻やサイト内のページ数など、スナップショットの概要が表示されます。

A WP Boom latest snapshot

2度目のスナップショットを行う場合は、WP Boomダッシュボードに戻ってスナップしたいサイトを選択し、「選択したサイトのスナップショット」をクリックするだけです。

WP Boom には他にもいくつかの素晴らしい機能があり、毎週スナップショットをスケジュールする機能や、サイトの視覚的な変更の詳細を示すレポートを電子メールで送信する機能などがあります。 これは、多数のサイトを管理し、自動更新を行う場合に便利です。

自動テスト ツール。 Ghost Inspector と Usetrace

チェックアウト プロセスだけでなく、更新後に WooCommerce サイト全体の機能が正しく動作することをテストして確認することが重要です。

結局、顧客がコンタクト フォームに入力するか、ライブ チャットを使用しようとして、それらの機能の一部が壊れていた場合、それらをテストしなかった場合はどのようにしてわかるでしょうか。

手動テストを実行するのは簡単です。サイトをクリックし、フォームに入力し、ライブ チャット ウィンドウを使用するだけです。

このプロセスを自動化するために、最初に重要な機能のリスト、および、手動テストを実行する方法（すなわち、, 「サイトを開き、連絡先ページに移動し、フォームに入力する、など)。

このプロセスを自動化したい場合、自動テストをもっと制御したい場合、または、高度にカスタマイズされたサイトまたは機能がある場合、Ghost Inspector および/または UseTrace をチェックアウトすることをお勧めします。 これらのオプションは、チェックアウト テストを自動化するための同様の機能を提供します。

結局のところ、どのオプションを使用するかは、テストを記録するために Chrome 拡張またはオンライン ツールを使用したいかどうかに依存します。 あるいは、あなたが開発者で、自分の手を汚すのが好きなら、Codeceptionは開発者にとって素晴らしい選択肢です。

Getting Started With Ghost Inspector

Ghost Inspectorは、WooCommerceサイトのテストを自動化し、正しく機能していることを確認するのに使用できるツールです。

Ghost Inspector は、Chrome または Firefox ブラウザに拡張機能を追加することで使用できます。

始めるには、Ghost Inspector の Web サイトにアクセスし、「無料トライアルを開始」をクリックします。 フォームに情報を入力し、「アカウントの作成」を選択します。

The Ghost Inspector sign-up page

これにより、ウェルカムページにリダイレクトされます。 下部にある［Install Test Recorder］ボタンをクリックします。

Installing the Ghost Inspector test recorder

これにより、新しいブラウザ タブで Chrome Web ストアが表示されます。 Chromeに追加:

Adding the Ghost Inspector Chrome extension

ブラウザにGhost Inspector拡張機能が自動的に追加されて、右上の隅に表示されるようになります。 初めてクリックしたときは、認証情報を使用してログインするように求められます:

Logging to the Ghost Inspector Chrome extension

Refresh your browser. テストを実行する準備ができたら、WooCommerceサイトにアクセスし（ログアウトしていることを確認）、ブラウザ拡張機能をクリックします。

ドロップダウンメニューで、「新しいテストを作成する」オプションを選択し、続いて「記録を開始」ボタンをクリックします：

The Ghost Inspector ‘start recording’ button

サイトを実行してテストすると、Ghost Inspectorがすべてのアクションを記録します。 終了したら、拡張子をもう一度クリックし、[記録を終了しました:

The Ghost Inspector ‘finished recording’ button

その後、テストの名前を付けて保存することができます。 自分のテストを表示] を選択すると、Ghost Inspector ダッシュボードが表示されます:

The Ghost Inspector dashboard

ここで、テストのすべての詳細を確認できます。 関連するステップのリストが表示され、それらを編集するオプションがあります。 テストが合格したかどうか、不合格の場合はどのステップに注意が必要かが表示されます。 より詳細な情報については、Ghost Inspector のドキュメントを確認してください。

Getting Started With Usetrace

1 つのブラウザに特化しない自動テスト ツールを使用したい場合、Usetrace を使用するとよいかもしれません。 このツールでは、Usetrace オンライン エディターを通じて、ワークフローを記録することにより、「トレース」を作成します。

始めるには、Usetrace の Web サイトにアクセスし、[Sign Up and Start Testing Now] をクリックします。 アカウントを作成した後、Usetrace ダッシュボードにリダイレクトされます。

The Usetrace dashboard

左側のウィンドウには、あなたのトレース手順と設定が表示されます。 右側は、あなたがテストしているサイトです。 開始するには、ステップの記録:

トレースステップの記録

プログラムは、あなたのサイトのインタラクションの記録を開始します。 カートに商品を追加したり、問い合わせフォームに記入したりといったアクションを起こすたびに、左側のトレースステップにチェックポイントが追加されます。

終了したら、[ステップを保存] ボタンをクリックします。

A Usetrace test

すべてが動作することを確認するには、左下隅にあるトレース実行を選択します。

The Run Trace button in Usetrace

完了後、成功メッセージが表示されます：

A Usetrace success message

詳細をクリックして各ステップを詳しく確認するか、完了なら OK を選択することができます。 より詳細なガイダンスや手順については、Usetraceのドキュメントを参照してください。

「WooCommerceサイトの更新」という言葉に不安を感じますか？ このガイドで安全かつ簡単にプロセスを完了する方法を学びましょう！Click to Tweet

Summary

正しいツール、いくつかの準備時間、そしてしっかりとしたチェックリストがあれば、WooCommerceの更新をテストして実施するのに問題はないでしょう。 WooCommerce の更新に関する不安を取り除くには、このプロセスを解明することが重要です。

また、ストアのトランザクション電子メールもテストすることが重要ですが、これはまったく別の旅です。 WooCommerceやWordPressを更新する際に、可視化ツールやスクリーンショットツールを使用しますか？ その他、アップデートに使っているツールやワークフローがあれば教えてください。 下のコメントで私たちと共有してください！