用WordPress建立个人博客一文中,将WordPress自带的主题Twentyeleven做了一些小修改,定制化成有自己特色的主题。本文将描述如何为Twentyeleven添加幻灯片功能,并带有简单的后台管理功能。

先看看这款主题的样子

Twentyeleven修改后的样子

如果在网站头部和菜单之间再加一个幻灯片,就失去了这款主题简洁的优势,索性直接将头部改成幻灯片,让网站Logo和搜索框悬浮在幻灯片上面。

示例主题下载

修改前:TwentyEleven Child Theme 已下载 974 次

增加幻灯片[完成版]:TwentyEleven With Slideshow 已下载 2854 次

PS. 该主题已经更新为简化版,移植到自己主题中的简单步骤见下文引用文字

幻灯片图片(1000×165像素):幻灯片图片1000plus165像素 已下载 835 次

这两个都是TwentyEleven的Child Theme,安装到后台激活主题即可。

如果你需要将幻灯片功能移植到自己的主题中

1. 将压缩包中的slideshow文件夹拷贝到主题根目录

2. 在主题的functions.php中添加代码
include "slideshow/slider-init.php";

3. 在需要展示幻灯片的地方,例如header.php中,添加代码
include 'slideshow/slider.php';

That's all!

创建幻灯片

安装主题后,后台会出现一个新的菜单项叫做“幻灯片”,点击“写文章”创建一个幻灯片,文章的特色图像就是幻灯片的图片。每篇文章设置一个幻灯片,假设我们要设置三幅图片切换,那么创建三篇“幻灯片”类型的文章。

创建幻灯片

如果操作成功,那么刷新首页就可以看到幻灯片切换效果了。

幻灯片切换

修改步骤概述

  1. 在主题的functions.php中注册新的post type,就起名叫“幻灯片”,经过这一步,后台会出现一个菜单项叫幻灯片,使用方法与编辑文章类似。
  2. 幻灯片用Nivo Slider,之前收集了17款Nivo Slider皮肤,这下派上用场了,选择一款皮肤,将要用到的js文件拷贝到主题的js目录下(创建一个js目录),将用到的图片拷贝到主题的images目录下,将幻灯片的CSS拷贝到主题的style.css中。
  3. 主题目录下创建一个文件叫slider.php,这个文件产生Nivo Slider需要的HTML结构,它会读取用户创建的幻灯片文章,输出幻灯片的HTML代码,并初始化幻灯片。
  4. 修改主题的header.php,在适当位置引入slider.php文件。
  5. 仪表盘->幻灯片下 创建三篇文章,文章中设置特色图像,特色图像就是幻灯片中显示的图片。保存,大功告成。

修改步骤-代码版

1. 主题的functions.php中添加如下代码,完成两件事,第一、注册幻灯片用到的图片尺寸;第二、增加幻灯片类型的文章支持。

//设置主题
add_action( 'after_setup_theme', 'my_setup' );
 
if ( ! function_exists( 'my_setup' ) ):
 
function my_setup() {
 
    // This theme uses post thumbnails
    if ( function_exists( 'add_theme_support' ) ) { // Added in 2.9
        add_theme_support( 'post-thumbnails' );
        add_image_size( 'slider-post-thumbnail', 1000, 165, true ); // Slider Thumbnail
    }
}
endif;
 
//register post types
/* Slider */
function my_post_type_slider() {
    register_post_type( 'slider',
                array(
                'label' => __('幻灯片'),
                'singular_label' => __('幻灯片', 'twentyeleven'),
                '_builtin' => false,
                'exclude_from_search' => true, // Exclude from Search Results
                'capability_type' => 'page',
                'public' => true,
                'show_ui' => true,
                'show_in_nav_menus' => false,
                'rewrite' => array(
                    'slug' => 'slide-view',
                    'with_front' => FALSE,
                ),
                'query_var' => "slide", // This goes to the WP_Query schema
                'menu_icon' => get_bloginfo('stylesheet_directory') . '/includes/images/icon_slides.png',
                'supports' => array(
                        'title',
                        'custom-fields',
                        'editor',
                        'thumbnail')
                    )
                );
}
 
