Latest SeedProd News

ビジネス成長を支援するWordPressチュートリアル、ヒント、リソース

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

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

Written By: 著者アバター Stacey Corrin
著者アバター Stacey Corrin
Stacey Corrin is a certified content marketing and search specialist with over 15 years of experience writing about WordPress, SEO, and digital marketing. She manages content for SeedProd and RafflePress, covering tools and strategies she actively uses and tests herself.
    
Reviewed By: レビュアーアバター Turner John
レビュアーアバター Turner John
John Turner is the co-founder of SeedProd. He has over 20+ years of business and development experience and his plugins have been downloaded over 25 million times.

公開前にWordPressサイトをプレビューするには、Coming Soonモード、WordPressの組み込みエディター、またはステージング環境を使用できます。

各方法は異なる状況に対応します。Coming Soonモードを使用すると、訪問者にはプレースホルダーページを表示しながら、サイト全体をプライベートで構築できます。エディタープレビューでは、公開ボタンを押す前に個々の投稿やページを確認できます。ステージング環境は、ライブサイトの安全なコピーを提供し、より大きな変更をテストできます。

このガイドでは、WordPressサイトをプレビューする6つの簡単な方法を説明します。これにより、準備ができるまで何も公開されません。

1. Coming Soonモードで公開前にWordPressをプレビューする

新しいサイトを構築している場合は、Coming Soonページを有効にして、作業中に訪問者に洗練されたプレースホルダーを表示します。公開前にログインして変更をプレビューし、すべてをテストできます。

SeedProd ドラッグ&ドロップ WordPress ウェブサイトビルダー

これを簡単に行うには、SeedProdを使用します。これは、美しいComing Soonページを作成し、公開まで実際のサイトを非公開にできる最高のWordPressウェブサイトビルダーです。

注意: 完全な柔軟性のためにPro機能を示します。シンプルなComing Soonページ用の無料バージョンもあります。

まず、WordPressウェブサイトにSeedProdをインストールしてアクティブ化します。Proバージョンを使用している場合は、SeedProd » Settingsの下にライセンスキーを入力します。

次に、SeedProd » Landing Pagesに移動し、Set up a Coming Soon pageをクリックします。

近日公開ページを設定する

そこから、好きなテンプレートを選択し、ロゴ、メッセージ、メールサインアップフォームやソーシャルリンクなどの追加要素でカスタマイズします。

また、Connectタブの下でメールプロバイダーを接続して、公開前に購読者を開始できるようにすることもできます。

SeedProdメール連携

Coming Soonページを保存して公開し、Landing Pages画面に戻って、Coming SoonモードのトグルをActiveに切り替えます。

近日公開モードを有効にする

これ以降、訪問者はComing Soonページを表示します。ログインした管理者は実際のサイトを表示し、デスクトップとモバイルで変更をプレビューできます。

公開の準備ができたら、SeedProdに戻ってトグルをオフにします。サイトはすぐに公開されます。

詳細が必要な場合は、SeedProdを使用してWordPressでComing Soonページを作成する方法の完全なガイドをご覧ください。

2. 公開前にクライアントにサイトをプレビューさせる

クライアントのためにウェブサイトを構築している場合は、サイトをあまり早く公開せずに進捗状況を共有する簡単な方法が必要です。

一部のホスティングプランにはステージングリンクが含まれていますが、すべてではありません。そのため、最も簡単なオプションはSeedProdを使用することです。作業中のサイトを「近日公開」ページの後ろに隠すだけでなく、強力なアクセス制御機能によりプライベートプレビューを共有できます。

たとえば、訪問者向けにブランド化された「近日公開」ページを作成し、クライアントに秘密のバイパスリンクを送信して、変更を加え続けている間に完全なサイトを表示できるようにすることができます。

SeedProdでクライアントプレビューを設定する方法は次のとおりです。

まず、上記の手順に従って「近日公開」ページを作成します。

次に、エディター内のページ上部にあるページ設定タブをクリックします。

SeedProdのページ設定エリアに入る

次に、アクセス制御の見出しをクリックして、クライアントがウェブサイトをプレビューできるようにするさまざまな方法を確認します。

これを行う最も簡単な方法は、バイパスURLオプションを使用することです。この領域にフレーズを入力し、クライアントに「近日公開」ページをバイパスする秘密のURLを提供できます。

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

その結果、一般に公開する前にサイトの進捗状況をプレビューできます。

3. WordPressエディターで投稿とページをプレビューする

