【转载】给wordpress后台添加一个媒体按钮设置页面

02765

首先，请先学习下上篇文章《给wordpress后台添加一个文本式设置页面》，以便你能更好的理解我的文章。

添加和注册设置字段

add_action( 'admin_init',  'custom_page_register_setting' );
function custom_page_register_setting() {
    add_settings_section(
        'homepage_section', // section ID
        '', // title
        '', // callback function
        'custom-page-slug' // page slug
    );
    // logo field
    add_settings_field(
        'theme_logo',
        'Theme Logo',
        'theme_logo_media_field_html', // function which prints the field
        'custom-page-slug', // page slug
        'homepage_section', // section ID
        array( 
            'label_for' => 'theme_logo',
            'class' => 'custom-media-uploader',
        )
    );
    register_setting(
        'custom_page_settings', // settings group name
        'theme_logo', // field name
        'sanitize_text_field' // sanitization function
    );
}
add_action( 'admin_init',  'custom_page_register_setting' );

function custom_page_register_setting() {

    add_settings_section(
        'homepage_section', // section ID
        '', // title
        '', // callback function
        'custom-page-slug' // page slug
    );

    // logo field
    add_settings_field(
        'theme_logo',
        'Theme Logo',
        'theme_logo_media_field_html', // function which prints the field
        'custom-page-slug', // page slug
        'homepage_section', // section ID
        array( 
            'label_for' => 'theme_logo',
            'class' => 'custom-media-uploader',
        )
    );

    register_setting(
        'custom_page_settings', // settings group name
        'theme_logo', // field name
        'sanitize_text_field' // sanitization function
    );

}
add_action( 'admin_init',  'custom_page_register_setting' );

function custom_page_register_setting() {

    add_settings_section(
        'homepage_section', // section ID
        '', // title
        '', // callback function
        'custom-page-slug' // page slug
    );

    // logo field
    add_settings_field(
        'theme_logo',
        'Theme Logo',
        'theme_logo_media_field_html', // function which prints the field
        'custom-page-slug', // page slug
        'homepage_section', // section ID
        array( 
            'label_for' => 'theme_logo',
            'class' => 'custom-media-uploader',
        )
    );

    register_setting(
        'custom_page_settings', // settings group name
        'theme_logo', // field name
        'sanitize_text_field' // sanitization function
    );

}

上面的操作钩子将注册“主题logo”的设置字段。您可以根据需要对其进行自定义。现在，我们将添加该字段的HTML结构以显示在自定义设置页面上。

字段的 HTML 结构

在上面的代码中，方法有第三个参数“theme_logo_media_field_html”，该参数与字段的HTML结构有关。add_settings_fields()

因此，现在我们将使该HTML结构函数在自定义选项设置页面上显示该字段。请看下面的代码。

function theme_logo_media_field_html() {
    $theme_logo = get_option( 'theme_logo' );
    if($theme_logo) {
        ?>
            <a href="#" class="custom-upload-button button"><img src="<?php echo $theme_logo; ?>" width="20%"/></a>
            <a href="#" class="custom-upload-remove">Remove image</a>
            <input type="hidden" name="theme_logo" value="">
        <?php
    } else {
        ?>
            <a href="#" class="custom-upload-button button">Upload image</a>
            <a href="#" class="custom-upload-remove" style="display:none;">Remove image</a>
            <input type="hidden" name="theme_logo" value="">
        <?php
    }
}
function theme_logo_media_field_html() {
    $theme_logo = get_option( 'theme_logo' );
    if($theme_logo) {
        ?>
            <a href="#" class="custom-upload-button button"><img src="<?php echo $theme_logo; ?>" width="20%"/></a>
            <a href="#" class="custom-upload-remove">Remove image</a>
            <input type="hidden" name="theme_logo" value="">
        <?php
    } else {
        ?>
            <a href="#" class="custom-upload-button button">Upload image</a>
            <a href="#" class="custom-upload-remove" style="display:none;">Remove image</a>
            <input type="hidden" name="theme_logo" value="">
        <?php
    }
}
function theme_logo_media_field_html() {
    $theme_logo = get_option( 'theme_logo' );
    if($theme_logo) {
        ?>
            <a href="#" class="custom-upload-button button"><img src="<?php echo $theme_logo; ?>" width="20%"/></a>
            <a href="#" class="custom-upload-remove">Remove image</a>
            <input type="hidden" name="theme_logo" value="">
        <?php
    } else {
        ?>
            <a href="#" class="custom-upload-button button">Upload image</a>
            <a href="#" class="custom-upload-remove" style="display:none;">Remove image</a>
            <input type="hidden" name="theme_logo" value="">
        <?php
    }
}

只需将上述代码添加到functions.php文件，您将看到“上传图像”按钮。但是点击它不会发生任何事情，因为我们还没有添加jQuery代码。

jQuery 媒体按钮代码

让我们在wordpress中添加媒体上传器按钮的jquery部分。您可以直接使用操作挂钩将此代码排入队列，也可以创建单独的.js文件。我会重新建议创建一个名为“scripts.js”的新单独文件。

