wordpress进阶教程(三十七):wordpress后台添加幻灯片板块

本站框架有提供添加幻灯片的步骤,请直接前往本站 框架栏目->幻灯片插件

网页幻灯片(slider)应用很广泛,很多博客也喜欢在首页弄一个特色文章切换。

不管是文章切换还是图片切换,或者是图文混合切换,在后台新建一个独立的幻灯片板块就非常方便。

如图:slider

 

要是说明的是,这个里面有个排序幻灯片功能,我也不记得是从哪里弄过来的,反正已经很久远了,记不清了。

首先是后台的实现,第一步,需要新建一个文章类型。

提醒:你可以直接将下面的代码添加到主题的functions.php中,也可以新建一个文件。本工作室测试时,使用wp3.8.1 twentyfourteen主题,所以我再twentyfourteen主题的inc文件夹下,新建一个post_type.php文件。然后在twentyfourteen主题的functions.php文件(可以放到最前面)加入以下代码,包含post_type.php文件

  1. require get_template_directory() . '/inc/post_type.php';

这样接下来的代码就都添加到post_type.php文件即可。

首先创建一个自定义文章类型

  1. add_action('init', 'ashu_post_type');
  2. function ashu_post_type() {
  3.     /**********幻灯片*****************/
  4.     register_post_type( 'slider_type',
  5.         array(
  6.             'labels' => array(
  7.                 'name' => '幻灯片',
  8.                 'singular_name' => '幻灯片',
  9.                 'add_new' => '添加',
  10.                 'add_new_item' => '添加新幻灯片',
  11.                 'edit_item' => '编辑幻灯片',
  12.                 'new_item' => '新幻灯片'
  13.             ),
  14.         'public' => true,
  15.         'has_archive' => false,
  16.         'exclude_from_search' => true,
  17.         'menu_position' => 5,
  18.         'supports' => array( 'title','thumbnail'),
  19.         )
  20.     );
  21. }

添加完之后,即可在后台看到新创建的文章类型:slider2

 

当然,仅仅这样,一个幻灯片只有标题肯定是不行的。所以需要创建一些自定义字段,给文章添加自定义字段是一个比较长的话题,可参考或直接使用我们的教程:wordpress进阶教程(十):后台创建自定义面板类文件,关于如何添加自定义字段,这里就跳过。

我使用本工作室发布的类文件,添加了两个自定义字段,分别为  链接地址-slider_link    图片地址-slider_pic。如图slider3

 

如此,后台即可方便添加幻灯片了。

第二步:在幻灯片管理页面预览幻灯片信息。继续在post_type.php中添加以下代码:

  1. add_filter( 'manage_edit-slider_type_columns', 'slider_type_custom_columns' );
  2. function slider_type_custom_columns( $columns ) {
  3.     $columns = array(
  4.         'cb' => '<input type="checkbox" />',
  5.         'title' => '幻灯片名',
  6.         'haslink' => '链接到',
  7.         'thumbnail' => '幻灯片预览',
  8.         'date' => '日期'
  9.     );
  10.     return $columns;
  11. }
  12. add_action( 'manage_slider_type_posts_custom_column', 'slider_type_manage_custom_columns', 10, 2 );
  13. function slider_type_manage_custom_columns( $column$post_id ) {
  14.     global $post;
  15.     switch$column ) {
  16.         case "haslink":
  17.             if(get_post_meta($post->ID, "slider_link", true)){
  18.                 echo get_post_meta($post->ID, "slider_link", true);
  19.             } else {echo '----';}
  20.                 break;
  21.         case "thumbnail":
  22.                 $slider_pic = get_post_meta($post->ID, "slider_pic", true);
  23.                 echo '<img src="'.$slider_pic.'" width="95" height="41" alt="" />';
  24.                 break;
  25.         default :
  26.             break;
  27.     }
  28. }

slider4

 

slider4

 

 

就这样后台部分完成。

前台如何输出呢?使用不同的jquery slider插件会有不同的html输出格式,仅提供一个参考:

  1. <?php
  2. $args = array(
  3.     'post_type'=>'slider_type',
  4. );
  5. query_posts($args);
  6. if( have_posts() ) : ?>
  7. <div id="banner">
  8.     <div id="show">
  9.     <?php
  10.     while( have_posts() ) : the_post();
  11.         $image_url = get_post_meta($post->ID,'slider_pic',true);
  12.         if($image_url!=''){ ?>
  13.         <div class="show_item">
  14.             <a href="<?php echo get_post_meta($post->ID,'slider_link',true);?>">
  15.                 <img src="<?php echo $image_url; ?>" alt="<?php the_title(); ?>" />
  16.             </a>
  17.         </div>
  18.     <?php } endwhile; ?>
  19.     </div>
  20. </div>
  21. <?php endif; wp_reset_query(); ?>

