原文链接：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

· Arthemia

refindweb现在就是用的这款主题，根据个人喜好对其进行了一些改动，如果大家喜欢refindweb现在的样子，可以和我联系，愿意和大家分享，具体使用方法见这里。主题作者最近推出了Arthemia的付费升级版Arthemia Premium，整体效果和Arthemia 相似，不过增强了细节。

详细信息：Visit Info 预览： Visit Demo

· Linoluna

和Arthemia 同出于设计师Michael Jubel Hutagalung之手，简洁、功能丰富，这样的免费wordpress主题确实不错。

详细信息：Visit Info 预览： Visit Demo

· Indomagz 2.0 Premium WordPress Theme

详细信息：Visit Info 预览：Visit Demo

· Mimbo Magazine

详细信息：Visit Info 预览：Visit Demo

· The Morning After

详细信息：Visit Info 预览： Visit Demo

· WP Magazine Theme

详细信息：Visit Info 预览: Visit Demo

· Wynton Magazine

详细信息：Visit Info 预览： Visit Demo

· Thunderbolt

详细信息：Visit Info 预览： Visit Demo [Switch manually]

· Grid Focus

详细信息： Visit Info 预览：Visit Demo

· Monochrome Gallery

详细信息： Visit Info 预览： Visit Demo

· Upstart Blogger Underscore

详细信息： Visit Info 预览： Visit Demo

· PressBox

详细信息： Visit Info 预览： Visit Demo

· Futurosity EOS

详细信息：Visit Info 预览： Visit Demo

· Trevilian Way

详细信息：Visit Info 预览： Visit Demo

Magazine Style

· Purple Fever

详细信息：Visit Info 预览： Visit Demo

· Jello Wala Mello WordPress Theme

详细信息：Visit Info 预览： Visit Demo

· Massive News by WPElements

详细信息：Visit Info 预览： Visit Demo

· WPFreemium

详细信息：Visit Info 预览： Visit Demo

· TAU

详细信息：Visit Info 预览： Visit Demo

· WP Gold

详细信息：Visit Info 预览：Visit Demo

· Revolution-X

详细信息：Visit Info 预览： Visit Demo

· Ultimate Baseball

详细信息：Visit Info 预览： Visit Demo

· Options WordPress 1.2

详细信息：Visit Info 预览：Visit Demo

· 30April

详细信息：Visit Info 预览; Visit Demo

· Shiva

详细信息：Visit Info 预览：Visit Demo

· OpenBook

详细信息：Visit Info 预览：Visit Demo

· Branford Magazine

详细信息：Visit Info 预览：Visit Demo

· Magadine 1.2

详细信息：Visit Info 预览：Visit Demo

· Corporate WordPress Theme

详细信息:Visit Info 预览: Visit Demo

· Smooth News Magazine Theme

详细信息:Visit Info 预览：Visit Demo

3 Sidebars

BizFresh

详细信息：Visit Info 预览：Visit Demo

· Biru 2.0

详细信息：Visit Info 预览： Visit Demo

· WP Premium Free

详细信息：Visit Info 预览：Visit Demo

· Langit

详细信息：Visit Info 预览： Visit Demo

· Black Red Theme

详细信息：Visit Info 预览：Visit Demo

· BlueGrey theme

详细信息：Visit Info 预览：Visit Demo

· BlueMin Theme

详细信息：Visit Info 预览： Visit Demo

· GreenW Theme

详细信息：Visit Info 预览：Visit Demo

· Brown Magic Theme

详细信息：Visit Info 预览: Visit Demo

· W2Black Theme

详细信息：Visit Info 预览：Visit Demo

· The Studio

详细信息:Visit Info 预览：Visit Demo

· The Box

详细信息：Visit Info 预览： Visit Demo

· Tamodachi

详细信息：Visit Info 预览： Visit Demo

· Zoxengen

详细信息：Visit Info 预览:Visit Demo

2 Sidebars

· Evolution WordPress Theme

详细信息：Visit Info 预览： Visit Demo

· Timeline Digest Theme

详细信息：Visit Info 预览： Visit Demo

· BoxTube

详细信息：Visit Info 预览：Visit Demo

]]> http://www.refindweb.com/2008/08/nice-free-wordpress-cms-theme.html/feed 5