In this article, we are going to teach you how to use the popular vue framework in WordPress. But reading this article is more recommended for those who are already coded in WordPress and Vue or are interested in this field.
We start with a few questions and answers.
If you are one of those people who work in the field of WordPress theme and plugin design, this begs the question,
why should we use vue.js?
The best and shortest answer we can give to this question is the simplicity and robustness of vue, which makes it a solid choice for development.
WordPress uses react. Doesn’t it interfere with using vue?
We have to say that although some WordPress features are reacted, there are no restrictions on their use.
Now we want to create a shortcode with the help of a plugin generated by vue. To do this, we must follow the steps below in order
1. Build a WordPress plugin
2. Create shortcodes in the plugin
3. Create vue file
Now let’s look at each step and do the things that need to be done in it.
Step 1: Create a WordPress plugin
1. Go to your WordPress path and open the plugin folder in the wp-content folder.
2. Create a folder named wp-vue-totorial
3. Create a php file with the name of the plugin folder
4.Open the created file and paste the code related to the header as mentioned in the plugin tutorial in WordPress.
5. Go to the plugins section in your WordPress dashboard and activate the built-in plugin.
But you might say that we have not registered any code yet, but we are going to go for a shortcode plugin
Well, for some, the question may be, what is a shortcake?
We have to say that shortcode is a shortcode that tells WordPress what content generated by php code to put and display on that page.
6. Put the following code in the php file of the plugin
// Add shortscode
function func_wp_vue () {
return “Hello Shortcode”;
}
add_shortcode (‘wpvue’, ‘func_wp_vue’);
But what exactly does this code do to explain this?
() func_wp_vue returns the “Hello Shortcode” value.
And in the last part, it states the name of the shortcode
Now in your WordPress counter go to the tabs section and add a new tab. Choose a shortcode from Germany and put your shortcode in this section. Now select the page display.
After displaying the tab, you should see the Hello Shortcode value on this page.
Step 2: Set up VUE
1. Your vue file must be loaded on the page for the plugin to work properly.
2. To work with vue we need an html element that we usually use div.
3. To write our vue code, we must have a JavaScript file.
3.1 Use cdn better to load vue files.
To upload a vue file, we must first introduce it to WordPress.
To identify the file, we must first put the following code in the created php file.
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’);
But you may also be curious to know what happens in this code.
The wp_register_script function introduces the script but does not load it. The first parameter is em script, which WordPress identifies by this name, and the second parameter is the address or location of the script.
The add_action function announces what needs to be done. The first parameter in this function is the hook and the second parameter is the function that is to be hooked
So far we have been able to introduce vue to WordPress but nothing has been uploaded yet. This is why loading is done every time we call the short code.
func_wp_vue Must have function to call
Add for a reason.
// Add Vue.js
wp_enqueue_script (‘wpvue_vuejs’);
In this code, the wp_enqueue_script function requests the upload of the file
So far nothing has happened to the post or page where you put the shortcode, but if you look at the source it will notice.
<script type = ‘text / javascript’ src = ‘https: //cdn.jsdelivr.net/npm/vue/dist/vue.js? ver = 5.1.1’>
Added to page.
3.2 Create a JavaScript file
To create a JavaScript file, we need to go to the plugin folder and enter the following code inside
var app = new Vue (V
el: ‘#divWpVue’,
data::
message: ‘Hello Vue’
}
})
In this code, an instant of vue called app is created and with the command el, the id of the element is selected. Data in this section announces that we have a message with the value ‘Hello Vue’.
Now we need to add the message code to div after displaying the message from vue.
Now you need to go to the php file of the plugin and delete the part where the message was written in text and put the value {{message در در in it
At the end we have to hold our script and put the following code into the function
func_wp_vue
Let’s add
wp_register_script (‘my_vuecode’, plugin_dir_url (FILE). ‘vuecode.js’, ‘wpvue_vuejs’, true);
In the new function that you see in this code, the third parameter has a dependency and the fourth parameter is placed in the footer and the codes are placed after the DOM is fully loaded.
Finally the php file as
<? 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’);
?>
And JavaScript file format
var app = new Vue (V
el: ‘#divWpVue’,
data::
message: ‘Hello Vue!’
}
})
Comes and message if you have advanced all the steps correctly
Message From Vue: Hello Vue
You will see.
If you see any message other than what was output, you know there was an implementation error.
Leave a Reply