jQuery(document).ready(function($) {
  // upload function
  $('body').on( 'click', '.custom-upload-button', function(e){
    e.preventDefault();
    var upload_button = $(this),
    custom_media_uploader = wp.media({
      title: 'Insert image',
      library : {
        type : 'image'
      },
      button: {
        text: 'Use this image'
      },
      multiple: false
    }).on('select', function() {
      var attachment = custom_media_uploader.state().get('selection').first().toJSON();
      upload_button.html('<img src="'%20+%20attachment.url%20+%20'" width="20%">');
      $('.custom-upload-remove').show().next().val(attachment.url);
    }).open();
  
  });
  // remove function
  $('body').on('click', '.custom-upload-remove', function(e){
    e.preventDefault();
    var upload_button = $(this);
    upload_button.next().val('');
    upload_button.hide().prev().html('Upload image');
  });
});
jQuery(document).ready(function($) {

  // upload function
  $('body').on( 'click', '.custom-upload-button', function(e){
    e.preventDefault();
    var upload_button = $(this),
    custom_media_uploader = wp.media({
      title: 'Insert image',
      library : {
        type : 'image'
      },
      button: {
        text: 'Use this image'
      },
      multiple: false
    }).on('select', function() {
      var attachment = custom_media_uploader.state().get('selection').first().toJSON();
      upload_button.html('<img src="'%20+%20attachment.url%20+%20'" width="20%">');
      $('.custom-upload-remove').show().next().val(attachment.url);
    }).open();
  
  });

  // remove function
  $('body').on('click', '.custom-upload-remove', function(e){
    e.preventDefault();
    var upload_button = $(this);
    upload_button.next().val('');
    upload_button.hide().prev().html('Upload image');
  });

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

	// upload function
	$('body').on( 'click', '.custom-upload-button', function(e){
		e.preventDefault();
		var upload_button = $(this),
		custom_media_uploader = wp.media({
			title: 'Insert image',
			library : {
				type : 'image'
			},
			button: {
				text: 'Use this image'
			},
			multiple: false
		}).on('select', function() {
			var attachment = custom_media_uploader.state().get('selection').first().toJSON();
			upload_button.html('<img src="'%20+%20attachment.url%20+%20'" width="20%">');
			$('.custom-upload-remove').show().next().val(attachment.url);
		}).open();
	
	});

	// remove function
	$('body').on('click', '.custom-upload-remove', function(e){
		e.preventDefault();
		var upload_button = $(this);
		upload_button.next().val('');
		upload_button.hide().prev().html('Upload image');
	});

});

将js载入

我们将使用 action 和 wp_enqueue_script（） 方法将 js 脚本文件和媒体文件嵌入。它将仅在管理页面的中嵌入我们的js脚本文件和wordpress媒体文件。admin_enqueue_scripts

add_action( 'admin_enqueue_scripts', 'custom_script_js' );
function custom_script_js() {
    
    if ( ! did_action( 'wp_enqueue_media' ) ) {
        wp_enqueue_media();
    }
 
    wp_enqueue_script( 'custom-media-uploader', get_stylesheet_directory_uri() . '/scripts.js', array( 'jquery' ) );
}
add_action( 'admin_enqueue_scripts', 'custom_script_js' );

function custom_script_js() {
    
    if ( ! did_action( 'wp_enqueue_media' ) ) {
        wp_enqueue_media();
    }
 
    wp_enqueue_script( 'custom-media-uploader', get_stylesheet_directory_uri() . '/scripts.js', array( 'jquery' ) );
}
add_action( 'admin_enqueue_scripts', 'custom_script_js' );

function custom_script_js() {
    
    if ( ! did_action( 'wp_enqueue_media' ) ) {
        wp_enqueue_media();
    }
 
    wp_enqueue_script( 'custom-media-uploader', get_stylesheet_directory_uri() . '/scripts.js', array( 'jquery' ) );
}
© 版权声明
文章版权声明 1、本网站名称：KEKC博客
2、本站网址：https://www.kekc.cn
3、本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长QQ2551654928进行删除处理。
4、本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报

THE END
wordpress
# custom# page
喜欢就支持一下吧
点赞5 分享
If you hold tight, how can a free hand to hug now?
你若将过去抱的太紧，怎么能腾出手来拥抱现在？
KEKC的头像-KEKC博客
相关推荐
评论 抢沙发
头像
欢迎您留下宝贵的见解！
提交
头像

昵称

取消
昵称

请填写用户信息：

  • 昵称(必填)
  • 邮箱(必填)
表情
[aoman][baiyan][bishi][bizui][cahan][ciya][dabing][daku][deyi][doge][fadai][fanu][fendou][ganga][guzhang][haixiu][hanxiao][zuohengheng][zhuakuang][zhouma][zhemo][zhayanjian][zaijian][yun][youhengheng][yiwen][yinxian][xu][xieyanxiao][xiaoku][xiaojiujie][xia][wunai][wozuimei][weixiao][weiqu][tuosai][tu][touxiao][tiaopi][shui][se][saorao][qiudale][qinqin][qiaoda][piezui][penxue][nanguo][liulei][liuhan][lenghan][leiben][kun][kuaikule][ku][koubi][kelian][keai][jingya][jingxi][jingkong][jie][huaixiao][haqian][aini][OK][qiang][quantou][shengli][woshou][gouyin][baoquan][aixin][bangbangtang][xiaoyanger][xigua][hexie][pijiu][lanqiu][juhua][hecai][haobang][caidao][baojin][chi][dan][kulou][shuai][shouqiang][yangtuo][youling]
代码

请输入代码：

确认
图片
快捷回复
谢谢你的分享，我从中学到了很多！
教程很好用，谢谢！
好东西，学习一下！
楼主听话，快到碗里来！
路过一下，我只是来打酱油的！
水帖美如花，养护靠大家！

    暂无评论内容

随机文章

1自乐EPD分销系统 此版本可以分销对接分销 来看看 ？

2旧城旧街今犹在

3基于子比主题实现的用户会员等级、等级API的远程调用

4一个简单的WordPress头像加速插件

5【正式发布】KOS定制版Kangle脚本,最适配KOS工具的Kangle脚本

6小爱同学音箱特权9.9元包邮购买49元10L小米背包 数量有限

文章目录