如何在WordPress中使用Vue

就像花生醬和果醬有時,兩個好東西在一起甚至更好。

在本教程中,我將向您展示如何在WordPress網站中使用Vue。本教程適用於已使用WordPress和Vue進行編碼或對二者感興趣的人。PHP,WordPress,Javascript,Vue方面的知識將有所幫助。

Vue程序員:為什麼選擇WordPress?

據統計,WordPress運行著全球約三分之一的網站。如果您已在Vue中創建了要共享的內容,則WordPress是使其可用的良好平台。

您可以自定義自己的網站,或在WordPress的插件存儲庫上共享代碼。

WordPress程序員:為什麼選擇Vue?

簡短的答案是,Vue以其簡單性和健壯性而聞名,使其成為開發的可靠選擇。如果您要向網站添加功能,則它是啟動和運行的好工具。它使用JavaScript,因此大多數開發人員都很熟悉。

WordPress使用React,我什至可以使用Vue嗎?
當然!儘管WordPress中的某些功能可能在React中,但您不僅限於此。

WordPress是開源的,做什麼可以使您高興。

教程概述

我們將做一個簡短的代碼來顯示Vue中生成的內容。我們將使用一個簡單的示例,因為這更多地是關於如何將Vue和WordPress放在一起而不是它們的作用。

該方法是:

  1. 在WordPress中創建一個插件以使用代碼
  2. 在插件中創建一個簡碼
  3. 創建您的Vue代碼
  4. 載入Vue,然後載入您的代碼文件。
  5. 確保在繪製dom之後載入.js文件

基本上就是這樣。讓我們詳細介紹。

WordPress:插件。

插件既簡單又健壯,它們使您可以向網站添加功能。該插件將是一個簡單的「 hello world」類型。我們將其稱為「 wp-vue-tutorial 」,讓我們開始:

1)在您的WordPress插件目錄中創建一個新文件夾。

這是保存文件的位置,應該是插件的名稱。對於本教程,我們使用:
/ wp-content / plugins / wp-vue-tutorial

我們需要一個「主文件」,讓我們開始吧。

2)在目錄中,使用插件名稱創建一個主文件。

該文件名為「 wp-vue-tutorial.php 」,因此應類似於:
/wp-content/plugins/wp-vue-tutorial/wp-vue-tutorial.php

是的,插件名稱,文件夾名稱和主文件名稱都相同,因此WordPress知道在哪裡可以找到它。

WordPress將其打開後,需要有關此東西的更多信息。包含在標題中。我們保持簡單,因此在wp-vue-tutorial.php中,添加以下代碼:

<?php
/**
 * Plugin Name: WordPress Vue Tutorial
 * Description: A demo on how to use Vue in WordPress.
 */
?>

更多信息:https: //developer.wordpress.org/plugins/

如果您轉到WordPress儀錶板,則會看到您的插件。
儀錶板->插件
它應該出現在列表中。

3)激活您的插件。

單擊插件上的激活

現在已載入,但是由於沒有任何代碼可運行,因此發生的事情很少。因此,讓我們創建一個簡碼。

短代碼告訴WordPress將您的PHP代碼生成的內容插入頁面或帖子的內容中。
例如 用戶輸入類似[myshortcode]的內容,當頁面顯示時,顯示’這是我的簡碼中的內容。

注意:WordPress當前的文本編輯器(Gutenberg)允許您放入內容塊。短代碼仍然可以使用,實際上有一個專門用於短代碼的塊。我們在本教程中使用短代碼,因為這是一個有效的標準。

有關更多信息:https : //codex.wordpress.org/Shortcode_API

4)在您的插件中創建一個簡碼。

將以下代碼添加到您的插件文件(wp-vue-tutorial.php):

 //Add shortscode
 function func_wp_vue(){
   return "Hello Shortcode";
}
add_shortcode( 'wpvue', 'func_wp_vue' );

分解:
函數func_wp_vue()返迴文本Hello Shortcode。

add_shortcode( 使此短代碼可用。
‘wpvue’, 用戶在內容中使用的代碼
[‘wpvue’]。
‘func_wp_vue’ 該函數返回要顯示的字元串。
); 簡碼結尾。

您的文件應如下所示:

<?php
/**
 * Plugin Name: WordPress Vue Tutorial
 * Description: A demo on how to use Vue in WordPress.
 */

