我们经常会看到一些网站上漂亮的幻灯片展示模块,之前我们介绍过5款WordPress推荐文章幻灯片插件,而本文里面,则通过详细的教程告诉你如何为你的博客添加一个基于SmoothGallery 2.0的幻灯片展示模块。
我们需要准备什么?
在开始之前我们需要先下载 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模块的结构。
gallery.php文件包括两部分: <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>
(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主题添加幻灯片展示