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

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

このステップをスキップすると、レイアウトの破損、画像の欠落、誤字脱字など、訪問者にとって不快な驚きにつながる可能性があります。私たち自身も経験がありますが、これらの問題は実際、簡単に回避できます。

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

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

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

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

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

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

これにより、訪問者にプロフェッショナルな「近日公開」ページを表示できます。WordPress管理エリアにログインしてサイトで作業することは引き続き可能ですが、訪問者はサイトを見ることができません。

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

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

私たちのパートナーブランドの中には、SeedProdを使用してウェブサイトを構築しているところがあります。私たちは、それが彼らにどれほどうまく機能したかを直接見てきましたし、読者のためのチュートリアルを作成する際に、そのツールを何度も使用してきました。

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

開始するには、SeedProdアカウントを作成する必要があります。SeedProdウェブサイトにアクセスし、「今すぐSeedProdを入手」ボタンをクリックしてプランを選択し、チェックアウトプロセスを完了してください。

これで、独自のSeedProdアカウントダッシュボードが利用可能になり、SeedProd Proのzipファイルとライセンスキーを見つけることができます。

次に、SeedProdプラグインをインストールして有効化する必要があります。

WordPress管理パネルから、プラグイン » 新規追加に移動しましょう。

次に、検索バーを使用してプラグインをすばやく見つけてください。

検索結果で、「今すぐインストール」ボタンをクリックし、次に「有効化」をクリックしてサイトで有効にします。

詳細については、WordPressプラグインのインストール方法に関するステップバイステップガイドを参照してください。

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

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

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

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

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

テンプレートを選択すると、SeedProdのページビルダーインターフェースが開きます。

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

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

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

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

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

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

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

ここで、Coming Soonページボックスの下にあるトグルをクリックして「アクティブ」に設定します。これにより、すべての訪問者が実際のウェブサイトの代わりに新しいComing Soonページを確認できるようになります。

これで、WordPress管理エリアからログアウトするか、シークレット/プライベートブラウジングウィンドウでウェブサイトにアクセスできます。

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

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

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

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

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

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

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

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

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

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

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

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

クライアントは秘密のURLを使用して、近日公開ページをバイパスし、ウェブサイトをプレビューできるようになります。これにより、クライアントのためにユーザーアカウントを作成する必要なく、進捗状況を確認できます。

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

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

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

ステージングサイトは、サイトのプライベートなクローンです。一般には非公開で、ライブサーバーで変更をテストおよびプレビューできます。

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

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

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

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

Bluehost メニューが表示されない場合は、Bluehost ホスティングアカウントのコントロールパネルにログインできます。そこから、「Webサイト」ボタンをクリックします。

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

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

次に、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 テーマでは、テーマカスタマイザーを使用して変更をプレビューできます。単に 外観 » カスタマイズ ページに移動して起動してください。

ここから、さまざまなテーマオプションを試したり、メニューを変更したり、ウィジェットをカスタマイズしたり、カスタム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プラグインを使用することです。これにより、ダッシュボードから直接特定のページやテンプレートで視覚的な比較テストを実行できます。

ステージングサイトで使用して、変更を公開する前に安全に更新をテストすることもできます。詳細については、視覚的リグレッションテストの実行方法に関する完全なガイドを参照してください。

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

サイトのテストやプライベートでの構築に関するよくある質問への簡単な回答を見てみましょう。

公開せずにWordPressテーマをテストするにはどうすればよいですか？

最も簡単な方法は、ステージングサイトを使用することです。ほとんどのWordPressホスティングサービスではワンクリックでステージングサイトを作成できるため、テーマのインストール、レイアウトのカスタマイズ、変更のプレビューをライブサイトに影響を与えることなく行うことができます。

公開せずにWordPressサイトで作業するにはどうすればよいですか？

いくつかの選択肢があります。ステージングサイトを使用してプライベートで構築、編集、テストする、コンピューター上にローカルサイトを作成する、またはプラグインを使用してサイトをメンテナンスモードにすることで、作業中に訪問者に未完成のページを見られないようにすることができます。

WordPressサイトが公開されるまでどのくらい時間がかかりますか？

ドメインがすでにホスティングアカウントに接続されている場合、サイトはほぼ即座に公開されます。DNSの更新やホスティングの移行を行っている場合、変更が世界中に完全に伝播するには数時間（最大24〜48時間）かかることがあります。

2時間でWordPressウェブサイトを公開できますか？

はい、可能です。特に既製のテーマやスターターテンプレートを使用している場合はそうです。ホスティングの設定、WordPressのインストール、テーマの選択、そして数時間以内に基本的なサイトを公開することができます。カスタムデザイン、高度な機能、または複数のページが必要な場合は、より時間がかかることがあります。

WordPressサイト管理を改善するための次のステップ

この記事が、公開前にWordPressウェブサイトをプレビューする方法を学ぶのに役立ったことを願っています。

また、以下の専門家ガイドも参照してください。

• 最も役立つWordPressカスタム投稿タイプ
• WordPressページの公開を停止する方法（簡単な方法）
• WordPressでユーザーロールの機能を追加または削除する方法
• WordPressの災害復旧計画の作成方法
• WordPressメンテナンスの究極ガイド

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