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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

次に、SeedProdプラグインをインストールしてアクティブ化する必要があります。

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

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

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

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

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

次に、WordPress管理エリアからSeedProd » ランディングページ画面に移動します。

ここから、「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ホスティングアカウントのコントロールパネルにログインできます。そこから、「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 テーマでは、テーマカスタマイザーを使用して変更をプレビューできます。単に 外観 » カスタマイズ ページに移動して起動してください。

ここから、さまざまなテーマオプションを試したり、メニューを変更したり、ウィジェットをカスタマイズしたり、カスタム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テーマには、ブロックエディターを使用してカスタマイズできるランディングページテンプレートが付属しています。

ただし、より多くのデザインオプションが必要な場合は、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でも私たちを見つけることができます。