//Add shortscode
 function func_wp_vue(){
 return "Hello Shortcode";
}
add_shortcode( 'wpvue', 'func_wp_vue' );
?>

測試一下。
編輯添加新的WordPress頁面。在內容區域中,輸入[wpvue]
發布頁面並進行查看。您應該看到Hello Shortcode

短代碼可以返回多個單詞,我們也可以在其中放入一個元素。

讓我們將代碼更改為:

//Add shortscode
function func_wp_vue(){
  $str= "<div id='divWpVue'>"
    ."Message from Vue: "
    ."</div>";
  return $str;
} // end function

再次測試。

設置Vue

要使用Vue,您需要做三件事:

  1. Vue js文件需要載入到頁面上,以便您可以使用框架。
  2. 您的頁面上需要一個元素Vue可以使用。通常是一個div。
  3. 您需要.js文件中的Vue代碼才能在元素中進行工作。

載入Vue.js

讓我們從添加Vue開始。您可以通過指向CDN的鏈接添加Vue。有兩種版本,一種用於帶有調試選項的開發,一種用於更快,更精簡的產品。
我們將使用開發者之一:https : //cdn.jsdelivr.net/npm/vue/dist/vue.js

我們需要將其載入到WordPress中,這可以通過「 wp enqueue腳本」和「 wp_register_script 」的魔術來完成。
必要時,此掛鉤會自動將腳本載入到WordPress的頭部。

看起來像:

function func_load_vuescripts() {
 wp_register_script( 'wpvue_vuejs', 'https://cdn.jsdelivr.net/npm/vue/dist/vue.js');
}
add_action('wp_enqueue_scripts', 'func_load_vuescripts');

分解:

函數func_load_vuescripts(){ 定義功能。
wp_register_script( 告訴WP這個腳本存在
(我們稍後再載入)
‘wpvue_vuejs’, 這是WordPress對腳本的引用。
”https://cdn.jsdelivr.net/npm/vue/dist/vue.js”, 實際的腳本文件。
); 關閉wp_register_script。
} 關閉功能。
add_action( WordPress,執行此操作。
‘wp_enqueue_scripts’, 鉤入「 wp_enqueue_scripts」。
‘func_load_vuescripts’ 對’wp_enqueue_scripts’執行此功能。
); 結束動作。

有關更多信息:

我們會將代碼添加到您的插件文件中,短代碼上方。
它看起來應該像這樣:

<?php
/**
 * Plugin Name: WordPress Vue Tutorial
 * Description: A demo on how to use Vue in WordPress.
 */

//Register Scripts to use 
function func_load_vuescripts() {
 wp_register_script( 'wpvue_vuejs', 'https://cdn.jsdelivr.net/npm/vue/dist/vue.js');
}
add_action('wp_enqueue_scripts', 'func_load_vuescripts');

//Add shortscode
function func_wp_vue(){
  //Build String
  $str= "<div id='divWpVue'>"
  ."Vue code here: "
  ."</div>";

  //Return
  return $str;
} // end function

//Add shortcode to WordPress
add_shortcode( 'wpvue', 'func_wp_vue' );
?>

現在,我們告訴WordPress有關Vue.js的信息,但尚未載入。您將其載入到shortcode函數中,以便在運行shortcode時觸發。說得通?

在您的簡碼函數中包括以下內容:

//Add Vue.js
  wp_enqueue_script('wpvue_vuejs');

分解:

wp_enqueue_script( WordPress,載入此腳本
‘wpvue_vuejs’ 我們在註冊腳本時將其稱為「 wpvue_vuejs」。
); 結束入隊腳本

它應該看起來像:

function func_wp_vue(){
  //Add Vue.js
  wp_enqueue_script('wpvue_vuejs');
  
  //Build String
  $str= "<div id='divWpVue'>"
  ."Vue code here: "
  ."</div>";

  //Return
  return $str;
} // end function

現在,如果您運行它,並沒有太大改變,但是如果您查看頁面的源代碼,將會發現:

<script type =’text / javascript’src =’https://cdn.jsdelivr.net/npm/vue/dist/vue.js?ver = 5.1.1′> </ script>

現在已載入Vue,我們可以使用在簡碼(’ divWpVue ‘)中生成的div ,我們需要的是一些在該div中運行的Vue代碼。

