登录
记住登录信息
A+

给自己的主题首页添加幻灯片功能

2019年05月11日 程序设计 12条评论 213次浏览

幻灯片这个功能其实对于博客来说可有可无,但大部分的主题有了之后会给主题增加更多的是美感,且博主认为重要的文章可以放在幻灯片里提供给读者快捷浏览,所以我给我的主题也增加了这个功能。

说到首页的幻灯片,我刚开始装的是ml-slider插件,这个插件功能非常强大,也非常好用,集成在我的主要里也没有什么违和感,但无奈插件体积太大,对于我这种小空间来说还是能省则省吧。

那么怎样在不用插件的情况想给自己的主题增加此功能呢,我最初在网上找了大量的教程,但感觉都没有一个完整的教程,所以我只能通过摸索自己去写这些代码!

要添加幻灯片不能没有后台功能的配合,所以我经过网络的筛选,选择了阿树工作室提供的Framework框架来给后台增加幻灯片的自定义板块。

首先去阿树工作室下载最新的Framework框架。

他的博客里有详细的使用教程,建议多研究一下这个框架,很好用,且有非常大的扩展空间。

下载好框架后把整个文件叫拷贝到你主题的任何一个目录都可以,当然你也可以更改文件夹或者文件的名称,只要到下面步骤的时候填写正确就可以了!

在主题的任意位置新建一个PHP文件,展开,把代码拷贝进去!展开

  1. <?php
  2. add_action('init', 'slider_post_type');
  3. function slider_post_type() {
  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' => 8,
  18.         'supports' => array( 'title')
  19.         )
  20.     );
  21. }
  22. add_filter( 'manage_edit-slider_type_columns', 'slider_type_custom_columns' );
  23. function slider_type_custom_columns( $columns ) {
  24.     $columns = array(
  25.         'title' => '标题',
  26.         'linked' => '链接',
  27.         'thumbnail' => '视图'
  28.     );
  29.     return $columns;
  30. }
  31. add_action( 'manage_slider_type_posts_custom_column', 'slider_type_manage_custom_columns', 10, 2 );
  32. function slider_type_manage_custom_columns( $column$post_id ) {
  33.     global $post;
  34.     switch$column ) {
  35.         case "linked":
  36.             if(get_post_meta($post->ID, "slider_link", true)){
  37.                 echo get_post_meta($post->ID, "slider_link", true);
  38.             } else {echo '----';}
  39.                 break;
  40.         case "thumbnail":
  41.                 $thumb_url = get_post_meta($post->ID, "slider_pic", true);
  42.                 //$ds_image = vt_resize( '',$ds_thumb , 95, 41, true );
  43.                 echo '<img src="'.$thumb_url.'" width="50" height="50" alt="" />';
  44.                 break;
  45.         default :
  46.             break;
  47.     }
  48. }
  49. /******slider*******/
  50. $slider_boxinfo = array('title' => '幻灯片设置', 'id'=>'sliderbox', 'page'=>array('slider_type'), 'context'=>'normal', 'priority'=>'low', 'callback'=>'');
  51. $slider_metas[] = array(
  52.     'name' => '链接',
  53.     'desc' => '',
  54.     'id' => 'slider_link',
  55.     'std'=>'',
  56.     'type' => 'text'
  57. );
  58. $slider_metas[] = array(
  59.     'name' => '图片',
  60.     'desc' => '',
  61.     'std'=>'',
  62.     'button_label'=>'upload',
  63.     'id' => 'slider_pic',
  64.     'type' => 'upload'
  65. );
  66. $ashuwp_slider = new ashuwp_postmeta_feild($slider_metas$slider_boxinfo);
  67. ?>

在主题跟目录找到function.php文件,把下面的代码放进去,记住Framework框架一定要在前面。

  1. //framework框架
  2. require get_template_directory() . '/inc/framework/ashuwp_framework_core.php';
  3. // 幻灯片
  4. require get_template_directory() . '/inc/functions/feng_slider.php';

注意:/inc/framework/ashuwp_framework_core.php;  路径和inc/functions/feng_slider.php路径和文件名称替换成你自己修改过的,我的这个路径是自己修改的!

如果以上步骤都操作正确的话,进入后台就可以看到你的幻灯片这个自定义板块了,先添加几个内容进去,等一下可以方便调试!

既然后台添加完了,现在要着手解决的是怎么把这些你添加的内容显示在前端首页!

在主题的任意位置新建一个PHP文件,把以下代码添加到文件里保存:展开

  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="form_sliders" id="slider">
  11.     <ul>
  12.         <?php
  13.         while(have_posts()): the_post();
  14.             $slider_pic = get_post_meta($post->ID,'slider_pic',true);
  15.             $slider_link = get_post_meta($post->ID,'slider_link',true);
  16.         ?>
  17.         <li class="slider-item" onMouseOut="this.className='slider-item'" onMouseOver="this.className='slider-item-m'">
  18.             <a href="<?php echo $slider_link; ?>"><img src="<?php echo $slider_pic; ?>" alt="<?php the_title(); ?>" /><span class="slider-title"><?php the_title(); ?></span></a>
  19.             <a href="javascript:void(0);" class="unslider-arrow04 prev"><i id="al" class="arrow yao yao-zuojiantou"></i></a>
  20.             <a href="javascript:void(0);" class="unslider-arrow04 next"><i id="ar" class="arrow yao yao-youjiantou"></i></a>
  21.         </li>
  22.         <?php endwhile; ?>
  23.     </ul>
  24. </div>
  25. <?php endif; wp_reset_query(); ?>
  26. <script>
  27. $(document).ready(function(e) {
  28.     var unslider04 = $('#slider').unslider({
  29.         dots: true,
  30.     }),
  31.     data04 = unslider04.data('unslider');
  32.     $('.unslider-arrow04').click(function() {
  33.         var fn = this.className.split(' ')[1];
  34.         data04[fn]();
  35.     });
  36. });
  37. </script>

