Shopify Free Trial Apply
Shopify 60天试用
Shopify 14天试用
WordPress

WordPress

WordPress建站及WordPress SEO相关话题
Shopify

Shopify

Shopify建站及Shopify SEO相关话题
Google SEO

Google SEO

Google SEO相关话题
SEM

SEM

SEM相关话题
SNS 社媒营销

SNS 社媒营销

讨论SNS社交媒体营销话题
Zoho

Zoho

Zoho SAAS相关产品使用话题讨论
EDM

EDM

讨论Email Marketing相关话题
隽永东方售后服务

隽永东方售后服务

隽永东方售后服务专区

添加WhatsApp链接教程

WordPressLeo 发表了文章 • 1 个评论 • 116 次浏览 • 2020-03-03 17:31 • 来自相关话题

对于外贸建站来说,国外流行的社交聊天工具或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软件程序进行聊天。 查看全部
对于外贸建站来说,国外流行的社交聊天工具或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软件程序进行聊天。

wordpress防火墙插件

WordPressOwen 发表了文章 • 1 个评论 • 157 次浏览 • 2020-02-21 14:58 • 来自相关话题

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




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





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





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

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

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

微信图片_20200221142758.png

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

微信图片_20200221144706.png

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

 
 
 

批量重定向某一后缀url的方法

WordPressLeo 发表了文章 • 1 个评论 • 191 次浏览 • 2020-01-16 16:41 • 来自相关话题

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

发现有部分表格自适应有问题,解决方案

WordPressLeo 发表了文章 • 1 个评论 • 234 次浏览 • 2019-12-30 10:33 • 来自相关话题

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

wordpress简易手风琴折叠菜单

WordPressLeo 发表了文章 • 4 个评论 • 262 次浏览 • 2019-12-24 09:39 • 来自相关话题

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;
}
  查看全部

1.png


2.png


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;
}
 

国内gravatar头像缓存

WordPressLeo 发表了文章 • 0 个评论 • 276 次浏览 • 2019-12-11 09:16 • 来自相关话题

最近在用主题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');
  查看全部
最近在用主题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');
 

iq block country 插件屏蔽中国 IP 防止 wordpress 外贸网站被抄袭

WordPressLeo 发表了文章 • 0 个评论 • 441 次浏览 • 2019-10-15 09:44 • 来自相关话题

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





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

1.png

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

将WordPress网站使用的谷歌字体下载到自己的服务器

WordPressLeo 发表了文章 • 1 个评论 • 407 次浏览 • 2019-09-24 15:16 • 来自相关话题

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

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

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

详情页-产品放大镜效果

WordPressLeo 发表了文章 • 1 个评论 • 402 次浏览 • 2019-09-03 11:48 • 来自相关话题

效果图:




 
如何对接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,他这个比较特殊,要单独调用首图作为大图显示,然后再调用所有的图片作为小图用于图片切换功能
  查看全部
效果图:
1.png

 
如何对接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,他这个比较特殊,要单独调用首图作为大图显示,然后再调用所有的图片作为小图用于图片切换功能
 

WordPress后台汉化

WordPressOwen 发表了文章 • 1 个评论 • 371 次浏览 • 2019-09-02 11:24 • 来自相关话题

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






安装插件以后在Admin Language(后台语言)中选择下语言即可.
  查看全部
推荐一个插件:Simple Admin Language Change ,允许你直接在后台 设置 – 常规界面为前台和后台设置各自的语言,这样就不会导致在后台切换语言为中文后,导致前台页面的语言也是 lang="zh-CN"。

QQ图片20190902111936.png


安装插件以后在Admin Language(后台语言)中选择下语言即可.