为什么推荐使用SITEGROUND创建安装WORDPRESS网站

如果还不会如何购买,请看这里。有视频教程帮助你完成。

Web Hosting

购买过程其实非常简单:

  1. 首先要准备一张信用卡。
  2. 其次要确定域名已经在其它平台购买了?还是一同在SITEGROUND(下方统一简写:SG)购买。如果在SG购买,则不需要做域名解析工作了,而且可以使用SG自带的邮箱来做企业邮箱。
  3. 第一次购买的价格非常便宜,但是续费的价格比较贵,这是SG平台促销的一种方式。所以建议购买时三年起订,一个网站用三年也就差不多了,如果网站后期能起到作用,那么三年后多花一点钱也不算多大的投入。
  4. 最后是服务器节点的选取,默认节点是新加坡,如果你的网站业务范围在美国,则可以选择节点在美国各地区。

接下来就是安装WORDPRESS了。

  1. 如果是在其它平台购买的域名,进入CPANEL(或者收到邮件时),可以看到服务器的IP,先把域名解析做了。等待其生效。
  2. 接着进入CPANEL面板(进入MY ACCOUNTS菜单内可以看 Go to cPanel)
  3. 找到language先把cPanel的面板切换为中文,这样便于使用
  4. 找到Let’s Encrypt,点击install先安装SSL证书(这个非常方便,一键安装免费SSL证书,而且自动更新证书,前提是在操作这个是域名解析要生效)
  5. 回到CPANEL HOME,点击WORDPRESS,就可以一键安装WORDPRESS了,这些在视频里都有讲到。

可以参考:https://www.wpwiki.cn/foreword:usage-sg

推荐:《WordPress建站小百科》帮助从零开始学习 WordPress 企业建站外贸英文建站

WordPress建站小百科

《WordPress建站小百科》提供 WordPress 建设企业站和外贸站的基础教程和 WordPress 免费视频教程,从如何购买服务器和解析域名开始,到 WordPress 基础入门、WordPress 主题模板和 WordPress 插件的安装和使用,完成一站式学习 WordPress 建站和 WordPress 网站SEO技巧等。

发现更多精彩内容:https://www.wpwiki.cn/

给文章、页面、产品添加收藏按钮

插件:https://wordpress.org/plugins/wp-favorite-posts/

使用方法:

如果使用了TOOLSET或其它方式添加了自定义文章类型,如果给自定义文章类型附加函数。
例:使用TOOLSET建立了products文章类型,需要进入插件的wpfp-page-template.php文件,找到

// $qry[‘post_type’] = array(‘post’,’page’);

将//去除,并将其它修改为 $qry[‘post_type’] = array(‘post’,’page’, ‘products’);

1:进入设置-WP Favorite Posts 可进行自动设置。不过建议使用CUSTOM

使用CUSTOM设置后

2,在文章、页面或products模板内添加PHP代码或短代码。

<?php wpfp_link(); ?>

[wpfp-link]

进行排版(哪里显示放哪里,SO EASY)

3,新建一个页面,添加短代码[wp-favorite-posts]用来显示收藏的内容。

这样,在浏览产品时,浏览者可以点击收藏,收藏后即可点击收藏页面,查看已收藏的内容。

演示地址:http://www.bettertoys.com/products/

如何用TOOLSET制作相关产品列表

进入官方网站购买TOOLSET

首页要定义一个CPT,名字叫PRODUCTS

接着给PRODUCTS创建分类,一个叫products-cat(层次),另一个叫products-tag(平面)

接着创建一个VIEWS,名字叫related-cp,其中设置分类过滤器以

TOOLSET 相关产品过滤器

接下来,输出设计部分。略。

创建内容模板,添加代码如下:

[wpv-view name=”related-cp” wpvcptag=”[wpv-post-taxonomy type=’cp-tag’ format=’name’]”]

注意这里面有嵌套短代码。[wpv-post-taxonomy type=’cp-tag’ format=’name’]获取的是标签名字,是没有LINK的。

默认的代码是[wpv-post-taxonomy type=’cp-tag’],这是带LINK的。

产品相册视频整合插件 – 图片相册 | 图片放大 | 弹出视频 – 卡拉科技演示站之相册功能扩展 – 弹出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

JS+CSS实现微信二维码显示

严格来说,这只是使用JS来控制DIV显示/隐藏,配合微信二维码,就显得高大上和实用多了。

演示效果,把鼠标放在右上角的微信图标上。

JS+CSS显示二维码
JS+CSS显示二维码

1,添加JS代码在</head>前;

<script type="text/javascript">
function  showImg(){
document.getElementById("wxImg").style.display='block';
}
function hideImg(){
document.getElementById("wxImg").style.display='none';
}
</script>

wxImg是二维码图片的包围DIV。

2,HTML代码如下:

<div id="kalated-weixin">

	<a href="javascript:void(0)" onMouseOut="hideImg()"  onmouseover="showImg()">
		<img class="wx" src="http://www.czqiushi.com/wp-content/uploads/2015/10/wx.png">
	</a>

</div>
	<div id="wxImg" style="display:none; right: 120px; top: 50px;back-ground:#f00;position:absolute; z-index:999;">
		<img class="wx" src="http://www.czqiushi.com/wp-content/uploads/2015/10/weixin.jpg">
	</div>

3,接下来就是调整CSS来美化外观了。

阿里云和Linode VPS安装Web环境 LNMP1.2安装和维护 虚拟主机安装

申明:本讲义由【卡拉科技】整理,免费分享地址:https://www.kalated.com/go/lnmp
转载请注明出处:【卡拉科技】https://www.kalated.com/1888.html
适合人群:服务器零基础者,VPS零基础者,想独立在Linux服务器上安装Web环境者
 
1,认识阿里云和Linode VPS;
 
个人认为阿里云和Linode分别是国内和国外的首选服务器,购买服务器主要从速度、稳定性和安全性考虑;本教程讲到的LNMP安装WEB环境,分别在这两个服务器上都成功测试并完美运行WordPress网站。
 
2,什么是LNMP?
 
A. Linux、Nginx、MySQL、PHP
 
B. Linux有不同的发行版,本教程只讲CentOS;
 
C. Nginx是engine x的缩写,相对Apache服务器引擎来说,其高效率和轻量级的优点,成为小型网站服务器系统的首选。(企业站和外贸站等充其量叫微小站,所以请别花费精力去对比Nginx和Apache谁更适合你)
 
D. MySQL和PHP能够完美结合,前者是数据库软件,后者是编程语言(软件)。这两个东西解释起来比较麻烦,如果你了解过最好。如果不了解也没有关系,只要注意一点:WordPress,Discuz!,Ecshop,phpwind,dedecms、drupal、ecshop、shopex等程序需要MySQL和PHP支持才能运行。
 
3-a,软件准备:
下载一个SSH工具登录VPS
下载一个FTP工具

下载NotePad++

3-b,购买VPS并安装CentOS
 
 
3-c,使用Xshell登录VPS
第一步:新建一个连接;
第二步:填写连接名称(无要求)、IP地址、
登录账号和密码;
第三步:连接,并接受保存授权;
 
4,安装LNMP
 
screen -S lnmp 新建一个LNMP的会话,避免连接中断引起安装失败;
 
A. 下载并安装LNMP一键安装包
wget -c http://soft.vpser.net/lnmp/lnmp1.2-full.tar.gz && tar zxf lnmp1.2-full.tar.gz && cd lnmp1.2-full && ./install.sh lnmp
 
B. 安装FTP软件:./pureftpd.sh
 
C. 安装zip/unzip软件 #yum install zip    #yum install unzip
 
5,添加虚拟主机
 
lnmp vhost add/list/del
 
例A. 添加主域名        yanweipai.com    www.yanweipai.com
例B. 添加二级域名    en.yanweipai.com
 
6,使用FTP登录服务器
 
7,建站
A. FTP上传文件或使用wget下载WordPress程序;
B. 执行:chown -R www /home/wwwroot/网站目录
C. 安装WordPress;
D. 启用scandir()函数;
/usr/local/php/etc/php.ini
重启PHP,以便修改生效;
/etc/init.d/php-fpm restart
8,管理phpMyAdmin,导出SQL文件,备份数据库;
*********************FAQS*************************
1,如何修改VPS登录密码?
阿里云:进入“实例”,重置密码;Linode:进入“Rescue”,重置密码;
 
2,Linode邮件提示
A. ToS Violation – SBL Listing
B. ToS Violation – Spam
 
3,IP被墙后,如果更换Linode VPS的IP
 
4,无法启动MySQL时,或因为空间已满
使用df -h查询服务器空间使用情况
 
5,隐藏phpMyAdmin管理路径
 
6,zip和unzip使用基础:
解压,#unzip x.zip
压缩,#zip -r xx.zip ./*
 

7,伪静态修改,/usr/local/nginx/conf/vhost/???.conf

修改后必须运行:/etc/init.d/nginx restart
 
*************************************LNMP状态管理命令***********************************
lnmp vhost add/list/del
lnmp ftp add/list/del
LNMP 1.2状态管理: lnmp {start|stop|reload|restart|kill|status}
LNMP 1.2各个程序状态管理: lnmp {nginx|mysql|mariadb|php-fpm|pureftpd} {start|stop|reload|restart|kill|status}
Nginx状态管理:/etc/init.d/nginx {start|stop|reload|restart} 
MySQL状态管理:/etc/init.d/mysql {start|stop|restart|reload|force-reload|status}
PHP-FPM状态管理:/etc/init.d/php-fpm {start|stop|quit|restart|reload|logrotate}
PureFTPd状态管理: /etc/init.d/pureftpd {start|stop|restart|kill|status}
ProFTPd状态管理: /etc/init.d/proftpd {start|stop|restart|reload}
如重启LNMP,输入命令:/root/lnmp restart 即可,单独重启mysql:/etc/init.d/mysql restart