add_action('init', 'my_post_type_slider');

2. 将jquery.nivo.slider.pack.js拷贝到主题的js目录下,将slider皮肤图片拷贝到主题的images目录下,将下面的css拷贝到主题的style.css中。

/* =Nivo Slider
----------------------------------------------- */
.theme-theme1210 {
	height:165px;
	width:1000px;
	overflow:hidden;
	position:absolute;
	top:0;
	left:0;
	z-index:-1;
}
.theme-theme1210 .nivoSlider {
	position:relative;
	width:1000px;
	height:165px;
}
.theme-theme1210 .nivoSlider img {
	position:absolute;
	top:0px;
	left:0px;
	display:none;
}
.theme-theme1210 .nivoSlider a {
	border:0;
	display:block;
}
.theme-theme1210 .nivoSlider a.nivo-imageLink {
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	border:0;
	padding:0;
	margin:0;
	z-index:60;
	display:none;
}
.theme-theme1210 .nivo-slice {
	display:block;
	position:absolute;
	z-index:50;
	height:100%;
}
.theme-theme1210 .nivo-box {
	display:block;
	position:absolute;
	z-index:5;
}
.theme-theme1210 .nivoSlider a {
	border:0;
	display:block;
}

.theme-theme1210 .nivo-controlNav {
    position:absolute;
	width:940px;
	height:11px;
	left:0;
	bottom:-29px;
	text-align:center;
}
.theme-theme1210 .nivo-controlNav a {
    position:relative;
	z-index:99;
	cursor:pointer;
	display:inline-block !important;
	width:12px;
	height:11px;
	border-radius:6px;
	background:url('images/bullets.png') no-repeat 100% 0;
	margin:0 1px;
	text-decoration:none;
	line-height:11px;
	font-size:0;
	color:#dbdbdb;
}
.theme-theme1210 .nivo-controlNav a:hover,
.theme-theme1210 .nivo-controlNav a.active {
	background-position: 0 0;
}
.theme-theme1210 .nivo-directionNav a {
	cursor:pointer;
	position:absolute;
	display:block;
	width:66px;
	height:66px;
	text-indent:-9999px;
	border:0;
	top:50%;
	margin-top:-33px;
	background:url('images/direction_nav.png') no-repeat 0 0;
	z-index:99;
}
.theme-theme1210 a.nivo-nextNav {
	right:5px;
	background-position:-66px 0;
}
.theme-theme1210 a.nivo-nextNav:hover {
	background-position:-66px -66px;
}
.theme-theme1210 a.nivo-prevNav {
	left:5px;
	background-position:0 0;
}
.theme-theme1210 a.nivo-prevNav:hover {
	background-position:0 -66px;
}
.theme-theme1210 .nivo-controlNav img {
	display:inline; /* Unhide the thumbnails */
	position:relative;
	margin-right:10px;
	width:120px;
	height:auto;
}

.theme-theme1210 .nivo-controlNav img {
	display: inline; /* Unhide the thumbnails */
	position: relative;
	width: 127px;
	height: 101px;
	margin: 0;
}
.theme-theme1210 .nivo-caption {
	position:absolute;
	left:0px;
	bottom:0px;
	color:#fff;
	opacity:0.8; /* Overridden by captionOpacity setting */
	width:100%;
	z-index:89;
}
.theme-theme1210 .nivo-caption .nivo-caption-inner {
	padding:0;
	margin:0;
}
.theme-theme1210  .nivo-html-caption {
    display:none;
}

注意:nivo slider的宽度和高度需要做一定的更改,上面的代码已经改好了,如果使用其他皮肤,请注意尺寸。

3. slider.php的内容

