就像花生酱和果酱有时,两个好东西在一起甚至更好。
在本教程中,我将向您展示如何在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