您好,登錄后才能下訂單哦!
本篇內(nèi)容介紹了“WordPress插件的制作教程”的有關(guān)知識(shí),在實(shí)際案例的操作過(guò)程中,不少人都會(huì)遇到這樣的困境,接下來(lái)就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧!希望大家仔細(xì)閱讀,能夠?qū)W有所成!
插件制作準(zhǔn)備工作
首先我們?cè)赲wp-content\plugins目錄下添加一個(gè)文件夾叫做”My-Mood”,在文件夾中添加一個(gè)叫做index.php的主文件,這個(gè)是插件的主文件,文件的開始需要一些命名的格式:如下面的代碼
<!--?php <br ?--> /* Plugin Name: My Mood Plugin URI: http://www.aips.me Description: 一個(gè)心情發(fā)布插件 Version: 1.0 Author: 周良博客 Author URI: http://www.aips.me License: GPL */ ?>
Plugin Name 代表了插件的名字。
Plugin URI 代表的是插件的發(fā)布地址。
Description 代表的是關(guān)于這個(gè)插件的描述。
Version 代表了版本好,第一個(gè)版本使用1.0,如果你的插件有更新,就依次更改這個(gè)版本參數(shù)。
Author 代表插件作者的名字。
Author URI 代表作者的主頁(yè)。。
License 代表了插件的License,如果你是開源的就使用GPL,關(guān)于License的參數(shù)可以百度或者Google查詢,這里不再過(guò)多的篇幅敘述。
插件的初始化安裝
插件不僅僅是樣式的改變,通常我們會(huì)加入新的表,那么新加的表我就是通過(guò)插件的安裝函數(shù)來(lái)完成的,我們繼續(xù)在index.php中加入如下的代碼:
<!--?php <br ?--> //激活動(dòng)作 register_activation_hook( __FILE__, 'my_mood_install'); function my_mood_install() { // 啟用時(shí)要做的事情 global $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/upgrade.php' ); dbDelta( $sql ); } ?>
如上面代碼的注釋,我們通過(guò)register_activation_hook激活動(dòng)作來(lái)完成插件的安裝,激活動(dòng)作通過(guò)參數(shù)my_mood_install,找到名為my_mood_install的函數(shù)執(zhí)行,這個(gè)動(dòng)作會(huì)在插件激活的時(shí)候執(zhí)行。
我們通過(guò)my_mood_install函數(shù)創(chuàng)建了一張名為”mood”的表,數(shù)據(jù)庫(kù)表的創(chuàng)建是通過(guò)Wordpress的dbDelta函數(shù)來(lái)執(zhí)行sql語(yǔ)句完成的,要想使用此函數(shù)需要先引入wp-admin/includes/upgrade.php文件。
通過(guò)上面的代碼我們就運(yùn)用Wordpress內(nèi)置的方法創(chuàng)建了一張給mood插件存儲(chǔ)數(shù)據(jù)的表。
插件卸載
既然Wordpress有安裝也一定會(huì)有卸載。Wordpress插件的卸載方法是通過(guò)一個(gè)叫做uninstall.php的固定命名文件來(lái)執(zhí)行的,在插件根目錄下建一個(gè)名叫uninstall.php的文件,代碼內(nèi)容如下所示:
<!--?php <br ?--> //卸載動(dòng)作 my_mood_uninstall(); function my_mood_uninstall() { // 執(zhí)行內(nèi)容 global $wpdb; $table_name = $wpdb->prefix . "mood"; $wpdb->query("DROP TABLE IF EXISTS " . $table_name); } ?>
通過(guò)Wordpress的$wpdb->query來(lái)執(zhí)行sql,刪除我們安裝時(shí)的創(chuàng)建的表,這樣就刪除一切與該插件相關(guān)的內(nèi)容了。
給插件添加后臺(tái)管理菜單
如下面的代碼:
<!--?php <br ?--> //添加菜單 add_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" ); } ?>
通過(guò)上面的代碼我們就可以為插件添加一個(gè)菜單。方法通過(guò)add_action( ‘a(chǎn)dmin_menu', ‘my_mood_create_menu' )添加一個(gè)菜單而菜單具體的頁(yè)面則是通過(guò)參數(shù)來(lái)綁定的,如上面的方法是傳入了叫做”test”的參數(shù),因此當(dāng)點(diǎn)擊這個(gè)”My Mood”的菜單的時(shí)候就會(huì)去尋找叫做”test”的方法進(jìn)行樣式的輸出,我們給出test方法
<!--?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 id="my-mood">foreach ( $fivesdrafts as $fivesdraft ) { ?> } ?> <table class="widefat"> <thead> <tr> <th>發(fā)布內(nèi)容</th> <th>現(xiàn)在所在的</th> <th>心情</th> <th>創(chuàng)建日期</th> <th>操作</th> </tr> </thead> <tfoot> <tr> <th>發(fā)布內(nèi)容</th> <th>現(xiàn)在所在的</th> <th>心情</th> <th>創(chuàng)建日期</th> <th>操作</th> </tr> </tfoot> <tbody> <tr> <td><input name="text" type="text" value="" placeholder="輸入你的心情" /></td> <td><input name="address" type="text" value="" placeholder="輸入現(xiàn)在所在地" /></td> <td><label>高興:<input class="mood" checked="checked" name="mood" type="radio" value="0" /></label> <label>一般:<input class="mood" name="mood" type="radio" value="1" /></label> <label>悲傷:<input class="mood" name="mood" type="radio" value="2" /></label> <label>憂慮:<input class="mood" name="mood" type="radio" value="3" /></label> <label>其他:<input class="mood" name="mood" type="radio" value="4" /></label></td> <td></td> <td><a class="add">添加</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>高興:<input class="mood" name="mood<?php echo $fivesdraft->id; ?>" type="radio" />mood==0?'checked=checked':''; ?> value="0"></label> <label>一般:<input class="mood" name="mood<?php echo $fivesdraft->id; ?>" type="radio" />mood=='1'?'checked=checked':''; ?> value="1"></label> <label>悲傷:<input class="mood" name="mood<?php echo $fivesdraft->id; ?>" type="radio" />mood==2?'checked=checked':''; ?> value="2"></label> <label>憂慮:<input class="mood" name="mood<?php echo $fivesdraft->id; ?>" type="radio" />mood==3?'checked=checked':''; ?> value="3"></label> <label>其他:<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">保存</a><a class="delete">刪除</a></td> </tr> <!--?php <br ?--></tbody> </table> </div> <!--?php <br ?--> } ?>
test方法是php與html代碼混編的樣式,其中HTMl部分主要負(fù)責(zé)樣式的輸出,而PHP的代碼則是負(fù)責(zé)執(zhí)行取數(shù)據(jù)的邏輯。主要從數(shù)據(jù)庫(kù)讀取數(shù)據(jù)的部分,通過(guò)Wordpress的$wpdb->get_results方法就可以從數(shù)據(jù)庫(kù)中取出我們第一步中創(chuàng)建的表中的數(shù)據(jù),返回的是一個(gè)數(shù)據(jù)集合,包含了多條數(shù)據(jù)。最后通過(guò)foreach循環(huán)將數(shù)據(jù)輸出。
我們把數(shù)據(jù)的界面顯示出來(lái)了,那么怎樣才能將數(shù)據(jù)保存呢?同樣根據(jù)上一篇心情插件的例子,先看下面的代碼
<!--?php <br ?--> function aad_load_scripts($hook) { global $my_settings; if( $hook != $my_settings ) return; /*載入ajax的js文件,也可以載入其他的javascript和/或css等*/ wp_enqueue_script('my-ajax', plugins_url( 'my-mood/js/index.js', __FILE ), array('jquery')); wp_register_style( 'my-style', plugins_url( 'my-mood/css/style.css', __FILE ), array(), '', 'all' ); wp_enqueue_style( 'my-style' ); /* 創(chuàng)建驗(yàn)證nonce 它會(huì)輸出類似于: <![CDATA[ var aad_vars = {"aad_nonce":"5c18514d34"}; ]]> 之類的被注釋掉的js到HTML。 */ wp_localize_script('my-js', 'my_vars', array( 'my_nonce' => wp_create_nonce('aad-nonce') ) ); } add_action('admin_enqueue_scripts', 'aad_load_scripts'); ?>
其中index.js的代碼如下
jQuery(document).ready(function(){ jQuery("input").blur(function(){ var value=jQuery(this).val(); jQuery.ajax({ type:"POST", url:"/wp-admin/admin-ajax.php", 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(); jQuery.ajax({ type:"POST", url:"/wp-admin/admin-ajax.php", dataType: 'json', data:{action:"add_mood",text:text,address:address,mood:mood}, success:function(data){ window.location.href=window.location; } }); }) jQuery(".delete").click(function(){ var parent=jQuery(this).closest("tr"); var id=jQuery(parent).attr('data'); jQuery.ajax({ type:"POST", url:"/wp-admin/admin-ajax.php", dataType: 'json', data:{action:"delete_mood",id:id}, success:function(data){ window.location.href=window.location; } }); }) 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(); jQuery.ajax({ type:"POST", url:"/wp-admin/admin-ajax.php", dataType: 'json', data:{action:"edit_mood",id:id,text:text,address:address,mood:mood}, success:function(data){ window.location.href=window.location; } }); }) });
在上面的代碼中我們通過(guò)Hook插入我們需要js代碼和css代碼,這樣我們插件的js和css就會(huì)因?yàn)椴寮膯⒂枚迦氲巾?yè)面代碼中。
我們實(shí)現(xiàn)異步加載數(shù)據(jù),要根據(jù)下面的代碼:
<!--?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'); ?>
這段代碼的意思是要使用ajax提交數(shù)據(jù),add_action(‘wp_ajax_函數(shù)名',函數(shù)名)的格式就是注冊(cè)一個(gè)say路由,它對(duì)應(yīng)的js代碼是
jQuery("input").blur(function(){ var value=jQuery(this).val(); jQuery.ajax({ type:"POST", url:"/wp-admin/admin-ajax.php", dataType: 'json', data:{action:"say",value:value}, success:function(data){ } }); })
因此可以看到j(luò)s代碼的action為say
同樣的道理數(shù)據(jù)要進(jìn)行添加,注冊(cè)一個(gè)add_mood的路由
<!--?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'); ?>
數(shù)據(jù)要進(jìn)行刪除,注冊(cè)一個(gè)delete_mood的路由
<!--?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'); ?>
數(shù)據(jù)要進(jìn)行編輯,注冊(cè)一個(gè)edit_mood的路由
<!--?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'); ?>
對(duì)應(yīng)上面增刪改的php函數(shù)如下所示
<!--?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 ) ); } ?>
現(xiàn)在插件的后臺(tái)數(shù)據(jù)和界面都已經(jīng)處理完了,那么怎樣把我們的心情插件在前臺(tái)引用呢?我們需要添加下面的代碼
<!--?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 ?--> } ?>
這段代碼就把數(shù)據(jù)庫(kù)中存儲(chǔ)的心情數(shù)據(jù)通過(guò)HTML顯示在前臺(tái),那么樣子哪里控制的呢?還記得第一步我們添加的js和css嗎,是的,樣式就是通過(guò)第一步插入的樣式來(lái)控制的。
到此一個(gè)完整的心情插件就完成了,照著例子你就可以制作一個(gè)屬于自己的心情插件了。
“WordPress插件的制作教程”的內(nèi)容就介紹到這里了,感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注億速云網(wǎng)站,小編將為大家輸出更多高質(zhì)量的實(shí)用文章!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。