ほぼ頭のないWordPress Webサイトを構築する方法

従来のWordPressテーマは、静的WebサイトやヘッドレスWebアプリケーションと同じくらい効率的に実行することもできます。 WordPress Webサイトの大部分は、従来のWordPressテーマを使用して構築されています。これらのウェブサイトの多くは、優れたキャッシュティアと依存関係の最適化さえ持っているため、かなり速く実行されます。しかし、開発者として、私たちは当社のウェブサイトのより良い結果を作成する方法を習得しました。ヘッドレスのWordPressを使用すると、多くのWebサイトがより高速な読み込み、ユーザーインタラクションの改善、ページ間のシームレスな移行を実現できます。

問題は次のとおりです。メンテナンス。別の可能性をお見せしましょう！

まず、「伝統的な」ワードプレス、ヘッドレスの「WordPress、および「ほぼ頭のない」WordPressについて話していることを定義しましょう。

従来のWordPress Webサイト

従来、WordPressのWebサイトはPHPを使用してページでレンダリングされたHTMLタグをレンダリングしていました。リンクがクリックされるたびに、ブラウザはサーバーに別の要求を送信し、PHPはクリックされたWebサイトのHTMLタグをレンダリングします。

これは、ほとんどのWebサイトで使用される方法です。維持が最も簡単で、技術的な複雑さが最も低く、適切なサーバー側のキャッシュツールを使用し、非常にうまく機能します。問題は、従来のウェブサイトであるため、従来のウェブサイトのように感じることです。このタイプのウェブサイトでは、移行、効果、その他のスタイリッシュなモダンな機能を構築して維持するのが難しいことがよくあります。

アドバンテージ：

1. ウェブサイトは簡単に保守できます。
2. テクノロジーは比較的簡単です。
3. WordPressプラグインとの適切な互換性。

欠点：

1. 社会はブラウザでのアプリのような体験を期待しているため、あなたのウェブサイトは少し時代遅れに見えるかもしれません。
2. WebサイトではJavaScriptフレームワークを使用してWebサイトの動作を制御しないため、JavaScriptを作成して維持することはより困難です。
3. 従来のウェブサイトは、ヘッドレスでヘッドレスのオプションよりも遅くなる傾向があります。

ヘッドレスワードプレスWebサイト

ヘッドレスのWordPress Webサイトでは、最新のJavaScriptとWordPress REST APIやGraphQLなどのサーバー側のRestfulサービスを使用しています。 PHPでHTMLを構築およびレンダリングする代わりに、Webサイト上の任意のページのレンダリングを処理する最小限のHTMLと大きなJavaScriptファイルを送信するサーバーです。このアプローチはページをより速くロードし、ページ間で真にクールなトランジションやその他の楽しい機能を作成する機会を提供します。

あなたが何を言っても、ほとんどの頭のないWordPressサイトでは、開発者が大きな変更を加える必要があります。フォームプラグインをインストールしたいですか？申し訳ありませんが、セットアップするには開発者が必要になる場合があります。新しいSEOプラグインをインストールしたいですか？いいえ、開発者はアプリケーションを変更する必要があります。その派手なブロックを使いたいですか？残念なことに、最初に開発者が必要です。

アドバンテージ：

1. ウェブサイト自体は、モダンで速いと感じるでしょう。
2. WordPress以外の他のRESTFULサービスと簡単に統合するのは簡単です。
3. Webサイト全体がJavaScriptに組み込まれているため、複雑なWebサイトを簡単に作成できます。

欠点：

1. WordPressプラグインが箱から出して提供する多くの機能を再発明する必要があります。
2. この設定を維持することは困難です。
3. ホスティングは複雑で、他のオプションと比較して高価になる可能性があります。

WordPressと静的ホスティングの違いのより詳細な比較については、「WordPressとJamstack」を参照してください。

ヘッドレスのWordPressが作成できる結果が大好きです。メンテナンスが好きではありません。私は、ロード速度を高速にし、ページ間の移行、およびWebサイトの全体的なアプリのような感触を持つことができるWebアプリケーションが必要です。しかし、WordPressを非常に人気にするプラグインエコシステムを自由に使用できるようにしたいと思います。ヘッドレスが欲しいです。ほとんど頭がない。

この説明に合ったものが見つからなかったので、それを作りました。それ以来、私はこのアプローチを使用するいくつかのWebサイトを作成し、必要なJavaScriptライブラリを構築して、他の人が自分のほぼ頭のないWordPressテーマを作成しやすくします。

ほぼヘッドレスのワードプレスの紹介