<?php
query_posts("post_type=slider&#038;posts_per_page=-1&#038;post_status=publish");
if( have_posts() ):
?>
<div class="slider-wrapper theme-theme1210">
<div id="slider" class="nivoSlider">
  <?php $posts_counter = 0; ?>
  <?php while ( have_posts() ) : the_post(); $posts_counter++; ?>
  <?php
        $sl_image_url = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'slider-post-thumbnail');
        $tab_title = get_post_custom_values("tab-title");
  ?>
  <?php if(has_post_thumbnail( $the_ID) ){
            echo "<img src='".$sl_image_url[0]."' alt='".$tab_title[0]."' title='#sliderCaption".$posts_counter."' />";
        }
  ?>
  <?php endwhile; ?>
  <?php rewind_posts(); ?>
    </div>
 
    <!-- #slider -->
    <?php $posts_counter = 0; ?>
    <?php while ( have_posts() ) : the_post(); $posts_counter++; ?>
    <?php $custom = get_post_custom($post->ID); ?>
<div id="sliderCaption<?php echo $posts_counter ?>" class="nivo-html-caption">
      <?php the_content(); ?>
    </div>
 
    <?php endwhile; ?>
</div>
 
<!-- .slider-wrapper -->
<script type="text/javascript">
    jQuery(window).load(function() {
        // nivoslider init
        jQuery('#slider').nivoSlider({
            effect: 'fade',
            animSpeed:800,
            pauseTime:3000,
            directionNav:false,
            directionNavHide:false,
            controlNav:false,
            captionOpacity:0.8
        });
    });
</script>
<?php else: ?>
<p style=" position:absolute; top:0; left:0; width:988px;padding:5px; border:2px dashed #99FF00; background:#FFFF99; text-align:center;">访问仪表盘->幻灯片添加幻灯片。为获得最佳展示效果,图片尺寸应为1000×165像素
要禁用幻灯片,编辑主题目录下的header.php,删除代码&lt;?php include 'slider.php'; ?&gt;
 
<?php endif; ?>
<?php wp_reset_query();?>

代码大致做了四件事

  1. 用query_posts()读取post type是slider的post。
  2. 第一个while循环输出slider的图片,最后用rewind_posts()函数将数组指针重新指向第一篇文章
  3. 第二个while循环输出nivo slider的caption,如果你在幻灯片文章中输入了内容,内容就会被用作caption。
  4. 最后用wp_reset_query()函数将主循环复位,因为使用query_posts()会修改主循环数据,主循环应该输出我们的博客文章,而不是幻灯片的文章。我们只是用query_posts()做了一个自定义查询,查询结束后一定要将数据复位。

4. 编辑header.php

找到

<header id="branding" role="banner">
<hgroup>

在后面增加

<?php include 'slider.php'; ?>

5. 创建幻灯片,然后刷新首页,查看效果。

