WordPress

wordpress简易手风琴折叠菜单

Leo 发表了文章 • 4 个评论 • 3751 次浏览 • 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;
}
查看全部

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 个评论 • 3688 次浏览 • 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 个评论 • 4025 次浏览 • 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加入白名单）

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

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

Leo 发表了文章 • 1 个评论 • 3646 次浏览 • 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 个评论 • 3524 次浏览 • 2019-09-03 11:48 • 来自相关话题

效果图：

如何对接wordpress：

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


<link rel="stylesheet" type="text/css" href="cloudzoom.css" />


<script type="text/javascript" src="cloudzoom.js"></script>


<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：

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


<link rel="stylesheet" type="text/css" href="cloudzoom.css" />


<script type="text/javascript" src="cloudzoom.js"></script>


<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 个评论 • 3544 次浏览 • 2019-09-02 11:24 • 来自相关话题

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

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

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

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

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

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

安装此插件：PHP Compatibility Checker

godaddy的ssl证书安装方法

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

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

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

Bob 发表了文章 • 2 个评论 • 4186 次浏览 • 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.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';//显示内容代码

    }

?>

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

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

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

通知设置新通知