注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

天边云E家 shaoruisky

IT博文共享,知识的海洋

 
 
 

日志

 
 

wordpress如何添加幻灯广告  

2014-02-24 18:35:35|  分类: wordpress |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

如何添加幻灯片banner 广告
在开始之前我们需要先下载 SmoothGallery 2.0
1) 将所需文件放到合适的地方
解压下载到的smoothgallery
将解压得到的css 文件夹复制到wordpress 目录wp-content/themes/your_theme_name
将scripts 文件夹复制到wp-content/themes/your_theme_name
2) 在 header.php 里添加:
<script type="text/javascript" src="<?php
bloginfo('template_url'); ?>/huandeng/scripts/mootools.v1.11.js"></script>
<!–<!–JS SmoothGallery–>–>
<script type="text/javascript" src="<?php
bloginfo('template_url'); ?>/huandeng/scripts/jd.gallery.js"></script>
<?php /*?><?php wp_head();?><?php */?>去掉此行,不然不能实现。不知道什么原因?
wp_head();里面是其他插件里面的样式或者是其他调用代码,如果去掉此行的话将无法显
示了,所以只能把他们所需要的代码直接写进主题的样式模板内进行统一调用。可以解决
问题。
3) 新建一个文件huandeng.php
添加代码:
<!– Initialization of SmoothGallery–>
<script type="text/javascript">
function startGallery() {
var myGallery = new gallery($('myGallery'), {
timed: false
});
}
window.addEvent('domready',startGallery);
</script>
<!– Creation of the html for the gallery –>
<div class="content">
<div id="myGallery">
<div class="imageElement">
<h3>Item 1 Title</h3>
<p>Item 1 Description</p>
<a href="#" title="open image" class="open"></a>
<img src=' <?php
bloginfo('template_url'); ?>/huandeng/images/brugges2006/1.jpg' class="full" />
<img src='<?php
bloginfo('template_url'); ?>/huandeng/images/brugges2006/1-mini.jpg' class="thumbnail" />

</div>
<div class="imageElement">
<h3>Item 2 Title</h3>
<p>Item 2 Description</p>
<a href="#" title="open image" class="open"></a>
<img src=" <?php
bloginfo('template_url'); ?>/huandeng/images/brugges2006/2.jpg" class="full" />
<img src="<?php
bloginfo('template_url'); ?>/huandeng/images/brugges2006/2-mini.jpg" class="thumbnail" />
</div>
<div class="imageElement">
<h3>Item 3 Title</h3>
<p>Item 3 Description</p>
<a href="#" title="open image" class="open"></a>
<img src="<?php
bloginfo('template_url'); ?>/huandeng/images/brugges2006/3.jpg" class="full" />
<img src="<?php
bloginfo('template_url'); ?>/huandeng/images/brugges2006/3-mini.jpg" class="thumbnail" />
</div>
<div class="imageElement">
<h3>Item 4 Title</h3>
<p>Item 4 Description</p>
<a href="#" title="open image" class="open"></a>
<img src="<?php
bloginfo('template_url'); ?>/huandeng/images/brugges2006/4.jpg" class="full" />
<img src="<?php
bloginfo('template_url'); ?>/huandeng/images/brugges2006/4-mini.jpg" class="thumbnail" />
</div>
<div class="imageElement">
<h3>Item 5 Title</h3>
<p>Item 5 Description</p>
<a href="#" title="open image" class="open"></a>
<img src="/huandeng/images/brugges2006/5.jpg" class="full" />
<img src="/huandeng/images/brugges2006/5-mini.jpg" class="thumbnail" />
</div>
<div class="imageElement">
<h3>Item 6 Title</h3>
<p>Item 6 Description</p>
<a href="#" title="open image" class="open"></a>
<img src="<?php
bloginfo('template_url'); ?>/huandeng/images/brugges2006/6.jpg" class="full" />
<img src="<?php
bloginfo('template_url'); ?>/huandeng/images/brugges2006/6-mini.jpg" class="thumbnail" />
</div>

<div class="imageElement">
<h3>Item 7 Title</h3>
<p>Item 7 Description</p>
<a href="#" title="open image" class="open"></a>
<img src="<?php
bloginfo('template_url'); ?>/huandeng/images/brugges2006/7.jpg" class="full" />
<img src="<?php
bloginfo('template_url'); ?>/huandeng/images/brugges2006/7-mini.jpg" class="thumbnail" />
</div>
<div class="imageElement">
<h3>Item 8 Title</h3>
<p>Item 8 Description</p>
<a href="#" title="open image" class="open"></a>
<img rc="<?php
bloginfo('template_url'); ?>/huandeng/images/brugges2006/8.jpg" class="full" />
<img src="<?php
bloginfo('template_url'); ?>/huandeng/images/brugges2006/8-mini.jpg" class="thumbnail" />
</div>
</div>
</div>
</div>
4) 在需要引用的地方添加以下代码:(不知道什么原因调用huandeng.php 代码后,此区
域将脱离文件流,而且没有办法让它归位,只能将其直接写入index.php 文件内部)
<?php include(TEMPLATEPATH.'/huandeng.php'); ?>
这里面有一个
5) 自定义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(信息栏文本样式)
*上滑动栏宽度;
.jdGallery .carousel
{
position: absolute;
width: 100%;
margin: 0px;
left: 0;
top: 0;
height: 90px;/*上滑动栏宽度;*/
background: #333;
color: #fff;
text-indent: 0;
overflow: hidden;
}
你还可以修改wp-content/themes/your_theme_name/scripts/jd.gallery.js 来改变gallery 的
展示效果(Smooth Gallery 提供了多种不同的显示效果,你可以根据需要进行修改)

  评论这张
 
阅读(229)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017