Vue.jsでヘッドレスWordPressサイトを作成する方法を学ぶ

公開: 2021-10-07

WordPressは、開発者と非開発者が魅力的なWebサイトをすばやく構築および作成するための頼りになるコンテンツ管理システムです。

コンテンツ管理バックエンドがフロントエンドから分離されているマイクロサービスアーキテクチャを使用すると、両方の「エンド」を最大限に制御できます。 この分離の問題は、ヘッドレスWordPressソリューションを含むヘッドレスコンテンツ管理システムが解決しようとしていることです。

ヘッドレスアプローチにより、企業はコンテンツ管理バックエンドをよりきめ細かく制御できます。 また、React、Vue、Angularなど、任意のフロントエンドを自由に使用できます。

このガイドでは、ヘッドレスWordPressの詳細と、その使用を検討する必要がある時期と理由について説明します。 最後に、ヘッドレスWordPress環境の作成、Vue.jsを使用したフロントエンドの構築、Kinstaを使用したヘッドレスWordPressのデプロイについて説明します。

ヘッドレスワードプレスとは何ですか？

WordPressは、バックエンドとフロントエンドのパーツがしっかりと巻かれているモノリスアプリケーションです。 バックエンドは、管理が機能する場所であり、外観構成の変更を含め、コンテンツを作成、編集、追加、および削除できます。 対照的に、フロントエンドはユーザーにコンテンツを表示する責任があります。

ヘッドレスワードプレスは、分離されたワードプレスを説明するために使用される用語です。 バックエンド（管理）部分は、WordPressCMSのフロントエンド部分とは別のものです。 フロントエンドは、任意のフロントエンドフレームワークを使用して、スタンドアロンアプリケーションとして開発および管理できます。

ヘッドレスWordPressを深く掘り下げて、WordPressの使用を検討する理由と、サイトにデプロイする方法を学ぶ準備はできていますか？ ここをクリック️ クリックしてツイート

ヘッドレスワードプレスの長所と短所

次に、ヘッドレスWordPressの長所と短所を調べて、概念をよりよく理解できるようにします。

長所

まず、長所を探求することから始めます。

超高速パフォーマンス

超高速パフォーマンスアプリケーションのこの時代では、Webサイトの読み込みに数秒以上かかることはなく、訪問者を失うことはありません。 フロントエンドはWordPressから分離されており、最新のフロントエンドツールを使用して高性能とスケーラビリティを念頭に置いて開発できるため、ヘッドレスWordPressアプローチを採用することは、Webサイトの全体的なユーザーエクスペリエンスに大きなメリットをもたらします。

きめ細かい制御

ヘッドレスアーキテクチャを選択すると、デザインレイアウト、コンテンツプレゼンテーション、およびユーザーがアプリケーションのフロントエンドを操作する方法をより細かく制御できます。 また、バックエンドコンテンツを保護し、中央の場所からアクセスできるようにします。

スケーラビリティの向上

主に開発者でない場合は、WordPressを強化するすべてのコンポーネントとコードを完全に制御できないため、WordPressのスケーリングが複雑になることがあります。 しかし、WordPressのデカップリングにより、各部分を個別にスケーリングするのは簡単で、スケーリングが必要な部分を簡単に検出できます。

より厳格なセキュリティ

分離されたWordPressにはハッカーやDDoS攻撃に対する高いセキュリティ上の利点があるため、ヘッドレスWordPressのセキュリティ上の利点を十分に強調することはできません。 ヘッドレスWordPressアプローチでは、ユーザー向けのWebサイトであるフロントエンドとは別であるため、ハッカーが機密性の高いバックエンドデータにアクセスすることは困難です。

軽量設計

フロントエンドデザインの構造とレイアウトをより細かく制御できます。 さらに、より自由でカスタマイズされたデザインでフロントエンドで作業できます。 REST API呼び出しのおかげで、最新のWebツールを利用してフロントエンドにデプロイできるようになります。

マルチチャネルコンテンツパブリッシング

ヘッドレスWordPressはAPIベースのシステムを使用してコンテンツをフロントエンドに伝達するため、デスクトップ、Webサイト、モバイルアプリ、タッチスクリーンキオスクなど、あらゆるプラットフォームでコンテンツを表示できます。 拡張現実、仮想現実、モノのインターネットの各デバイスを最大限に活用して、APIベースのシステムからのコンテンツを表示および表示することもできます。