29条留言

  1. 博主好人,收下了

    1. 这篇文章是很久以前的,脚本和方法都已经变了,最好找一些新鲜出炉的文章看看。

      1. 嗯 我看过了 我做了一些修改 只是后台有一些不好看 其他的一切都好用

        1. 其实后台可以用advanced custom fields来做,好看又好用

          1. 我喜欢不用插件的 能尽力不使用插件就不使用

        2. 有些插件确实少用为好,但acf这个插件绝对能让你的生活更美好。

  2. 博主好,这个方法简单易行,唯一遗憾是不支持响应式,能否简单改进呢?是不是要更新js了?

  3. 求救啊~用了直接引入的方式,但是控制按钮点击无效,而且当幻灯片播完一次会出现一段时间的空白然后才再次循环…

    1. 博客更换过代码高亮插件,所以php代码符号有些问题,代码也有点太旧了,WordPress4.1的兼容性不敢保证哦,等我有空更新一下吧,做幻灯片可以用插件的。

      1. 嗯,已经解决了,现在就是控制按钮无法使用,隐藏了。

  4. 完整版,没资源了?

  5. 为了尽量精简代码。我想这样····不好描述,举实例吧。
    一般的插件(代买),必须这种形式(能点击打开)才可以实现幻灯片效果,
    img

    我想问的是,如何让这样形式的也能实现幻灯片效果呢?

    1. 抱歉,我不太明白你的意思。跟点击打开有什么关系?
      幻灯片的实现方法比较多,你想简化代码对吗,那你先说下你用了哪种实现方法?

      1. 看起来是系统把我的html代码给吞了···

        我的意思是:怎么才能实现给“没有添加超链接的图片”增加幻灯片效果

        1. slideshow的图片一定要添加超链接吗?貌似没有这条要求啊?我这篇文章的例子也没给img加a标签啊?

          1. 一般的插件和代码都要求要a标签,好像是说这样才能触发JS。
            您这篇文章有a标签,且没有slideshow。。

            不过咱们实际上是误会了,你说的是首页的slideshow。
            我说 的是文章中图片的一个幻灯片效果···汗

        2. 我想幻灯片跟它在首页header还是文章中没必然联系吧,不然我想我真的不知道你说的什么意思。随便举一个幻灯片脚本的例子,http://responsiveslides.com/,貌似没要求有a标签,不知道你在哪里看文章说必须有a了。幻灯片可以理解为几个div轮番切换位置,既然是div,里面放什么都行,文字图片链接。
          文章中图片的一个幻灯片效果?一张图片用得着幻灯片效果吗?放大或者灯箱效果都说的通,或者是一个gallery的幻灯片效果。

  6. 伸手党感谢博主的幻灯片主题

  7. […] 在文章《为WordPress主题增加幻灯片功能》中提到可以用custom post type制作主题幻灯片功能,一位朋友觉得用custom post type不方便,不能将幻灯片归属到当前网站的分类中,在发布文章时直接将文章推送到幻灯片中展示中更为方便,本文就来介绍实现这种功能的第一种方法,利用post meta box实现。 […]

  8. […] 有时候将不同类型的文件分门别类存储,似乎比年月目录更有意义。例如幻灯片应该存储在slides目录下,下载文件应该存储在downloads文件夹下。就说幻灯片slideshow,我比较喜欢用自定义文章类型(Custom Post Type)实现,有些幻灯片脚本比较个性,不支持绝对路径,必须用相对路径,然后用base参数设置相对于哪个文件夹,这样幻灯片必须存储在某个特定的文件夹中,年月形式显然不满足要求。所以,我们需要条件化的设置上传目录。 […]

  9. 很赞的实现方法,唯一的缺憾是幻灯片文章不能归属到当前的网站分类中,或者是在发布文章时候直接设置为幻灯片

    1. 你说的没错,用custom post type实现不了。但可以用post-formats实现
      add_theme_support( ‘post-formats’, array( ‘slide’ ) );
      发布文章时将文章设置成slide类型,就自动加到幻灯片中

      或者用custom field,比如加一个featured字段,设置为true的文章就会加到幻灯片

      个人感觉幻灯片不会显示太多文章,用custom post type管理更方便,而且能设置幻灯片链接到哪篇文章

      1. 代码还是门外汉,求这两种方法的代码解决方案。

        1. 写了第二种方法的代码http://www.solagirl.net/wordpress-slideshow-based-on-post-meta-box.html
          第一种方法中犯了个错误,post-formats支持的格式是wordpress规定的,只有aside,gallery,link,image,quote,status,video,audio,chat。post-formats的初衷是用来展示不同格式的文章的,貌似用在这里不合适。所以实现直接推送文章到幻灯片的功能用post meta box就行了。
          延伸一下,还可以将置顶文章推送到幻灯片中。

      2. 怎么设置幻灯片链接到那一片文章

        1. 你可以在description里写个learn more之类的链接啊
          要么就用custom field写链接,再在slider模版里用get_post_meta调用

评论功能已关闭