已有27条评论

  1. 啊
    : 回复

    只想显示前面五张照片怎么做?而且要规定大小显示

  2. 催乳师培训
    催乳师培训 : 回复

    我也想用,可看评论说都不正常啊。

    • 阿树工作室
      阿树工作室 回复催乳师培训: 回复

      你好,你可以看一下本文的第一句话。

  3. a
    a : 回复

    还是有点问题啊

  4. 候鸟
    候鸟 : 回复

    树老大,这个能不能加上自定义分类进去,还有自定义分类能不能在主题函数下添加,也就是说在主题初始化的时候在自定义分类里面增加分类

  5. 催乳师培训
    催乳师培训 : 回复

     我这幻灯片的图片不会更换。

  6. 海绵他奶
    海绵他奶 : 回复

    图片上传后怎么能显示回图片呢?

    而且每次提交都提示:headers already sent by (…. /metabox.php)

  7. toushita
    toushita : 回复

    请教一下图片上传不能用咋搞试了几次。其他的正常上传

    • 阿树工作室
      阿树工作室 回复toushita: 回复

      图片不能上传有很多原因,1.上传图片的Js没有加载或有错误 2.媒体中心的js等没有加载。
      建议解决方法:一、在增加自定义字段的时候,建议使用本站提供的框架http://www.ashuwp.com/courses/highgrade/627.html。
      二、建立自定义文章类型的时候,最好让自定义文章类型支持特色图像

      • toushita
        toushita 回复阿树工作室: 回复

        解决了,把图片的地址搞进去就好了。就是不能预览

  8. kaikai
    kaikai : 回复

    有做成功的吗

  9. kaikai
    kaikai : 回复

    呵呵,有问题都不回复的!

  10. kaikai
    kaikai : 回复

    include_once(‘metaboxclass.php’);   

    include_once(‘metabox.php’);  


    加上和不加上没啥区别,添加幻灯片界面依旧只能输入标题! 望博主给予解答,谢谢

    • joyzhang
      joyzhang 回复kaikai: 回复

      修改‘metabox.php’ 中 ‘page’=>array(‘post_type’ => ‘slider_type’)

      • kaikai
        kaikai 回复joyzhang: 回复

        博主开什么玩笑? 那文件里根本就没有你说的那些代码! 用不了啊,博主自己测试下吧

        • toushita
          toushita 回复kaikai: 回复

          你没认真看文件看了就知道了

  11. kaikai
    kaikai : 回复

    博主好, 

    include_once(‘metaboxclass.php’);   

    include_once(‘metabox.php’);  

    这两个引用后没显示啊,路径是对的

  12. 一掌拍到
    一掌拍到 : 回复

    请教一下怎么$slide_pic总是为空

    缩略图那里看不到图片

    前台调用slide也没有图片

    • 阿树工作室
      阿树工作室 回复一掌拍到: 回复

      这是添加定义字段的问题。。。估计是js没加载。。使用我们的后台框架来添加自定义字段吧:阿树工作室—主题后台框架1.1

  13. jika
    jika : 回复

    阿树大神 能不能给下完整的代码啊 就是加上“添加链接地址”和“上传图片”这俩功能的代码

    自己弄老是不行 麻烦了 可以的话 把代码发我邮箱一份吧 多谢多谢!!

    • 阿树工作室
      阿树工作室 回复jika: 回复

      请使用阿树工作室新发布的主题框架。。。阿树工作室—主题后台框架1.0

      本篇文章的幻灯片自定义字段的配置代码为:

      /******slider*******/
      $slider_boxinfo = array('title' => 'Slider info', 'id'=>'sliderbox', 'page'=>array('slider_type'), 'context'=>'normal', 'priority'=>'low', 'callback'=>'');
      $slider_options[] = array(
      			"name" => "Slider link",
      			"desc" => "",
      			"id" => "slider_link",
      			"size"=> 40,
      			"std"=>'',
      			"type" => "text"
      			);
      
      $slider_options[] = array(
      			"name" => "Slider picture",
      			"desc" => "",
      			"std"=>'',
      			"size"=>60,
      			"button_label"=> 'Upload',
      			"id" => "slider_pic",
      			"type" => "upload"
      			);
      $slider_box = new ashu_meta_box($slider_options, $slider_boxinfo);

      • 田工
        田工 回复阿树工作室: 回复

        这个代码放上去之后还是不能用,和文章中的代码并不对应呀

        • 阿树工作室
          阿树工作室 回复田工: 回复

          你是不显示这个字段呢?还是不能上传图片呢?还是添加数据不能保存?

          • laiydesign.com
            laiydesign.com 回复阿树工作室: 回复

            嗯,可以用了,就是那个排序能不能分享一下呀?非常感谢信哈!

          • laiydesign.com
            laiydesign.com 回复阿树工作室: 回复

            这个代码放在哪个位置呀??

            • 阿树工作室
              阿树工作室 回复laiydesign.com: 回复

              这个代码是用于配置我们发布的后台框架的。。。

  14. 李惟
    李惟 : 回复

    不错,期待后续能再多一些wp深层次的内容

发表评论