WEB主題公園
WordPress原創(chuàng)主題，高端網(wǎng)站模板建站，網(wǎng)站模板建站資源以及開發(fā)知識分享，盡在WEB主題公園
WEB主題公園致力于開發(fā)適合中國人習慣的中文WordPress網(wǎng)站模板，并提供全程視頻教程，讓您能夠輕松的使用網(wǎng)站模板建立好自己的網(wǎng)站！
加強wordpress原生相冊gallery
自從wordpress2.5出現(xiàn)了wordpress的原生相冊，并且能夠通過短代碼發(fā)送以后，wordpress 3.1的媒體更新更是讓原生相冊的操作相當簡單，這樣簡單易用的功能小編注意到大部分的主題并沒有利用到，實在可惜。
wordpress的原生相冊操作可以說是非常簡單易懂，并且方便，相比nextgen-gallery，雖然功能上沒有那么復雜，但是總體來說，還是非常好用的，比如說，我們利用wordpress原生相冊，創(chuàng)建一個可以隨時被插入文章的滑塊，不僅操作簡單，并且修改方便。
原生相冊的最大優(yōu)點是和文章編輯同步進行的，并且并不需要額外的代碼來實現(xiàn)，相冊即是文章，文章包含相冊，這樣，我們需要修改的時候也可以非常方便的找到他們進行修改，操作上wordpress3.1更新的新的媒體庫就更不用說了，自由拖動上傳，自由拖動上傳位置，可視化操作多，需要填寫的地方少，所以優(yōu)勢也就非常明顯了，如下圖，是《創(chuàng)意視差》所輸出的原生相冊滑塊，可以點擊這里去預覽相冊的顯示：
下面我們就來介紹一下，如何美化原生相冊，讓你卸載所有的相冊插件吧！
關閉默認的gallery樣式
首先，如果我們輸出一個相冊，wordpress默認是會自己發(fā)送一段css在正文列表中，以控制相冊的樣式，這段樣式代碼很討厭，不僅會影響相冊樣式，還會在截取到列表上作為摘要時出現(xiàn)，所以我們要做的第一件事情就是關閉默認的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） 里面有一個循環(huán)，輸出你的圖片（dl? dt）
這樣，我們就能很清晰的使用css對他們進行控制了
控制循環(huán)單體外層容器 （dl）? 可以用 類? .? gallery dl{? ... }??? 來控制，這樣以此類推，即可控制所有元素。
如果你想要使用js，那么可以利用父容器的類? gallery，將他變成滑塊容器，也是非常簡單的。
gallery輸出到loop（循環(huán)、文章列表）中
循環(huán)中也可以輸出你的相冊，那會讓你的循環(huán)豐富多彩，如下代碼判斷是否有相冊在文章中，如果有則輸出，如果沒有則不輸出。
// 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效果會讓你的網(wǎng)站酷炫好看，下面將會教你如何添加lightbox到你的相冊：
安裝一個lightbox可以實現(xiàn)這樣的效果，一般來說，lightbox會吧所有post、uploads的圖片作為對象，所以安裝即可，如果你想要用自己的代碼，下面也可以實現(xiàn)：
下載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>現(xiàn)在你會了嗎？ 如果你不會自己寫css樣式，我這里可以提供一組css代碼給你，粘貼到style.css中即可，他們會像下圖顯示：
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; }
好了，現(xiàn)在你對wordpress的原生相冊有了了解吧~ 希望你能做出漂亮的屬于自己獨特的相冊！如未標明出處，所有文章均為WEB主題公園原創(chuàng)，如需轉載，請附上原文地址，感謝您的支持和關注。
本文地址:http://www.dengyin90.cn/jqwordpressysxcgallery.html
推薦閱讀
- 2016年9月28日
- 2018年11月14日
- 2015年9月11日
- 2015年8月25日
- 2025年12月11日
- 2023年3月22日
- 2015年3月23日
- 2016年8月27日
- 2013年10月15日