短所

ヘッドレスの短所については、詳しく説明しますが、主な欠点は次のとおりです。

  1. バックエンドとフロントエンドを分離すると、さまざまなWebサイトインスタンスを管理するときに余分な負荷がかかります。
  2. チームに追加のメンバーが必要であり、さまざまなインスタンスを実行するために追加の資本が必要になるため、実装にコストがかかる可能性があります。
  3. コンテンツをさまざまなプラットフォームで利用できるようにすると、コンテンツがすべてのプラットフォームで一貫して表示されない場合、ユーザーのエクスペリエンスに一貫性がなくなる可能性があります。

ヘッドレスWordPressが最良の選択肢ではないかもしれないとき

ヘッドレスWordPressは大きなメリットを備えた信じられないほどの革新であるため、それを使用するかどうかを決定する際に覚えておくべきことがいくつかあります。

  1. ヘッドレスWordPressは維持するのに非常に費用がかかります。 インフラストラクチャから複数の開発者まで、1つのWebサイトの2つの異なるインスタンスを維持します。
  2. ヘッドレスWordPressはWordPressのすべての機能をサポートしているわけではありません。 たとえば、WYSIWYGエディターやライブプレビューなどの優れたWordPress機能は、分離されたフロントエンドを使用すると機能しません。
  3. ヘッドレスのWordPressをセットアップする方が費用がかかります。 したがって、常にコストの増加を念頭に置いてください。

誰がヘッドレスワードプレスを使うべきですか？

以下は、ヘッドレスWordPressが必要になる可能性のある最適なケースです。

  1. あなたのウェブサイトのセキュリティがあなたの最大の関心事であり、あなたの会社にとって最優先事項であるならば、あなたはヘッドレスワードプレスを使うべきです。
  2. 次に、Webサイトを定期的にアップグレードおよび更新する必要がない場合は、ヘッドレスセットアップを使用する必要があることを示す良い兆候になります。
  3. 次に、WordPressテーマでは簡単にできないカスタマイズされたデザインが必要な場合は、Webサイトのフロントエンドに独自のデザインを追加する必要があります。 次に、ヘッドレスWordPressが次のオプションです。
  4. 最後に、プレゼンテーションやチュートリアル用の短い寿命のWebサイトまたはデモサイトを構築している場合は、ヘッドレスアプローチを試すことができます。

ヘッドレスワードプレスの使用を避けるべき人

ヘッドレスWordPressの使用が適切でないいくつかのケースを次に示します。

  1. Webサイトが、アプリケーションのフロントエンドを制御して最適に動作する特定のプラグインと機能のみに依存している場合、プラグインがデータを消費するAPIベースのオプションを提供しない限り、WordPressを使用する必要があります。
  2. あなたがあなたのウェブサイトをコーディングすることに興味がないか、あなたのウェブサイトが毎日のメンテナンスを必要とし、あなたがあなたの低予算のために定期的なメンテナンスのために専門家を雇っていないとします。 その場合、WordPressはあなたに適したオプションです。
  3. 経験豊富な開発者ではなく、Webサイトを単独で作成および管理したい場合は、WordPressを使用する必要があります。

WordPressをヘッドレスにする方法（アプリを作成する）

このセクションでは、バックエンド用のヘッドレスWordPressと、ユーザー向けのフロントエンドとしてのVue3を使用したニュースブログの構築と開発について説明します。

DevkinstaでヘッドレスWordPressをセットアップする

ヘッドレスWordPressは、人気のあるWordPressローカル開発環境であるDevKinstaを使用して開発し、ローカルマシンの快適さからWordPressサイトを設計、開発、および展開します。

DevKinstaは永久に無料で、WordPressの開発と構築に大きなメリットと快適さを提供します。

公式WebサイトからDevKinstaをダウンロードしてインストールし、ドキュメントの指示に従って開始できます。

DevKinstaはすでにインストールされているので、それを開いて以下の手順に従って、最初のヘッドレスWordPressをセットアップします。

DevKinstaダッシュボードで、Nginx、MySQL、および利用可能な任意のWordPressバージョンを使用して新しいWordPressサイトを作成します。 また、既存のWordPressインスタンスをインポートしたり、ダッシュボードからカスタムWordPressインスタンスを作成したりすることもできます。

