WordPressサイトを公開前にプレビューする方法

私たちが読者に伝えることの一つは、常に公開前にプレビューすることです。長年にわたり、私たちは何千ものWordPressページや投稿を作成および更新してきましたが、公開前にコンテンツをプレビューすることは、私たちの編集プロセスの重要な部分となっています。

このステップをスキップすると、訪問者に予期せぬ問題（レイアウトの破損、画像の欠落、またはタイポ）が発生する可能性があります。私たちも経験がありますが、実際にはこれらの問題は簡単に回避できます。

この記事では、公開前にWordPressウェブサイトをプレビューするための効果的な方法を説明します。これにより、サイトが意図したとおりに見え、機能することに自信を持てるようになります。🧑‍💻

このガイドで取り上げるトピックの簡単な概要を以下に示します。以下のリンクを使用して、特定のセクションにジャンプしてください。

• 近日公開モードで公開前にWordPressサイトをプレビューする
• クライアントがWordPressサイトを公開前にプレビューできるようにする
• WordPressのステージングサイトを作成して変更をプレビューする
• 公開前にWordPressの投稿とページをプレビューする
• 切り替える前にWordPressテーマをプレビューする
• WordPressテーマのカスタマイズをプレビューする
• カスタムWordPressテーマをプレビュー
• ランディングページを公開前にプレビューする
• ボーナスヒント🌟：ビジュアルリグレッションテストでデザインの問題を検出する

準備はいいですか？始めましょう。

近日公開モードで公開前にWordPressサイトをプレビューする

新しいWordPressウェブサイトを作成している場合、サイトの作業中は常に「近日公開」モードを有効にすることをお勧めします。

これにより、ウェブサイト訪問者に適切な「近日公開」ページを表示できます。WordPress管理エリアにログインしてウェブサイトで作業することはできますが、訪問者はそれを見ることができません。

最も良い点は、ウェブサイトをプレビューして、公開する前に必要なすべてのテストを実行できることです。

これを行うには、SeedProdが必要です。これは市場で最高のWordPressウェブサイトビルダーであり、美しい「近日公開」ページを簡単に表示できます。

当社のパートナーブランドの中には、実際にSeedProdを使用してウェブサイトを構築している企業もあります。それらがどれほど効果的であったかを直接見てきましたし、読者の皆様向けのチュートリアルを作成する際に何度もこのツールを使用しました。

プラグインについてさらに詳しく知りたい場合は、詳細なSeedProdレビューをご覧ください。

まず、SeedProdプラグインをインストールして有効化する必要があります。詳細については、WordPressプラグインのインストール方法に関するステップバイステップガイドをご覧ください。

アクティブ化後、SeedProd » Settingsページにアクセスしてライセンスキーを入力してください。この情報はSeedProdウェブサイトのアカウントで見つけることができます。

次に、WordPress管理画面からSeedProd » Landing Pages画面に移動します。

ここから、「近日公開ページを設定」ボタンをクリックするだけです。

その後、プラグインは、今後の公開ページ用のテンプレートを選択するように求めます。

SeedProdには、コンバージョンを増やすためにプロがデザインした、いくつかの美しい「近日公開」テンプレートが用意されています。

テンプレートを選択すると、SeedProdのページビルダーインターフェースが画面に表示されます。

ページビルダーは直感的なデザインツールです。ポイントアンドクリックで任意の項目を編集したり、左側の列から新しい項目をレイアウトにドラッグアンドドロップしたりできます。

また、Eメールサインアップフォームやソーシャルメディアボタンを「近日公開」ページに追加して、ユーザーがローンチ前でもブランドをフォローできるようにすることもできます。

ページの設計が完了したら、上部にある接続タブに切り替えます。ここから、Eメールマーケティングサービスを統合してリストを増やし、サイトが公開されたときに人々に通知することができます。

より詳細な手順については、SeedProdを使用してWordPressで魅力的な準備完了ページを作成する方法に関するチュートリアルをご覧ください。

終了したら、「保存」ボタンをクリックして変更を保存してください。

次に、「公開」を選択して、近日公開ページを使用できる状態にします。まだウェブサイトではアクティブになっていません。次のステップで行います。

これで、ページビルダーインターフェイスを閉じることができます。これにより、SeedProd » Landing Pages画面に戻ります。

ここで、「近日公開」ページボックスの下のトグルを「アクティブ」にクリックします。これにより、すべてのウェブサイト訪問者に実際のウェブサイトの代わりに新しい「近日公開」ページが表示されるようになります。

