发现网络

想为自己的博客也添加一个向本站首页上的一样的slideshow展示模块吗？其实很简单，只需几步就可以轻松搞定。翻译一篇教程，我就是按照这个教程制作的。

原文链接：How to : Integrate a slideshow in your wordpress theme

slideshow

你可以在本站首页上看到slideshow的实际效果。

需要什么？

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

第一步，将所需文件放到合适的地方。

解压下载到的smoothgallery

将解压得到的css文件夹复制到wordpress目录wp-content/themes/your_theme_name

将scripts文件夹复制到wp-content/themes/your_theme_name

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

第二步：在博客主模板代码的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了

第三步：在你的主题目录中新建一个文件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文件包括两部分：
初始化SmoothGallery Script (JS)

为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>

Fourth step : include the gallery in your theme

第四步：将gallery放到你的主题中

不如在 mimbo 主题中, 你只需要用<?php include (‘gallery.php’); ?>替换
<div class=”feature clearfloat” id=”lead”>
</div><!–END FEATURE–>
之间的内容

当你完成这一步时，你的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