使用技巧

如何在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