次に、新しく作成したWordPressインスタンスに名前、管理者ユーザー名、パスワードを指定し、[作成]をクリックして詳細をコピーし、DevKinstaがローカルマシンに新しいWordPressインスタンスを作成します。

次に、[サイトを開く]をクリックして、新しく作成したWordPressインスタンスをデフォルトのブラウザーで開きます。

最後に、 http://headless-wordpress-news-blog.local/wp-adminリンクにアクセスし、新しいインスタンスの作成時に入力した管理者ログイン資格情報を入力することで、管理ダッシュボードにログインできます。

ヘッドレスWordPressをhttp://headless-wordpress-news-blog.localでローカルに設定し、フロントエンドはhttp://news-blog.localでローカルにホストされていることに注意してください。これは、全体で使用されます。チュートリアル。

ヘッドレスWordPressの設定

次に、WordPressダッシュボードに正常にログインしたら、任意のプラグインと構成をインストールできます。

このチュートリアルではテーマを完全に無効にし、Simple Website Redirectプラグインをインストールして設定することにより、WordPressRESTAPIベースのエンドポイントを介してのみコンテンツにアクセスします。

プラグイン>新規追加に移動し、Simple Website Redirectを検索し、インストールしてアクティブ化します。

WordPressプラグインのインストール画面。
WordPressプラグインのインストール。

次に、プラグインの設定をクリックしてフロントエンドベースのURL（ http://news-blog.local ）を入力し、詳細設定オプションをクリックして、次のパスを追加します— /wp-admin 、/ wp- /wp-login.php 、および/wp-json —[パスの除外]セクションへ。

最後に、[リダイレクトステータス]ドロップダウンで[有効]を選択して、プラグインを有効にします。

シンプルなウェブサイトリダイレクトプラグイン設定ページ。
シンプルなウェブサイトリダイレクトプラグイン設定。

…以上です！

さらに、デフォルトでhttp://headless-wordpress-news-blog.local/wp-jsonにアクセスしたときにJSON APIが有効になっていない場合は、 WordPress設定でパーマリンクを開き、[投稿名]または[プレーン以外のあなたの選択の他の1つ：

WordPressパーマリンク設定ページ。
WordPressのパーマリンク設定。

これで、 http://headless-wordpress-news-blog.local/wp-jsonにアクセスすると、次のようなJSONデータが表示されます。

新しいeコマースウェブサイトに一流の高速で安全なホスティングが必要ですか？ Kinstaは、WooCommerceの専門家による超高速サーバーと24時間年中無休のワールドクラスのサポートを提供します。 私たちの計画をチェックしてください