これで、WordPress管理画面からログアウトするか、シークレットモードでウェブサイトにアクセスできます。

準備完了ページがウェブサイトでライブ表示されます。

WordPressダッシュボードに引き続きログインして、ウェブサイトの作業を続けることができます。

ログインしているときにライブウェブサイトをプレビューすることもできます。

サイトの作業が完了したら、SeedProd » Landing Pages画面に移動して、「近日公開」ページをオフにすることができます。

ここで、「アクティブ」スライダーをクリックして非アクティブに戻します。

クライアントがWordPressサイトを公開前にプレビューできるようにする

クライアントのウェブサイトで作業している場合、クライアントが公開前にWordPressウェブサイトの変更を簡単にプレビューできるようにする方法はいくつかあります。

ただし、最も簡単な方法は、上記で示したようにSeedProdで作成した「近日公開」ページを使用することです。

「近日公開」モードをアクティブにしたら、「ページを編集」ボタンをクリックする必要があります。

これにより、画面上にページビルダーが起動します。ここで、[ページ設定]タブに切り替える必要があります。

次に、「アクセス制御」セクションをクリックします。

ここから、バイパスURLを作成し、URLの有効期限を選択できます。変更を保存することを忘れないでください。

クライアントは秘密のURLを使用して、近日公開ページをバイパスし、ウェブサイトをプレビューできるようになりました。

ウェブサイトがすでにライブで、公開前にクライアントに変更を共有したい場合は、次のステップで説明します。

WordPressのステージングサイトを作成して変更をプレビューする

本番サイトに適用する前に変更をテストおよびプレビューできるようにステージングサイトを作成することは、Webプロフェッショナルの間で標準的なベストプラクティスです。

ステージングサイトは、ウェブサイトのプライベートなクローンです。メインの一般公開からは隠されており、ライブサーバーで変更をテストおよびプレビューする利点があります。

主要なWordPressホスティング会社の多くは、1クリックでステージングサイトを作成できます。ボタンをクリックするだけでステージングサイトを作成し、行った変更を本番サイトと簡単に同期できます。

この記事では、Bluehostでステージングウェブサイトを作成する方法を説明します。

Bluehostは世界最大級のホスティング会社であり、公式に推奨されているWordPressホスティングプロバイダーです。WordPressの全顧客に1クリックでステージングサイトを作成できる機能を提供しています。

まず、Bluehostプラグインがウェブサイトにインストールされ、有効化されていることを確認する必要があります。すでに有効化されている場合は、WordPress管理メニューの上部にBluehostメニュー項目が表示されます。

Bluehostメニューが表示されない場合は、Bluehostホスティングアカウントのコントロールパネルにログインし、「Websites」ボタンをクリックしてください。

その後、ウェブサイトの「設定」をクリックします。

サイト管理エリアで、「プラグイン」タブに切り替えます。

次に、Bluehostプラグインを有効化します。

Bluehostプラグインがインストールされていることを確認したら、ステージングサイトを作成する準備が整いました。

WordPress管理画面から、Bluehostプラグインページをクリックし、「ステージング」タブに切り替えます。

その後、「ステージングサイトを作成」をクリックします。

プラグインがステージングウェブサイトを生成します。

完了したら、「現在編集していません」をクリックしてステージングサイトに切り替え、作業を開始できます。

ステージングサイトで作業し、ライブプレビューで変更を確認できるようになりました。

切り替えると、WordPress管理バーに赤い「ステージング環境」の通知が表示されます。

これは、ライブサイトとの違いを判断するのに役立ちます。

ステージングサイトで変更のプレビューが完了したら、再度Bluehostプラグインページに移動し、「ステージング」タブに移動します。

ここから、「すべての変更をデプロイ」を選択し、更新ボタンをクリックして変更をライブにします。

詳細およびその他のホスティング環境の手順については、WordPressサイトのステージング環境を作成する方法に関する詳細ガイドをご覧ください。

公開前にWordPressの投稿とページをプレビューする

WordPressは、テーマのスタイルを自動的に使用して投稿やページのライブプレビューを表示する直感的なブロックエディターを使用しています。

ただし、ヘッダー、サイドバー、その他の要素がすべて表示された状態で、投稿やページがどのように表示されるかについては、明確なイメージが得られない場合があります。

幸いなことに、ブロックエディターを使用すると、投稿やページを公開せずにプレビューすることもできます。

右上隅にある「プレビュー」ボタンをクリックするだけです。

デスクトップ、タブレット、モバイルのプレビューオプションを選択できますが、これらはコンテンツエディター内のプレビューのみを表示します。

