教程:为你的wordpress主题整合一个幻灯图片展示

摘要:我们经常会在一些网站上看到一些漂亮的展示模块,作者Michaël 为我们带来了一篇很棒的教程,参照教程你可以很轻松地为你的博客添加一个基于SmoothGallery 2.0的slideshow。 第一篇译文,不小心把原文作者写成了标题翻译,不知道怎么修改过来,在这里声明一下,原文作者为Michaël。 我们需要什么? 在开始之前我们需要先下载 Smooth ...

我们经常会在一些网站上看到一些漂亮的展示模块,作者Michaël 为我们带来了一篇很棒的教程,参照教程你可以很轻松地为你的博客添加一个基于SmoothGallery 2.0的slideshow。
第一篇译文,不小心把原文作者写成了标题翻译,不知道怎么修改过来,在这里声明一下,原文作者为Michaël。

Smooth Gallery in WordPress

我们需要什么?

在开始之前我们需要先下载 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

来源:http://www.yeeyan.com/articles/view/5414/14437



无觅评论,优化体验,加强品牌价值

无觅相关文章插件,快速提升流量