【演示地址】
http://demo3.yobots.cn/products/iphone-7-ok/
演示的功能有:
- 安装开发型插件Featured Galleries给产品页面添加相册功能;
- 使用商业代码ImageZoom给相册添加幻灯和放大功能;
- 使用开源代码Magnific Popup整合,使第一张图片弹出视频;
- Magnific Popup是一种可以作为万能弹出窗口的一组代码,在此基础上可创建弹出Youku视频等;
- 使用Toolset插件创建自定义文章类型(作为产品中心使用);
安装步骤:
1,安装U-design主题和子主题,TOOLSET插件(Types 和 Views),Breadcrumb NavXT插件,Featured Galleries插件;
2,设置U-design主题:设置标题显示为Title Position 2,取消自带的面包屑显示,将BLOG选项里的RIGHT边栏改为LEFT边栏;
3,复制functions.php里的一段代码,使用Breadcrumb NavXT插件提供的代码,添加到page-title的DIV内;
4,使用Toolset创建products文章类型,并给其添加分类和标签分别为products-cat和products-tag;
5,给自定义的文章类型添加Featured Galleries属性(Featured Galleries默认情况下,仅给文章和页面附加属性,对于TOOLSET创建的products类型并没有自动附加属性),用以下代码添加到functions.php里即可;
//*给products文章类型附加Featured Galleries属性
function add_featured_galleries_to_ctp( $post_types ) {
array_push($post_types, ‘products’);
return $post_types;
}
add_filter(‘fg_post_types’, ‘add_featured_galleries_to_ctp’ );
6,使用Toolset插件View功能,创建产品列表Products list,这里采用简单的li展示左边显示Featured Image,右边显示文章标题和内容;
.yb-products-list {margin-top:20px;}
.yb-products-list li {list-style:none; margin:15px 0; padding-bottom:15px;border-bottom:1px dashed #ccc;}
.yb-products-list li:last-child {border-bottom:none;}
.yb-products-list li img { float:left; padding:3px;border:1px solid #ccc; margin-right:5px;}
.yb-products-list h2 {font-size:14px; font-weight:bold;margin:0 0 5px 0;}
7,复制主题的single.php至子主题下,并改名为single-products.php;
7-1,使用TOOLSET给PRODUCTS添加文章字段brief-desc;
7-2,由于TOOLSET里无法执行PHP代码,而FEATURED GALLERIES目前找不到合适的办法将其PHP写成短代码,所以只好将TOOLSET里brief-desc短代码写入single-products.php内;
1
<?php echo do_shortcode(‘【types field=”brief-desc”】【/types】’); ?>
7-3,将相册功能和视频弹出功能写入single-products.php内;
A,引入IMAGEZOOM的CSS和JS文件;(由于主题引入JQUERY版本过低,需再次引入)
B,引入Magnific Popup的CSS和JS文件;(A已引入,此处不需再引入)
<!–引入IMAGEZOOM的CSS和JS文件 开始–>
<link rel=”stylesheet” href=”http://demo3.yobots.cn/wp-content/themes/udesign-child/css/imagezoom.css” />
<link rel=”stylesheet” href=”http://demo3.yobots.cn/wp-content/themes/udesign-child/css/es-cus.css” />
<script type=”text/javascript” src=”http://demo1.yobots.cn/wp-content/themes/udesign-child/js/jquery-1.8.3.min.js”></script>
<script type=”text/javascript” src=”http://demo3.yobots.cn/wp-content/themes/udesign-child/js/jquery.imagezoom.min.js”></script>
<script type=”text/javascript” src=”http://demo3.yobots.cn/wp-content/themes/udesign-child/js/modernizr.custom.17475.js”></script>
<script type=”text/javascript” src=”http://demo3.yobots.cn/wp-content/themes/udesign-child/js/jquery.elastislide.js”></script>
<!–引入IMAGEZOOM的CSS和JS文件 结束–>
<!–引入Magnific Popup的文件 开始–>
<link rel=”stylesheet” href=”http://demo3.yobots.cn/wp-content/themes/udesign-child/css/magnific-popup.css” />
<script type=”text/javascript” src=”http://demo3.yobots.cn/wp-content/themes/udesign-child/js/jquery.magnific-popup.min.js”></script>
<!–引入Magnific Popup的文件 结束–>
C,整个代码块如下:
<!–KALATED BEGIN–>
<script type=”text/javascript”>
$(function(){
//yb_products_gallery standard mode
var carsousel = $(‘#yb_products_gallery_carousel’).elastislide({start:0,minItems:4,
onClick:function( el, pos, evt ) {
el.siblings().removeClass(“active”);
el.addClass(“active”);
carsousel.setCurrent( pos );
evt.preventDefault();
// for imagezoom to change image
var yb_products_gallery_obj = $(‘#yb_products_gallery’).data(‘imagezoom’);
yb_products_gallery_obj.changeImage(el.find(‘img’).attr(‘src’),el.find(‘img’).data(‘largeimg’));
},
onReady:function(){
//init imagezoom with many options
$(‘#yb_products_gallery’).ImageZoom({type:’standard’,zoomSize:[480,300],bigImageSrc:'<?php $galleryArray = get_post_gallery_ids($post->ID);echo wp_get_attachment_url( $galleryArray[1] );?>’,offset:[10,-4],zoomViewerClass:’standardViewer’,onShow:function(obj){obj.$viewer.hide().fadeIn(500);},onHide:function(obj){obj.$viewer.show().fadeOut(500);}});
$(‘#yb_products_gallery_carousel li:eq(1)’).addClass(‘active’);
// change zoomview size when window resize
$(window).resize(function(){
var yb_products_gallery_obj = $(‘#yb_products_gallery’).data(‘imagezoom’);
winWidth = $(window).width();
if(winWidth>900)
{
yb_products_gallery_obj.changeZoomSize(480,300);
}
else
{
yb_products_gallery_obj.changeZoomSize( winWidth*0.4,winWidth*0.4*0.625);
}
});
}
});
});
</script><!–end imagezoom script–>
<script type=”text/javascript”>
$(document).ready(function() {
$(‘.popup-youtube’).magnificPopup({
disableOn: 700,
type: ‘iframe’,
mainClass: ‘mfp-fade’,
removalDelay: 160,
preloader: false,
fixedContentPos: false
});
});
</script>
<div class=”yb_box”>
<span class=”yb_products_gallery_wrap”><img id=”yb_products_gallery” src=”<?php echo wp_get_attachment_url( $galleryArray[1] );?>” /></span>
<ul id=”yb_products_gallery_carousel” class=”elastislide-list”>
<?php $have_youtube_url = do_shortcode(‘【types field=”youtube-url”】【/types】’); ?>
<li>
<a href=”<?php echo $have_youtube_url; ?>” <?php if($have_youtube_url!=”#”) { echo ” class=’popup-youtube'”; } ?>>
<img src=”<?php echo wp_get_attachment_url( $galleryArray[0] ); ?>” data-largeimg=”<?php echo wp_get_attachment_url( $galleryArray[0] ); ?>” />
<?php
if($have_youtube_url!=”#”) { echo “<img class=’yb_custom_video_play’ src=’http://demo3.yobots.cn/wp-content/themes/udesign-child/play.png’ />”; }
?>
</a></li>
<!–定义第一个为视频–>
<?php
unset($galleryArray[0]);
foreach ($galleryArray as $id) {
$image_alt = get_post_meta($id, ‘_wp_attachment_image_alt’, true);
echo “<li><a href=’#’><img src='”.wp_get_attachment_url( $id ).”‘ data-largeimg='”.wp_get_attachment_url( $id ).”‘ alt='”.$image_alt.”‘ /></a></li>”;
}
?><!–从第二个循环输出相册–>
</ul>
</div><!–end yb_box–>
<!–KALATED END–>
备忘:$have_youtube_url为TOOLSET创建的YOUTUBE URL文章字段(同上brief-desc),默认值为#,判断如果值不是#,则应该是填入了一个完整的YOUTUBE URL,所以输出URL,并打印class=’popup-youtube’和play.png图片
D,默认值的修改:Youtube Popup Script中的disableOn: 700,表示在屏幕小于700时,禁用视频弹出,如果希望在手机也弹出,可将数值改为100以下。