找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 1091|回复: 0
打印 上一主题 下一主题

基础的WordPress插件制作教程

[复制链接]

2487

主题

2487

帖子

7391

积分

论坛元老

Rank: 8Rank: 8

积分
7391
跳转到指定楼层
楼主
发表于 2018-2-14 05:41:20 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

            插件制作准备工作
首先我们在\wp-content\plugins目录下添加一个文件夹叫做”My-Mood”,在文件夹中添加一个叫做index.php的主文件,这个是插件的主文件,文件的开始需要一些命名的格式:如下面的代码

  
  • Plugin Name 代表了插件的名字。
      
  • Plugin URI 代表的是插件的发布地址。
      
  • Description 代表的是关于这个插件的描述。
      
  • Version 代表了版本好,第一个版本使用1.0,如果你的插件有更新,就依次更改这个版本参数。
      
  • Author 代表插件作者的名字。
      
  • Author URI 代表作者的主页。。
      
  • License 代表了插件的License,如果你是开源的就使用GPL,关于License的参数可以百度或者Google查询,这里不再过多的篇幅叙述。

    插件的初始化安装
    插件不仅仅是样式的改变,通常我们会加入新的表,那么新加的表我就是通过插件的安装函数来完成的,我们继续在index.php中加入如下的代码:
    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 );
    }
    ?>
    如上面代码的注释,我们通过register_activation_hook激活动作来完成插件的安装,激活动作通过参数my_mood_install,找到名为my_mood_install的函数执行,这个动作会在插件激活的时候执行。
    我们通过my_mood_install函数创建了一张名为”mood”的表,数据库表的创建是通过Wordpress的dbDelta函数来执行sql语句完成的,要想使用此函数需要先引入wp-admin/includes/upgrade.php文件。
    通过上面的代码我们就运用Wordpress内置的方法创建了一张给mood插件存储数据的表。
    插件卸载
    既然Wordpress有安装也一定会有卸载。Wordpress插件的卸载方法是通过一个叫做uninstall.php的固定命名文件来执行的,在插件根目录下建一个名叫uninstall.php的文件,代码内容如下所示:
    prefix . "mood";
    $wpdb->query("DROP TABLE IF EXISTS " . $table_name);
    }
    ?>
    通过Wordpress的$wpdb->query来执行sql,删除我们安装时的创建的表,这样就删除一切与该插件相关的内容了。
    给插件添加后台管理菜单
    如下面的代码:
    通过上面的代码我们就可以为插件添加一个菜单。方法通过add_action( ‘admin_menu', ‘my_mood_create_menu' )添加一个菜单而菜单具体的页面则是通过参数来绑定的,如上面的方法是传入了叫做”test”的参数,因此当点击这个”My Mood”的菜单的时候就会去寻找叫做”test”的方法进行样式的输出,我们给出test方法
    prefix . "mood";
    $fivesdrafts = $wpdb->get_results(
    "
    SELECT id, createdon, publishedon,status,mood,text,address
    FROM $table_name
    ORDER BY createdon DESC
    "
    );
    ?>
    foreach ( $fivesdrafts as $fivesdraft )
    {
    ?> }
    ?>
    '/>
    发布内容现在所在的心情创建日期操作
    发布内容现在所在的心情创建日期操作
    高兴:
    一般:
    悲伤:
    忧虑:
    其他:
    添加
    address; ?>'/>高兴:id; ?>" type="radio" />mood==0?'checked=checked':''; ?> value="0">
    一般:id; ?>" type="radio" />mood=='1'?'checked=checked':''; ?> value="1">
    悲伤:id; ?>" type="radio" />mood==2?'checked=checked':''; ?> value="2">
    忧虑:id; ?>" type="radio" />mood==3?'checked=checked':''; ?> value="3">
    其他:id; ?>" type="radio" />mood==4?'checked=checked':''; ?> value="4">
    保存删除

    test方法是php与html代码混编的样式,其中HTMl部分主要负责样式的输出,而PHP的代码则是负责执行取数据的逻辑。主要从数据库读取数据的部分,通过Wordpress的$wpdb->get_results方法就可以从数据库中取出我们第一步中创建的表中的数据,返回的是一个数据集合,包含了多条数据。最后通过foreach循环将数据输出。
    我们把数据的界面显示出来了,那么怎样才能将数据保存呢?同样根据上一篇心情插件的例子,先看下面的代码
    之类的被注释掉的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:"OST",
    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:"OST",
    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:"OST",
    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:"OST",
    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就会因为插件的启用而插入到页面代码中。
    我们实现异步加载数据,要根据下面的代码:
    这段代码的意思是要使用ajax提交数据,add_action(‘wp_ajax_函数名',函数名)的格式就是注册一个say路由,它对应的js代码是
    jQuery("input").blur(function(){
    var value=jQuery(this).val();
    jQuery.ajax({
    type:"OST",
    url:"/wp-admin/admin-ajax.php",
    dataType: 'json',
    data:{action:"say",value:value},
    success:function(data){
    }
    });
    })
    因此可以看到js代码的action为say
    同样的道理数据要进行添加,注册一个add_mood的路由
    数据要进行删除,注册一个delete_mood的路由
    数据要进行编辑,注册一个edit_mood的路由
    对应上面增删改的php函数如下所示
    prefix . "mood";
    $wpdb->insert(
    $table_name,
    array(
    'createdon' => current_time( 'mysql' ),
    'publishedon' => current_time( 'mysql' ),
    'status' => 1,
    'mood' => $mood,
    'text'=>$text,
    'address'=>$address,
    )
    );
    }
    ?>
    prefix . "mood";
    $wpdb->delete(
    $table_name,
    array(
    'id'=>$id
    )
    );
    }
    ?>
    prefix . "mood";
    $wpdb->update(
    $table_name,
    array(
    'mood' => $mood,
    'text'=>$text,
    'address'=>$address,
    ),
    array(
    'id' => $id
    )
    );
    }
    ?>
    现在插件的后台数据和界面都已经处理完了,那么怎样把我们的心情插件在前台引用呢?我们需要添加下面的代码
    prefix . "mood";
    $fivesdrafts = $wpdb->get_results(
    "
    SELECT text
    FROM $table_name
    ORDER BY createdon DESC
    LIMIT 10
    "
    );
    ?>
    这段代码就把数据库中存储的心情数据通过HTML显示在前台,那么样子哪里控制的呢?还记得第一步我们添加的js和css吗,是的,样式就是通过第一步插入的样式来控制的。
    到此一个完整的心情插件就完成了,照着例子你就可以制作一个属于自己的心情插件了。
                
                
    您可能感兴趣的文章:
  • 用js代码和插件实现wordpress雪花飘落效果的四种方法
  • 推荐十款免费 WordPress 插件
  • WordPress升级版本及安装插件出现”Problem with the SSL CA cert”的解决办法
  • 在WordPress中使用wp-cron插件来设置定时任务
  • 几个优化WordPress中JavaScript加载体验的插件介绍
  • 利用Fix Rss Feeds插件修复WordPress的Feed显示错误
  • WordPress中使主题支持小工具以及添加插件启用函数
  • 详解WordPress中提醒安装插件以及隐藏插件的功能实现
  • WordPress中卸载插件以及移除文章类型组件的代码示例
  • 在WordPress中安装使用视频播放器插件Hana Flv Player
            
  • 分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
    收藏收藏
    回复

    使用道具 举报

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    用户反馈
    客户端