对于外贸建站来说，国外流行的社交聊天工具或APP的使用是必不可少的，WhatsApp就是其中之一，WhatsApp是与国外客户取得联系的绝佳方式，本文详细介绍如何在自己的网站中加入WhatsApp社交聊天工具，实现这个功能。
 
添加WhatsApp图标
挑选一个自己满意的图标上传到自己网站服务器
 
创建WhatsApp链接
WhatsApp提供“Click to Chat”点击聊天功能，允许您在网页中创建一个链接，当用户点击时即可响应打开WhatsApp聊天窗口。

WhatsApp提供PC电脑端和手机移动端两种不同的链接地址：

PC电脑端：<a href="https://api.whatsapp.com/send% ... gt%3B

手机移动端：<a href="whatsapp://send?phone=+86123456789&text=Hello">WhatsApp</a>

里面都包含两个参数 phone 和 text ；phone=后面为你的电话号码，text=后面为发送的文本信息；

你可以通过程序判断PC端和手机端来分别显示各自的代码。
 
注意事项
WhatsApp对于电话号码格式
要创建链接：phone=后面的电话号码格式有一定的要求，如果添加错误，可能链接就无法生效。

使用phone=后面必须是带有国家代码的完整电话号码；
不要使用电话号码前面的零，不能有空格、破折号、括号等；

正确的格式示例：

一个中国（国家代码是+86或0086）的电话号码是：010-12345678，则链接应该是：https://api.whatsapp.com/send?phone=+861012345678
一个德国（国家代码是 0049）的电话号码是：0151-87654321，则链接应该是：https://api.whatsapp.com/send?phone=+4915187654321

错误的格式示例：

错误格式: https://api.whatsapp.com/send?phone=+86(0)1012345678
错误格式: https://api.whatsapp.com/send% ... -5678
错误格式: https://api.whatsapp.com/send% ... 45678

WhatsApp的链接可与手机端的WhatsApp应用程序，PC端的WhatsApp程序配合使用，当用户点击你网站上的WhatsApp链接时，手机端会响应打开你手机里的WhatsApp应用程序，PC端则会响应打开你电脑里的WhatsApp软件程序进行聊天。 查看全部

Wordfence Security 插件安装 可直接在后台插件添加处搜索添加即可。
免费版本有：IP阻止和暴力登录保护等高级功能。
高级版本：包括国家阻止、两因素身份验证，并且防火墙是实时更新的。
 
1.Wordfence Security设置
A.防火墙设置




B.这里可填写阻止访问这个文件url的ip（必须填写相对url），下面还可设置限制登陆，例如设置5次登陆失败以后锁定。还有很多可以设置就不一一列出了，按需设置。





 
2.CloudFlare设置
CloudFlare这里可以创建防火墙规则，和上面阻止访问这个文件的url一样设置，而且不止可以阻住文件url的访问，还有很多其他选择可以配置，感兴趣的朋友可以继续摸索。





下面是被阻止的日志，以及添加过以后，再访问你添加的url以后就是拒绝访问了。
 

 
 
  查看全部

RedirectMatch "^/product\.*/" "https://www.hahaha.com/products"
 
 
将以上放至.htaccess中，即可，可以将https://www.hahaha.com/product/任何后缀  跳转到https://www.hahaha.com/products 查看全部

最近发现之前可用的table-responsive这个class，在表格内容过多的时候，还是会被内容撑起来，宽度超过了页面。
以下两个属性可以使用，给table标签用：
   table-layout: fixed;
    word-break: break-word;
需要断词，否则表格是小了，内容在表格外面 查看全部

html部分
<ul class="side_menu">
    <?php wp_nav_menu( array( 'theme_location' => 'side', 'menu_class' => 'nav-menu','container' => false,'items_wrap' => '%3$s' ) ); ?>
</ul>
jquery部分
        function appendIcon(){
            var iconp = '<i class="fa fa-plus" aria-hidden="true"></i>';
            var iconm = '<i class="fa fa-minus" aria-hidden="true"></i>';
            $('.side_menu > li').append(iconp,iconm);            
        }
        appendIcon();
        $('.side_menu .menu-item-has-children .fa').click(function(){
            $(this).parent().find('.sub-menu').toggle();
        });
        $('.side_menu .current-menu-item').addClass('active_menu');
        $('.side_menu > li').click(function(){
            $(this).toggleClass('active_menu');
        });
css部分
.side_menu li{
    font-family: 'PTSansBold';
    margin-bottom: 0 !important;
    position: relative;    
}
.side_menu li a{
    padding: 10px 20px;
    display: inline-block;
    width: 100%;
    border-bottom: 1px solid #666;
    background-color: #efefef;
    color: #242424;
    font-family: 'PTSansBold';
    font-size: 12px;
    text-transform: capitalize;
}
.side_menu li a:hover{
    background-color: rgb(204, 204, 204);
}
.side_menu .current-menu-item > a{
    background-color: rgb(204, 204, 204);
}
.side_menu i.fa {
    position: absolute;
    top: 11px;
    right: 11px;
    font-size: 14px;
    background-color: rgb(68, 67, 73);
    color: #fff;
    padding: 4px 6px;  
    transition: all ease 0.3s;
}
.side_menu i.fa:hover{
    background-color: #00418a;
    cursor: pointer;
}
.side_menu .sub-menu{
    display: none;
}
.side_menu .current-menu-item .sub-menu{
    display: block;
}
.side_menu .fa-plus{
    display: block;
}
.side_menu .fa-minus{
    display: none;
}
.active_menu .fa-plus{
    display: none;
}
.active_menu .fa-minus{
    display: block;
}
.side_menu .sub-menu li a{
    padding-left: 40px;
}
  查看全部

