插件制作准备工作
首先我们在\wp-content\plugins目录下添加一个文件夹叫做”My-Mood”,在文件夹中添加一个叫做index.php的主文件,这个是插件的主文件,文件的开始需要一些命名的格式:如下面的代码
<!--"htmlcode"><!--"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 ); } "htmlcode"><!--"mood"; $wpdb->query("DROP TABLE IF EXISTS " . $table_name); } "htmlcode"><!--"My Mood", "My Mood", "manage_options", "my-mood", "test" ); } "htmlcode"><!--"mood"; $fivesdrafts = $wpdb->get_results( " SELECT id, createdon, publishedon,status,mood,text,address FROM $table_name ORDER BY createdon DESC " ); "my-mood">foreach ( $fivesdrafts as $fivesdraft ) { "widefat"> <thead> <tr> <th>发布内容</th> <th>现在所在的</th> <th>心情</th> <th>创建日期</th> <th>操作</th> </tr> </thead> <tfoot> <tr> <th>发布内容</th> <th>现在所在的</th> <th>心情</th> <th>创建日期</th> <th>操作</th> </tr> </tfoot> <tbody> <tr> <td><input name="text" type="text" value="" placeholder="输入你的心情" /></td> <td><input name="address" type="text" value="" placeholder="输入现在所在地" /></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> <!--"text" type="text" value="'<" />text; "address" type="text" value="'<" />address; "mood" name="mood<" type="radio" />mood==0"0"></label> <label>一般:<input class="mood" name="mood<" type="radio" />mood=='1'"1"></label> <label>悲伤:<input class="mood" name="mood<" type="radio" />mood==2"2"></label> <label>忧虑:<input class="mood" name="mood<" type="radio" />mood==3"3"></label> <label>其他:<input class="mood" name="mood<" type="radio" />mood==4"4"></label></td> <td></td> <td><a class="edit">保存</a><a class="delete">删除</a></td> </tr> <!--"htmlcode"><!--"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'); "htmlcode">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; } }); }) });在上面的代码中我们通过Hook插入我们需要js代码和css代码,这样我们插件的js和css就会因为插件的启用而插入到页面代码中。
我们实现异步加载数据,要根据下面的代码:<!--"test-ajax"; echo json_encode($return); die(); } add_action('wp_ajax_say', 'say'); "htmlcode">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){ } }); })因此可以看到js代码的action为say
同样的道理数据要进行添加,注册一个add_mood的路由
<!--"htmlcode"><!--"htmlcode"><!--"htmlcode"><!--"mood"; $wpdb->insert( $table_name, array( 'createdon' => current_time( 'mysql' ), 'publishedon' => current_time( 'mysql' ), 'status' => 1, 'mood' => $mood, 'text'=>$text, 'address'=>$address, ) ); } "mood"; $wpdb->delete( $table_name, array( 'id'=>$id ) ); } "mood"; $wpdb->update( $table_name, array( 'mood' => $mood, 'text'=>$text, 'address'=>$address, ), array( 'id' => $id ) ); } "htmlcode"><!--"mood"; $fivesdrafts = $wpdb->get_results( " SELECT text FROM $table_name ORDER BY createdon DESC LIMIT 10 " ); ?> <!--?php <br ?--> } ?>这段代码就把数据库中存储的心情数据通过HTML显示在前台,那么样子哪里控制的呢?还记得第一步我们添加的js和css吗,是的,样式就是通过第一步插入的样式来控制的。
到此一个完整的心情插件就完成了,照着例子你就可以制作一个属于自己的心情插件了。
华山资源网 Design By www.eoogi.com广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!华山资源网 Design By www.eoogi.com暂无评论...更新日志
2024年11月15日2024年11月15日
- 谭咏麟《20世纪中华歌坛名人百集珍藏版》[WAV+CUE][1G]
- 炉石传说40轮盘术最新卡组代码在哪找 标准40轮盘术卡组代码分享
- 炉石传说亲王贼怎么玩 2024亲王贼最新卡组代码分享
- 炉石传说30.6.2补丁后有什么卡组 30.6.2最强卡组最新推荐
- 模拟之声慢刻CD《蔡琴名曲回顾遇听》[原抓WAV+CUE]
- BruceLiu-WAVES(MusicbySatie)(2024)2CD[24Bit-96kHz]FLAC
- KonstantinKrimmel-MythosSchubertLoewe(2024)[24Bit-96kHz]FLAC
- 2024雷蛇高校挑战赛 嘤式分解助力收官之战
- 海信发布110吋世俱杯官方定制AI电视 引领智能观赛
- 海信发布27英寸显示器大圣G5 Pro:采用自研超解析芯片、友达原厂模组
- 蔡琴《机遇》1:1母盘直刻日本头版[WAV分轨][1.1G]
- 陈百强《与你几分钟的约会》XRCD+SHMCD限量编号版[低速原抓WAV+CUE][994M]
- 陈洁丽《监听王NO.1 》示范级发烧天碟[WAV+分轨][1.1G]
- 单色凌.2014-小岁月太着急【海蝶】【WAV+CUE】
- 陈淑桦.1988-抱紧我HOLD.ME.NOW【EMI百代】【WAV+CUE】