静的な WordPress Web サイトを構築することは可能ですか?

公開: 2022-08-10

WordPress ウェブサイトを簡素化することを検討していますか? 動的な Web サイトが遅すぎることに気付いたり、必要のないバックエンドがたくさんあることに気付いたりするかもしれません。

これらの問題を解決するために、Web サイトの静的バージョンを生成できます。 これにより、パフォーマンスとセキュリティが向上します。 すべてのユース ケースに静的サイトをお勧めするわけではありませんが、頻繁に更新する必要がない小規模な Web サイトには最適なオプションです。

この投稿では、静的 Web サイトと動的 Web サイトの違いについて説明することから始めます。 次に、静的な WordPress Web サイトを構築する 3 つの方法を紹介します。 始めましょう！

動的 Web サイトと静的 Web サイトの概要

まず、動的 Web サイトと静的 Web サイトの主な違いを見ていきます。

動的 Web サイト

動的 Web サイトは、さまざまな訪問者にさまざまなコンテンツを提示するため、ユーザーのリアルタイムのニーズに合わせてカスタマイズされます。 表示される内容は、ユーザーの場所、ユーザーの設定と好み、またはユーザーがサイトで行ったアクションに依存する場合があります。

いずれにせよ、よりカスタマイズされたパーソナライズされたユーザー エクスペリエンス (UX) が実現します。 たとえば、e コマース ストアは、以前の購入に基づいて顧客に製品を提案できます。

動的 Web サイトの例

動的サイトは、単純に HTML ファイルを保存して表示する (静的な Web サイトのように) のではなく、HTML、CSS、JavaScript、およびサーバー側のスクリプト言語を使用して、そこにページを構築します。 ユーザーがページを要求すると、サーバーはデータベースから情報を取得して、訪問者ごとに HTML ファイルを作成します。

これらのリクエストは、HTML ファイルの準備ができておらず、静的な Web サイトのように待機しているため、処理に時間がかかります。 これにより、パフォーマンスの問題が発生し、動的な Web サイトの読み込み時間が遅くなる可能性があります。 同時に、関連する多くの利点は、アクセスする Web サイトの大部分が動的であることを意味します。

静的ウェブサイト

ユーザーが静的な Web サイトにアクセスすると、いくつかのスタイル シートとスクリプトを含む 1 つの HTML ファイルを受け取ります。 これらは保存され、情報が要求されたときにユーザーに配信されます。 これは、サイトにアクセスするすべてのユーザーに対してページがまったく同じに見えることを意味し、プログラマーが HTML ファイルを変更することによってのみページを変更できます。

ただし、静的な Web サイトでも、動的な Web サイトが使用する同じ要素の多くを介して、インタラクティブで魅力的なエクスペリエンスをユーザーに提供できます。 たとえば、静的サイトには、リンク、ボタン、メディア、デジタル ダウンロード、および JavaScript を含めることができます。

静的なデザインは、情報サイトや 4 ページ未満で構成されるサイトなど、パーソナライズされたコンテンツを必要とせず、頻繁に更新する必要がないサイトに特に適しています。 これにより、履歴書の Web サイト、パンフレットの Web サイト、および読み取り専用のランディング ページ (「近日公開」ページなど) に最適です。

ニーズに合ったウェブサイトの種類を決定する

基本について説明したので、静的 Web サイトと動的 Web サイトを使用する利点と欠点をいくつか見てみましょう。

動的 Web サイトの長所と短所

動的な Web サイトは完全なパーソナライゼーションを提供し、各ユーザーに合わせてコンテンツを調整できます。 動的コードもはるかに強力で、より優れた機能を実現できます。 たとえば、動的コードを使用して Web アプリケーションやソフトウェアを構築できますが、これは静的 Web サイトでは不可能です。

さらに、Web サイトを大幅に変更することも簡単にできるため、ブログなどの定期的に更新されるサイトには動的なデザインをお勧めします。 また、e コマース ストアやストリーミング サービスなど、多くのユーザー インタラクションを必要とする Web サイトにも適しています。

コンテンツを頻繁に変更する動的サイトの例

一方、動的 Web サイトは静的サイトよりも複雑です。 したがって、最初からセットアップするには、より多くの時間と労力、およびある程度の技術的スキルが必要になる場合があります。 ただし、開発者を雇ってサイトをセットアップするか、WordPress などのコンテンツ管理システム (CMS) を使用することができます。

動的サイトの最大の欠点は、バックエンドでより多くの処理が必要になるため、読み込み時間が遅くなる可能性があることです。 これは UX にダメージを与えるだけでなく、サイト滞在時間 (TOS) を減らし、直帰率を高める可能性があります。これらはどちらも検索ランキングの要因です。 幸いなことに、サイトをすばやく実行し続けるための簡単な方法がたくさんあります。

静的ウェブサイトの長所と短所

静的な Web サイトは、ページが既に構築されて保存されており、ユーザーがアクセスするのを待っているだけなので、読み込み時間が非常に高速です。 読み込み時間の短縮は UX にとって朗報であり、検索エンジンでの順位を上げるのに役立ちます。

通常、静的 Web サイトは構築と保守が容易で、コーディングの知識はほとんど必要ありません。 サイトをゼロから構築する場合は、HTML と CSS にある程度慣れていると役立ちます。 ただし、ウェブサイト ビルダーや CMS を使用して、技術的なノウハウをあまり必要とせずに静的サイトをセットアップすることもできます。

これにより、静的 Web サイトは、基本的な Web サイトをできるだけ迅速かつ簡単に立ち上げたい企業にとって優れた選択肢となります。 ハッキングするプラグイン、PHP、データベース接続がないため、静的な Web サイトでもセキュリティを強化できます。