找到主题根目录下的index.php文件,在适当的位置加入以下代码!

  1. <?php get_template_part( 'inc/slider' ); ?>

主题代码里面的inc/slider路径是你刚刚新建文件的路径,我这边新建的文件名是slider,且这个文件在inc的目录下!

如果你要在后台添加一个开关的话代码是:

  1. <?php if (get_option('cx_slider') == 'true') { ?><?php get_template_part( 'inc/slider' ); ?><?php } ?>

当然这段代码就要根据自己主题的后台代码去更改了,如果没有完全可以忽略!

下面就是添加JS文件了,首先你的主题要引用jquery库,不管你用什么方式,反正一定要有。

然后下载本页最后的JS文件添加到主题的js目录里去。

打开function.php文件,添加一下代码:

  1. if (is_home() || is_front_page()) {
  2.     wp_enqueue_script( 'unslider', get_template_directory_uri() . '/js/unslider.min.js', array(), '1.0.0', false);
  3. }

接下来就是css样式了,这种东西每个人的需求不同,所以我把我的CSS样式发出来提供大家参考!

  1. /* 幻灯片 */
  2. .form_sliders{
  3.     positionrelative;
  4.     overflowhidden;
  5.     width:99.9%;
  6.     max-height:300px;
  7.     margin:10px 0 0 0;
  8. }
  9. .form_sliders .dots{
  10.     position:absolute;
  11.     left:0;
  12.     rightright:0;
  13.     bottombottom:0;
  14.     text-aligncenter;
  15.     z-index:3;
  16. }
  17. .form_sliders .dots li{
  18.     display:inline-block;
  19.     width:10px;
  20.     height:8px;
  21.     margin:0 4px;
  22.     text-indent:-999em;
  23.     background:#fff;
  24.     border-radius:6px;
  25.     cursor:pointer;
  26.     opacity:.8;
  27.     -webkit-transition:background .5s,opacity .5s;
  28.     -moz-transition:background .5s,opacity .5s;
  29.     transition:background .5s,opacity .5s
  30. }
  31. .form_sliders .dots li.active{
  32.     background:#fff;
  33.     width:26px;
  34.     opacity:1;
  35. }
  36. .slider-item {
  37.     positionrelative;
  38.     overflowhidden;
  39. }
  40. .slider-item img {
  41.     width:100%;
  42.     max-height:300px;
  43.     border:1px solid #ddd;
  44.     border-radius:2px;
  45.     overflowhidden;
  46. }
  47. .slider-item .arrow{
  48.     display:none;
  49. }
  50. .slider-item-m {
  51.     positionrelative;
  52.     overflowhidden;
  53. }
  54. .slider-item-m img {
  55.     width:100%;
  56.     max-height:300px;
  57.     border:1px solid #ddd;
  58.     border-radius:2px;
  59.     overflowhidden;
  60. }
  61. .slider-item-m .arrow{
  62.     position:absolute;
  63.     top: 50%;
  64.     margin-top: -18px;
  65.     border:none;
  66.     display:black;
  67.     background: rgba(255,255,255,0.5);
  68.     padding:8px 12px;
  69.     border-radius:50%;
  70.     color:#1A1A1A;
  71.     z-index: 2;
  72. }
  73. .slider-item-m #al{
  74.     left:15px;
  75. }
  76. .slider-item-m #ar{
  77.     rightright:15px;
  78. }
  79. .slider-title {
  80.     positionabsolute;
  81.     left1px;
  82.     top1px;
  83.     padding5px 10px;
  84.     text-align:left;
  85.     color#fff;
  86.     background: rgba(51,51,51,0.5);
  87.     overflowhidden;
  88. }

最后,现在刷新你网站的首页,应该就有幻灯片了,至于效果就看看我首页的幻灯片效果吧!

提取码:seku

  • 本文为原创文章,版权归所有。欢迎分享本文,转载请保留出处!
  • 给我留言

    评论列表 (有 213 次浏览 和 12 条评论)
    1. 回复 青山

      把上篇文章和下篇文章放到同一行,更美观,左右各一个

      • 回复 锋言锋语管理员

        @青山 好,明天改!

    2. 回复 张波博客

      幻灯一装上,显示大气点,

      • 回复 锋言锋语管理员

        @张波博客 各有所爱,知更鸟的幻灯片就很好看,他的后台操作更简单点!

    3. 回复 今日新闻

      文章不错支持一下吧

    4. 回复 去看你博客

      非常好看的幻灯片,好喜欢

      • 回复 锋言锋语管理员

        @去看你博客 你主题的幻灯片比我的好看!

    5. 回复 wordpress建站吧

      之前用过一个非常好用的幻灯片代码模板,非常好用兼容性好,

      • 回复 锋言锋语管理员

        @wordpress建站吧 这个幻灯片配合我的后台也非常好用的!

    6. 回复 绵阳楼盘

      感谢分享代码

    7. 回复 张波博客

      正如你所说,首页幻灯真的是可有可无的东西。

      • 回复 锋言锋语管理员

        @张波博客 食之无味,弃之可惜也!