Web前端: 如何为你的wordpress主题添加幻灯片展示

2011年9月19日星期一

如何为你的wordpress主题添加幻灯片展示

我们经常会看到一些网站上漂亮的幻灯片展示模块，之前我们介绍过5款WordPress推荐文章幻灯片插件，而本文里面，则通过详细的教程告诉你如何为你的博客添加一个基于SmoothGallery 2.0的幻灯片展示模块。

cwc smoothgallery 如何为你的wordpress主题添加幻灯片展示

我们需要准备什么？

在开始之前我们需要先下载 SmoothGallery 2.0

1. 将所需文件放到合适的地方

解压下载到的smoothgallery
将解压得到的CSS文件夹复制到wordpress目录wp-content/themes/your_theme_name
将scripts文件夹复制到wp-content/themes/your_theme_name

一旦我们完成这一步，我们就有了在博客上运行SmoothGallery的所需效果代码文件。

2. 在header部份添加调用代码

在博客主模板代码的Header部分添加CSS和script文件的连接，以便在博客页面进行调用

将以下几行代码添加到主模板代码的Header部分：

<!–Css SmoothGallery–>
<link rel=”stylesheet” href=”<?php bloginfo(’template_url’); ?>/css/jd.gallery.css” type=”text/css” media=”screen”/>
<!–JS Mootools–>
<script type=”text/javascript” src=”<?php bloginfo(’template_url’); ?>/scripts/mootools.v1.11.js”></script>
<!–JS SmoothGallery–>
<script type=”text/javascript” src=”<?php bloginfo(’template_url’); ?>/scripts/jd.gallery.js”></script>

当这一步完成时，你就已经可以在博客主题中使用SmoothGallery了。

3. 新建一个Gallery.php

在你的主题目录中新建一个文件gallery.php，这个文件会帮你生成展示gallery的html代码。

在开始这一步之前，应该认识到smoothgallery模块的结构。


<div class=”imageElement”>
<h3>Item Title</h3>
<p>Item Description</p>
<a href=”Link to Item ” title=”open image” class=”open”></a>
<img src=”Image of item” class=”full” alt=”Item Title” />
<img src=”Thumbmail of item” class=”thumbnail” alt=”thumbnail of Item Title” />
</div>

gallery.php文件包括两部分：

(1). 初始化SmoothGallery Script (JS)

(2). 为gally生成html/php代码

你可以在这里here下载到gallery.php需要这段代码，将代码全部保存到一个新建txt文档中，再保存为gallery.php就可以了。

<!– Initialization of SmoothGallery–>
<script type=”text/javascript”>
function startGallery() {
var myGallery = new gallery($(’myGallery’),
{timed: true});}
window.addEvent(’domready’,startGallery);
</script>
<!– Creation of the html for the gallery –>
<div class=”content”>
<div id=”myGallery”>
<!–
Get the 5 lasts posts of category which ID is 3
(to show the recent post use query_posts(’showposts=5′);)
–>
<?php query_posts(’showposts=5&cat=3′);?
<?php while (have_posts()) : the_post(); ?>
<!–get the custom fields gallery_image
(fields which contains the link to the image to show in the gallery)
–>
<?php $values = get_post_custom_values(”gallery_image”);?>
<!– Verify if you set the custom field gallery_image for the post –>
<?php if(isset($values[0]))
{?>
<!–define a gallery element–>
<div class=”imageElement”>
<!–post’s title to show for this element–>
<h3><?php the_title(); ?></h3>
<!–post’s excerpt to show for this element–>
<?php the_excerpt(); ?>
<!–Link to the full post–>
<a href=”<?php the_permalink() ?>” title=”Read more” class=”open”></a>
<!– Define the image for the gallery –>
<img src=”<?php echo $values[0]; ?>” class=”full” alt=”<?php the_title(); ?>”/>
<!– Define the thumbnail for the gallery –>
<img src=”<?php echo $values[0]; ?>” class=”thumbnail” alt=”<?php the_title(); ?>”/>
</div>
<?php }?>
<?php endwhile; ?>
</div>
</div>

4. 将gallery放到你的主题中

把<?php include (’gallery.php’); ?>放入你想添加的位置。当你完成这一步时，你的gallery就已经可以工作了。

要使你的gally运转起来，你需要在新建一个名为 gallery_image的自定义字段，字段值即为需要展示的图片链接，在wordpress中推荐用相对地址，比如你的图片地址为 http://www.yoursite.com/wp-content/uploads/2008/08/artile，只需要填wp-content /uploads/2008/08/artile就可以了。

最后一步（不是必须）：自定义gallery的具体显示效果。

打开文件wp-content/themes/your_theme_name/css/jd.gallery.css，在这里修改gallery的宽和高。（通过修改jd.gallery.css完全对这个slideshow根据自己的主题进行个性化。^_^）

#myGallery, #myGallerySet, #flickrGallery
{
width: 590px;
height: 250px;
z-index:5;
border: 1px solid #000;
}

默认的字号对于中文太小了，可以调整slideshow下方信息栏的高度及文字的字号，只需要修改

.jdGallery .slideInfoZone（滑动信息栏高度、颜色等参数）.jdGallery .slideInfoZone h2（信息栏内标题样式）

.jdGallery .slideInfoZone p（信息栏文本样式）

你还可以修改wp-content/themes/your_theme_name/scripts/jd.gallery.js来改变gallery的展示效果（Smooth Gallery提供了多种不同的显示效果，你可以根据需要进行修改）

更多定制信息请看Smooth Gallery Website

英文原文: How to : Integrate a slideshow in your wordpress theme | Catswhocode
中文译文: 为你的wordpress主题整合一个滑动展示模块 | Sundyme

来源于如何为你的wordpress主题添加幻灯片展示 | 帕兰映像

Web前端