ヘッドレス WordPress: 完全ガイド

公開: 2023-03-01

ご存知かもしれませんが、WordPress は Web サイトを作成するための強力なプラットフォームです。コンテンツ管理システム (CMS) として、WordPress は使いやすい公開機能を提供します。また、WordPress を拡張して、やりたいことのほぼすべてを行うことができます。しかし、「ヘッドレス」WordPress について聞いたことがありますか?

このガイドでは、ヘッドレス WordPress とは何かを正確に学びます。 WordPress を使用する状況と、ヘッドレス WordPress の使用が最適ではない場合について理解できます。さらに、ヘッドレス WordPress デプロイメントで通常使用される、最も人気のあるフロントエンドおよびスタックソリューションのいくつかを見ていきます。

ヘッドレス CMS としての WordPress に深く入り込む前に、まず CMS とは何か、また CMS が解決するように設計された問題を理解することが重要です。何が「ヘッドレス」になるのでしょうか? また、場合によってはなぜこれが役立つのでしょうか? 誰が役に立つと思いますか?

コンテンツ管理システム (CMS) とは?

サーバー側のコンテンツ管理システムまたは CMS は、現在閲覧している Web サイトの大多数の「バックエンド」を支配しています。インターネットの黎明期、すべてのサイトは静的な HTML ページから直接構築されていました。新しい投稿や記事を作成するには、まったく新しい HTML ドキュメントを作成する必要があります。次に、画像、その他のメディア、CSS ファイルなどのアセットと一緒にサーバーに追加します。次に、サイトナビゲーションで新しいページにリンクし、それを参照している他のページからリンクする必要があります。

コンテンツ管理システム以前のコンテンツ管理

1995 年から 2000 年頃の Web サイト開発は、信じられないほど非効率的でした。新しいコンテンツがあるときはいつでも、新しいファイルを作成してアップロードするのは比較的簡単でした。しかし必然的に、新しいコンテンツは古いコンテンツの変更を必要としました。また、サイトが数百、数千のページを含むようになるにつれて、手作業で迅速に変更を加えることは不可能でした。いくらか自動化されていても、遅くなる可能性があります。

プレゼンテーションとコンテンツが混在していた

関連する問題として、コンテンツとその表現 (レイアウトやデザインスタイルなど) に柔軟性がなく、HTML ドキュメント内で混同されることがよくありました。これを真に解決するには CSS が必要でしたが、デザインとコンテンツを分離して CSS を活用するには CMS が必要でした。

ワークフローと役割が混在していた

Web サイトの機能的でインタラクティブな部分を中心に、コンテンツとデザインに全体的な変更を加えるのは難しいため、コンテンツの公開と維持のプロセスが非常に遅く、困難なものになりました。コンテンツ、フロントエンドの設計、バックエンドのエンジニアリングを担当するチームにも明確な境界がありませんでした。

動的なデータベース駆動型 CMS ソリューション

コンテンツ管理システムは、新しい Web ページが必要になるたびにまったく新しい HTML ファイルを作成するのではなく、各ページのすべてのコンテンツを MySQL などのリレーショナルデータベースに格納するという考えに基づいて生まれました。次に、PHP などのサーバー側スクリプト言語で記述された CMS を使用して、動的に生成されたページにデータベースからコンテンツの可変部分を照会して組み込みます。訪問者からの各ページ要求により、要求されたコンテンツの新しい固有のバージョンが生成される場合があります。

動的 CMS の制限

WordPress は、HTML と混合された PHP で記述されたデザインテンプレートを使用して、各ページリクエストで訪問者に提供される最終的な HTML ドキュメントを生成します。 CMS を使用した動的ページの発行の容易さと比較して、静的ファイルベースの Web 発行に有用なものがあるとは信じがたいです — ほぼすべてのページ読み込みでクエリされるデータベースの有無にかかわらず、大規模なセキュリティとパフォーマンスを検討するまでは。

ハイブリッドアプローチとしてのヘッドレス — 両方の長所

ヘッドレスは、フロントエンドフレームワークで大部分が静的なアセットから Web ページを提供するためのハイブリッドアプローチです。このフロントエンドは、バックエンドの CMS とデータベースのみを使用して、動的コンテンツを取得したり、絶対に必要な場合にユーザー入力を受け取ったりします。これにより、訪問者のために「その場で」レンダリングできるページが可能になり、頻繁に変更する必要がないときにキャッシュされます。

