幻灯片插件

注意,本文虽说是插件,但并不是在wordpress后台添加的插件,需要访客自行添加到主题中。

本文的幻灯片插件以FlexSlider 2幻灯片为例,且在Ashuwp_framework框架下实现。

实现方法:

1. 注册幻灯片文章类型,注意,本步骤并不需要Ashuwp_framework框架的支持。

所以,以下注册文章类型的代码,直接放在functions.php文件中可以,也可以新建一个文件然后再加载。阿树的做法:现在框架的include文件夹中新建一个ashuwp_slider.php文件,然后将代码放进去,再在functions.php文件中引入ashuwp_slider.php文件。

  1. <?php
  2. //1. 先注册一个幻灯片文章类型
  3. add_action('init', 'ashu_post_type');
  4. function ashu_post_type() {
  5.     register_post_type( 'slider_type',
  6.         array(
  7.             'labels' => array(
  8.                 'name' => 'FlexSlider',
  9.                 'singular_name' => 'FlexSlider',
  10.                 'add_new' => 'Add',
  11.                 'add_new_item' => 'Add',
  12.                 'edit_item' => 'Edit',
  13.                 'new_item' => 'New'
  14.             ),
  15.         'public' => true,
  16.         'has_archive' => false,
  17.         'exclude_from_search' => true,
  18.         'menu_position' => 8,
  19.         'supports' => array( 'title')
  20.         )
  21.     );
  22. }
  23. //2. 修改幻灯片文章列表
  24. add_filter( 'manage_edit-slider_type_columns', 'slider_type_custom_columns' );
  25. function slider_type_custom_columns( $columns ) {
  26.     $columns = array(
  27.         'title' => 'Name',
  28.         'linked' => 'Link',
  29.         'thumbnail' => 'View'
  30.     );
  31.     return $columns;
  32. }
  33. add_action( 'manage_slider_type_posts_custom_column', 'slider_type_manage_custom_columns', 10, 2 );
  34. function slider_type_manage_custom_columns( $column$post_id ) {
  35.     global $post;
  36.     switch$column ) {
  37.         case "linked":
  38.             if(get_post_meta($post->ID, "ashuwp_slider_link", true)){
  39.                 echo get_post_meta($post->ID, "ashuwp_slider_link", true);
  40.             } else {echo '----';}
  41.                 break;
  42.         case "thumbnail":
  43.                 $thumb_url = get_post_meta($post->ID, "ashuwp_slider_pic", true);
  44.                 //$ds_image = vt_resize( '',$ds_thumb , 95, 41, true );
  45.                 echo '<img src="'.$thumb_url.'" width="50" height="50" alt="" />';
  46.                 break;
  47.         default :
  48.             break;
  49.     }
  50. }
  51. ?>
  1. require get_template_directory() . '/include/ashuwp_slider.php';
  2. //注意加载ashuwp_slider.php文件一定要在加载完本框架之后

2. 使用Ashuwp_framework框架增加图片上传字段和链接地址字段即可。

下面的配置代码也直接放入了ashuwp_slider.php文件中。

  1. //3. Ashuwp_framework框架配置代码,增加自定义字段
  2. /******slider*******/
  3. $slider_boxinfo = array('title' => 'Info', 'id'=>'sliderbox', 'page'=>array('slider_type'), 'context'=>'normal', 'priority'=>'low', 'callback'=>'');
  4. $slider_metas[] = array(
  5.   'name' => 'Link',
  6.   'desc' => '',
  7.   'id' => 'ashuwp_slider_link',
  8.   'std'=>'',
  9.   'type' => 'text'
  10. );
  11. $slider_metas[] = array(
  12.   'name' => 'Picture',
  13.   'desc' => '',
  14.   'std'=>'',
  15.   'button_label'=>'Upload',
  16.   'id' => 'ashuwp_slider_pic',
  17.   'type' => 'upload'
  18. );
  19. $ashuwp_slider = new ashuwp_postmeta_feild($slider_metas$slider_boxinfo);

