如何在WordPress主題中構建VUE組件

想直接看代碼？請跳過本節。

本教程基於Vue 2編寫，並使用“內聯模板”。 Vue 3已棄用此功能，但您可以使用替代方法（例如將模板放在script標籤中）來實現類似的效果。

幾個月前，我正在構建一個WordPress網站，需要一個包含許多高級條件字段的表單。不同的選擇需要不同的選項和信息，而我們的客戶需要完全控制所有字段¹ 。此外，該表單需要出現在每個頁面的多個位置，並具有略微不同的配置。

並且表單的標題實例需要與漢堡菜單互斥，以便打開一個會關閉另一個。

並且表單包含與SEO相關的文本內容。

並且我們希望服務器響應能夠呈現一些可愛的動畫反饋。

（呼！）

整個過程感覺足夠複雜，以至於我不想手動處理所有這些狀態。我記得讀過Sarah Drasner的文章“用Vue.js替換jQuery：無需構建步驟”，該文章展示瞭如何用簡單的Vue微型應用替換經典的jQuery模式。這似乎是一個不錯的起點，但我很快意識到在WordPress的PHP端事情會變得很混亂。

我真正需要的是可重用的組件。

PHP → JavaScript

我喜歡Jamstack工具（如Nuxt）的靜態優先方法，並希望在這裡做類似的事情——從服務器發送完整內容，並在客戶端逐步增強。

但是PHP沒有內置的方法來處理組件。然而，它支持在其他文件中包含文件² 。 WordPress有一個名為get_template_part的require抽象，它相對於主題文件夾運行，並且更容易使用。將代碼劃分為模板部分是WordPress提供的最接近組件的東西³ 。

另一方面，Vue完全是關於組件的——但它只能在頁面加載並運行JavaScript後才能發揮作用。

這種範例結合的秘訣在於鮮為人知的Vue指令inline-template 。它強大的功能允許我們使用現有的標記來定義Vue組件。它是從服務器獲取靜態HTML和在客戶端掛載動態DOM元素之間的完美中間地帶。

首先，瀏覽器獲取HTML，然後Vue使其發揮作用。由於標記是由WordPress構建的，而不是由瀏覽器中的Vue構建的，因此組件可以輕鬆使用網站管理員可以編輯的任何信息。並且，與.vue文件（非常適合構建更多應用程序式的東西）相反，我們可以保持與整個網站相同的關注點分離——PHP中的結構和內容，CSS中的樣式以及JavaScript中的功能。

為了展示這一切是如何組合在一起的，我們將為一個食譜博客構建一些功能。首先，我們將添加一種供用戶評價食譜的方法。然後，我們將基於該評分構建一個反饋表單。最後，我們將允許用戶根據標籤和評分過濾食譜。

我們將構建一些共享狀態並在同一頁面上運行的組件。為了使它們能夠很好地協同工作——並方便將來添加其他組件——我們將整個頁面作為我們的Vue應用程序，並在其中註冊組件。

每個組件都將位於其自己的PHP文件中，並使用get_template_part包含在主題中。

基礎工作

將Vue應用於現有頁面時，需要考慮一些特殊情況。首先，Vue不希望您在其中加載腳本——如果您這樣做，它會向控制台發送不祥的錯誤。避免此問題的最簡單方法是在每個頁面的內容周圍添加一個包裝元素，然後在包裝元素外部加載腳本（出於各種原因，這已經是常見模式）。如下所示：

 <?php /* header.php */ ?>
<div id="site-wrapper">

<?php /* footer.php */ ?>
</div>
<?php wp_footer(); ?>

第二個考慮因素是Vue必須在body元素的末尾調用，以便它在其餘DOM可用解析之後加載。我們將true作為第五個參數（ in_footer ）傳遞給wp_enqueue_script函數。此外，為了確保Vue首先加載，我們將它註冊為主腳本的依賴項。

 <?php // functions.php

