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

我们经常会看到一些网站上漂亮的幻灯片展示模块,之前我们介绍过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模块的结构。


<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主题添加幻灯片展示”的35个回复

  1. Please let me know if you’re looking for a article author for your blog. You have some really good posts and I think I would be a good asset. If you ever want to take some of the load off, I’d absolutely love to write some material for your blog in exchange for a link back to mine. Please shoot me an e-mail if interested. Many thanks!

  2. Hello there, You have done a great job. I will definitely digg it and personally suggest to my friends. I am confident they will be benefited from this website.

  3. Greetings from California! I’m bored to death at work so I decided to check out your site on my iphone during lunch break. I really like the information you present here and can’t wait to take a look when I get home. I’m surprised at how fast your blog loaded on my cell phone .. I’m not even using WIFI, just 3G .. Anyways, fantastic blog!

  4. Excellent way of explaining, and nice post to obtain facts on the topic of my presentation subject matter, which i am going to deliver in school.

  5. Hi there to every one, for the reason that I am in fact eager of reading this blog’s post to be updated daily. It carries fastidious stuff.

  6. If photos of the scene can be taken, it’s a good idea. A few points that could help victims choose the right professional are as follows:. After treatment, you lie in the hospital bed not knowing when you’ll be able to go home.

  7. Ditch the lip balm and provide your lips with a natural blend of jojoba oil, caster sugar and a hint of vanilla extract. Beauty treatments have been existent since time immemorial. The composition is great, with the main focus on the tree.

  8. But there are certain terms and conditions that you need to satisfy to become eligible for these insurances. Consider testimonials from your friends and colleagues to engage a nicely experienced contractor locally. Try to ascertain the level of their experience and qualification in this field.

  9. Another important aspect to consider when you’re getting bikinis online is certainly that most swimwear sites won’t refund your price unless there exists a flaw in the fabric, or if the swimsuit bought harmed during shipment. The talented vocalist’s film domination marks another turning point in Beyonce’s already amazing career, and the R&B crooner has truly come a long way from her musical debut as the centerpiece to the ’90s R&B girl group Destiny’s Child. The Sunrise 689 was carrying 18 crew and 5,200 tonnes of oil when it left Singapore’s Horizon port on October 2, in keeping with the Vietnamese Information Service (VNS).

  10. Very nice post. I just stumbled upon your blog and wanted to mention that I have truly loved browsing your blog posts. After all I’ll be subscribing for your rss feed and I hope you write once more soon!

  11. Learn activities such as a treasure hunt, under the sea circle time, and sea shapes. Windows need cleaning; Roof and gutters need maintaining. The attractiveness of a cleaning business revolves primarily around its relatively low initial investment requirements and minimal learning curve.

  12. Thank you, I have just been looking for information about this subject for a while and yours is the best I’ve discovered so far. But, what about the conclusion? Are you sure in regards to the supply?

发表评论

电子邮件地址不会被公开。 必填项已用*标注