为WordPress主题增加幻灯片功能

最后更新于 2012 年 6 月 25 日

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

先看看这款主题的样子

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

示例主题下载

修改前：[download id=23]

增加幻灯片[完成版]：[download id=24]

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

幻灯片图片（1000×165像素）：[download id=25]

这两个都是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. 创建幻灯片，然后刷新首页，查看效果。