WP 后台框架 Ashuwp Framework 幻灯片插件


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

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

实现方法:

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

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

 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')
        )
    );
}
//2. 修改幻灯片文章列表
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);
                //$ds_image = vt_resize( '',$ds_thumb , 95, 41, true );
                echo '<img src="'.$thumb_url.'" width="50" height="50" alt="" />';
                break;
        default :
            break;
    }
}
?>
require get_template_directory() . '/include/ashuwp_slider.php';
//注意加载 ashuwp_slider.php 文件一定要在加载完本框架之后

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

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

//3. Ashuwp_framework框架配置代码,增加自定义字段
/******slider*******/
$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 文件中完整代码

 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')
        )
    );
}
//2. 修改幻灯片文章列表
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);
                //$ds_image = vt_resize( '',$ds_thumb , 95, 41, true );
                echo '<img src="'.$thumb_url.'" width="50" height="50" alt="" />';
                break;
        default :
            break;
    }
}
//3. Ashuwp_framework框架配置代码,增加自定义字段
/******slider*******/
$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 文件中即可。

/**slider**/
#sliderbox .ashu_2_file_view {
  width:100%;
  height:auto;
  position:relative;
  top:auto;
  rightright:auto;
}
#sliderbox .ashu_2_file_view img {
  display:block;
  max-width:100%;
  height:auto;
}

后台效果:

WP 后台框架 Ashuwp Framework 幻灯片插件

前台调用

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

<!-- Place somewhere in the  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>

实现代码:

'slider_type',
  'orderby'=>'menu_order',
  'showposts'=>6
);
query_posts($args);
?>

<div class="flexslider">
  <ul class="slides">
    ID,'ashuwp_slider_pic',true);
    $slider_link = get_post_meta($post->ID,'ashuwp_slider_link',true);
    ?>
    <li><a target="_blank" href=""><img src="" alt="" /></a></li>
    
  </ul>
</div>


<< WP 后台框架 Ashuwp Framework 导入导出 WP 后台框架 Ashuwp Framework 更新记录 >>


没有账号? 忘记密码?

社交账号快速登录