接入文派生态

WordPress自定义分类法中增加图片字段，js无法获取媒体权限

WordPress自定义分类法中增加图片字段，js无法获取媒体权限

·

125 次浏览

标签： , ,

正在查看 5 个帖子：1-4 (共 4 个帖子)
  • 作者
    帖子
  • #22545
    mars160
    • 文章数量： 27
    @mars160
    楼主
    2022年3月10日 下午12:25

    WordPress自定义分类法中增加图片字段，js无法获取媒体权限，点击上传不生效；请问需要怎么修改；

    操作步骤是：

    1、新建了自定义分类法

    2、创建自定义分类法的字段

    3、自定义字段的点击添加图片时，不生效

    <?php
add_action('init', 'ashu_post_type');
function ashu_post_type() {
    /**********幻灯片*****************/
    register_post_type( 'banner',
        array(
            'labels' => array(
                'name' => '幻灯片',
                'singular_name' => '幻灯片',
                'add_new' => '添加',
                'add_new_item' => '添加新幻灯片',
                'edit_item' => '编辑幻灯片',
                'new_item' => '新幻灯片'
            ),
        'public' => true,
        'has_archive' => false,
        'exclude_from_search' => true,
        'menu_position' => 5,
        'supports' => array( 'title','thumbnail',),
        )
    );
}

    幻灯片自定义字段

    $banner_meta_banner_boxes =
array(

	"banner_c" => array(
		"name" => "banner_c",
		"std" => "",
		"title" => "标题（不填写则显示默认）",
		"type"=>"text"),

	"banner_b" => array(
		"name" => "banner_b",
		"std" => "",
		"title" => "第二行文字",
		"type"=>"text"),

	"banner_a" => array(
		"name" => "banner_a",
		"std" => "",
		"title" => "第三行图片上的文字 ( 必填 )",
		"type"=>"text"),

	"banner_d" => array(
		"name" => "banner_d",
		"std" => "",
		"title" => "输入链接地址",
		"type"=>"text"),

	"banner_e" => array(
		"name" => "banner_e",
		"std" => "",
		"title" => "按钮名称，可以在文字前面输入图标字体，需要将双引号改成单引号",
		"type"=>"text"),

	"banner_f" => array(
		"name" => "banner_f",
		"std" => "",
		"title" => "输入图片地址",
		"type"=>"banner"),
);


function banner_meta_banner_boxes() {
	global $post, $banner_meta_banner_boxes;

	foreach ($banner_meta_banner_boxes as $meta_box) {
		$meta_box_value = get_post_meta($post->ID, $meta_box['name'] . '', true);
		if ($meta_box_value != "")

		$meta_box['std'] = $meta_box_value;
		echo '<input type="hidden" name="' . $meta_box['name'] . '_noncename" id="' . $meta_box['name'] . '_noncename" value="' . wp_create_nonce(plugin_basename(__FILE__)) . '" />';

		switch ($meta_box['type']) {
			case 'title':
				echo '<h4>' . $meta_box['title'] . '</h4>';
			break;
			case 'text':
				echo '<h4>' . $meta_box['title'] . '</h4>';
				echo '<span class="form-field"><input type="text" size="40" name="' . $meta_box['name'] . '" value="' . $meta_box['std'] . '" /></span><br />';
			break;
			case 'banner':
				echo '<h4>' . $meta_box['title'] . '</h4>';
				echo '<span class="form-field file-banners"><input type="text" size="40" name="' . $meta_box['name'] . '" value="' . $meta_box['std'] . '" /><a href="javascript:;" class="button">选择图片</a></span><br />';
			break;
		}
	}
}