至此,幻灯片的后台添加即完成,再次声明:上面添加自定义字段代码需要Ashuwp_framework框架的支持
ashuwp_slider.php文件中完整代码

  1. <?php
  2. //1. 先注册一个幻灯片文章类型
  3. add_action('init', 'ashu_post_type');
  4. function ashu_post_type() {
  5.     register_post_type( 'slider_type',
  6.         array(
  7.             'labels' => array(
  8.                 'name' => 'FlexSlider',
  9.                 'singular_name' => 'FlexSlider',
  10.                 'add_new' => 'Add',
  11.                 'add_new_item' => 'Add',
  12.                 'edit_item' => 'Edit',
  13.                 'new_item' => 'New'
  14.             ),
  15.         'public' => true,
  16.         'has_archive' => false,
  17.         'exclude_from_search' => true,
  18.         'menu_position' => 8,
  19.         'supports' => array( 'title')
  20.         )
  21.     );
  22. }
  23. //2. 修改幻灯片文章列表
  24. add_filter( 'manage_edit-slider_type_columns', 'slider_type_custom_columns' );
  25. function slider_type_custom_columns( $columns ) {
  26.     $columns = array(
  27.         'title' => 'Name',
  28.         'linked' => 'Link',
  29.         'thumbnail' => 'View'
  30.     );
  31.     return $columns;
  32. }
  33. add_action( 'manage_slider_type_posts_custom_column', 'slider_type_manage_custom_columns', 10, 2 );
  34. function slider_type_manage_custom_columns( $column$post_id ) {
  35.     global $post;
  36.     switch$column ) {
  37.         case "linked":
  38.             if(get_post_meta($post->ID, "ashuwp_slider_link", true)){
  39.                 echo get_post_meta($post->ID, "ashuwp_slider_link", true);
  40.             } else {echo '----';}
  41.                 break;
  42.         case "thumbnail":
  43.                 $thumb_url = get_post_meta($post->ID, "ashuwp_slider_pic", true);
  44.                 //$ds_image = vt_resize( '',$ds_thumb , 95, 41, true );
  45.                 echo '<img src="'.$thumb_url.'" width="50" height="50" alt="" />';
  46.                 break;
  47.         default :
  48.             break;
  49.     }
  50. }
  51. //3. Ashuwp_framework框架配置代码,增加自定义字段
  52. /******slider*******/
  53. $slider_boxinfo = array('title' => 'Info', 'id'=>'sliderbox', 'page'=>array('slider_type'), 'context'=>'normal', 'priority'=>'low', 'callback'=>'');
  54. $slider_metas[] = array(
  55.   'name' => 'Link',
  56.   'desc' => '',
  57.   'id' => 'ashuwp_slider_link',
  58.   'std'=>'',
  59.   'type' => 'text'
  60. );
  61. $slider_metas[] = array(
  62.   'name' => 'Picture',
  63.   'desc' => '',
  64.   'std'=>'',
  65.   'button_label'=>'Upload',
  66.   'id' => 'ashuwp_slider_pic',
  67.   'type' => 'upload'
  68. );
  69. $ashuwp_slider = new ashuwp_postmeta_feild($slider_metas$slider_boxinfo);
  70. ?>

3.修改样式,默认使用Ashuwp_framework框架添加的图片字段,后台图片显示样式不友好。将下面一段css代码加入框架的 /css/metabox_fields.css文件中即可。

  1. /**slider**/
  2. #sliderbox .ashu_file_view {
  3.   width:100%;
  4.   height:auto;
  5.   position:relative;
  6.   top:auto;
  7.   rightright:auto;
  8. }
  9. #sliderbox .ashu_file_view img {
  10.   display:block;
  11.   max-width:100%;
  12.   height:auto;
  13. }

后台效果:slier_text

前台调用

FlexSlider 2幻灯片插件的下载请自行完成,FlexSlider 2幻灯片插件需要输出一个如下的html结构。

  1. <!-- Place somewhere in the <body> of your page -->
  2. <div class="flexslider">
  3.   <ul class="slides">
  4.     <li>
  5.       <img src="slide1.jpg" />
  6.     </li>
  7.     <li>
  8.       <img src="slide2.jpg" />
  9.     </li>
  10.     <li>
  11.       <img src="slide3.jpg" />
  12.     </li>
  13.     <li>
  14.       <img src="slide4.jpg" />
  15.     </li>
  16.   </ul>
  17. </div>

实现代码:

  1. <?php
  2. $args = array(
  3.   'post_type'=>'slider_type',
  4.   'orderby'=>'menu_order',
  5.   'showposts'=>6
  6. );
  7. query_posts($args);
  8. ?>
  9. <?php if(have_posts()): ?>
  10. <div class="flexslider">
  11.   <ul class="slides">
  12.     <?php
  13.     while(have_posts()): the_post();
  14.     $slider_pic = get_post_meta($post->ID,'ashuwp_slider_pic',true);
  15.     $slider_link = get_post_meta($post->ID,'ashuwp_slider_link',true);
  16.     ?>
  17.     <li><a target="_blank" href="<?php echo $slider_link; ?>"><img src="<?php echo $slider_pic; ?>" alt="<?php the_title(); ?>" /></a></li>
  18.     <?php endwhile; ?>
  19.   </ul>
  20. </div>
  21. <?php endif; wp_reset_query(); ?>