WordPressテーマでVueコンポーネントを構築する方法

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

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

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

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

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

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

（電話！）

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

本当に必要なのは、再利用可能なコンポーネントです。

PHP→JavaScript

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

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

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

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

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

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

状態を共有し、同じページで実行するコンポーネントをいくつか構築します。それらをうまく機能させるために、そして将来他のコンポーネントの追加を容易にするために、VUEアプリケーションとしてページ全体を取り、そこにコンポーネントを登録します。

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

基本的な作業

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

 
<div id="site-wrapper">


</div>

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

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

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

星評価コンポーネント

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

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

 // main.js

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

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

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

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

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

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

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

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

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

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

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

スクリプトで、小道具を登録して、マジック番号5を交換しましょう。

 // main.js

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

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

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

 
<div :max-rating="<?= $max_rating ?>" :recipe-id="<?= $recipe_id ?>" inline-template="" is="star-rating">
  <div>
    <p>評価レシピ：</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
    }
  }、
  // ...
  時計： {
    評価（val）{
      //以前と同じ//変更するたびにストレージに保存する//たとえば、localStorageまたはWPコメントに公開してくださいendpoint seendofstoragedefinedelse.save（this.recipeid、this.rating）
    }
  }、
  mounted（）{
    this.rating = somekindofstoragedefinedelsewhere.load（this.recipeid）    
  }
}）

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

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

以上がWordPressテーマでVueコンポーネントを構築する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。