幻灯片插件
注意,本文虽说是插件,但并不是在wordpress后台添加的插件,需要访客自行添加到主题中。
本文的幻灯片插件以FlexSlider 2幻灯片为例,且在Ashuwp_framework框架下实现。
实现方法:
1. 注册幻灯片文章类型,注意,本步骤并不需要Ashuwp_framework框架的支持。
所以,以下注册文章类型的代码,直接放在functions.php文件中可以,也可以新建一个文件然后再加载。阿树的做法:现在框架的include文件夹中新建一个ashuwp_slider.php文件,然后将代码放进去,再在functions.php文件中引入ashuwp_slider.php文件。
- <?php
- add_action('init', 'ashu_post_type');
- function ashu_post_type() {
- register_post_type( 'slider_type',
- array(
- 'labels' => array(
- 'name' => 'FlexSlider',
- 'singular_name' => 'FlexSlider',
- 'add_new' => 'Add',
- 'add_new_item' => 'Add',
- 'edit_item' => 'Edit',
- 'new_item' => 'New'
- ),
- 'public' => true,
- 'has_archive' => false,
- 'exclude_from_search' => true,
- 'menu_position' => 8,
- 'supports' => array( 'title')
- )
- );
- }
- add_filter( 'manage_edit-slider_type_columns', 'slider_type_custom_columns' );
- function slider_type_custom_columns( $columns ) {
- $columns = array(
- 'title' => 'Name',
- 'linked' => 'Link',
- 'thumbnail' => 'View'
- );
- return $columns;
- }
- add_action( 'manage_slider_type_posts_custom_column', 'slider_type_manage_custom_columns', 10, 2 );
- function slider_type_manage_custom_columns( $column, $post_id ) {
- global $post;
- switch( $column ) {
- case "linked":
- if(get_post_meta($post->ID, "ashuwp_slider_link", true)){
- echo get_post_meta($post->ID, "ashuwp_slider_link", true);
- } else {echo '----';}
- break;
- case "thumbnail":
- $thumb_url = get_post_meta($post->ID, "ashuwp_slider_pic", true);
-
- echo '<img src="'.$thumb_url.'" width="50" height="50" alt="" />';
- break;
- default :
- break;
- }
- }
- ?>
- require get_template_directory() . '/include/ashuwp_slider.php';
2. 使用Ashuwp_framework框架增加图片上传字段和链接地址字段即可。
下面的配置代码也直接放入了ashuwp_slider.php文件中。
- $slider_boxinfo = array('title' => 'Info', 'id'=>'sliderbox', 'page'=>array('slider_type'), 'context'=>'normal', 'priority'=>'low', 'callback'=>'');
- $slider_metas[] = array(
- 'name' => 'Link',
- 'desc' => '',
- 'id' => 'ashuwp_slider_link',
- 'std'=>'',
- 'type' => 'text'
- );
- $slider_metas[] = array(
- 'name' => 'Picture',
- 'desc' => '',
- 'std'=>'',
- 'button_label'=>'Upload',
- 'id' => 'ashuwp_slider_pic',
- 'type' => 'upload'
- );
- $ashuwp_slider = new ashuwp_postmeta_feild($slider_metas, $slider_boxinfo);
至此,幻灯片的后台添加即完成,再次声明:上面添加自定义字段代码需要Ashuwp_framework框架的支持
ashuwp_slider.php文件中完整代码
- <?php
- add_action('init', 'ashu_post_type');
- function ashu_post_type() {
- register_post_type( 'slider_type',
- array(
- 'labels' => array(
- 'name' => 'FlexSlider',
- 'singular_name' => 'FlexSlider',
- 'add_new' => 'Add',
- 'add_new_item' => 'Add',
- 'edit_item' => 'Edit',
- 'new_item' => 'New'
- ),
- 'public' => true,
- 'has_archive' => false,
- 'exclude_from_search' => true,
- 'menu_position' => 8,
- 'supports' => array( 'title')
- )
- );
- }
- add_filter( 'manage_edit-slider_type_columns', 'slider_type_custom_columns' );
- function slider_type_custom_columns( $columns ) {
- $columns = array(
- 'title' => 'Name',
- 'linked' => 'Link',
- 'thumbnail' => 'View'
- );
- return $columns;
- }
- add_action( 'manage_slider_type_posts_custom_column', 'slider_type_manage_custom_columns', 10, 2 );
- function slider_type_manage_custom_columns( $column, $post_id ) {
- global $post;
- switch( $column ) {
- case "linked":
- if(get_post_meta($post->ID, "ashuwp_slider_link", true)){
- echo get_post_meta($post->ID, "ashuwp_slider_link", true);
- } else {echo '----';}
- break;
- case "thumbnail":
- $thumb_url = get_post_meta($post->ID, "ashuwp_slider_pic", true);
-
- echo '<img src="'.$thumb_url.'" width="50" height="50" alt="" />';
- break;
- default :
- break;
- }
- }
- $slider_boxinfo = array('title' => 'Info', 'id'=>'sliderbox', 'page'=>array('slider_type'), 'context'=>'normal', 'priority'=>'low', 'callback'=>'');
- $slider_metas[] = array(
- 'name' => 'Link',
- 'desc' => '',
- 'id' => 'ashuwp_slider_link',
- 'std'=>'',
- 'type' => 'text'
- );
- $slider_metas[] = array(
- 'name' => 'Picture',
- 'desc' => '',
- 'std'=>'',
- 'button_label'=>'Upload',
- 'id' => 'ashuwp_slider_pic',
- 'type' => 'upload'
- );
- $ashuwp_slider = new ashuwp_postmeta_feild($slider_metas, $slider_boxinfo);
- ?>
3.修改样式,默认使用Ashuwp_framework框架添加的图片字段,后台图片显示样式不友好。将下面一段css代码加入框架的 /css/metabox_fields.css文件中即可。
- #sliderbox .ashu_file_view {
- width:100%;
- height:auto;
- position:relative;
- top:auto;
- rightright:auto;
- }
- #sliderbox .ashu_file_view img {
- display:block;
- max-width:100%;
- height:auto;
- }
后台效果:
前台调用
FlexSlider 2幻灯片插件的下载请自行完成,FlexSlider 2幻灯片插件需要输出一个如下的html结构。
- <!-- Place somewhere in the <body> of your page -->
- <div class="flexslider">
- <ul class="slides">
- <li>
- <img src="slide1.jpg" />
- </li>
- <li>
- <img src="slide2.jpg" />
- </li>
- <li>
- <img src="slide3.jpg" />
- </li>
- <li>
- <img src="slide4.jpg" />
- </li>
- </ul>
- </div>
实现代码:
- <?php
- $args = array(
- 'post_type'=>'slider_type',
- 'orderby'=>'menu_order',
- 'showposts'=>6
- );
- query_posts($args);
- ?>
- <?php if(have_posts()): ?>
- <div class="flexslider">
- <ul class="slides">
- <?php
- while(have_posts()): the_post();
- $slider_pic = get_post_meta($post->ID,'ashuwp_slider_pic',true);
- $slider_link = get_post_meta($post->ID,'ashuwp_slider_link',true);
- ?>
- <li><a target="_blank" href="<?php echo $slider_link; ?>"><img src="<?php echo $slider_pic; ?>" alt="<?php the_title(); ?>" /></a></li>
- <?php endwhile; ?>
- </ul>
- </div>
- <?php endif; wp_reset_query(); ?>