為Vue創建代碼文件

製作一個新文件:vuecode.js您的插件目錄:
wp-content / plugins / wp-vue-tutorial

您應該在那裡有2個文件:

  • wp-vue-tutorial.php
  • vuecode.js

更多信息:https
//vuejs.org/v2/guide/

這是一個非常簡單的演示,因此請包含以下代碼:

var app = new Vue({
  el: '#divWpVue',
  data: {
    message: 'Hello Vue!'
  }
})

分解:

var app = new Vue({ 我們正在創建一個名為「 app」的變數,它實際上是一個Vue實例。
el:「#divWpVue」, 該應用程序在元素「 divWpVue」中運行。
數據:{ 該應用程序具有數據。
訊息:「 Hello Vue!」 一條數據稱為「消息」,其值為「 Hello Vue!」。
}
}
關閉數據部分
關閉應用程序部分

有關Vue的更多信息:

為了顯示消息,您需要在div中包括數據消息。更改您的簡碼功能(func_wp_vue)以包含{{message}}

雙大括弧是在HTML文件中包含Vue內容的一種方式。如果在分配給Vue實例的元素內添加{{message}},它將神奇地出現。當然,這是簡短的非技術性答案。

重要! 如果您檢查文件,並且一切正常,則將看到「 Hello Vue!」。其中{{消息}}放置。如果您看到{{message}},則說不通。

讓我們在簡碼中添加{{message}}

function func_wp_vue(){
  //Add Vue.js
  wp_enqueue_script('wpvue_vuejs');
  
  //Build String
  $str= "<div id='divWpVue'>"
  ."Message from Vue: {{ message }}"
  ."</div>";

  //Return
  return $str;
} // end function

如果您現在對其進行測試,它將無法正常工作,將顯示{{message}},而不是「 Hello Vue!」。

為什麼?因為我們尚未載入您的vuecode.js 文件。我們可以像載入Vue CDN文件一樣載入它,對不對?

嗯…不完全是。您走在正確的道路上,但是有一些需要注意的地方。讓我們來看一看。

要註冊vuecode.js,您希望可以進行以下操作:

 wp_register_script('my_vuecode', 'vuecode.js')

不,不是因為WordPress無法找到 vuecode.js。

陷阱:您的文件未載入

請記住,簡碼顯示在頁面上的路徑與插件不同。這是一種後勤的鏡子,什麼都沒有出現。

要修復它,您需要更加精確地了解文件的位置。這可以通過添加一個WordPress函數來返回您正在使用的插件文件的路徑來解決。plugin_dir_url可以解決問題。

wp_register_script('my_vuecode', plugin_dir_url( __FILE__ ).'vuecode.js') 

有關插件網址的更多信息:https : //codex.wordpress.org/Function_Reference/plugins_url

陷阱:Vue.js需要先載入

您的vuecode.js在Vue上運行,因此開始運行Vue代碼之前,請確保已載入這些文件。

為了確保這一點,通過將依賴項添加到register_script函數,告訴WordPress它依賴Vuejs 。使用Vue.js腳本寄存器中的句柄。

wp_register_script('my_vuecode', plugin_dir_url( __FILE__ ).'vuecode.js', 'wpvue_vuejs' );

GOTCHA:帶有Vue代碼的文件必須在DOM載入後出現

為什麼?它在head中載入腳本,但是您的vuecode.js在主體中控制著一個div,並且尚未載入。它找不到它並引發錯誤。

因此,首先載入Vue.js,然後載入具有DOM的主體,然後載入控制腳本(vuecode.js)。你可以做到這一點通過寄存器腳本通過添加一個「真」值的參數。’ true ‘告訴WordPress將腳本載入到頁腳中。

它看起來應該像這樣:

wp_register_script('my_vuecode', plugin_dir_url( __FILE__ ).'vuecode.js', 'wpvue_vuejs', true );

分解:

wp_register_script( WordPress,註冊此腳本。
‘my_vuecode’, 它的句柄(參考)。
plugin_dir_url(__ FILE __)。’vuecode.js’, 該文件位於與此插件相同的目錄中。這是它的鏈接。
‘wpvue_vuejs’, 確保先載入此文件。它是對另一個註冊腳本的引用。
真正 將腳本載入到頁腳中。
); 關閉功能。

您載入腳本的功能應如下所示:

//Register scripts to use
function func_load_vuescripts() {
    wp_register_script('wpvue_vuejs', 'https://cdn.jsdelivr.net/npm/vue/dist/vue.js');
    wp_register_script('my_vuecode', plugin_dir_url( __FILE__ ).'vuecode.js', 'wpvue_vuejs', true );
}
add_action('wp_enqueue_scripts', 'func_load_vuescripts');

有關註冊腳本的更多信息:

那應該做。但是,您仍然看不到任何東西,為什麼不呢?
畢竟,您只註冊了腳本。WordPress對此一無所知,但是您還沒有告訴它解僱它。

陷阱:不要忘記排隊/載入腳本

好的,這就像加入Vue.js腳本一樣。將以下內容添加到簡碼功能中-‘func_wp_vue ‘。

wp_enqueue_script('my_vuecode');

‘ func_wp_vue ‘應該看起來像:

//Return string for shortcode
function func_wp_vue(){
  //Add Vue.js
  wp_enqueue_script('wpvue_vuejs');
  //Add my code to it
  wp_enqueue_script('my_vuecode');

  //Build String
  $str= "<div id='divWpVue'>"
    ."Message from Vue: {{ message }}"
    ."</div>";

  //Return to display
  return $str;
} // end function

//Add shortcode to WordPress
add_shortcode( 'wpvue', 'func_wp_vue' );

放在一起:

您應該擁有名為「 wp-vue-tutorial」的插件。在plugin目錄中,應該有2個文件:

  • vuecode.js(其中包含Vue代碼)
  • wp-vue-tutorial.php(帶有WordPress代碼)

vuecode.js

從Vue.js運行的Javascript文件應如下所示:

var app = new Vue({
  el: '#divWpVue',
  data: {
    message: 'Hello Vue!'
  }
})

wp-vue-tutorial.php

定義插件並包含短代碼的WordPress文件應如下所示:

<?php
/**
 * Plugin Name: WordPress Vue Tutorial
 * Description: A demo on how to use Vue in WordPress.
 */

//Register scripts to use
function func_load_vuescripts() {
    wp_register_script('wpvue_vuejs', 'https://cdn.jsdelivr.net/npm/vue/dist/vue.js');
    wp_register_script('my_vuecode', plugin_dir_url( __FILE__ ).'vuecode.js', 'wpvue_vuejs', true );
}
//Tell WordPress to register the scripts 
add_action('wp_enqueue_scripts', 'func_load_vuescripts');


//Return string for shortcode
function func_wp_vue(){
  //Add Vue.js
  wp_enqueue_script('wpvue_vuejs');
  //Add my code to it
  wp_enqueue_script('my_vuecode');

  //Build String
  $str= "<div id='divWpVue'>"
    ."Message from Vue: {{ message }}"
    ."</div>";

  //Return to display
  return $str;
} // end function

//Add shortcode to WordPress
add_shortcode( 'wpvue', 'func_wp_vue' );
?>

注意:您可以將簡碼包含在主題的functions.php文件中,只要使用該主題,或者該主題的functions.php文件沒有被升級覆蓋,它將仍然可以正常使用。
我更喜歡該插件,因為它可以將樣式與內容分開,並且通常我的Vue代碼還是與內容有關。

更多信息:
https://codex.wordpress.org/Functions_File_Explained

如果使用主題功能文件,則需要調用與主題相關的文件路徑,而不是插件。

更多信息:https://codex.wordpress.org/Function_Reference/get_template_directory

下載檔案

您可以在以下位置下載文件:https://github.com/workingwebsites/wp-vue-tutorial

結論

好的,所以「 Hello Vue」並沒有完全點燃世界。但是,一旦有了這些,就可以看到如何通過Vue向WordPress網站添加很多功能。

通過在WordPress網站中使用Vue,訪問API並使網站更具交互性變得更加容易。同樣,如果您用Vue編寫了一些狡猾的代碼,則將其放入WordPress網站(其中有很多)並不是一個大技巧。

就像花生醬和果醬一樣,將兩個好東西結合起來會變得更好!

原文:https://dev.to/workingwebsites/using-vue-in-wordpress-1b9l

相關文章