加强wordpress原生相册gallery

WordPress技术博客wp应用技术

自从wordpress2.5出现了wordpress的原生相册,并且能够通过短代码发送以后,wordpress 3.1的媒体更新更是让原生相册的操作相当简单,这样简单易用的功能小编注意到大部分的主题并没有利用到,实在可惜。

wordpress的原生相册操作可以说是非常简单易懂,并且方便,相比nextgen-gallery,虽然功能上没有那么复杂,但是总体来说,还是非常好用的,比如说,我们利用wordpress原生相册,创建一个可以随时被插入文章的滑块,不仅操作简单,并且修改方便。

原生相册的最大优点是和文章编辑同步进行的,并且并不需要额外的代码来实现,相册即是文章,文章包含相册,这样,我们需要修改的时候也可以非常方便的找到他们进行修改,操作上wordpress3.1更新的新的媒体库就更不用说了,自由拖动上传,自由拖动上传位置,可视化操作多,需要填写的地方少,所以优势也就非常明显了,如下图,是《创意视差》所输出的原生相册滑块,可以点击这里去预览相册的显示

wordpress-themepark-gallery-sytle2

下面我们就来介绍一下,如何美化原生相册,让你卸载所有的相册插件吧!

 

关闭默认的gallery样式

首先,如果我们输出一个相册,wordpress默认是会自己发送一段css在正文列表中,以控制相册的样式,这段样式代码很讨厌,不仅会影响相册样式,还会在截取到列表上作为摘要时出现,所以我们要做的第一件事情就是关闭默认的css

将代码加入到你的functions.php中,即可关闭  :

add_filter( ‘use_default_gallery_style’, ‘__return_false’ );

 

gallery输出到文章的结构

如果你想要对gallery增加样式,或者使用jquery将相册变成各种各样的滑块、灯箱等方式,你就一定要弄清楚他的结构:

结构如下:

< div   class=”gallery” >
< dl> < dt>  < img src=”<?php bloginfo(‘template_url’); ?>/images/12.gif” />< /dt> < /dl>
< dl > < dt>  < img src=”<?php bloginfo(‘template_url’); ?>/images/13.gif” />< /dt> < /dl>
< dl > < dt>  < img src=”<?php bloginfo(‘template_url’); ?>/images/134.gif” />< /dt> < /dl>
< /div >

我们可以很清晰的看到这个结构 :     gallery类的容器(div) 里面有一个循环,输出你的图片(dl  dt)

这样,我们就能很清晰的使用css对他们进行控制了

控制循环单体外层容器 (dl)  可以用 类  .  gallery dl{  … }    来控制,这样以此类推,即可控制所有元素。

如果你想要使用js,那么可以利用父容器的类  gallery,将他变成滑块容器,也是非常简单的。

 

gallery输出到loop(循环、文章列表)中

循环中也可以输出你的相册,那会让你的循环丰富多彩,如下代码判断是否有相册在文章中,如果有则输出,如果没有则不输出。

// The WordPress Loop
// The WordPress Loop
<?php if ( have_posts ) : ?>
    <?php while ( have_posts() ) : the_post(); ?>
        <?php if ( 'gallery' == get_post_format( get_the_ID() ) ) : ?>
             <!-- 输出相册 -->
        <?php else : ?>
            <!-- 如果没有相册,输出其他的 -->
        <?php endif; ?>
    <?php endwhile; ?>
<?php else : ?>

<?php endif; ?>

为你的相册添加lightbox弹出效果

如果你的相册是照片墙样式,那么加入一个好看的lightbox效果会让你的网站酷炫好看,下面将会教你如何添加lightbox到你的相册:
安装一个lightbox可以实现这样的效果,一般来说,lightbox会吧所有post、uploads的图片作为对象,所以安装即可,如果你想要用自己的代码,下面也可以实现:

下载lightbox代码:http://leandrovieira.com/projects/jquery/lightbox/
将css文件存放在你的主题中的css文件夹中,将js文件存放在你的主题中的js文件夹,让后将将他们加载到你的主题中:
添加下面的代码到你的functions.php:

wp_enqueue_script( ‘jquery-lightbox’, get_stylesheet_directory_uri() . ‘/js/jquery.lightbox-0.5.min.js’, array( ‘jquery’ ) );
wp_enqueue_style( ‘jquery-lightbox’, get_stylesheet_directory_uri() . ‘/css/jquery.lightbox-0.5.css’ );

最后,在header.php  <head>上面加上如下js代码即可:

<script type="text/javascript">
	jQuery(document).ready(function($) {
		var images_dir = '<?php echo get_stylesheet_directory_uri() . "/images/"; ?>';
		$('.gallery-item a').lightBox({
			imageLoading: images_dir + 'lightbox-ico-loading.gif',
			imageBtnPrev: images_dir + 'lightbox-btn-prev.gif',
			imageBtnNext: images_dir + 'lightbox-btn-next.gif',
			imageBtnClose: images_dir + 'lightbox-btn-close.gif',
			imageBlank: images_dir + 'lightbox-blank.gif'
		});
	});
</script>

现在你会了吗? 如果你不会自己写css样式,我这里可以提供一组css代码给你,粘贴到style.css中即可,他们会像下图显示:
wordpress-themepark-gallery-sytle1

css代码如下:

.gallery { margin: 0 auto 18px; }
.gallery .gallery-item {
	float: left;
	margin-top: 0;
	text-align: center;
	width: 33%;
}
.gallery-columns-2 .gallery-item { width: 50%; }
.gallery-columns-4 .gallery-item { width: 25%; }
.gallery img {
	box-shadow: 0px 0px 4px #999;
	border: 1px solid white;
	padding: 8px;
	background: #f2f2f2;
}
.gallery img:hover {
	background: white;
}
.gallery-columns-2 .attachment-medium {
	max-width: 92%;
	height: auto;
}
.gallery-columns-4 .attachment-thumbnail {
	max-width: 84%;
	height: auto;
}
.gallery .gallery-caption {
	color: #888;
	font-size: 12px;
	margin: 0 0 12px;
}
.gallery dl, .gallery dt { margin: 0; }
.gallery br+br { display: none; }

好了,现在你对wordpress的原生相册有了了解吧~  希望你能做出漂亮的属于自己独特的相册!

上一篇:

下一篇:

文章评论

您好!请登录

取消回复
  1. 尊敬的神 回复

    图片轮播的样式有没?


展开更多