ヘッドレス WordPress およびその他のヘッドレスコンテンツ管理システム

ヘッドレス WordPress は、バックエンドを通常のフロントエンド機能から切り離して WordPress をデプロイする方法です。テーマは使用されません。バックエンドは次のことのみを担当します。

データベース管理
ユーザー管理
コンテンツ管理
外部サービスとのやり取り

フロントエンドプレゼンテーションレイヤーは通常、React.js またはその他の JavaScript ベースのフロントエンドと HTML/CSS フレームワークで構成されます。コンテンツは、WP GraphQL (GraphQL の WordPress 実装) や WordPress コア REST API などの API を介してバックエンドから収集されます。

また、訪問者が使用するさまざまなデバイスのさまざまなチャネルを処理する複数のフロントエンドが存在する場合もあります。さらに、フロントエンドがバックエンドと同じサーバーを共有する必要はありません。これは、効率的なオムニチャネルパブリッシングに必要なインフラストラクチャです。オムニチャネルを使用すると、モノのインターネットのモバイルアプリやあらゆる種類のデバイスに独自のコンテンツを提供できます。

Hugo や Jekyll など、ヘッドレス Web サイトを構築するための人気のあるオープンソースの静的サイトジェネレーターが多数あります。これらは完全にフラットなファイルシステムであり、WordPress がヘッドレスまたは従来の展開で提供するデータベースおよびコンテンツ管理ツールはありません。 Gatsby と Next.js を使用して静的サイトを生成することもできますが、ヘッドレス WordPress 展開で使用できる高度なフロントエンドフレームワークも提供します。ただし、ヘッドレス WordPress の本当の強みは、データベースの使用量がはるかに少ないことではなく、従来の CMS の単一テーマ、単一目的のフロントエンドよりも多くの可能性のためにデータベースの使用を最適化することです。ヘッドレス WordPress を使用すると、複数のフロントエンドを構築したり、プログレッシブ Web アプリ (PWA) やネイティブモバイルアプリをサポートしたりできます。

ヘッドレス WordPress が最高のヘッドレス CMS である理由

WordPress は非常に強力で広く使用されているプラットフォームであり、ヘッドレス CMS として成功する独自の立場にあります。

WordPress がヘッドレス CMS に最適な選択肢である 5 つの理由を次に示します。

1. あなたはすでに WordPress を使用しており、他の人もそうです

おそらく、あなたはすでに WordPress を使用しているので、その頭を切り落とすことは簡単な前進です.

WordPress はフロントエンドにとらわれないため、コンテンツが豊富なデータベースを持つ既存のサイトは、かなり簡単にヘッドレス化できます。または、ヘッドレス WordPress サイトに「ヘッド」を再接続することができます。 WordPress では、どちらの方向への移行も難しくありません。

あなたの従業員と将来の雇用者の多くは、WordPress の経験があるか、または経験する予定です。使い慣れたテクノロジを使用すると、より簡単なオンボーディングエクスペリエンスを期待できます。

2. フロントエンド開発者は WordPress や PHP に触れる必要がない

PHP はバックエンドアプリケーション言語と見なされているため、通常、最新のフロントエンド開発トレーニングの重要な部分ではありません。ただし、WordPress プラットフォームは PHP でコーディングされています。従来の (ヘッドレスではない) WordPress のフロントエンド開発では、WordPress API 関数とコードを使用するカスタムテーマを作成することに重点が置かれていました。 WordPress は急速に進化しており、サイトエディターと互換性のある新しいテーマは PHP をほとんどまたはまったく使用しない場合がありますが、WordPress が PHP をバックエンドに完全に後退させるには、まだ長い道のりがあります。現在、PHP への依存を減らしたり、PHP を完全にバイパスして最新のフロントエンドフレームワークを優先したりするために使用できる優れたソリューションがあります。そのソリューションがヘッドレス WordPress です。

標準の (非ヘッドレス) WordPress プロジェクトに取り組むフロントエンド開発者を雇っている場合、利用できる労働力が少ないことに気付くかもしれません。 PHP や同様のサーバーサイドスクリプト言語に基礎を置いていない開発者は、WordPress の学習曲線が高いことに気付くかもしれません。しかし、複雑な CSS や React などの JavaScript フレームワークを使用したフロントエンド開発に優れている場合、これはヘッドレス WordPress サイトに最適です。彼らの強みを発揮してみませんか？別のシナリオでは、WordPress や類似の CMS をまだ使用していないが、経験豊富なフロントエンド開発者がいる場合、まったく新しい CMS の操作方法を彼らに学ばせたくない場合があります。これは、ヘッドレスWordPressが優れたソリューションになる場合です.

