wordpress不靠插件实现多张Banner替换增删功能

代码实现，在主题文件functions.php里增加代码：

** 需要有js文件 配合 后台引入 banner.js 不然上传按钮无反应

function load_scripts() {
  wp_enqueue_script( 'banner-js', get_template_directory_uri() . '/js/banner.js', array( 'jquery' ), '1.0.0', true ); // 加载自定义的 banner.js 脚本
}
add_action( 'admin_enqueue_scripts', 'load_scripts' );  //后台需要配合js 完成上传

// 注册自定义的 post type  菜单栏里 显示 Banners 项
function register_banner_post_type() {
  register_post_type( 'banner', array(
    'labels' => array(
        'name' => 'Banners',
        'singular_name' => 'Banner',
    ),
    'public' => true,
    'supports' => array( 'title', 'thumbnail' ),
    'menu_icon' => 'dashicons-format-image',
    'rewrite' => array( 'slug' => 'banner' ),
  ));
}
add_action( 'init', 'register_banner_post_type' );

// 添加自定义的 meta box
function banner_meta_box() {
  add_meta_box( 'banner_meta_box', 'Banner Image', 'banner_meta_box_callback', 'banner', 'side', 'high' );
}
add_action( 'add_meta_boxes', 'banner_meta_box' );

// 渲染 meta box 的 HTML
function banner_meta_box_callback( $post ) {
  wp_nonce_field( basename( __FILE__ ), 'banner_meta_box_nonce' );
  $image = get_post_meta( $post->ID, '_banner_image', true );
  if ( $image ) { // 存在使用 数据库里的
      echo '<img src="' . esc_url( $image ) . '" style="max-width: 100%;" />';
  }else{  //  不存在的话 默认  也有空的标签 不然会出现 显示不了图片标签
      echo '<img src="" style="max-width: 100%;" />';
  }
  // 这里的ID 名和banner.js的对应
  echo '<input type="hidden" name="banner_image" id="banner_image" value="' . esc_attr( $image ) . '" />';
  echo '<p><button type="button" class="button button-primary" id="upload_banner_image">Upload Image</button></p>';
  echo '<p><button type="button" class="button" id="remove_banner_image">Remove Image</button></p>';
}

// 保存自定义的 meta box 字段
function save_banner_meta_box( $post_id ) {
  if ( ! isset( $_POST['banner_meta_box_nonce'] ) || ! wp_verify_nonce( $_POST['banner_meta_box_nonce'], basename( __FILE__ ) ) ) {
      return;
  }
  if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) {
      return;
  }
  if ( isset( $_POST['post_type'] ) && 'banner' == $_POST['post_type'] ) {
      if ( ! current_user_can( 'edit_page', $post_id ) ) {
          return;
      }
  } else {
      if ( ! current_user_can( 'edit_post', $post_id ) ) {
          return;
      }
  }

  if ( isset( $_POST['banner_image'] ) ) {
      $image = sanitize_text_field( $_POST['banner_image'] );
      update_post_meta( $post_id, '_banner_image', $image );
  }
}
add_action( 'save_post', 'save_banner_meta_box' );

上面这个增加完成后，在后台主菜单里，就有个名叫“Banners”的菜单，像发布文章一样，发布图片

新建banner.js，可以也在模板目录里，引用的时候注意路径即可，因为wp的主文件会自带jquery，可以直接使用jquery语法编写，上传功能和删除功能

jQuery(document).ready(function ($) {
    var custom_uploader;
    $('#upload_banner_image').click(function (e) {
        e.preventDefault();
        if (custom_uploader) {
            custom_uploader.open();
            return;
        }
        custom_uploader = wp.media.frames.file_frame = wp.media({
            title: 'Choose Image',
            button: {
                text: 'Choose Image'
            },
            multiple: false
        });
        custom_uploader.on('select', function () {
            var attachment = custom_uploader.state().get('selection').first().toJSON();
            $('#banner_image').val(attachment.url); 
            $('div#banner_meta_box img').attr('src', attachment.url).css('max-width', '100%');
        });
        custom_uploader.open();
    });
    // 删除图片 按钮
    $('#remove_banner_image').click(function (e) {
        e.preventDefault();
        $('#banner_image').val('');
        $('div#banner_meta_box img').attr('src', '');
    });
});

最后在需要调用banner的地方循环调取：

<div id="banner-carousel" class="carousel slide" data-ride="carousel">
    <!-- Wrapper for slides -->
    <div class="carousel-inner">
        <?php
        $query = new WP_Query( array(
            'post_type' => 'banner',
            'posts_per_page' => -1,
        ) );
        $active = true;
        while ( $query->have_posts() ) :
            $query->the_post();
            $image = get_post_meta( get_the_ID(), '_banner_image', true );
            if ( ! $image ) {
                continue;
            }
        ?>
        <div class="item<?php echo $active ? ' active' : ''; ?>">
            <img src="<?php echo esc_url( $image ); ?>" alt="<?php the_title_attribute(); ?>">
            <?php if ( get_the_title() || get_the_content() ) : ?>
            <div class="carousel-caption">
                <?php if ( get_the_title() ) : ?>
                <h3><?php the_title(); ?></h3>
                <?php endif; ?>
                <?php if ( get_the_content() ) : ?>
                <p><?php the_content(); ?></p>
                <?php endif; ?>
            </div>
            <?php endif; ?>
        </div>
        <?php
            $active = false;
        endwhile;
        wp_reset_postdata();
        ?>
    </div>

    <!-- Controls -->
    <a class="left carousel-control" href="#banner-carousel" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left"></span>
    </a>
    <a class="right carousel-control" href="#banner-carousel" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right"></span>
    </a>
</div>

成功调取到后台设置的多种banner就可以用相应的前端插件实现图片轮播。