デバイスタイプを選択した後、「新しいタブでプレビュー」オプションをクリックして、ウェブサイトのフルプレビューを表示します。

WordPressは、投稿やページを公開する前に、そのプレビューを表示します。

未公開の投稿のプレビューを他の人に排他的に許可したい場合は、WordPressで未公開投稿の公開プレビューを許可する方法に関するガイドを参照してください。

切り替える前にWordPressテーマをプレビューする

通常、WordPressテーマを有効化すると、ウェブサイトにすぐに反映されます。

ステージングウェブサイトを使用していない場合、ユーザーはカスタマイズなしで新しいテーマを見ることになります。

ウェブサイトに適用する前にWordPressのテーマをプレビューできたら、便利だと思いませんか？

幸いなことに、WordPressではテーマを有効化する前にプレビューできます。

プレビューしたいWordPressテーマをインストールするだけです。詳細については、WordPressテーマのインストール方法に関するガイドをご覧ください。

テーマをインストールしたら、「ライブプレビュー」リンクをクリックします。

または、Appearance » Themesページにアクセスして、インストール済みのテーマの上にマウスカーソルを合わせることもできます。

「ライブプレビュー」を起動するボタンが表示されます。

WordPressはテーマカスタマイザーを起動します。

ここで、現在のコンテンツでテーマのライブプレビューが表示されます。

テーマカスタマイザーは、既存のコンテンツとナビゲーションメニューを使用します。左側のパネルからさまざまなテーマ設定を試すことができます。

テーマをアクティブ化せずにテーマカスタマイザーを終了できます。ただし、カスタマイズは保存されません。

テーマの外観に満足したら、「アクティブ化して公開」ボタンをクリックして有効化して公開できます。

テーマの切り替えでお困りですか？WordPressテーマを正しく切り替える方法に関するチュートリアルをご覧ください。

WordPressテーマのカスタマイズをプレビューする

WordPressテーマを変更したいが、ライブサイトでどのように表示されるかわからないですか？

WordPressには、変更を適用する前にWordPressテーマをプレビューするためのさまざまな方法が用意されています。

ほとんどのWordPressテーマでは、テーマカスタマイザーを使用して変更をプレビューできます。単に外観 » カスタマイズページに移動して起動します。

ここから、さまざまなテーマオプションを試したり、メニューを変更したり、ウィジェットをカスタマイズしたり、カスタムCSSを追加したりできます。

これにより、テーマの変更を実際にウェブサイトに適用せずにプレビューできます。

加えた変更に満足したら、「公開」ボタンをクリックして変更を適用できます。オプションで、歯車アイコンをクリックして変更を下書きとして保存したり、変更をスケジュールしたり、クライアントとプレビューリンクを共有したりすることもできます。

さて、この方法は、フルサイトエディターを使用するWordPressブロックテーマでは利用できない場合があります。

その場合、外観 » エディター メニューにアクセスしてエディターを起動できます。

フルサイトエディターを使用すると、ブロックを使用してWordPressテーマを編集できます。ウェブサイトのライブプレビューで個々のテンプレートファイルを編集できます。

WordPressのフルサイト編集に関する完全ガイドをご覧ください。

ただし、テーマカスタマイザーとは異なり、変更をドラフトとして保存することはできません。これらの変更は、保存時にライブになるか、保存せずに終了した場合は失われます。

カスタムWordPressテーマをプレビュー

ライブプレビューを使用して、完全にカスタムなWordPressテーマを作成したいですか？

SeedProdは、ライブプレビューを備えたドラッグ＆ドロップインターフェイスを使用してカスタムWordPressテーマを作成できる、最高のWordPressテーマビルダーです。

まず、SeedProdプラグインをインストールして有効化する必要があります。詳細については、WordPressプラグインのインストール方法に関するステップバイステップガイドをご覧ください。

アクティブ化後、SeedProd » Settingsページにアクセスしてライセンスキーを入力してください。この情報はSeedProdウェブサイトのアカウントで見つけることができます。

次に、SeedProd » Theme Builder ページにアクセスする必要があります。

ここから、「テーマ」ボタンをクリックします。

これにより、開始点として使用するテーマを選択できるポップアップが表示されます。

SeedProdには、カスタマイズできる美しいテーマとテンプレートがたくさん付属しています。

テーマを選択するだけでクリックすると、SeedProdがすべてのテーマテンプレートファイルを生成します。

ここから、これらのテーマファイルのいずれかをクリックして、テーマビルダーで編集できます。