ヘッドレス WordPress サイトのフロントエンドを構築するために、開発者は WordPress に精通している必要はありません。有能なフロントエンド開発者なら誰でも雇うことができます。多額の費用をかけても、完全にカスタム化されたフロントエンドを手に入れることもできます。非常にユニークなニーズがある場合は、ほとんどの場合、完全にユニークなオーダーメイドのサイトデザインが最適です。

3. エンタープライズクラスのホストはヘッドレス WordPress をサポート

ほぼすべての Web サイトホスティングプラットフォームが WordPress ホスティングを提供しています。彼らはそれをサポートしてきた 10 年以上の経験を持っているかもしれません。マネージド WordPress ホストはエンタープライズ WordPress サイトをサポートしており、多くの主要なマネージド WordPress ホストは、専用のヘッドレスホスティング、ツール、およびサポートを提供しています。サイトのセキュリティとパフォーマンスを優先します。

4. ヘッドレス WordPress は速い

すべての CMS は、静的サイトと比較して訪問者の読み込み速度が遅くなります。動的なページ生成にはより多くのサーバーリソースが必要であり、大規模に構築された CMS では多くのサーバーオーバーヘッドが発生する可能性があります。堅牢なホスティングと効率的なキャッシングを備えた非常にパフォーマンスの高い WordPress サイトでさえ、トラフィックの負荷が高く、アクティブにログインしているフロントエンドまたはバックエンドのユーザーが多いため、速度が低下します。ヘッドレス WordPress サイトでも CMS の利点は得られますが、データベースを使用した静的サイトジェネレーターのように機能します。訪問者がヘッドレスサイトにアクセスすると、ほとんどの場合、高速読み込みの静的ファイルが表示されます。

読み込みに時間がかかりすぎる Web サイトは、サイト所有者にとって最大の問題の 1 つです。モバイルサイトのブラウジングが指数関数的に増加するにつれて、速度がこれまで以上に重要になっています。 e コマースサイトでは、読み込みが遅いと売上が失われます。一般的なユーザーは、サイトがロードされるのを数秒以上待つことはありません。すぐに読み込まれない場合は、次の作業に進みます。

サイトの読み込み時間を短縮することは非常に重要です。さらに、Google は検索結果のサイトをランク付けする際に、ページの読み込み速度を考慮に入れます。 SEO が最優先事項である場合は、WordPress の別のフロントエンドを検討するのが賢明かもしれません。

5. ヘッドレス WordPress はセキュリティを強化できる

通常の WordPress のインストールでは、ログイン画面だけでなく、バックエンドの管理インターフェイスが公開されたままになります。低レベルの非管理者ユーザーでも、バックエンド管理者にアクセスできる可能性があります。ハッカーは、脆弱なプラグインまたはテーマを介してこれを悪用することがあります。通常、ヘッドレス WordPress サイトはテーマをまったく使用しません。また、コンテンツ中心のヘッドレスサイトでは、ユーザーを少数の信頼できるユーザーに制限できます。このシナリオでは、ログインプロセスを厳重にロックダウンすることができます。また、ハッカーの他の可能性のあるターゲットは必要ないため、シャットダウンされる可能性があります。

iThemes Security Pro のような強力な WordPress セキュリティプラグインを使用して、ヘッドレス WordPress サイトを完全に保護できます。バックエンドを保護し、適切なユーザーアクセスロールを設定し、安全なログインポリシーを適用するために、あらゆる種類の WordPress サイトで同じように役立ちます。

ヘッドレスWordPressを使用するのが悪い考えはいつですか?

ヘッドレス WordPress は非常に強力なツールですが、いくつかの欠点もあります。

複雑になる可能性があります

