Plugin production preparation work
First, we add a folder called "My-Mood" in the \wp-content\plugins directory, and add a main file called "My-Mood" to the folder. This is the main file of the plugin. The beginning of the file requires some naming format: such as the following code
<!--?php <br ?--> /* Plugin Name: My Mood Plugin URI: Description: A mood release plugin Version: 1.0 Author: Zhou Liang's blog Author URI: License: GPL */ ?>
- Plugin Name represents the name of the plugin.
- The Plugin URI represents the release address of the plugin.
- Description represents a description about this plugin.
- Version means that the version is good. The first version uses 1.0. If your plugin is updated, change this version parameters in turn.
- Author represents the name of the plugin author.
- Author URI represents the author's homepage. .
- License represents the plug-in license. If you are open source, use GPL. The parameters of license can be queried on Baidu or Google. I will not describe it too much here.
Initialization of plug-in installation
Plugins are not just style changes. Usually we will add new tables. Then I completed the newly added tables through the plug-in installation function. We continue to add the following code to it:
<!--?php <br ?--> //Activate activityregister_activation_hook( __FILE__, 'my_mood_install');
function my_mood_install() {
// Things to do when enabledglobal $wpdb;
$table_name = $wpdb->prefix . "mood";
$charset_collate = $wpdb->get_charset_collate();
$sql = "CREATE TABLE $table_name (
id mediumint(9) NOT NULL AUTO_INCREMENT,
createdon datetime DEFAULT '0000-00-00 00:00:00' NOT NULL,
publishedon datetime DEFAULT '0000-00-00 00:00:00' NOT NULL,
status int NOT NULL,
mood int NOT NULL,
text text NOT NULL,
address varchar(55) DEFAULT '' NOT NULL,
UNIQUE KEY id (id)
) $charset_collate;";
require_once( ABSPATH . 'wp-admin/includes/' );
dbDelta( $sql );
}
?>
As mentioned in the above code, we complete the installation of the plug-in through the register_activation_hook activation. The activation is performed through the parameter my_mood_install and find a function named my_mood_install. This action will be executed when the plug-in is activated.
We created a table called "mood" through my_mood_install function. The creation of the database table is done by executing SQL statements through Wordpress's dbDelta function. To use this function, we need to first introduce wp-admin/includes/ file.
Through the above code, we use the built-in method of Wordpress to create a table that stores data for the mood plug-in.
Plugin Uninstall
Since Wordpress is installed, it will definitely be uninstalled. The uninstallation method of Wordpress plug-in is executed through a fixed named file. Create a file named in the root directory of the plug-in. The code content is as follows:
<!--?php <br ?--> //Uninstall actionmy_mood_uninstall();
function my_mood_uninstall() {
// Execute contentglobal $wpdb;
$table_name = $wpdb->prefix . "mood";
$wpdb->query("DROP TABLE IF EXISTS " . $table_name);
}
?>
Execute SQL through Wordpress' $wpdb->query, delete the table we created when we installed, so that everything related to the plug-in will be deleted.
Add a background management menu to the plugin
As shown in the following code:
<!--?php <br ?--> //Add menuadd_action( 'admin_menu', 'my_mood_create_menu' );
function my_mood_create_menu() {
global $my_settings;
$my_mood_settings=add_menu_page(
"My Mood",
"My Mood",
"manage_options",
"my-mood",
"test"
);
}
?>
Through the above code, we can add a menu to the plugin. The method adds a menu through add_action('admin_menu', 'my_mood_create_menu') and the specific page of the menu is bound by parameters. For example, the above method passes in a parameter called "test". Therefore, when clicking on this "My Mood" menu, we will look for a method called "test" for style output. We give the test method
<!--?php <br ?--> function test(){
global $wpdb;
$table_name = $wpdb->prefix . "mood";
$fivesdrafts = $wpdb->get_results(
"
SELECT id, createdon, publishedon,status,mood,text,address
FROM $table_name
ORDER BY createdon DESC
"
);
?>
<div >foreach ( $fivesdrafts as $fivesdraft )
{
?> }
?>
<table class="widefat">
<thead>
<tr>
<th>Post content</th>
<th>Now</th>
<th>Feeling</th>
<th>Creation date</th>
<th>operate</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Post content</th>
<th>Now</th>
<th>Feeling</th>
<th>Creation date</th>
<th>operate</th>
</tr>
</tfoot>
<tbody>
<tr>
<td><input name="text" type="text" value="" placeholder="Enter your mood" /></td>
<td><input name="address" type="text" value="" placeholder="Enter your current location" /></td>
<td><label>Happy：<input class="mood" checked="checked" name="mood" type="radio" value="0" /></label>
<label>generally：<input class="mood" name="mood" type="radio" value="1" /></label>
<label>sad：<input class="mood" name="mood" type="radio" value="2" /></label>
<label>concern：<input class="mood" name="mood" type="radio" value="3" /></label>
<label>other：<input class="mood" name="mood" type="radio" value="4" /></label></td>
<td></td>
<td><a class="add">Add to</a></td>
</tr>
<!--?php <br ?-->
<tr>
<td><input name="text" type="text" value="'<?php" />text; ?>'/></td>
<td><input name="address" type="text" value="'<?php" />address; ?>'/></td>
<td><label>Happy：<input class="mood" name="mood<?php echo $fivesdraft->id; ?>" type="radio" />mood==0?'checked=checked':''; ?> value="0"></label>
<label>generally：<input class="mood" name="mood<?php echo $fivesdraft->id; ?>" type="radio" />mood=='1'?'checked=checked':''; ?> value="1"></label>
<label>sad：<input class="mood" name="mood<?php echo $fivesdraft->id; ?>" type="radio" />mood==2?'checked=checked':''; ?> value="2"></label>
<label>concern：<input class="mood" name="mood<?php echo $fivesdraft->id; ?>" type="radio" />mood==3?'checked=checked':''; ?> value="3"></label>
<label>other：<input class="mood" name="mood<?php echo $fivesdraft->id; ?>" type="radio" />mood==4?'checked=checked':''; ?> value="4"></label></td>
<td></td>
<td><a class="edit">save</a><a class="delete">delete</a></td>
</tr>
<!--?php <br ?--></tbody>
</table>
</div>
<!--?php <br ?--> }
?>
The test method is a style mixed with php and html code. The HTML part is mainly responsible for the output of the style, while the PHP code is responsible for executing the logic of data fetching. The part that mainly reads data from the database can be retrieved from the database through the $wpdb->get_results method of Wordpress, and the data in the table we created in the first step is returned. The data collection contains multiple pieces of data. Finally, the data is output through a foreach loop.
We have displayed the data interface, so how can we save the data? Also, based on the previous post Mood plugin example, look at the following code first
<!--?php <br ?--> function aad_load_scripts($hook) {
global $my_settings;
if( $hook != $my_settings )
return;
/*Load ajax js file, you can also load other javascript and/or css etc*/
wp_enqueue_script('my-ajax', plugins_url( 'my-mood/js/', __FILE ), array('jquery'));
wp_register_style( 'my-style', plugins_url( 'my-mood/css/', __FILE ), array(), '', 'all' );
wp_enqueue_style( 'my-style' );
/*
Create a verification nonce
It outputs something like:
<![CDATA[
var aad_vars = {"aad_nonce":"5c18514d34"};
]]>
Commented out js to HTML like this.
*/
wp_localize_script('my-js', 'my_vars', array(
'my_nonce' => wp_create_nonce('aad-nonce')
)
);
}
add_action('admin_enqueue_scripts', 'aad_load_scripts');
?>
The code in it is as follows
jQuery(document).ready(function(){
jQuery("input").blur(function(){
var value=jQuery(this).val();
({
type:"POST",
url:"/wp-admin/",
dataType: 'json',
data:{action:"say",value:value},
success:function(data){
}
});
})
jQuery(".add").click(function(){
var parent=jQuery(this).closest("tr");
var text=jQuery(parent).find("input[name='text']").val();
var address=jQuery(parent).find("input[name='address']").val();
var mood=jQuery(parent).find("input[type='radio']:checked").val();
({
type:"POST",
url:"/wp-admin/",
dataType: 'json',
data:{action:"add_mood",text:text,address:address,mood:mood},
success:function(data){
=;
}
});
})
jQuery(".delete").click(function(){
var parent=jQuery(this).closest("tr");
var id=jQuery(parent).attr('data');
({
type:"POST",
url:"/wp-admin/",
dataType: 'json',
data:{action:"delete_mood",id:id},
success:function(data){
=;
}
});
})
jQuery(".edit").click(function(){
var parent=jQuery(this).closest("tr");
var id=jQuery(parent).attr('data');
var text=jQuery(parent).find("input[name='text']").val();
var address=jQuery(parent).find("input[name='address']").val();
var mood=jQuery(parent).find("input[type='radio']:checked").val();
({
type:"POST",
url:"/wp-admin/",
dataType: 'json',
data:{action:"edit_mood",id:id,text:text,address:address,mood:mood},
success:function(data){
=;
}
});
})
});
In the above code, we insert the js code and css code through the Hook, so that the js and css of our plug-in will be inserted into the page code due to the plug-in's activation.
We implement asynchronous loading of data, which we need to follow the following code:
<!--?php <br ?--> function say(){
$return=array();
$return['success'] = '1';
$return['msg']=$_POST['value']."test-ajax";
echo json_encode($return);
die();
}
add_action('wp_ajax_say', 'say');
?>
The meaning of this code is to use ajax to submit data. The format of add_action ('wp_ajax_function name', function name) is to register a say route, and its corresponding js code is
jQuery("input").blur(function(){
var value=jQuery(this).val();
({
type:"POST",
url:"/wp-admin/",
dataType: 'json',
data:{action:"say",value:value},
success:function(data){
}
});
})
Therefore, you can see that the action of the js code is say
By the same token, data needs to be added and register an add_mood route.
<!--?php <br ?--> function add_mood(){
$text=$_POST['text'];
$address=$_POST['address'];
$mood=$_POST['mood'];
add($text,$address,$mood);
$return=array();
$return['success'] = '1';
echo json_encode($return);
die();
}
add_action('wp_ajax_add_mood', 'add_mood');
?>
To delete the data, register a delete_mood route
<!--?php <br ?--> function delete_mood(){
$id=$_POST['id'];
delete($id);
$return=array();
$return['success'] = '1';
echo json_encode($return);
die();
}
add_action('wp_ajax_delete_mood', 'delete_mood');
?>
To edit the data, register an edit_mood route
<!--?php <br ?--> function edit_mood(){
$id=$_POST['id'];
$text=$_POST['text'];
$address=$_POST['address'];
$mood=$_POST['mood'];
edit($id,$text,$address,$mood);
$return=array();
$return['success'] = '1';
echo json_encode($return);
die();
}
add_action('wp_ajax_edit_mood', 'edit_mood');
?>
The corresponding php function added, deleted and modified above is as follows
<!--?php <br ?--> function add($text,$address,$mood){
global $wpdb;
$table_name = $wpdb->prefix . "mood";
$wpdb->insert(
$table_name,
array(
'createdon' => current_time( 'mysql' ),
'publishedon' => current_time( 'mysql' ),
'status' => 1,
'mood' => $mood,
'text'=>$text,
'address'=>$address,
)
);
}
?>
<!--?php <br ?--> function delete($id){
global $wpdb;
$table_name = $wpdb->prefix . "mood";
$wpdb->delete(
$table_name,
array(
'id'=>$id
)
);
}
?>
<!--?php <br ?--> function edit($id,$text,$address,$mood){
global $wpdb;
$table_name = $wpdb->prefix . "mood";
$wpdb->update(
$table_name,
array(
'mood' => $mood,
'text'=>$text,
'address'=>$address,
),
array(
'id' => $id
)
);
}
?>
Now that the backend data and interface of the plug-in have been processed, how can we reference our mood plug-in in the foreground? We need to add the following code
<!--?php <br ?--> function mood_dispaly(){
global $wpdb;
$table_name = $wpdb->prefix . "mood";
$fivesdrafts = $wpdb->get_results(
"
SELECT text
FROM $table_name
ORDER BY createdon DESC
LIMIT 10
"
);
?>
<!--?php <br ?--> }
?>
This code displays the mood data stored in the database in the foreground through HTML, so where can I control the appearance? Do you remember the js and css we added in the first step? Yes, the style is controlled by the styles inserted in the first step.
At this point, a complete mood plug-in is completed. According to the example, you can create your own mood plug-in.