WordPressには、目の前にあるにもかかわらず、平均的なユーザーが見逃しやすい便利な機能がたくさんあります。その1つがサイトプレビュー設定です。

WordPressで新しい投稿またはページを作成または更新するときは、すぐに公開ボタンに進まないでください。代わりに、WordPressエディターの上部にあるプレビューリンクを選択します。

プレビューリンクでWordPressサイトの投稿やページをプレビューする

そのリンクをクリックすると、次のデバイスでWordPressコンテンツをプレビューできます。

  • デスクトップ
  • タブレット
  • モバイル
WordPressブロックエディターのプレビューオプション

新しいブラウザタブでWordPressサイトをプレビューすることもできます。

WordPressコンテンツを新しいタブでプレビューできます

変更に満足できない場合は、ツールバーの元に戻すボタンをクリックできます。

WordPressで変更を元に戻す

または、右側のパネルにあるリビジョンオプションをクリックして、コンテンツのさまざまなバージョンを比較できます。

WordPressのリビジョン設定をクリック

そこから、以前のバージョンを復元して公開をクリックできます。

WordPressの投稿やページの以前のバージョンを復元する

これらのWordPressオプションは、どこにあるかを知っていれば非常に役立ちます。しかし、前述したように、それらは常にすぐに明らかではありません。

4. Live PreviewでWordPressテーマをプレビューする

WordPressで変更したいのがコンテンツではなく、WordPressテーマ全体である場合があります。現在のテーマが古いか、ウェブサイトにまったく新しい外観が必要な場合があります。

理由が何であれ、サイトでアクティブ化する前に新しいWordPressテーマをプレビューする方法が必要です。そうしないと、デザインが特定のコンテンツやWordPress設定で適切に見え、機能するかどうかを判断するのは困難です。

WordPressでテーマをプレビューするには、WordPress管理エリアから外観 » テーマに移動します。これにより、現在インストールされているすべてのテーマが表示されます。

現在インストールされているWordPressテーマを表示する

別のテーマがどのように見えるかを確認するには、テーマサムネイルの上にマウスカーソルを移動し、ライブプレビューボタンをクリックします。

WordPressテーマのライブプレビューオプションをクリック

次に、WordPressは新しいテーマで表示されるウェブサイトのプレビューを開きます。

WordPessカスタム機能でテーマをプレビューする

そこから、さまざまなテーマ設定(後述)を確認し、有効化して公開ボタンをクリックして、テーマをウェブサイトでライブにします。

プレビューがお気に召さない場合は、左側のパネルにある変更ボタンをいつでもクリックできます。

テーマプレビューを変更するには変更ボタンをクリック

これにより、ウェブサイトにインストールされているすべてのテーマから別のテーマを選択してプレビューできます。

インストールされているWordPressテーマをプレビューする

または、WordPress.orgオプションをクリックして、WordPressテーマリポジトリで利用可能な何百もの無料WordPressテーマを表示することもできます。

WordPress.orgテーマをプレビューする

このパネル内で、任意のテーマをインストールし、上記の手順に従ってウェブサイトでプレビューできます。

5. Live Customizerでカスタマイズをプレビューする

WordPressテーマには満足しているが、サイトをよりユーザーフレンドリーにするためにいくつかの変更を加えたいとしましょう。たとえば、サイドバーにウィジェットを追加するか、ホームページにブログ投稿のみを表示したい場合があります。

通常、WordPressダッシュボードから設定 » 表示設定に移動して、これらの設定を手動で変更する必要があります。

WordPressの表示設定

または、外観 » ウィジェットに移動してサイドバーにウィジェットを追加する

WordPressウィジェット設定

しかし、これらの設定を変更し、変更をリアルタイムでプレビューする簡単な方法があります。それはWordPressカスタム機能と呼ばれます。

WordPressサイトのどこからでもカスタム機能にアクセスできます。ウェブサイトのフロントを表示している場合は、トップツールバーのカスタマイズをクリックするだけです。

ウェブサイトのバックエンドにいる場合は、外観 » カスタマイズに移動できます。

カスタマイズオプションをクリックすると、ウェブサイトの現在のバージョンが新しい画面で開きます。

ウェブサイトプレビュー付きWordPressライブカスタム機能

左側のパネルには、次のものを含むさまざまなウェブサイト設定があります。

  • サイトのアイデンティティ
  • 外観
  • ヘッダー
  • メニュー
  • ウィジェット
  • ホームページの設定
  • 追加のCSS
  • その他多数

右側にはウェブサイトのライブプレビューがあります。サイト設定に加えた変更は、プレビューでリアルタイムで確認できます。