ほぼHeadlessは、WordPress Web開発方法であり、ヘッドレスアプローチによってもたらされた同様のアプリケーションの多くの利点と、従来のWordPressテーマの使用の開発を容易にします。これは、ルーティングを処理し、ウェブサイトをヘッドレスアプリケーションのようにレンダリングする小さなJavaScriptアプリケーションでこれを行いますが、通常のWordPressリクエストでまったく同じページをロードできるフォールバックメカニズムがあります。フォールバックメソッドを使用してロードするページを選択できます。また、JavaScriptまたはPHPにロジックを挿入して、ページをこのように読み込む必要があるかどうかを判断できます。

私が構築したデモWebサイトで実際にどのように機能するかを確認できます。これは、このアプローチが達成できることを示しています。

たとえば、この方法を実装するWebサイトは、Lifterlmsと呼ばれる学習管理システムを使用してWordPressコースをオンラインで販売しています。このプラグインには、eコマース機能が組み込まれており、ホスティングコースコンテンツをセットアップしてペイウォールの後ろに置くために必要なインターフェイスがあります。このサイトでは、Lifterlmsの多くの組み込み機能を使用しています。その大部分はチェックアウトカートです。アプリケーションで動作するようにページ全体を再構築する代わりに、フォールバックメソッドを使用してロードするように設定するだけです。したがって、このページは古いWordPressテーマのように機能するため、予想通りに機能します。

アドバンテージ：

1. セットアップしたら、これは簡単にメンテナンスできます。
2. ホスティングは、典型的なWordPressテーマと同じくらい簡単です。
3. ウェブサイトは、ヘッドレスのウェブサイトと同じくらいモダンで速いと感じています。

欠点：

1. ウェブサイトをレンダリングするには、常に2つの異なる方法を検討する必要があります。
2. この方法では、効果的なJavaScriptライブラリの選択肢が限られています。
3. このアプリケーションはWordPressにしっかりと結び付けられているため、サードパーティのREST APIを使用することは、ヘッドレスよりも困難です。

それがどのように機能するか

ヘッドレスにするには、以下を含む複数のアクションを実行する能力が必要です。

1. WordPressリクエストを使用してページを読み込み、
2. JavaScriptを使用してページを読み込んで、
3. どのようにレンダリングしても、ページを同じにすることを許可します、
4. JavaScriptまたはPHPを使用してページをいつロードするかを知る方法を提供し、
5. JavaScriptまたはPHPでレンダリングされているかどうかにかかわらず、すべてのルーティングページの100％の一貫性を確保します。

これにより、ウェブサイトはプログレッシブエンハンスメントを活用できます。ページはJavaScriptの有無にかかわらず表示できるため、作成したリクエストに基づいて最も適切なバージョンを使用できます。あなたのウェブサイトをクロールする信頼できるボットはありますか？互換性を確保するために、非JavaScriptバージョンを送信します。予想どおりに機能しないチェックアウトページはありますか？一時的にアプリケーションなしでロードを強制し、後で修正します。

これらのプロジェクトを完了するために、プレハブのボイラープレートを含むニコラスと呼ばれるオープンソースライブラリをリリースしました。

乾燥させてください

ほぼ頭のないアプリケーションを構築する際に克服したい最大の問題は、PHPとJavaScriptのどのようにあるかについて、ページの一貫性を保つことです。マークアップを2つの異なる場所に構築して維持したくありません。できるだけ多くの単一ソースコードを使用したいと思います。これにより、実際に使用できるJavaScriptライブラリがすぐに制限されます（ごめんなさい、反応！）。いくつかの研究と多くの実験の後、私はAlpinejsを使用することになりました。このライブラリは、私のコードを乾燥させたままにします。一部の部分は、各部品（例えば、ループ）に対して絶対に書き直す必要がありますが、最も重要なマークアップブロックを再利用できます。

PHPを使用してレンダリングされた単一の投稿テンプレートは、次のようになる場合があります。

 <code><?php if ( have_posts() ) { while ( have_posts() ) { the_post(); if ( is_singular() ) { echo nicholas()-?>templates()->get_template( 'index', 'post', [ 'content' => Nicholas::get_buffer( 'the_content' ), 'title' => Nicholas::get_buffer( 'the_title' ), ] ); } } } ?></code>

AlpineのJavaScriptを使用してレンダリングされた同じ投稿テンプレート：

<code><template :key="index" x-for="(post, index) in $store.posts"> = niccholas（） - > templates（） - > get_template（ 'index'、 'post'）？>
</template></code>

