wordpress 后台 打开媒体库 ajax 知识点

<?php

/*

Plugin Name: jzbk-easy-input

Description: 家政百科自定义参数简单输入

Version: 1.0

Author: 小柳

*/

class jzbk_easy_input{

//类的构造方法初始化参数

function jzbk_easy_input(){

 

add_action( 'admin_init', array($this,'xl_enqueue_script') );

 

add_action("add_meta_boxes",array($this,"add_easy_input_meta_box"),10,2);

 

add_action( 'wp_ajax_easy_input_tp' , array( $this, 'easy_input_tp_action_fun'));

 

add_action( 'wp_ajax_easy_input_sy' , array( $this, 'easy_input_sy_action_fun'));

 

add_action( 'wp_ajax_easy_input_ckzl' , array( $this, 'easy_input_ckzl_action_fun'));

}

 

function xl_enqueue_script(){

 

wp_enqueue_script( 'xl_easy_input', plugins_url('js/xl_easy_input.js', __FILE__), array('jquery') );

 

wp_localize_script( 'xl_easy_input', 'ajax_object', array( 'ajax_url' => admin_url( 'admin-ajax.php' ) ) );

}

//首页 设置 ajax的实现

function easy_input_sy_action_fun(){

if(trim( $_POST['sy'] ) != "" ){

update_post_meta($_POST['post_id'],'sy',$_POST['sy']);

echo 'ok';

}

        wp_die();

}

//图片 设置 ajax的实现

function easy_input_tp_action_fun(){

if(trim( $_POST['tp'] ) != "" ){

add_post_meta($_POST['post_id'],'tp',$_POST['tp']);

echo 'ok';

}

        wp_die();

}

//参考资料 设置ajax实现

function easy_input_ckzl_action_fun(){

if(trim( $_POST['ckzl1'] ) != "" ){

$ckzl=$_POST['ckzl1'].'||'.$_POST['ckzl2'].'||'.$_POST['ckzl3'];

add_post_meta($_POST['post_id'],'ckzl',$ckzl);

echo 'ok';

}

        wp_die();

}

//添加媒体框

function add_easy_input_meta_box($post_id, $post){

//添加自定义媒体

add_meta_box( 'jzbk_esay_input', //ID

'家政百科相关参数', //标题

array( $this, 'display_easy_input_meta_box' ), //显示HTML代码的回调函数

'post', //显示的自定义文章类型的名字，设置为我们新创建的文章类型

'side'

);

}

//实现媒体框

function display_easy_input_meta_box(){

global $post;

?>

<div class="wrap">

<input type="hidden" id="post_id" name="post_id" value="<?php echo $post->ID;?>" />

<div class="sy_box">

<span>首页显示：</span>

<select name="sy" id="sy">

<option value ="0">0</option>

<option value ="1">1</option>

<option value="2">2</option>

</select><br>

<span id="sybtn" class="button">添加</span>

</div>

 

<hr style="margin: 20px 0;">

<div class="pic_box">

<span>人物图集：</span>

<input type="text" name="tp" id="tp" class="tp1" value="" />

<span id="picbtn" class="button">添加</span>

</div>

<hr style="margin: 20px 0;">

 

<div class="ckzl_box">

<span>参考资料：</span>

<ul class="ckzl_box">

<li><span>网站名称：</span><input type="text" name="ckzl1" class="ckzl1" id="ckzl1" value="" /></li>

<li><span>文章标题：</span><input type="text" name="ckzl2" class="ckzl2" id="ckzl2" value="" /></li>

<li><span>完整链接：</span><input type="text" name="ckzl3" class="ckzl3" id="ckzl3" value="" /></li>

</ul>

</div>

<span id="ckzlbtn" class="button">添加</span>

</div>

 

<script>

$(document).ready(function(){

var tp1;

jQuery('.tp1').live('click',function(event){

value_id ='tp1';

event.preventDefault();

if( tp1 ){

tp1.open();

return;

}

tp1 = wp.media({

title: '插入图片',

button: {

text: '插入',

},

multiple: false

});

tp1.on('select',function(){

attachment = tp1.state().get('selection').first().toJSON();

//jQuery('#'+value_id+'_input').val(attachment.url).trigger('change');

jQuery('#tp').val(attachment.url).trigger('change');

});

tp1.open();

});

});

</script>

<?php

}

}

new jzbk_easy_input();

 

 

js文件

 

jQuery(document).ready( function($) {

    //图片按钮点击事件

    $("#picbtn").click( function() {

        $.ajax({

            type: "POST",

            data: "tp=" + $("#tp").val() + "&post_id="+$("#post_id").val()+"&action=easy_input_tp",

            url: ajax_object.ajax_url,

            // beforeSend: function() {

            //  $('#error_color').html('校验中...');

            // },

            success: function( $data ) {

                if( $data == 'ok'){

                    alert('添加成功!');

                } else {

                    alert('添加失败!');

                }

            }

        });

    });

    //首页数据更新

    $("#sybtn").click( function() {

        $.ajax({

            type: "POST",

            data: "sy=" + $("#sy").val() + "&post_id="+$("#post_id").val()+"&action=easy_input_sy",

            url: ajax_object.ajax_url,

            // beforeSend: function() {

            //  $('#error_color').html('校验中...');

            // },

            success: function( $data ) {

                if( $data == 'ok'){

                    alert('添加成功!');

                } else {

                    alert('添加失败!');

                }

            }

        });

    });

    //参考资料更新

    $("#ckzlbtn").click( function() {

        var ckzl1=$("#ckzl1").val();

        var ckzl2=$("#ckzl2").val();

        var ckzl3=$("#ckzl3").val();

        var post_id=$("#post_id").val();

        $.ajax({

            type: "POST",

            //data: "ckzl1=" + $("#ckzl1").val() +"ckzl2=" + $("#ckzl2").val() +"ckzl3=" + $("#ckzl3").val() + "&post_id="+$("#post_id").val()+"&action=easy_input_ckzl",

            data:{"ckzl1":ckzl1,"ckzl2":ckzl2,"ckzl3":ckzl3,"post_id":post_id,"action":"easy_input_ckzl"},

            url: ajax_object.ajax_url,

            contentType: "application/x-www-form-urlencoded; charset=utf-8",

            // beforeSend: function() {

            //  $('#error_color').html('校验中...');

            // },

            success: function( $data ) {

                if( $data == 'ok'){

                    alert('添加成功!');

                } else {

                    alert('添加失败!');

                }

            }

        });

    });

});