たとえば、ソフトウェア会社の Rookout は、セキュリティを向上させ、サーバーの負荷を軽減するために静的サイトを使用しています。

セキュリティを向上させる静的サイトの例

静的 Web サイトを作成する際の主な制限には、スケーラビリティが含まれます。 サイト全体の変更を実行するのは難しく、時間がかかる場合があります。 たとえば、ヘッダーを変更したり、サイトに新しいページを追加したりする場合は、個々の HTML ファイルを変更するか、新しいファイルを作成する必要があります。

これは、多くの場合、一握り以上のページを持つ成長中の Web サイトでは実用的ではありません。 また、e コマース ストアなど、静的なデザインに適していない特定の種類の Web サイトもあります。 これは、一部の機能 (チェックアウトなど) を容易にするために多くのサードパーティ ツールが必要になるためです。 これらはウェブサイトの重荷となり、パフォーマンスと速度の問題を引き起こす可能性があります。

静的な WordPress ウェブサイトを作成する方法 (3 つの方法)

静的サイトがニーズに合っていると判断した場合は、その作成方法を知る必要があります。 これを行うにはいくつかの方法があります。 まとめる前に、静的な WordPress Web サイトを構築する 3 つの方法を見ていきましょう。

1.静的ホームページを作成する

静的 Web サイトのように機能するものを構築する最も簡単な方法は、単一の静的ページを WordPress ホームページとして設定することです。 これは、すばやくシンプルな 1 ページのサイトを作成する場合に最適です。

WordPress ダッシュボードで、[ページ] > [新規追加] に移動します。

WordPress に新しいページを追加する

通常どおりページを作成し、タイトルと好きなコンテンツを追加します (動的な要素を含めないようにしてください)。 次に、[公開] をクリックします。

WordPress で新しいページを作成して公開する

[設定] > [読み取り] に移動します。 次に、[あなたのホームページの表示] の下で、[静的ページ]のボックスをオンにします。 [ホームページ] の横にあるドロップダウン ボックスを使用して、作成した新しいページを選択し、変更を保存します。

WordPress でページを静的ホームページとして設定する

これで、静的ページが作成され、ホームページとして設定されました。 これは「真の」静的サイトではありませんが、読み取り専用のランディング ページを作成する場合にはうまく機能します。

2. WordPress ウェブサイトの静的バージョンを生成する

静的にしたい Web サイトが既にある場合は、Simply Static などのプラグインを使用できます。 これは、動的サイトの稼働を維持し、静的バージョンを生成する場合に最適なオプションです。 選択した配信方法に応じて、静的 Web サイトを含むファイルを受け取るか、サイトの静的バージョンを指定したサーバー パスに送信します。

WordPress ダッシュボードで、 Plugins > Add Newに進みます。 「Simply Static」を検索し、[ Install Now and Activate ] をクリックします。

WordPress の単純な静的プラグイン

サイドバーで、 Simply Static > Settingsに移動します。 ほとんどの場合、すべての設定をデフォルト レベルのままにしておくことができます。 ただし、ここで任意の URL を手動で含めたり除外したりすることもできます (たとえば、サイトの静的バージョンから特定のページを除外したい場合)。

Simply Static 設定で URL を含める/除外する

次に、 Simply Static > Generateに移動し、 Generate Static Filesをクリックします。

Simply Static プラグインを使用して、WordPress サイトから静的ファイルを生成します。

提供されたリンクを使用して.zipファイルをダウンロードします。 サイトが静的バージョンを配置したいドメインを占有している場合、通常の WordPress ウェブサイトを別のサブドメインに移行する必要があります。 サイトを別のサーバーに移動する予定がある場合は、 .zipファイルを使用してこれを行うことができます。

3. ヘッドレス WordPress ホスティングを使用する

ヘッドレス開発は、Web サイトのバックエンドをフロントエンドから切り離し、CMS を使用してコンテンツを構築しながら、フロントエンドにアプリケーション プログラミング インターフェイス (API) を使用できるようにします。 ユーザーに Web サイトの静的バージョンをオンラインで表示してもらいたいが、WordPress 管理エリアにアクセスしてコンテンツを変更したい場合は、このオプションをお勧めします。

これは最も複雑な方法であり、技術的な専門知識が必要です。 ただし、サイトをより柔軟に制御して管理できます。 たとえば、同じバックエンドから Android プラットフォームと iOS プラットフォームにコンテンツを配信したい開発者にとって、これは良いオプションです。 また、JavaScript フレームワークを使用するサイトやアプリにも適しています。

開始するには、WP Engine などのヘッドレス WordPress ホスティングを提供するプロバイダーを見つける必要があります。

wpengine プラグイン

2 つの別個のホストが必要になる場合があります。1 つはヘッドレス バックエンド (WordPress と PHP をサポートする必要があります) 用で、もう 1 つはサイトのフロント エンド用です。 WordPress と WP Engine を一緒に使用すると、静的および動的の両方のヘッドレス Web サイトを構築および管理できます。

結論

動的 Web サイトが遅すぎる、またはそのバックエンドを十分に活用していない場合は、静的 WordPress Web サイトへの切り替えを検討してください。 これにより、サイトを合理化し、パフォーマンスとセキュリティを向上させることができます。

要約すると、静的な WordPress Web サイトを作成する 3 つの方法を以下に示します。

  1. WordPress ダッシュボードに静的ホームページを作成します。
  2. Simply Static などのプラグインを使用して、サイトの静的バージョンを生成します。
  3. WP Engine などのヘッドレス WordPress ホスティング プロバイダーを使用します。

静的な WordPress Web サイトの構築について質問がありますか? 以下のコメントセクションでお知らせください！