それらはすべて同じPHPテンプレートを使用するため、実際のループ内のすべてのコードが乾燥しています。

 <code>$title = $template->get_param( 'title', '' ); // 获取传递到此模板的标题，回退到空字符串。 $content = $template->get_param( 'content', '' ); // 获取传递到此模板的内容，回退到空字符串。 ?></code> = $ title？>

  <div x-html="content">= $ content？></div>

関連：このAlpine.jsメソッドは、「WordPressテーマでVueコンポーネントを構築する方法」でJonathan Landによって導入されたVue.jsメソッドと精神的に類似しています。

ページが互換モードで実行される時期を検出します

「互換性モード」を使用すると、WebサイトでJavaScriptのヘッドレスバージョンを実行せずにロードを強制的にロードすることができます。ページが互換モードでロードされるように設定されている場合、ページはPHPのみロードされ、アプリケーションスクリプトはキューにかけられません。これにより、「質問ページ」は、アプリを使用するときに期待どおりに機能しないものを書き換えずに実行できます。

ページを強制的に互換性のあるモードで実行させることができるさまざまな方法があります。コードが必要なものもあります。 Nicholasは、互換性モードで投稿を強制するポストタイプにトグルスイッチを追加します。

それとは別に、任意のURLを手動で追加して、Nicholasの設定で互換性のあるモードでロードするように強制できます。

これらは良いスタートですが、ポストに保存されているブロックに基づいて、ページを互換モードでロードする必要があるときに通常自動的に検出できることがわかりました。たとえば、Webサイトに忍者フォームがインストールされており、独自のJavaScriptを再作成する代わりに提供する検証JavaScriptを使用するとします。この場合、Ninjaフォームを含む任意のページで互換性モードを使用するように強制する必要があります。各URLを1つずつ手動で追加することも、クエリを使用して、忍者フォームブロックを使用してページ上のすべてを取得することもできます。例えば：

 <code>add_filter( 'nicholas/compatibility_mode_urls', function ( $urls ) { // 过滤Ninja Forms块$filtered_urls = Nicholas::get_urls_for_query( [ 'post_type' => 'any', 's' => 'wp:ninja-forms/form', // 查找Ninja Forms块] ); return array_merge( $urls, $filtered_urls ); } );</code>

これにより、NINJAフォームブロックを含むページが自動的に追加され、互換モードを使用してロードされるURLのリストにブロックが表示されます。これは、wp_queryパラメーターを使用するだけなので、ここで何を渡して、リストに追加すべきかを決定することができます。

アプリケーションを拡張します

舞台裏では、ニコラスは、Expressアプリケーションがミドルウェアを処理する方法と同様に、ミドルウェアモードを使用して拡張できる軽量ルーターを使用します。クリックページがルーティングされると、システムは各ミドルウェアアイテムを実行し、最終的にページをルーティングします。デフォルトでは、ルーターは何もしません。

基本的な例は次のとおりです。

 <code>// 导入WordPress特定的中间件import { updateAdminBar, validateAdminPage, validateCompatibilityMode } from 'nicholas-wp/middlewares' // 导入通用中间件import { addRouteActions, handleClickMiddleware, setupRouter, validateMiddleware } from "nicholas-router"; // 按此顺序执行这些操作，当页面被路由时。 addRouteActions( // 首先，验证URL validateMiddleware, // 验证此页面不是管理页面validateAdminPage, // 验证此页面不需要兼容模式validateCompatibilityMode, // 然后，我们更新Alpine存储updateStore, // 如果启用，则可能获取评论fetchComments, // 更新历史记录updateHistory, // 可能更新管理栏updateAdminBar ) // 设置路由器。这也使用中间件模式。 setupRouter( // 为点击设置事件监听器handleClickMiddleware )</code>

ここから、ページをルーティングすると何が起こるかを拡張できます。たぶん、あなたはページをスキャンしてコードを強調したいのか、それを変更したいタグの内容は、新しいルートのページと一致することです。キャッシュ層でさえ導入できます。必要なものは何でも、AddRouteactionまたはSetUpRouterを使用して、必要なアクションを追加します。

次のステップ

以下は、ほぼ頭のないアプローチを実装するために使用されるいくつかの主要なコンポーネントの概要です。もっと知りたい場合は、WP Dev Academyでコースを受講することをお勧めします。このコースは、最新のツールを使用してほぼ頭のないWordPress Webサイトを構築する方法に関する段階的なガイドです。また、あなた自身のプロジェクトを開始するのに役立つ私の近くのボイラープレートをチェックすることをお勧めします。

以上がほぼ頭のないWordPress Webサイトを構築する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。