add_action( &#39;wp_enqueue_scripts&#39;, function() {
  wp_enqueue_script(&#39;vue&#39;, get_template_directory_uri() . &#39;/assets/js/lib/vue.js&#39;, null, null, true); // 在生產環境中更改為vue.min.js
  wp_enqueue_script(&#39;main&#39;, get_template_directory_uri() . &#39;/assets/js/main.js&#39;, &#39;vue&#39;, null, true);
});

最後，在主腳本中，我們將在site-wrapper元素上初始化Vue。

 // main.js

new Vue({
  el: document.getElementById('site-wrapper')
})

星級評分組件

我們的單篇文章模板目前如下所示：

 <?php /* single-post.php */ ?>
<?php /* ... 文章內容*/ ?>

我們將註冊星級評分組件並添加一些邏輯來管理它：

 // main.js

Vue.component('star-rating', {
  data () {
    return {
      rating: 0
    }
  },
  methods: {
    rate (i) { this.rating = i }
  },
  watch: {
    rating (val) {
      // 通過在每次更改時檢查它來防止評分超出範圍if (val > 5) 
        this.rating = 5

      // ... 將保存到localStorage或其他地方的一些邏輯}
  }
})

// 確保在註冊所有組件後初始化Vue
new Vue({
  el: document.getElementById('site-wrapper')
})

我們將組件模板寫入一個單獨的PHP文件中。該組件將包含六個按鈕（一個用於未評分，五個帶星）。每個按鈕將包含一個SVG，其填充為黑色或透明。

 <?php /* components/star-rating.php */ ?>
<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 ）。

現在我們將它包含在我們的頁面模板中。

 <?php /* single-post.php */ ?>
<?php /* 文章內容*/ ?>
<?php get_template_part(&#39;components/star-rating&#39;); ?>

所有模板內的HTML都是有效的，並且瀏覽器可以理解，除了<star-rating></star-rating>。我們可以通過使用Vue的is指令來解決這個問題：

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

現在假設最大評分不一定是5，而是可以使用流行的WordPress插件Advanced Custom Fields（為頁面、帖子和其他WordPress內容添加自定義字段）由網站編輯器控制。我們只需要將其值注入到我們將調用的組件的prop中，我們將其稱為maxRating ：

 <?php // components/star-rating.php

// max_rating 是ACF 字段的名稱$max_rating = get_field(&#39;max_rating&#39;);
?>
<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>

在我們的腳本中，讓我們註冊prop並替換魔術數字5：

 // main.js

Vue.component('star-rating', {
  props: {
    maxRating: {
      type: Number,
      default: 5 // 高亮顯示}
  },
  data () {
    return {
      rating: 0
    }
  },
  methods: {
    rate (i) { this.rating = i }
  },
  watch: {
    rating (val) {
      // 通過在每次更改時檢查它來防止評分超出範圍if (val > maxRating) 
        this.rating = maxRating

      // ... 將保存到localStorage或其他地方的一些邏輯}
  }
})

為了保存特定食譜的評分，我們需要傳入帖子的ID。同樣的想法：

 <?php // components/star-rating.php

$max_rating = get_field(&#39;max_rating&#39;);
$recipe_id = get_the_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', {
  props: {
    maxRating: { 
      // 與之前相同},
    recipeId: {
      type: String,
      required: true
    }
  },
  // ...
  watch: {
    rating (val) {
      // 與之前相同// 在每次更改時，保存到某個存儲// 例如localStorage 或發佈到WP 評論端點someKindOfStorageDefinedElsewhere.save(this.recipeId, this.rating)
    }
  },
  mounted () {
    this.rating = someKindOfStorageDefinedElsewhere.load(this.recipeId)    
  }
})

現在我們可以將同一個組件文件包含在存檔頁面（文章循環）中，而無需任何額外設置：

 <?php // archive.php

if (have_posts()): while ( have_posts()): the_post(); ?>
<?php // 摘要、特色圖片等，然後：
  get_template_part(&#39;components/star-rating&#39;); ?>
<?php endwhile; endif; ?>

...(剩餘內容過長，已省略)... 請注意，由於篇幅限制，我無法完整地生成剩餘的代碼。 但是，根據您提供的文本，我可以繼續生成類似的偽原創內容，只要您提供更多輸入。 請告訴我您希望我接下來做什麼。

以上是如何在WordPress主題中構建VUE組件的詳細內容。更多資訊請關注PHP中文網其他相關文章！