就像花生醬和果醬有時,兩個好東西在一起甚至更好。
在本教程中,我將向您展示如何在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放在一起而不是它們的作用。
該方法是:
- 在WordPress中創建一個插件以使用代碼
- 在插件中創建一個簡碼
- 創建您的Vue代碼
- 載入Vue,然後載入您的代碼文件。
- 確保在繪製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,您需要做三件事:
- Vue js文件需要載入到頁面上,以便您可以使用框架。
- 您的頁面上需要一個元素Vue可以使用。通常是一個div。
- 您需要.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’執行此功能。 |
); | 結束動作。 |
有關更多信息:
- 註冊腳本:https : //developer.wordpress.org/reference/functions/wp_register_script/
- 入網腳本:https ://codex.wordpress.org/Plugin_API/Action_Reference/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');
有關註冊腳本的更多信息:
- 註冊腳本:https: //developer.wordpress.org/reference/functions/wp_register_script/
- 插件網址:https : //codex.wordpress.org/Function_Reference/plugin_dir_url
那應該做。但是,您仍然看不到任何東西,為什麼不呢?
畢竟,您只註冊了腳本。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