最近在用主题20的时候，gravatar加载缓慢的情况比较明显，将下面这段放在functions.php即可
//v2ex国内gravatar头像缓存
function get_ssl_avatar($avatar){ 
$avatar = preg_replace('/.*\/avatar\/(.*)\?s=([\d]+)&.*/','<img src="https://cdn.v2ex.com/gravatar/$1?s=$2" class="avatar avatar-$2" height="50px" width="50px">',$avatar);
return $avatar; 
} 
add_filter('get_avatar', 'get_ssl_avatar');
  查看全部

很多国内外贸人用 wordpress 搭建了外贸网站，在收获更多国外客户的同时，也发现了一个烦恼的事情：通过网站统计能够发现很多来自国内的 IP 停留时间很长，也就意味着有国内同行在研究自己的网站产品，要么直接 copy 一个同类网站出来，要么研究你的外贸网站产品布局，可以弄清楚你的主打产品、爆款产品和研发方向。对于外贸网站来说这是一个挺纠结的问题。今天给有需要的外贸网站推荐一款 iq block country 插件，能够屏蔽中国 IP 访问，防止 wordpress 外贸网站被恶意抄袭和研究。
 
一、安装 iQ Block Country 插件。直接插件搜索即可
二、下载 GeoIP 压缩包，解压后将文件传送到/wp-content/uploads/下面
其实就是一个全世界的 IP 分布数据库，有了它插件就可以自动识别来访用户是否是中国 IP 并加以屏蔽了。
三、屏蔽中国 IP（当然也可以屏蔽其他指定ip，还可以将自己的ip加入白名单）





 
以上三个步骤做好，就可以进行测试了，举例：你屏蔽了中国ip，又没有将自己ip加入白名单，你看到的页面将是网页被拒绝访问。 查看全部

Self-Hosted Google Fonts 插件来实现自主托管所有网站使用的Google字体。Self-Hosted Google Fonts 将扫描您网站上的所有CSS，并自动下载必要的Google Web字体到自己的服务器，并修正好所有引用。你只需要启用插件的功能开关，一切都自动完成，非常智能！
 
 
主要特性：
自动自主托管的字体不费吹灰之力。
兼容所有主题和插件。
支持IE9 +和所有现代浏览器。
针对性能进行基准测试的优化代码。
内置缓存进行处理。
兼容缓存插件和自动优化。
主题和插件作者的API和钩子。
在使用多个子集时，使用unicode范围优化字体。
谷歌也正式这样做，但其他用于下载字体的解决方案不支持这一点。
 
注意：如果你使用了缓存插件，请务必记得清空缓存，才能看到效果。

在后台插件安装界面搜索 Self-Hosted Google Fonts 即可在线安装，或者到这里下载：https://wordpress.org/plugins/ ... onts/ 查看全部

效果图：




 
如何对接wordpress：

        <script src="jquery.min.js"></script>

        <!-- Include Cloud Zoom CSS. -->
        <link rel="stylesheet" type="text/css" href="cloudzoom.css" />

        <!-- Include Cloud Zoom script. -->
        <script type="text/javascript" src="cloudzoom.js"></script>

        <!-- Call quick start function. -->
        <script type="text/javascript">
            CloudZoom.quickStart();
        </script> 
                    <div class="demo">
                        <?php $i=0;if( have_rows('gallery') ): ?>
                        <?php while( have_rows('gallery') ): the_row(); 
                                $image = get_sub_field('add_image');
                                $image_url = $image[url];
                        ?>
                        <?php if($i=='0'): ?>
                        <img class="cloudzoom" src="<?php bloginfo('template_url')?>/timthumb.php?src=<?php echo $image_url ?>&w=400;&h=400;&zc=1" class="img-responsive" data-cloudzoom="zoomImage: '<?php echo $image_url ?>'">
                        <?php endif;?>
                        <?php $i++;endwhile;endif;?>
                        <ul>
                        <?php if( have_rows('gallery') ): ?>
                        <?php while( have_rows('gallery') ): the_row(); 
                                $image = get_sub_field('add_image');
                                $image_url = $image[url];
                        ?>
                        <li class="cloudzoom_li">
                        <img class = "cloudzoom-gallery" src = "<?php bloginfo('template_url')?>/timthumb.php?src=<?php echo $image_url?>&w=60;&h=60;&zc=1" data-cloudzoom = "useZoom: '.cloudzoom', image: '<?php bloginfo('template_url')?>/timthumb.php?src=<?php echo $image_url?>&w=400;&h=400;&zc=1', zoomImage: '<?php echo $image_url ?>' "/>
                        </li>
                        <?php endwhile;endif;?>
                        </ul>
                    </div>

 
我是创建了一个repeater类型的字段gallery，他这个比较特殊，要单独调用首图作为大图显示，然后再调用所有的图片作为小图用于图片切换功能
  查看全部

推荐一个插件：Simple Admin Language Change ，允许你直接在后台 设置 – 常规界面为前台和后台设置各自的语言，这样就不会导致在后台切换语言为中文后，导致前台页面的语言也是 lang="zh-CN"。






安装插件以后在Admin Language（后台语言）中选择下语言即可.
  查看全部