コードを直接読みたいですか？このセクションをスキップしてください。

このチュートリアルは、VUE 2に基づいて書(shū)かれており、「インラインテンプレート」を使用しています。 Vue 3はこの機(jī)能を非難していますが、スクリプトタグにテンプレートを入力するなど、代替品を使用して同様の効果を達(dá)成できます。

數(shù)ヶ月前、私はWordPressのWebサイトを構(gòu)築していましたが、多くの高度な條件付きフィールドを備えたフォームが必要でした。さまざまな選択には、さまざまなオプションと情報(bào)が必要ですが、お客様はすべてのフィールドを完全に制御する必要があります¹ 。さらに、フォームは各ページの複數(shù)の場(chǎng)所に表示され、わずかに異なる構(gòu)成が必要です。

フォームのタイトルインスタンスは、ハンバーガーメニューに相互に排他的である必要があるため、1つを開(kāi)くと他方が閉じられます。

フォームには、 SEOに関連するテキストコンテンツが含まれています。

そして、サーバーの応答がいくつかのかわいいアニメーションフィードバックを提示できることを願(yuàn)っています。

（電話?。?/p>

プロセス全體が非常に複雑だと感じたため、これらすべての狀態(tài)を手動(dòng)で処理したくありませんでした。 Sarah Drasnerの記事「jqueryをVue.jsに置き換える：ビルドステップは不要」を読んだことを覚えています。これは良い出発點(diǎn)のように思えますが、WordPressのPHP側(cè)で物事が亂雑になる可能性があることにすぐに気付きました。

本當(dāng)に必要なのは、再利用可能なコンポーネントです。

PHP→JavaScript

私はNuxtのようなJamstackツールの靜的に好ましいアプローチが好きで、ここで似たようなことをしたいと思っています。サーバーから完全なコンテンツを送信してクライアントにステップアップします。

ただし、PHPにはコンポーネントを処理するための組み込み方法がありません。ただし、他のファイルにファイル²を含めることをサポートしています。 WordPressには、 get_template_partと呼ばれる抽象化requireです。これは、テーマフォルダーに比べて実行され、使いやすいです。コードをテンプレートパーツに分割することは、WordPressがコンポーネント³に提供する最も近いものです。

一方、Vueは完全にコンポーネントに関するものですが、ページがロードされてJavaScriptを?qū)g行した後にのみ機(jī)能します。

この例の組み合わせの秘密は、あまり知られていないVUE指令inline-templateです。その強(qiáng)力な機(jī)能により、既存のタグを使用してVueコンポーネントを定義できます。これは、サーバーから靜的HTMLを取得することと、クライアントに動(dòng)的なDOM要素をマウントすることとの間の完璧な中間基盤です。

まず、ブラウザはHTMLを取得し、次にVueが機(jī)能します。タグは、ブラウザのVueではなくWordPressによって構(gòu)築されるため、コンポーネントはWebサイト管理者が編集できる情報(bào)を簡(jiǎn)単に使用できます。また、.Vueファイル（より多くのアプリケーションのようなものを構(gòu)築するのに最適です）とは異なり、Webサイト全體と同じ懸念の分離を維持できます。PHPの構(gòu)造とコンテンツ、CSSのスタイル、JavaScriptの機(jī)能です。

これがどのようにまとめられているかを示すために、レシピブログのいくつかの機(jī)能を構(gòu)築しています。まず、ユーザーがレシピを評(píng)価する方法を追加します。次に、そのスコアに基づいてフィードバックフォームを構(gòu)築します。最後に、ユーザーがラベルと評(píng)価に基づいてレシピをフィルタリングできるようにします。

狀態(tài)を共有し、同じページで実行するコンポーネントをいくつか構(gòu)築します。それらをうまく機(jī)能させるために、そして將來(lái)他のコンポーネントの追加を容易にするために、VUEアプリケーションとしてページ全體を取り、そこにコンポーネントを登録します。

各コンポーネントは獨(dú)自のPHPファイルに配置され、 get_template_partを使用してトピックに含まれます。

基本的な作業(yè)

既存のページにVUEを適用する際に考慮すべき特別なケースがいくつかあります。まず、Vueはスクリプトをロードすることを望んでいません。もしそうなら、コンソールに不吉なエラーが送信されます。これを回避する最も簡(jiǎn)単な方法は、各ページのコンテンツにラッパー要素を追加し、ラッパー要素の外側(cè)にスクリプトをロードすることです（さまざまな理由ですでに共通のパターンです）。以下に示すように：

 
<div id="site-wrapper">


</div>

2番目の考慮事項(xiàng)は、VUEがbody要素の終わりに呼び出されなければならないため、DOMの殘りの部分が解析可能になった後に荷重がかかるようにする必要があります。 5番目のパラメーター（ in_footer ）としてtrue wp_enqueue_script関數(shù)に渡します。また、Vueが最初にロードされるようにするために、メインスクリプトの依存関係として登録します。

 <p>最後に、メインスクリプトでは、 <code>site-wrapper</code>要素のVUEを初期化します。</p><pre class="brush:php;toolbar:false"> // main.js