function banner_meta_banner_box() {
	global $theme_name;
	if (function_exists('add_meta_box')) {
		add_meta_box('banner_new-meta-boxes', '首页幻灯片', 'banner_meta_banner_boxes', 'banner', 'normal', 'high');
	}
}
function banner_save_banner_postdata($post_id) {
	global $post, $banner_meta_banner_boxes;
	foreach ($banner_meta_banner_boxes as $meta_box) {
		if ( !isset($_POST[$meta_box['name'] . '_noncename']) || !wp_verify_nonce( $_POST[$meta_box['name'] . '_noncename'], plugin_basename(__FILE__) )) {
			return $post_id;
		}
		if ('banner' == $_POST['post_type']) {
			if (!current_user_can('edit_banner', $post_id)) return $post_id;
		} else {
			if (!current_user_can('edit_post', $post_id)) return $post_id;
		}
		$data = isset($_POST[$meta_box['name'] . '']) ? $_POST[$meta_box['name'] . ''] : null;
		if (get_post_meta($post_id, $meta_box['name'] . '') == "") add_post_meta($post_id, $meta_box['name'] . '', $data, true);
		elseif ($data != get_post_meta($post_id, $meta_box['name'] . '', true)) update_post_meta($post_id, $meta_box['name'] . '', $data);
		elseif ($data == "") delete_post_meta($post_id, $meta_box['name'] . '', get_post_meta($post_id, $meta_box['name'] . '', true));
	}
}
 {
add_action('admin_menu', 'banner_meta_banner_box');
add_action('save_post', 'banner_save_banner_postdata');
}

    function upload_img_js() { ?>
<script>
jQuery(document).ready(function() {
	var $ = jQuery;
	//if (typeof wp !== 'undefined' && wp.media && wp.media.editor) {
		$(document).on('click', '.button',
		function(e) {
			e.preventDefault();
			var button = $(this);
			var id = button.prev();
			wp.media.editor.send.attachment = function(props, attachment) {
		    alert('2333');
				if ($.trim(id.val()) != '') {
					id.val(id.val() + 'n' + attachment.url);
				} else {
					id.val(attachment.url);
				}
			};
			wp.media.editor.open(button);
			return false;
		});
	//}
});
</script>
<?php };
add_action('admin_head', 'upload_img_js');

    //那个幻灯片
add_filter( 'manage_edit-banner_columns', 'banner_custom_columns' );
function banner_custom_columns( $columns ) {
    $columns = array(
        'cb' => '<input type="checkbox" />',
        'title' => '幻灯片名',
        'banner_d' => '链接到',
        'banner_f' => '幻灯片预览',
        'banner_a' => '内容',
        'date' => '日期'
    );
    return $columns;
}

add_action( 'manage_banner_posts_custom_column', 'banner_manage_custom_columns', 10, 2 );
function banner_manage_custom_columns( $column, $post_id ) {
    global $post;
    switch( $column ) {
        case "haslink":
            if(get_post_meta($post->ID, "slider_link", true)){
                echo get_post_meta($post->ID, "slider_link", true);
            } else {echo '----';}
                break;
        case "thumbnail":
                $slider_pic = get_post_meta($post->ID, "slider_pic", true);
                echo '<img src="'.$slider_pic.'" width="95" height="41" alt="" />';
                break;
        default :
            break;
    }
}

    调用代码

    <?php
$args = array(
    'post_type'=>'slider_type',
);
query_posts($args);
if( have_posts() ) : ?>
<div id="banner">
    <div id="show">
    <?php
    while( have_posts() ) : the_post();
        $image_url = get_post_meta($post->ID,'banner_f',true);
        if($image_url!=''){ ?>
        <div class="show_item">
            <a href="<?php echo get_post_meta($post->ID,'banner_d',true);?>">
                <img src="<?php echo $image_url; ?>" alt="<?php the_title(); ?>" />
            </a>
        </div>
    <?php } endwhile; ?>
    </div>