SeedProdには、ブロックとセクションを使用して美しいレイアウトを作成する直感的なドラッグ＆ドロップビルダーが付属しています。

左側の列からデザインにブロックを追加できます。右側には、テーマテンプレートのライブで編集可能なプレビューが表示されます。

SeedProdはWooCommerceにも完全対応しています。

これにより、商品ページ、チェックアウトページなど、オンラインストアのデザインとプレビューが可能になります。

モバイルデバイスでテーマをプレビューしたいですか？

下部バーのモバイルアイコンをクリックするだけで、SeedProdがテーマのモバイルプレビューを表示します。

テーマの編集が完了したら、右上にある「保存」ボタンをクリックしてビルダーを終了できます。必要に応じて他のテンプレートを編集できます。

カスタムテーマを展開する準備ができたら、テーマビルダーページで「SeedProdテーマを有効にする」トグルをオンにするだけです。

カスタムテーマが公開されます。これは、既存のWordPressテーマを置き換えることを意味します。

SeedProdカスタムテーマビルダーの詳細については、コードを書かずにカスタムWordPressテーマを作成する方法に関するチュートリアルをご覧ください。コードを書かずにカスタムWordPressテーマを作成する方法

ランディングページを公開前にプレビューする

ランディングページは、マーケティングキャンペーンで使用される特別なページです。これらのページは、コンバージョンと売上を最適化しています。

一部のWordPressテーマには、ブロックエディターを使用してカスタマイズできるランディングページテンプレートが付属しています。

ただし、より多くのデザインオプションが必要な場合は、SeedProdが必要です。これは最高のWordPressランディングページビルダーであり、ウェブサイト用の美しいランディングページを簡単に作成できます。

SeedProdには、プロがデザインした数十種類のランディングページテンプレートが用意されており、すぐに始められます。さらに、ランディングページはすべての画面サイズで同様に美しく表示されます。

まず、SeedProdプラグインをインストールしてアクティブ化する必要があります。アクティブ化後、SeedProd » Settingsページにアクセスしてライセンスキーを入力する必要があります。

この情報はSeedProdウェブサイトのアカウントで見つけることができます。

次に、WordPress管理サイドバーから**SeedProd » ランディングページ**画面に移動します。

ページのデザインを開始するには、「新しいランディングページを追加」ボタンをクリックしてください。

次に、テンプレートを選択する必要があります。

開始点として使用できる高度に最適化されたテンプレートがいくつかありますが、空白のテンプレートから開始することもできます。

これにより、ランディングページの名前を入力し、URLスラッグを選択する必要があるポップアップが表示されます。

次に、「保存してページの編集を開始」ボタンをクリックして続行します。

これにより、ページビルダーインターフェイスが起動します。

ライブプレビューでページをデザインできるドラッグ＆ドロップデザインツールです。

ランディングページの編集が完了したら、「保存」ボタンをクリックし、「公開」を選択して、ウェブサイトで公開できます。

詳細については、WordPressでランディングページを作成する方法に関するチュートリアルをご覧ください。

ボーナスのヒント 🌟: ビジュアルリグレッションテストでデザインの問題を検出する

サイト管理をさらに進めたいですか？ ビジュアルリグレッションテストは、変更を加える前後のウェブサイトのスクリーンショットを自動的に比較するのに役立ちます。

これは、人間の目では見逃しがちなデザインの問題を検出する最良の方法の1つです。これには、レイアウトのずれ、フォントの不具合、色の不一致、または特定のページや画面サイズにのみ表示されるスペーシングの問題が含まれます。

例えば、プラグインの更新のような小さなことでも、意図せずお問い合わせフォームのスタイルを壊したり、要素の位置をずらしたりする可能性があります。

ビジュアルリグレッションツールはこれらの違いを並べてハイライトするため、訪問者が気づく前にそれらを見つけて修正できます。

始める最も簡単な方法は、WordPress用のVRTsプラグインを使用することです。これにより、コーディングなしでダッシュボードから直接特定のページやテンプレートのビジュアル比較テストを実行できます。

公開する前に安全に更新をテストするために、ステージングサイトで使用することもできます。詳細については、WordPressでビジュアルリグレッションテストを簡単に行う方法に関する完全なガイドを参照してください。

この記事が、公開前にWordPressウェブサイトをプレビューする方法を学ぶのに役立ったことを願っています。また、WordPressの災害復旧計画を作成するための専門家によるヒントや、WordPressメンテナンスの究極ガイドもご覧になりたいかもしれません。

この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterやFacebookでもフォローできます。