产品相册视频整合插件 – 图片相册 | 图片放大 | 弹出视频 – 卡拉科技演示站之相册功能扩展 – 弹出Youtube视频 | 弹出Vimeo视频 | 弹出YouKu视频

进入官方网站购买TOOLSET

【演示地址】

http://demo3.yobots.cn/products/iphone-7-ok/

演示的功能有:

  1. 安装开发型插件Featured Galleries给产品页面添加相册功能;
  2. 使用商业代码ImageZoom给相册添加幻灯和放大功能;
  3. 使用开源代码Magnific Popup整合,使第一张图片弹出视频;
  4. Magnific Popup是一种可以作为万能弹出窗口的一组代码,在此基础上可创建弹出Youku视频等;
  5. 使用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以下。

Ninja Popups插件的使用和注意事项

Ninja Popups是一款非常好用的弹出表单(广告/内容/图片)WORDPRESS插件。安装和设置的难度个人感觉适中,但一般的小白恐怕还真弄不了,希望有折腾精神的朋友一试。有机会我再录个视频出来。需要购买的可以联系我。

演示网站:http://www.junbro.com/products/stainless-steel-pipe-nipples/ 侧边栏和产品图片右侧的弹出表单。

优点:

1,弹出的窗口是内置的,不是弹出WIN窗口;

2,弹出的内容可以是表单,也可以是图片文字,也适合做新品推荐等;

3,如果有授权KEY,还可以导入DEMO,这样就不用一个个去设置表单了;

4,表单发送时,会记录客户的IP地址和所在页的URL;这两点非常重要{A,设置一个国家表单项,让客户来填写,这样我们在收到客户信息时,可以比对IP和国家是否一致,避免同行来套信息;B,记录所在页的URL,让我们更能清楚客户需要了解什么产品,因为客户一般是在感兴趣的页面发表单过来。}

注意事项:

如果使用了cloudflare,必须要设定DNS ONLY,而不能使用DNS and HTTP proxy(CDN),否则无法记得客户的真正地址。而是记录了CLOUDFLARE的服务器地址。

QQ图片20160905142333 (1) QQ图片20160905142330 (1)

Toolset 插件视频教程 wordpress史上最强插件之一

进入官方网站购买TOOLSET

本教程由《卡拉科技》录制,请勿用于商业传播!
卡拉科技网站:https://www.kalated.com
百度云下载: http://pan.baidu.com/s/1miJAO8S 密码: k8bu

正式开始之前需要分析一下需求:

1),以什么方式来展示产品归档页?
2),产品页面的模板定制?
3),在任何页面、任何位置调用/展示产品?
 
4),匹配插件推荐;
1,创建“文章类型”及其分类和标签
2,内容发布的字段创建;
3,单页内容如何显示?内容模板的创建;
4,分类和标签 存档页面;图像描述(SEO项)
5,产品 存档页面,同上;区别在于SEO项;
6,插件的使用和代码插入;
套件包含以下及更多
Toolset Types | Toolset Views | Toolset CRED | Toolset Layouts | Toolset Access | Toolset Maps

使用Advanced Category Template插件定义分类目录模板

使用本插件,需要一定的PHP/HTML/CSS基础,属于模板定制知识,并不适合新手。使用这个插件,可以给不同的分类(post和portfolio分类都可以)选择不同的模板,如果再配合POST相关模板插件,就可以实现POST的不同分类来展示新闻/产品。

简单点说,点击A分类展示新闻列表,B分类可以展示产品(豆腐块形式),不同的展示形式当然是涉及到模块的制作和CSS调整。下面简单说一下这个插件的使用。

1,后台搜索安装并启用本插件,进入插件设置,默认选择是勾选Post分类。

如果有Portfolio项目,那么也会有Portfolio目录供选择。

2,新建一个PHP文件,譬如名字叫:Products Category template.php,内容如下:

<?php
/*
*
* Category Template: Products Category template
*
*/
get_header();
?>

《这里添加PHP/HTML代码制作模板》

<?php get_sidebar(); ?>

<?php get_footer(); ?>

注意这里面的内容,涉及到WordPress模板文件制作,HTML排版和CSS调整等。

3,新建目录,选择自定义的模板;

分类目录 ‹ AQUA演示站 — WordPress

4,然后发布文章到此分类中,查看本分类,即可看到显示效果。

话说WooThemes被WordPress母公司收购了

外贸独立电商们应该对Woo Commerce不陌生,是它就是鼎鼎有名的在线商城插件。如果你是一个外贸人,对于使用WordPress建个企业站不要存在质疑了,对于外贸电商使用Woo Commerce插件也不需要质疑的。一个中小型企业,用WordPress足够了,如果真的是强迫症追求网站高性能的,应该是考虑买个好点的服务器或VPS。转一个36kr的文章在下面,应该能理解我的建议。

转自:http://36kr.com/p/533096.html

automattic-and-woocommerce (1)

WooCommerce建站工具是WooThemes的旗舰产品,目前24%的独立电商都在使用其服务,拥有几百个插件和主题。近日,开源博客平台WordPress的母公司Automattic宣布收购WooThemes,希望让在网上独立售卖商品更加简单。

对于正在使用WooThemes的用户而言,收购后服务不会发生太大变化。对于第三方的其他开发者、设计师、托管公司和电商服务商而言,整个生态变得更加庞大,他们的机会也在增多。下图是最近几年WooCommerce的发展趋势。

ecomm-trends

可以看出,在超过了竞争对手Magento后,WooCommerce依然保持很猛的势头,在排名前一百万的电商网站中,约1.2万个使用的是他们的服务。

目前,WooThemes团队一共有55个人,分散在世界各地16个国家,而Automattic目前有325名员工,分散在37个国家。二者都是开源系统,使用GPL协议。WordPress目前的市场占有率约为23%,增加了WooCommerce的用户群后,想必影响力会继续扩大。

Automattic成立近十年,这个收购消息将是他们一个重要的里程碑。创始人在博文中称,除此之外今年还会有其他的消息放出。

推荐WordPress SEO by Yoast 视频教程

极度流行的SEO插件 – WordPress SEO by Yoast

SEO 一直是各位站长们想做好的地方,说简单也简单,但是说难也难,因为需要注意的地方太多,一个不小心被百度K了你都不知道怎么回事。所以这里和大家推荐一下这款名叫 WordPress SEO by Yoast 的SEO优化插件。

更多WordPress插件视频教程请至淘宝教育购买:http://i.xue.taobao.com/detail.htm?courseId=31905

WordPress平台上扩展插件极多,也不乏许多优秀的SEO插件,这里我向大家推荐这款名叫 WordPress SEO by Yoast 的 SEO 插件。WordPress SEO by Yoast 插件不论在大体的呈现上还是细节的优化把握都非常好,是不可多得的好插件,相比 All in one seo pack 做的更加优秀。

无论使用哪一款优化插件,都请记住一点:内容与用户体验永远为王!

  WordPress SEO by Yoast 插件在安装启用后会弹出类似向导一样的对话框,直接关闭即可,因为这个向导主要是针对国外用户,国内用户看我这里就好。

官方下载地址:https://wordpress.org/plugins/wordpress-seo/

第一步:常规设置

在这一栏的设置内分别有:常规、跟踪、安全以及网站管理员工具,这里前三项保持默认即可,如果你有开通以下几个搜索引擎的网站管理员工具那就用上。

极度流行的SEO插件 – WordPress SEO by Yoast

 

第二步:标题 & 元标记

这里通常是设置网站首页Tltle、内页Title以及一些其他细节,需要注意的地方有:

  Title Separator:网站标题的分隔符,推荐选择“|”,并且一旦决定在今后无论如何都别去改。

  站内meta设置——归档的子页面使用Noindex:这里推荐一些个人站长博客勾选,能够保证首页权重,其他的自行决定。

极度流行的SEO插件 – WordPress SEO by Yoast

首页选项:这里有两个地方可以填写,只要在“元描述模板”中写上网站的描述即可,写描述时可以适当的带上网站标题及关键字,但不可过度堆积,另外根据百度在2013年更新的绿菠萝算法以及2015年更新的瑞丽算法(待参考),建议各位在给网站起标题的时候尽量简洁、有代表性。

 

极度流行的SEO插件 – WordPress SEO by Yoast

 

  其他选项:注意下图红色框住的选项,如果你是和本站一样只有一个人在更新文章,那么就勾选,如果你有很多编辑一起更新文章,那么就不用勾选。而关闭日期归档则可以避免搜索引擎收录对用户无用的内页,同时收缩权重,保证重要的页面权重不会被分散。

极度流行的SEO插件 – WordPress SEO by Yoast

 

第三步:XML站点地图

保持默认即可。

 

第四步:固定链接

这里设置请看下图,跟随本站即可,需要注意的是最后一条“重定向丑陋的URL到漂亮的固定链接。(多数情况下不推荐!)”,这里如果你是新建立几天的博客,那么最好点击勾选,但是如果你已经建立了一段时间了,最好不要勾选。

最好的固定链接应该是以文章名作为URL后缀,在每次写文章时的固定链接改成英文的关键字,如:《安卓平台游戏推荐:愤怒的小鸟,那么这篇文章的固定连接应该是:http://example.com/android-angry-bird .

规范URL设置:这里主要设置让你的URL是以http开头还是https开头,两者区别在于后者更加安全,但是目前还不是非常流行,不过据说谷歌已经打算通过排名的变动引诱加强迫各位站长主动将为数更多的http变成https了,这里选哪个自行决定。参考资料见本文底部。

极度流行的SEO插件 – WordPress SEO by Yoast

 

第五步:内部链接

保持默认或者启用路径均可,最好是有点代码基础的童鞋再来弄这个,小白请勿尝试。

 

第六步:RSS Feed 内容、第七步:导入 & 导出、第八步:Bulk Editor 均保持默认即可。

第九步:编辑文件

这里的编辑文件其实就是编辑Robots.txt,Robots.txt是网站与搜索引擎协议,它能告诉搜索引擎那些页面你可以收录,那些不可以,具体的编写方法以后再说。

参考资料:

HTTPS(Secure Hypertext Transfer Protocol)–安全超文本传输协议

它是由Netscape开发并内置于其浏览器中,用于对数据进行压缩和解压操作,并返回网络上传送回的结果。HTTPS实际上应用了Netscape的完全套接字层(SSL)作为HTTP应用层的子层。(HTTPS使用端口443,而不是象HTTP那样使用端口80来和TCP/IP进行通信。)SSL使用40 位关键字作为RC4流加密算法,这对于商业信息的加密是合适的。HTTPS和SSL支持使用X.509数字认证,如果需要的话用户可以确认发送者是谁。

转载自:http://www.mywpku.com/

Breadcrumb NavXT使用简介视频教程

面包屑导航(BreadcrumbNavigation)这个概念来自童话故事”汉赛尔和格莱特”,当汉赛尔和格莱特穿过森林时,不小心迷路了,但是他们发现在沿途走过的地方都撒下了面包屑,让这些面包屑来帮助他们找到回家的路。所以,面包屑导航的作用是告诉访问者他们目前在网站中的位置以及如何返回。

面包屑导航
面包屑导航

更多WordPress插件视频教程请至淘宝教育购买:http://i.xue.taobao.com/detail.htm?courseId=31905

Breadcrumb NavXT是一款非常不错的WordPress页面导航”面包屑”插件,使用Breadcrumb NavXT可以随心所欲地在你的博客中任意位置设置面包屑breadcrumb导航。

第一步,后台搜索Breadcrumb NavXT,直接在线安装;

第二步,将面包屑代码,分别加入类似page.php,single.php和portfolio-single.php;

默认代码:

<div class=”breadcrumbs”>
<?php if(function_exists(‘bcn_display’))
{
bcn_display();
}?>
</div>

改进代码,在首页不显示面包屑:

<div class=”breadcrumbs”>
<?php if(function_exists(‘bcn_display’) && !is_front_page())
{
bcn_display();
}?>
</div>

第三步,Breadcrumb NavXT的设置,注意修改首页TITLE。

第四步,用CSS来美化面包屑链接;

个人认为,面包屑导航能够提供很好的用户体验,对SEO也会有很大的帮助。但是对一个小型网站,如果页面总数都不超过20个,盲目的追求这些插件功能是本末倒置的。值得注意的是,很多主题自带面包屑导航。同时,如果用PORTOFOLIO或POST做产品展示时,会发现,进入单篇文章/单篇PORTFOLIO后,面包屑导航是指向category的,而本插件并不能解决这个问题。

那么我们只能使用插件Advance Category Template来改造产品展示页面,从而达到用分类来展示产品,这个插件在GoodSpace和Centum主题都有讲解,使用方法类似,但不完全相同。

WordPress插入表格-TablePress插件推荐

在做WordPress网站时,如果只是写写文章,不至于会需要插入表格。但是在企业站,外贸站时,想插入表格展示产品参数之类的,就是一个非常必要的需求。有时候我们会选择将表格做成图片,这样很不利于SEO。直接复制WORD里的表格又不能正常显示。

所以今天推荐给大家就是表格神器TablePress,

第一步,安装插件;

第二步,新建表格;

第三步,设置表格和填充内容;

第四步,在页面或文章里,插入短代码。

使用Sticky Popup做侧边停靠联系表单

效果演示:http://www.yobots.org/goodspace/

jdfw

第一步,安装插件 sticky popup

第二步,基本设置,

注意:A,图标的尺寸是40*40像素,有必要时要用PS进行旋转处理。

B,Popup Top Margin项仅对“左”或“右”位置起作用。

第三步,完成内容填写

注意:如果需要放置表单,需要提前安装Contact Form 7

第四步,自定义CSS使其外观完整。

以下代码是http://www.yobots.org/goodspace/站的,其它网站需要作适当修改。

/*Sticky Popup 插件*/
.sticky-popup-left .popup-image { margin: -8px -135px 0 0 !important;}
/*Sticky Popup 内表单*/
input.mn-kalated, input.me-kalated { width:240px !important; height:20px !important; padding:6px 4px !important; margin: 10px 5px 10px !important;}
textarea.mg-kalated {width:240px !important; height:60px !important; padding:6px 4px !important; margin: 10px 5px 10px !important;}

推荐Advance Category Template插件:定制产品页展示

在这之前讲到Blog in Blog插件,也算是比较好的插件,能够很好的用POST(文章)展示产品。当然如果你使用一些商业插件,PORTFOLIO是标配,所以用POST来显示新闻,用PORTFOLIO来展示产品比较合适。

【购买GOODSPACE全套高清视频教程】:http://i.xue.taobao.com/detail.htm?courseId=30779

DEMO:http://www.yobots.org/goodspace/portfolio-category/products-test/

但新问题又来了,想正确使用面包屑,可没有这么简单,因为在显示最终项目时,面包屑是指向上一级分类目录的。所以使用今天的推荐插件,就可以将分类定制成豆腐块(当然你想弄成其它的效果也是OK的)来展示产品。请注意,本文只是针对GOODSPACE主题来设置,其它的主题设置原理类似,但具体操作很不一样。

1,安装插件 Advance Category Template

2,设置使用portfolio分类

3,新建分类模板文件(本文提供了现成的文件,上传即可)

4,添加自定义CSS

5,新建一个PORTFOLIO分类,给这个分类附加一些内容,就可以看看效果了。

注意事项:

A,分页数量由“博客页面至多显示”决定,

B,特色图像大小一致,标题长度保持一致

C,进入GOODSPACE主题设置,将SEARCH/ARCHIVE项设置为LEFT SIDEBAR或RIGHT SIDEBAR

D,进入小工具,拖一些小工具到边栏里,就可以看看效果啦。