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

    • 一点优化
      楼主
      一点优化
      楼主
      一点优化
      楼主

      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')) { ?>
      
      

  • 孙锡源
    管理员

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

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

    • 一点优化
      楼主
      一点优化
      楼主
      一点优化
      楼主

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

      <?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;
          }
      }

    • 一点优化
      楼主
      一点优化
      楼主
      一点优化
      楼主

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

      • 孙锡源
        管理员

        回复 @ 一点优化

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

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

  • 正在查看 1 条回复
    • 哎呀,回复话题必需登录。

    加入 LitePress 论坛 ,参与知识分享与交流
    登录 注册 进行评论
    立即加入