たとえば、サイトに新しいウィジェットを追加するには、ウィジェットの見出しをクリックし、ウィジェットを追加するサイドバーを選択します。

サイドバーを表示するにはウィジェットのヘッダーをクリック

次に、ウィジェットを追加ボタンをクリックして、サイトで利用可能なウィジェットから選択します。

サイドバーに追加するウィジェットを選択する

ウィジェットを選択するためにクリックすると、ウィジェットパネルとウェブサイトプレビューに即座に表示されます。

ライブWordPressカスタム機能でウィジェットをプレビューする

このプロセス全体により、すべてがどのように見えるかに満足したら公開をクリックすることを忘れないでください。公開してライブにする前に、WordPressサイトをカスタマイズしてプレビューできます。

6. SeedProdでWordPressランディングページをプレビューする

多くのウェブサイト所有者は、ビジネスのリードと売上を増やしたいと考えています。そして、これを行う最善の方法は、優れたデジタルマーケティング戦略とコンバージョン率の高いランディングページです。

しかし、多くのランディングページプラグインでは、公開する前にデザインをプレビューする簡単な方法が提供されていません。または、提供されていても、モバイルプレビューやライブ編集などの必須機能が不足しています。

WordPressで成功するランディングページを作成し、インスタントライブデモを簡単に確認したい場合は、SeedProdの使用をお勧めします。

多数の多目的ランディングページテンプレートにより、すぐに開始できます。そして、ビジネスのリードを最大化するために、すべてのページ要素をカスタマイズできます。

このガイドに従って、SeedProdでランディングページを作成する方法を学びましょう。

ランディングページの作成が完了したら、画面下部にあるモバイルプレビューアイコンをクリックします。

モバイルプレビューアイコンをクリック

これにより、モバイルデバイスでのランディングページのライブデモが開きます。そこから、ランディングページのモバイル版をプレビューし、希望通りの見た目になるまで変更を加えることができます。

公開前にモバイルでWordPressランディングページをプレビューする

デスクトッププレビューに戻すには、同じアイコンをクリックするだけです。

公開前にデスクトップでWordPressランディングページをプレビューする

また、ブラウザの新しいタブでランディングページ全体をプレビューすることもできます。まず、緑色の保存ボタンをクリックして最新の変更を保存し、次にプレビューボタンをクリックします。

新しいブラウザタブでWordPressランディングページをプレビューする

ランディングページのプレビューが新しいタブで開かれ、どのように表示されるかを確認できます。

新しいブラウザタブでのランディングページプレビュー

7. SeedProdでWordPressテーマをプレビューする

ランディングページの作成に加えて、SeedProdには強力なWordPressテーマビルダーも含まれています。これはページビルダーと同じドラッグ&ドロップ機能を使用しており、コードを書いたり開発者を雇ったりすることなく、カスタムWordPressテーマを作成できます。

また、個別のWordPressテーマファイルをアップロードしてインストールする必要がないことも意味します。SeedProd Proプランですべて実行できます。

SeedProdを使用すると、WordPressテーマレイアウトを構成するすべての部分を作成できます。ライブラリから既製のテーマテンプレートを選択するだけです。

WordPressテーマテンプレート SeedProd

その後、ウェブサイトのニーズに合わせて表示条件とテーマパーツを編集できます。

Seedprodテーマビルダー

そこから、ランディングページと同様に、ビジュアルエディターでテーマの各セクションをカスタマイズできます。

WordPressテーマのホームページをカスタマイズする

テーマのデザインとレイアウトに満足したら、SeedProdのモバイルおよびデスクトップウェブサイトプレビューアでどのように表示されるかをプレビューできます。

WordPressテーマモバイルサイトプレビュー

ページビルダーと同様に、モバイルとデスクトップの両方のレイアウトでさまざまな要素の表示をオフにすることができます。

8. ステージング環境で開発作業をプレビューする

上記の方法は、WordPressサイトのマイナーな変更をプレビューするのに適しています。しかし、大規模な更新を計画している場合や、クライアントのために開発プロジェクトに取り組んでいる場合は、もう少し高度なものが必要になります。

この状況では、ステージングサイト(開発サイトとも呼ばれます)の使用をお勧めします。

ステージングサイトは、作業中のライブウェブサイトのクローンです。これにより、本番サイト(ライブサイト)で公開する前に、安全な環境で新しい変更をテストできます。

多くのウェブホストは、ホスティングパッケージの一部としてステージングおよび本番環境を提供しています。最も人気のあるオプションはBluehostです。

