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相关话题
隽永东方售后服务

隽永东方售后服务

隽永东方售后服务专区

wordpress简易手风琴折叠菜单

Leo 发表了文章 • 4 个评论 • 2249 次浏览 • 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头像缓存

Leo 发表了文章 • 0 个评论 • 2262 次浏览 • 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 外贸网站被抄袭

Leo 发表了文章 • 0 个评论 • 2766 次浏览 • 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网站使用的谷歌字体下载到自己的服务器

Leo 发表了文章 • 1 个评论 • 2298 次浏览 • 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/

详情页-产品放大镜效果

Leo 发表了文章 • 1 个评论 • 2133 次浏览 • 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后台汉化

Owen 发表了文章 • 1 个评论 • 2107 次浏览 • 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(后台语言)中选择下语言即可.
 

如何检查主题和插件对于php版本的兼容性

Leo 发表了文章 • 0 个评论 • 2235 次浏览 • 2019-08-22 09:02 • 来自相关话题

安装此插件:PHP Compatibility Checker




 
安装此插件:PHP Compatibility Checker
1566435725(1).jpg

 

godaddy的ssl证书安装方法

Leo 发表了文章 • 1 个评论 • 2789 次浏览 • 2019-08-06 11:41 • 来自相关话题

首先在我们的cpanel上面生成csr,
然后将csr复制到godaddy颁发ssl证书的地方,
等GD那边颁发成功之后,下载apache版的证书,
解压缩之后只需将第一个CRT文件上传到cpanel对应的地方即可
首先在我们的cpanel上面生成csr,
然后将csr复制到godaddy颁发ssl证书的地方,
等GD那边颁发成功之后,下载apache版的证书,
解压缩之后只需将第一个CRT文件上传到cpanel对应的地方即可
1.png

WordPress 根据不同国家的IP判断并显示不同的内容

Bob 发表了文章 • 2 个评论 • 2543 次浏览 • 2019-07-24 10:25 • 来自相关话题

相信大多数我做外贸的客户都有这种需求,就是想让网站屏蔽某个区域或者跳转奥对应区域的网站,再或者不同的区域显示不同的内容,这种时候就需要使用户的IP来判断其所属国家。
 
WordPress 根据不同国家的IP判断并显示不同的内容的具体操作方法如下:
 
在配置之前需要先下载IP数据库GeoIP.dat和geoip.inc两个文件,具体下载地址可以在网上找一下。
 
 1、首先需要先配置IP的数据库文件
将GeoIP.dat解压到WordPress的根目录下面,也就是WordPress配置文件的同级目录
 
2、添加调用接口的代码
先在WordPress主题目录中创建include的文件夹,将下载下来的geoip.inc文件放在该文件夹中,并在该文件夹下面创建geoip.php文件,将一下代码这贴到改文件里面:<?php
include('geoip.inc');
global $countryCode;
$geoData = geoip_open('GeoIP.dat', GEOIP_STANDARD);
$countryCode = geoip_country_code_by_addr($geoData, $_SERVER['REMOTE_ADDR']);
geoip_close($geoData);
?>
3、在header.php文件的头部添加引用文件:<?php include('include/geoip.php'); ?>
4、程序调用
在想要展示不同内容的位置调用一下代码:<?php
global $countryCode;
if($countryCode == 'US') {
echo 'US';//显示内容代码
} else {
echo 'Other countries';//显示内容代码
}
?>
以上文件配置好以后,打开网站就可以看到不同的内容。 查看全部
相信大多数我做外贸的客户都有这种需求,就是想让网站屏蔽某个区域或者跳转奥对应区域的网站,再或者不同的区域显示不同的内容,这种时候就需要使用户的IP来判断其所属国家。
 
WordPress 根据不同国家的IP判断并显示不同的内容的具体操作方法如下:
 
在配置之前需要先下载IP数据库GeoIP.datgeoip.inc两个文件,具体下载地址可以在网上找一下。
 
 1、首先需要先配置IP的数据库文件
将GeoIP.dat解压到WordPress的根目录下面,也就是WordPress配置文件的同级目录
 
2、添加调用接口的代码
先在WordPress主题目录中创建include的文件夹,将下载下来的geoip.inc文件放在该文件夹中,并在该文件夹下面创建geoip.php文件,将一下代码这贴到改文件里面:
<?php
include('geoip.inc');
global $countryCode;
$geoData = geoip_open('GeoIP.dat', GEOIP_STANDARD);
$countryCode = geoip_country_code_by_addr($geoData, $_SERVER['REMOTE_ADDR']);
geoip_close($geoData);
?>

3、在header.php文件的头部添加引用文件:
<?php include('include/geoip.php'); ?>

4、程序调用
在想要展示不同内容的位置调用一下代码:
<?php
global $countryCode;
if($countryCode == 'US') {
echo 'US';//显示内容代码
} else {
echo 'Other countries';//显示内容代码
}
?>

以上文件配置好以后,打开网站就可以看到不同的内容。

如何将wpengine服务器上的站点迁移到另一台服务器

Leo 发表了文章 • 1 个评论 • 2474 次浏览 • 2019-07-05 13:41 • 来自相关话题

首先,在用户门户中创建备份。
备份完成后,您可以从列表中选择备份,然后单击“Download Zip”。
收到包含zip文件的电子邮件后,请打开该文件并删除以下内容:
wp-content/mu-plugins/mu-plugin.php
wp-content/mu-plugins/wpengine-common/
wp-content/mu-plugins/slt-force-strong-passwords.php
wp-content/mu-plugins/force-strong-passwords/
wp-content/mu-plugins/stop-long-comments.php
wp-content/advanced-cache.php
wp-content/object-cache.php
然后,您可以将网站的其余部分上传到新环境,解压文件压缩包,在wp-content目录中有数据库文件,将其导入新服务器的数据库即可。
 
加粗部分的文件必须删除,如果不删除,后台还有不少wpengine的残留文件,例如wpengine在wordpress后台的控制面板等等。
 
wpengine官方介绍:
https://wpengine.com/support/b ... ment/ 查看全部
首先,在用户门户中创建备份。
备份完成后,您可以从列表中选择备份,然后单击“Download Zip”。
收到包含zip文件的电子邮件后,请打开该文件并删除以下内容:
wp-content/mu-plugins/mu-plugin.php
wp-content/mu-plugins/wpengine-common/
wp-content/mu-plugins/slt-force-strong-passwords.php
wp-content/mu-plugins/force-strong-passwords/
wp-content/mu-plugins/stop-long-comments.php
wp-content/advanced-cache.php
wp-content/object-cache.php

然后,您可以将网站的其余部分上传到新环境,解压文件压缩包,在wp-content目录中有数据库文件,将其导入新服务器的数据库即可。
 
加粗部分的文件必须删除,如果不删除,后台还有不少wpengine的残留文件,例如wpengine在wordpress后台的控制面板等等。
 
wpengine官方介绍:
https://wpengine.com/support/b ... ment/