ヘッドレス CMS の構築は、重要な学習を行う準備ができていない限り、経験の浅い開発者向けではありません。 100% プラグアンドプレイの WordPress とは異なり、ヘッドレス CMS はそうではありません。簡単な WordPress のインストールから始めて、その一部、主にフロントエンドを分離します。次に、独自のフロントエンドを開発する必要があります。これがなじみのない領域である場合、かなりの学習曲線が必要になります。通常の WordPress サイトとは異なり、ヘッドレス WordPress はそれほど広く理解されておらず、十分に文書化されていません。主要なヘッドレス WordPress ホスティングおよび開発の専門家が行っている作業に接続してフォローすることは有料です。

うまくいかないこともある

WordPress の新しいサイト編集機能は、ヘッドレスサイトでは役に立たないか、使用できません。 Gutenberg ポストエディター内のブロックエディターをヘッドレスフロントエンドとうまく連携させるには、いくつかの課題もあります。多くの WordPress プラグインは、ヘッドレス環境ではうまく機能しないか、まったく機能しない可能性があります。 WordPress のホストと開発者は、WordPress のヘッドレス開発の改善とサポートに取り組んでいるため、この分野は常に変化しています。ヘッドレス WordPress テクノロジーの現状を注意深く調査し、それに応じてプロジェクトを計画してください。

メンテナンスは必須

独自のフロントエンドコードを維持するには、時間がかかる場合があります。また、Gutenberg ポストエディターは WordPress のバックエンドにあるため、ヘッドレスサイトで使用する場合は、バックエンドスタイルを分離されたフロントエンドフレームワークと同期させて、真の WYSIWYG エクスペリエンスを実現する必要があります。そのフロントエンドフレームワークも定期的なメンテナンスが必要です。ヘッドレス展開では、従来の WordPress または CMS 主導の Web サイトを超える継続的なメンテナンスについて、事前に慎重に計画する必要があります。

ボーナスコンテンツを入手: A Guide to WordPress Security

ここをクリック

ヘッドレスWordPressを始める

WordPress をインストールして、フロントエンドを切り離します。

WordPress ではよくあることですが、これを行うのに役立つプラグインもあります。 1 つは、適切にヘッドレス CMS プラグインと名付けられました。他の WordPress プラグインと同じようにインストールして有効にします。

次に、サイトのフロントエンドの作業を開始します。いくつかの異なるアプローチを取ることができます。 Gatsby のように、既存のフロントエンドまたはフレームワークを選択して構築することを決定する場合があります。または、プログレッシブ Web アプリの構築を検討することもできます。

ジャムスタック

Jamstack に慣れていない場合は、Web 開発で頻繁に使用されるプラットフォームです。これを使用すると、ヘッドレス WordPress やその他の CMS のフロントエンドとして機能します。

疎結合は、Jamstack の最大の強みの 1 つです。 WordPress を分離するプロセスを経験したことがある場合、これは非常に便利な機能です。

プログレッシブ Web アプリケーション (PWA)

PWA は多くの点で Web サイトに似ています。ただし、Web サイトとは異なり、PWA は、ユーザーにネイティブなモバイルエクスペリエンスを提供する膨大な範囲の Javascript ライブラリを採用します。

そのためには、React や Vue などのフレームワークを使用してアプリを開発する必要があります。

ギャツビー

ヘッドレス CMS で得られる自由のほとんどを維持しながら、開発プロセスを高速化することを検討していますか?

Gatsby は良い選択であり、そのためのプラグインがあります。

ヘッドレス WordPress はあなたに適していますか?

WordPress はそれ自体が素晴らしいツールです。ただし、ヘッドレス CMS を使用して独自のフロントエンドが必要になる場合があります。

このガイドでは、ヘッドレス WordPress をセットアップする際の方法、理由、アプローチについて学びました。

ヘッドレス化がサイト開発のニーズを満たす最良の方法であると判断した場合は、開始するのに十分なことがわかりました。

WordPress を安全に保護するための最高の WordPress セキュリティプラグイン

WordPress は現在、すべての Web サイトの 40% 以上で使用されているため、悪意のあるハッカーにとって格好の標的となっています。 iThemes Security Pro プラグインは、WordPress のセキュリティから当て推量を取り除き、WordPress Web サイトを簡単に保護および保護できるようにします。これは、WordPress サイトを常に監視して保護するフルタイムのセキュリティ専門家がスタッフにいるようなものです。

iThemes Security Pro を入手

ダン・ナウス

Dan Knauss は、StellarWP のテクニカルコンテンツジェネラリストです。彼は 1990 年代後半からオープンソースで、2004 年からは WordPress で、ライター、教師、フリーランサーとして働いています。