新しいVue（{
  EL：document.getElementById（ 'Site-Wrapper'）
}）

星評(píng)価コンポーネント

現(xiàn)在、単一の記事テンプレートは次のとおりです。

星評(píng)価コンポーネントを登録し、ロジックを追加して管理します。

 // main.js

vue.comPonent（ 'Star-Rating'、{
  データ （） {
    戻る {
      評(píng)価：0
    }
  }、
  方法：{
    レート（i）{this.rating = i}
  }、
  時(shí)計(jì)： {
    評(píng)価（val）{
      //変更するたびにレンジが範(fàn)囲を超えるのを防ぐ（val> 5） 
        this.rating = 5

      // ... LocalStorageまたは他の場(chǎng)所に保存されるいくつかのロジック}
  }
}）

//すべてのコンポーネントを登録した後、必ずVUEを初期化してください
新しいVue（{
  EL：document.getElementById（ 'Site-Wrapper'）
}）

コンポーネントテンプレートを別のPHPファイルに書(shū)き込みます。コンポーネントには、6つのボタンが含まれます（1つは未評(píng)価と5つの星用）。各ボタンには、黒または透明なSVGが含まれています。

 
<star-rating inline-template="">
  <div>
    <p>評(píng)価レシピ：</p>
    <svg v-for="i in 5" :key="i"><path :fill="rating >= i ? 'black' : 'transparent'" d="..."></path></svg>
  </div>
</star-rating>

経験から、コンポーネント自體と同じクラス名を持つコンポーネントのトップ要素を提供するのが好きです。これにより、タグとCSSの間で簡(jiǎn)単に推論できます（例：<star-rating></star-rating> .star-ratingと見(jiàn)なすことができます）。

次に、ページテンプレートに含めます。

すべてのテンプレート內(nèi)のHTMLは有効であり、ブラウザはそれを理解することができます<star-rating></star-rating>。 Vueのisを使用することで、この問(wèn)題を解決できます。

<div inline-template="" is="star-rating">...</div>

ここで、最大評(píng)価は必ずしも5ではないが、人気のあるWordPressプラグインAdvanced Custom Fields（ページ、投稿、その他のWordPressコンテンツのカスタムフィールドの追加）を使用してWebサイトエディターによって制御できると仮定します。呼び出すmaxRatingの小道具にその価値を注入する必要があります。

 
<div :max-rating="<?= $max_rating ?>" inline-template="" is="star-rating">
  <div>
    <p>評(píng)価レシピ：</p>
    <svg v-for="i in maxRating" :key="i"><path :fill="rating >= i ? 'black' : 'transparent'" d="..."></path></svg>
  </div>
</div>

スクリプトで、小道具を登録して、マジック番號(hào)5を交換しましょう。

 // main.js

vue.comPonent（ 'Star-Rating'、{
  小道具：{
    最大：{
      タイプ：番號(hào)、
      デフォルト：5 //ハイライト}
  }、
  データ （） {
    戻る {
      評(píng)価：0
    }
  }、
  方法：{
    レート（i）{this.rating = i}
  }、
  時(shí)計(jì)： {
    評(píng)価（val）{
      //変更されるたびにスコアが範(fàn)囲外に出ないようにしないでください（val> maxrating） 
        this.rating = maxrating

      // ... LocalStorageまたは他の場(chǎng)所に保存されるいくつかのロジック}
  }
}）

特定のレシピの評(píng)価を保存するには、投稿のIDを渡す必要があります。同じアイデア：

 
<div :max-rating="<?= $max_rating ?>" :recipe-id="<?= $recipe_id ?>" inline-template="" is="star-rating">
  <div>
    <p>評(píng)価レシピ：</p>
    <svg v-for="i in maxRating" :key="i"><path :fill="rating >= i ? 'black' : 'transparent'" d="..."></path></svg>
  </div>
</div>

// main.js

vue.comPonent（ 'Star-Rating'、{
  小道具：{
    最大：{ 
      //以前と同じ}、
    レシピ：{
      タイプ：文字列、
      必須：true
    }
  }、
  // ...
  時(shí)計(jì)： {
    評(píng)価（val）{
      //以前と同じ//変更するたびにストレージに保存する//たとえば、localStorageまたはWPコメントに公開(kāi)してくださいendpoint seendofstoragedefinedelse.save（this.recipeid、this.rating）
    }
  }、
  mounted（）{
    this.rating = somekindofstoragedefinedelsewhere.load（this.recipeid）    
  }
}）

これで、追加の設(shè)定なしに、アーカイブページ（記事ループ）に同じコンポーネントファイルを含めることができます。

...（殘りのコンテンツが長(zhǎng)すぎる、省略）..スペースの制限のため、殘りのコードを完全に生成できないことに注意してください。ただし、提供するテキストに基づいて、より多くの入力を提供する限り、同様の擬似オリジナルコンテンツを生成し続けることができます。あなたが私に次に何をしてほしいか教えてください。

以上がWordPressテーマでVueコンポーネントを構(gòu)築する方法の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。