Bluehost 最適なWordPressホスティングソリューション

Bluehostは、市場で最高のマネージドWordPressホスティングプロバイダーであり、WordPress.orgによって公式に推奨されています。初心者から中規模、大規模ビジネスまで、幅広いホスティングプランと24時間年中無休のカスタマーサポートを提供しています。

BluehostのマネージドWordPressホスティングプランにはすべて、組み込みのステージング環境も用意されているため、ライブウェブサイトにプッシュする前に新しい機能をテストできます。このBluehostレビューをチェックして、成長中のWordPressサイトにとって最良の選択肢である理由の詳細を確認してください。

次に、Bluehostでステージング環境をセットアップする方法を見てみましょう。

まず、WordPressサイトの管理画面にログインし、Bluehost » Stagingに移動します。これにより、ステージングサイトとは何か、そして本番サイトのURLを説明する画面が表示されます。

公開前にWordPressサイトをプレビューするためにステージングサイトを作成する

ステージング環境を作成するには、Create Staging Siteボタンをクリックします。

次に、Bluehostがウェブサイトのステージング環境を準備します。完了すると、ステージングサイトまたは本番サイトにアクセスするオプションが表示される画面が表示されます。

Bluehostステージングサイトオプションを選択する

Staging Siteオプションをクリックして、ステージングWordPressサイトの管理画面に移動します。管理バーの上部に、ステージング環境で作業していることを示す赤いボタンが表示されます。

赤いラベルはステージング環境を使用していることを示します

これで、ライブサイトに影響を与えることを心配せずに、ウェブサイトの作業を進めることができます。

ライブウェブサイトに変更を公開する準備ができたら、Deploy All Changesボタンの横にある下矢印をクリックします。

変更をライブ本番サイトにデプロイする

デプロイの3つのオプションが表示されます。

  • すべての変更をデプロイ
  • ファイルのみをデプロイ
  • データベースをデプロイ

不明な場合は、Deploy All Changesボタンをクリックして、ステージング環境からのすべての変更をライブWordPressサイトに送信します。

公開前にWordPressをプレビューすることに関するFAQ

How do I preview my WordPress site before it’s visible to the public?
You can use a coming soon mode plugin like SeedProd to hide your unfinished site and still preview changes while logged in. This way, visitors see a placeholder page until you’re ready to launch.
Can I let clients preview a WordPress site without making it live?
Yes. SeedProd includes access controls that let you send a secret bypass link to clients. They can see the full site while the public still sees a coming soon page.
What’s the easiest way to preview posts and pages in WordPress?
When editing a post or page in the block editor, click the Preview button at the top. You can view your content on desktop, tablet, or mobile before hitting publish.
How do I test a new WordPress theme before switching?
Go to Appearance » Themes, hover over the theme you want, and click Live Preview. This shows how the theme looks with your content without activating it for everyone.
What’s the difference between coming soon mode and maintenance mode?
Coming soon mode is best for new sites that aren’t launched yet. Maintenance mode is for existing sites when you’re making temporary updates. SeedProd lets you enable both with one click.
Do I need a staging site to preview changes?
Not for small edits. But if you’re testing major updates, a staging site is safest. Many hosting providers, like Bluehost, include staging environments so you can test everything before pushing changes live.
Can you preview your WordPress site on mobile before going live?
Yes. The WordPress block editor has a mobile preview built in. Click the Preview button at the top of any post or page, then select Mobile. This shows you how your content will look on a phone screen. If you’re using SeedProd to build pages, the live preview updates in real time and lets you switch between desktop, tablet, and mobile views without leaving the editor.

この記事で、WordPressサイトを公開前にプレビューする方法を学べたことを願っています。また、最も一般的なWordPressの問題とその解決方法に関するこの記事も役立つかもしれません。

この記事が気に入った場合は、YouTubeTwitterFacebookでフォローして、ビジネスを成長させるための役立つコンテンツをさらに入手してください。

著者アバター
Stacey Corrin Content Marketing Specialist
Stacey Corrin is a certified content marketing and search specialist with over 15 years of experience writing about WordPress, SEO, and digital marketing. She manages content for SeedProd and RafflePress, covering tools and strategies she actively uses and tests herself.

開示: 当社のコンテンツは読者によってサポートされています。これは、当社のリンクの一部をクリックすると、手数料が発生する可能性があることを意味します。当社は、読者に価値をもたらすと信じる製品のみを推奨しています。

[weglot_switcher]