</div>
<?php endif; wp_reset_query(); ?>
<?php if (of_get_option('banner')) { ?>

    来自深圳, 广东, 中国
    #22546
    孙锡源
    • 文章数量： 704
    @ibadboy
    2022年3月10日 下午4:48

    用  https://codestarframework.com/ 吧。现在很少看见有人手撸 WP 的各种设置项的代码了。WordPress 各种设置 API 的规范并不通用，很杂乱，一般做开发都是用第三方设置框架来搞。

    你这个问题我直觉上感觉和你强调的自定义分类法应该是没关系，更多的因素是你的 JS 代码没成功调用 WP 的媒体库组件，因为我基本不搞前端，所以这个问题上也提供不了明确的帮助，如果非要自己写的话，建议着重看一下是否如前所述是 JS 问题。

    来自济南市, 山东省, 中国
    #22547
    mars160
    • 文章数量： 27
    @mars160
    楼主
    2022年3月10日 下午4:52

    我搞定了！但是出现了新的问题，内容无法保存的问题！

    <?php
add_action('init', 'ashu_post_type');
function ashu_post_type() {
    /**********幻灯片*****************/
    register_post_type( 'banner',
        array(
            'labels' => array(
                'name' => '幻灯片',
                'singular_name' => '幻灯片',
                'add_new' => '添加',
                'add_new_item' => '添加新幻灯片',
                'edit_item' => '编辑幻灯片',
                'new_item' => '新幻灯片'
            ),
        'public' => true,
        'has_archive' => false,
        'exclude_from_search' => true,
        'menu_position' => 5,
        'supports' => array( 'title','thumbnail',),
        )
    );
}
//幻灯片自定义字段
$banner_meta_banner_boxes =
array(

	"banner_c" => array(
		"name" => "banner_c",
		"std" => "",
		"title" => "标题（不填写则显示默认）",
		"type"=>"text"),

	"banner_b" => array(
		"name" => "banner_b",
		"std" => "",
		"title" => "第二行文字",
		"type"=>"text"),

	"banner_a" => array(
		"name" => "banner_a",
		"std" => "",
		"title" => "第三行图片上的文字 ( 必填 )",
		"type"=>"text"),

	"banner_d" => array(
		"name" => "banner_d",
		"std" => "",
		"title" => "输入链接地址",
		"type"=>"text"),

	"banner_e" => array(
		"name" => "banner_e",
		"std" => "",
		"title" => "按钮名称，可以在文字前面输入图标字体，需要将双引号改成单引号",
		"type"=>"text"),

	"banner_f" => array(
		"name" => "banner_f",
		"std" => "",
		"title" => "输入图片地址",
		"type"=>"banner"),
);


function banner_meta_banner_boxes() {
	global $post, $banner_meta_banner_boxes;

	foreach ($banner_meta_banner_boxes as $meta_box) {
		$meta_box_value = get_post_meta($post->ID, $meta_box['name'] . '', true);
		if ($meta_box_value != "")

		$meta_box['std'] = $meta_box_value;
		echo '<input type="hidden" name="' . $meta_box['name'] . '_noncename" id="' . $meta_box['name'] . '_noncename" value="' . wp_create_nonce(plugin_basename(__FILE__)) . '" />';

		switch ($meta_box['type']) {
			case 'title':
				echo '<h4>' . $meta_box['title'] . '</h4>';
			break;
			case 'text':
				echo '<h4>' . $meta_box['title'] . '</h4>';
				echo '<span class="form-field"><input type="text" size="40" name="' . $meta_box['name'] . '" value="' . $meta_box['std'] . '" /></span><br />';
			break;
			case 'banner':
				echo '<h4>' . $meta_box['title'] . '</h4>';
				echo '<span class="form-field file-banners"><input type="text" size="40" name="' . $meta_box['name'] . '" value="' . $meta_box['std'] . '" /><a href="'. wp_enqueue_media(). '" class="buttons button">选择图片</a></span><br />';
			break;
		}
	}
}

function banner_meta_banner_box() {
	global $theme_name;
	if (function_exists('add_meta_box')) {
		add_meta_box('banner_new-meta-boxes', '首页幻灯片', 'banner_meta_banner_boxes', 'banner', 'normal', 'high');
	}
}
function banner_save_banner_postdata($post_id) {
	global $post, $banner_meta_banner_boxes;
	foreach ($banner_meta_banner_boxes as $meta_box) {
		if ( !isset($_POST[$meta_box['name'] . '_noncename']) || !wp_verify_nonce( $_POST[$meta_box['name'] . '_noncename'], plugin_basename(__FILE__) )) {
			return $post_id;
		}
		if ('banner' == $_POST['post_type']) {
			if (!current_user_can('edit_banner', $post_id)) return $post_id;
		} else {
			if (!current_user_can('edit_post', $post_id)) return $post_id;
		}
		$data = isset($_POST[$meta_box['name'] . '']) ? $_POST[$meta_box['name'] . ''] : null;
		if (get_post_meta($post_id, $meta_box['name'] . '') == "") add_post_meta($post_id, $meta_box['name'] . '', $data, true);
		elseif ($data != get_post_meta($post_id, $meta_box['name'] . '', true)) update_post_meta($post_id, $meta_box['name'] . '', $data);
		elseif ($data == "") delete_post_meta($post_id, $meta_box['name'] . '', get_post_meta($post_id, $meta_box['name'] . '', true));
	}
}
 {
add_action('admin_menu', 'banner_meta_banner_box');
add_action('save_post', 'banner_save_banner_postdata');
}

function upload_img_js() { ?>
<script>
jQuery(document).ready(function() {
	var $ = jQuery;
	if (typeof wp !== 'undefined' && wp.media && wp.media.editor) {
		$(document).on('click', '.buttons',
		function(e) {
			e.preventDefault();
			var button = $(this);
			var id = button.prev();
			wp.media.editor.send.attachment = function(props, attachment) {
				if ($.trim(id.val()) != '') {
					id.val(id.val() + 'n' + attachment.url);
				} else {
					id.val(attachment.url);
				}
			};
			wp.media.editor.open(button);
			return false;
		});
	}
});

</script>
<?php };
add_action('admin_head', 'upload_img_js');

//那个幻灯片
add_filter( 'manage_edit-banner_columns', 'banner_custom_columns' );
function banner_custom_columns( $columns ) {
    $columns = array(
        'cb' => '<input type="checkbox" />',
        'title' => '幻灯片名',
        'banner_d' => '链接到',
        'banner_f' => '幻灯片预览',
        'banner_a' => '内容',
        'date' => '日期'
    );
    return $columns;
}

add_action( 'manage_banner_posts_custom_column', 'banner_manage_custom_columns', 10, 2 );
function banner_manage_custom_columns( $column, $post_id ) {
    global $post;
    switch( $column ) {
        case "haslink":
            if(get_post_meta($post->ID, "slider_link", true)){
                echo get_post_meta($post->ID, "slider_link", true);
            } else {echo '----';}
                break;
        case "thumbnail":
                $slider_pic = get_post_meta($post->ID, "slider_pic", true);
                echo '<img src="'.$slider_pic.'" width="95" height="41" alt="" />';
                break;
        default :
            break;
    }
}

    来自深圳, 广东, 中国
    #22548
    mars160
    • 文章数量： 27
    @mars160
    楼主
    2022年3月10日 下午4:53

    的确是js没成功调用wp媒体库的问题，已经搞定了，现在的问题是已经可以调用，并且插入了，但是无法保存！

    来自深圳, 广东, 中国
    #22549
    孙锡源
    • 文章数量： 704
    @ibadboy
    2022年3月12日 上午12:07

    无法保存的话用 postman 测试一下提交表单看看是否能成功保存。一般保存不了可能的情况一个是前端的表单 name 或提交地址写错了，再就是目录权限问题，最后是接口的图片保存逻辑问题。

    如果你用 postman 请求表单然后单步调试的话应该很容易就能看到问题出在哪里。我自己写代码也是要调试的，肉眼是看不出错误的，所以说你把所有代码都贴上来的帮助并不大，我只能给你说一下排查思路，然后具体是什么问题需要调试才知道而不是看代码就能知道。

    来自潍坊市, 山东省, 中国
  • 作者
    帖子
正在查看 5 个帖子：1-4 (共 4 个帖子)
  • 哎呀，回复话题必需登录。

话题信息

AI 智能回复
@ 召唤版主
# 订阅推送
免费课程
在线培训

有奖参与论坛社区问答