{ "name": "Headless WordPress News Blog", "description": "Just another WordPress site", "url": "http://headless-wordpress-news-blog.local", "home": "http://headless-wordpress-news-blog.local", "gmt_offset": "0", "timezone_string": "", "namespaces": [ "oembed/1.0", "wp/v2", "wp-site-health/v1" ], "authentication": [ ], "routes": { "/": { "namespace": "", "methods": [ "GET" ], "endpoints": [ { "methods": [ "GET" ], "args": { "context": { "default": "view", "required": false } } } ], ...

Vue.jsのセットアップ（フロントエンド）

Vite Web開発ツールを使用して、ヘッドレスWordPressに接続するVue3アプリケーションを作成します。 Vue3およびVite開発ツールの詳細を読むことができます。

この記事では、ニュースブログを作成します。 プロジェクトのすべてのバックエンドコンテンツ管理は、Devkinstaを使用してヘッドレスWordPressで開発およびホストされます。

次の簡単なコマンドと一緒に入力します。

 npm init @vitejs/app news-blog cd news-blog npm install npm run dev

ユーザー名のスペースに問題がある場合は、次を使用してみてください。

 npx create-vite-app news-blog

http://news-blog.localをリッスンするようにVue 3アプリケーションを構成しましたが、デフォルトのhttp://localhost:3000をそのまま使用できることに注意してください。

最後に、任意のコードエディタでVue3コードベースを開きます。 VSCodeを使用して、コードで手を汚しましょう。

WordPressAPIの使用

読み取り時間を節約するために、Vueアプリケーションの残りの部分の開発を進めましたが、GitHubからリポジトリのクローンを作成することもできます。

アプリ投稿コンポーネントを表示する

以下のコードスニペットは、Vueインスタンスを使用してWordPress REST APIを実装し、ヘッドレスWordPressからのすべての投稿を表示する方法を示しています。

 <template> <section> <div class="padding-top"> <div class="container inner-padding-top"> <div class="row"> <div class="col-md-12 col-sm-12-col-xs-12 text-center"> <h2 class="lead-title text-uppercase"> Latest Backend Dev. Articles </h2> <h3 class="article-subtitle"> Latest Backend Dev. Articles curated daily by the community. </h3> </div> </div> <div class="row mb-1 mt-5"> <post v-for="(post, i) in posts" :key="i" :post="post" /> </div> </div> </div> <div class="col-md-12 col-sm-12-col-xs-12 text-center mb-5"> <Button link="/posts" class="col p-3">More Articles</Button> </div> </section> </template> <script> import { mapState } from 'vuex' export default { computed: { ...mapState({ posts: (state) => { return [...state.post.posts].slice(0, 22) }, }), }, } </script>

単一の投稿コンポーネントを表示する

コードスニペットは、ヘッドレスWordPressを使用してWordPress REST APIを使用して単一の投稿を取得し、Vueインスタンスに表示する方法を示しています。

 <template> <div class="card single"> <div class="card-head pl-3 pr-3 pt-3"> <h1 class="title">{{ post.title || '' }}</h1> <div class="d-flex"> <div class="author d-flex pr-3 pb-4"> <div class="profile mr-2"></div> <a :href="'/authors/' + post.author.slug" class="subtitle is-6"> {{ post.author.name }} </a> </div> <div class="date_created"> <small class="text-muted"> <li class="fa fa-calendar"></li> <time :datetime="$moment(post.date).format('MMMM Do YYYY, h:mm:ss a')" >{{ $moment(post.date).format('MMMM Do YYYY') }}</time > </small> </div> </div> </div> <div class="block-image pl-3 pr-3 pt-2 mb-3"> <img v-lazy-load :data-src="image" class="card-img-top img-fluid" :alt="post.title" /> </div> <div class="tags absolute"> <a v-for="category in post.categories" :key="category.id" :href="'/categories/' + category.slug" class="btn-tag" > {{ category.title }} </a> </div> </div> </template> <script> import Vue from 'vue' export default { name: 'SinglePost', props: { post: { type: [Object, Array], default: () => {}, }, }, } </script>

以下は、バックエンドコンテンツ用のヘッドレスWordPressAPIへのAPI呼び出しを行うストアです。

 export const actions = { async getPosts({ commit }, { page, count = 22 }) { try { const response = await fetch( `http://headless-wordpress-news-blog.local/wp-json/wp/v2/posts` ) const data = await response.json() if (data) { commit('setPosts', data) } return data } }, async getPost({ commit }, id) { try { const response = await fetch( `http://headless-wordpress-news-blog.local/wp-json/wp/v2/posts/${id}` ) const data = await response.json() if (data) { commit('setPost', data) } return data } }, }

KinstaでヘッドレスWordPressをデプロイする

最後に、Kinstaホスティングサービスを使用するDevKinstaを使用すると、ヘッドレスWordPressのデプロイが非常に簡単になります。

ヘッドレスWordPressをKinstaにデプロイするには、DevKinstaダッシュボードの[ Push to Staging ]ボタンをクリックし、ログイン資格情報を使用してKinstaにサインインします。 新しいKinstaアカウントを作成して、ログイン資格情報を取得できます。

ステージング環境に変更をプッシュして、ヘッドレスWordPressをKinstaホスティングサービスにワンクリックでデプロイする方法を学ぶことができます。

最後に、Vue.jsインスタンスを任意のクラウドホスティングプロバイダーにデプロイできます。 それに応じてヘッドレスWordPressエンドポイントを更新し、実際の本番環境でアプリケーションをテストしてください。

ヘッドレスのWordPress環境を作りたいですか？ この投稿では、 クリックしてツイートする方法について説明しました

概要

ヘッドレスWordPressとそれに伴う利点は、しばらくの間ここにあります。 より多くの開発者とサイト所有者がヘッドレスオプションの利点を理解するようになるにつれて、その人気は高まり続けるでしょう。

このガイドでは、ヘッドレスWordPressのメリット、長所、短所を紹介し、DevKinstaを使用して最初のヘッドレスWordPressを構築および展開する方法を示しました。 これで、ヘッドレスWordPressの実装に向けて順調に進んでいます。

ヘッドレスWordPressサイトを展開するためのヒントは何ですか？ コメント欄でシェアしてください！