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

隽永东方售后服务

隽永东方售后服务专区

window.print()如何打印指定区域

Leo 发表了文章 • 2 个评论 • 656 次浏览 • 2018-11-21 14:47 • 来自相关话题

@media print{
    .noprint{
        display: none;
    }
}
定义一个class,noprint
然后可以给你不想打印的地方加上noprint这个class,这样打印的时候就会隐藏这些elements。
一般我们可以给头部、底部加上这个class。
 
其实window.print()就是执行了浏览器自带的一个打印功能,让我们不用在浏览器上找打印,而直接通过点击网页上面任意一个已规定好的元素,进行打印。发现这种打印是没办法打印JavaScript以及多数css(有少部分css样式可以打印出来),只能就是打印一下图文 查看全部

@media print{
    .noprint{
        display: none;
    }
}
定义一个class,noprint
然后可以给你不想打印的地方加上noprint这个class,这样打印的时候就会隐藏这些elements。
一般我们可以给头部、底部加上这个class。
 
其实window.print()就是执行了浏览器自带的一个打印功能,让我们不用在浏览器上找打印,而直接通过点击网页上面任意一个已规定好的元素,进行打印。发现这种打印是没办法打印JavaScript以及多数css(有少部分css样式可以打印出来),只能就是打印一下图文

推荐两个lazy load 插件

Leo 发表了文章 • 1 个评论 • 559 次浏览 • 2018-11-21 10:19 • 来自相关话题

1、​a3 Lazy Load   (10W激活量,可放心使用)





 
2、Lazy Load by WP Rocket 作者WP Media  是wp-rockets开发团队开发的补丁插件,只需激活即可
 

经过测试,这两个插件在多数网站是没有问题的,具体根据不同网站实际情况使用。网站加载速度有肉眼可见的提升,不过在得分上面还是没有很明显的提升,因为谷歌对各项资源加载的要求是非常苛刻的,举例:一张1920px*500px的banner图,压缩至200kb不到,但是谷歌要求你还要减掉一半多的资源大小,这样肯定会严重影响图片清晰度。
谷歌page得分提升之路漫长,仍需努力! 查看全部
1、​a3 Lazy Load   (10W激活量,可放心使用)

1542765987(1).jpg

 
2、Lazy Load by WP Rocket 作者WP Media  是wp-rockets开发团队开发的补丁插件,只需激活即可
 

经过测试,这两个插件在多数网站是没有问题的,具体根据不同网站实际情况使用。网站加载速度有肉眼可见的提升,不过在得分上面还是没有很明显的提升,因为谷歌对各项资源加载的要求是非常苛刻的,举例:一张1920px*500px的banner图,压缩至200kb不到,但是谷歌要求你还要减掉一半多的资源大小,这样肯定会严重影响图片清晰度。
谷歌page得分提升之路漫长,仍需努力!

产品详情页可以用的放大镜效果

Leo 发表了文章 • 2 个评论 • 595 次浏览 • 2018-11-16 13:49 • 来自相关话题

效果图:








 
/*引入资源*/
<link rel="stylesheet" href="css/smoothproducts.css">
<script src="js/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/smoothproducts.min.js"></script>
 /*html+php*/             
       <div class="sp-wrap">
                            <?php if( have_rows('image_gallery') ): ?>
                            <?php while( have_rows('image_gallery') ): the_row(); 
                                        $image = get_sub_field('add_img');
                                        $image_url = $image[url];
                            ?>
                            <a href="<?php echo $image_url ?>">
                                <img alt="<?php the_title();?>" src="<?php bloginfo('template_url')?>/timthumb.php?src=<?php echo $image_url ?>&w=400;&h=400;&zc=1" width="400" height="400" class="img-responsive"/>
                            </a>
                           <?php endwhile;endif;?>
                    </div>
 
/*jquery配置*/
<script type="text/javascript">
    /* wait for images to load */
    $(window).load(function() {
        $('.sp-wrap').smoothproducts();
    });
</script>
 
资源包下载:
看附件 查看全部
效果图:
2.png

1.png

 
/*引入资源*/
<link rel="stylesheet" href="css/smoothproducts.css">
<script src="js/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/smoothproducts.min.js"></script>
 /*html+php*/             
       <div class="sp-wrap">
                            <?php if( have_rows('image_gallery') ): ?>
                            <?php while( have_rows('image_gallery') ): the_row(); 
                                        $image = get_sub_field('add_img');
                                        $image_url = $image[url];
                            ?>
                            <a href="<?php echo $image_url ?>">
                                <img alt="<?php the_title();?>" src="<?php bloginfo('template_url')?>/timthumb.php?src=<?php echo $image_url ?>&w=400;&h=400;&zc=1" width="400" height="400" class="img-responsive"/>
                            </a>
                           <?php endwhile;endif;?>
                    </div>
 
/*jquery配置*/
<script type="text/javascript">
    /* wait for images to load */
    $(window).load(function() {
        $('.sp-wrap').smoothproducts();
    });
</script>
 
资源包下载:
看附件

利用bootstrap模态框做网站升级维护的提示消息框

Leo 发表了文章 • 1 个评论 • 584 次浏览 • 2018-11-14 09:12 • 来自相关话题

 <link rel="stylesheet" href="/notification/css/bootstrap.min.css">
<script src="/notification/js/jquery.min.js"></script>          
<script src="/notification/js/bootstrap.min.js"></script>
  <!-- 模态框(Modal) -->
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog"
             aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close"
                                data-dismiss="modal" aria-hidden="true">
                            &times;
                        </button>
                        <h4 class="modal-title" id="myModalLabel">
                            Website is being upgraded and maintained
                        </h4>
                    </div>
                    <div class="modal-body">
                        We will resume normal access as soon as possible<br>
                        Expect one hour,Stay tuned<br>
                        <div id="show"></div>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal -->
        </div>
    <script>
         //加载模态框
         $('#myModal').modal();

        var show = document.getElementById("show");  
        setInterval(function() {   
        var time = new Date();   // 程序计时的月从0开始取值后+1   
        var m = time.getMonth() + 1;   
        var t = time.getFullYear() + "-" + m + "-"     
        + time.getDate() + " " + time.getHours() + ":"     
        + time.getMinutes() + ":" + time.getSeconds();   
        show.innerHTML = t;  
        }, 100); 

    </script>
<style>
/*模态框*/
.modal-body{
    font-size: 18px;
}
#show{
    font-size: 30px;
}
.modal-open{
    overflow-y: scroll;
    padding-right: 0 !important;
}
/*主要是最后一个css样式,是fix掉bootstrap模态框关闭时的抖动问题*/
</style> 查看全部
1.png

 <link rel="stylesheet" href="/notification/css/bootstrap.min.css">
<script src="/notification/js/jquery.min.js"></script>          
<script src="/notification/js/bootstrap.min.js"></script>
  <!-- 模态框(Modal) -->
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog"
             aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close"
                                data-dismiss="modal" aria-hidden="true">
                            &times;
                        </button>
                        <h4 class="modal-title" id="myModalLabel">
                            Website is being upgraded and maintained
                        </h4>
                    </div>
                    <div class="modal-body">
                        We will resume normal access as soon as possible<br>
                        Expect one hour,Stay tuned<br>
                        <div id="show"></div>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal -->
        </div>
    <script>
         //加载模态框
         $('#myModal').modal();

        var show = document.getElementById("show");  
        setInterval(function() {   
        var time = new Date();   // 程序计时的月从0开始取值后+1   
        var m = time.getMonth() + 1;   
        var t = time.getFullYear() + "-" + m + "-"     
        + time.getDate() + " " + time.getHours() + ":"     
        + time.getMinutes() + ":" + time.getSeconds();   
        show.innerHTML = t;  
        }, 100); 

    </script>
<style>
/*模态框*/
.modal-body{
    font-size: 18px;
}
#show{
    font-size: 30px;
}
.modal-open{
    overflow-y: scroll;
    padding-right: 0 !important;
}
/*主要是最后一个css样式,是fix掉bootstrap模态框关闭时的抖动问题*/
</style>

wordpress升级主程序、主题、插件时卡住

Leo 发表了文章 • 1 个评论 • 671 次浏览 • 2018-11-12 16:01 • 来自相关话题

我们在对wordpress主程序、wordpress主题或者wordpress插件升级的时候,在升级过程自动安装中有时候会出现“正在执行例行维护,请一分钟后回来”的提示,一般在升级结束之后就会自动回复网站原样。

但是有时候会遇到卡住的情况,也就是前端一直会显示这个提示,并且后台刷新之后也显示这个提示,无法进行操作。

遇到这个问题我们应该如何解决呢?
 
通常的做法是 使用FTP或者其他方式登录你的网站目录,你会发现网站根目录下多了一个.maintenance 文件,那么删除WordPress根目录下的 .maintenance ,刷新即可恢复。

而有的时候,在某些服务器上,登陆FTP查看网站文件无法找到.maintenance 文件,这也有可能是卡住之后某些程序没有正常运行所造成的,因此你可以尝试在电脑上创建一个空的txt文件,并将此文件命名为.maintenance ,传到你的网站根目录下,刷新网站即可恢复正常,并且刷新ftp目录,也会发现这个文件自动消失了。 查看全部
我们在对wordpress主程序、wordpress主题或者wordpress插件升级的时候,在升级过程自动安装中有时候会出现“正在执行例行维护,请一分钟后回来”的提示,一般在升级结束之后就会自动回复网站原样。

但是有时候会遇到卡住的情况,也就是前端一直会显示这个提示,并且后台刷新之后也显示这个提示,无法进行操作。

遇到这个问题我们应该如何解决呢?
 
通常的做法是 使用FTP或者其他方式登录你的网站目录,你会发现网站根目录下多了一个.maintenance 文件,那么删除WordPress根目录下的 .maintenance ,刷新即可恢复。

而有的时候,在某些服务器上,登陆FTP查看网站文件无法找到.maintenance 文件,这也有可能是卡住之后某些程序没有正常运行所造成的,因此你可以尝试在电脑上创建一个空的txt文件,并将此文件命名为.maintenance ,传到你的网站根目录下,刷新网站即可恢复正常,并且刷新ftp目录,也会发现这个文件自动消失了。

cpanel 升级php版本的注意点

Leo 发表了文章 • 1 个评论 • 717 次浏览 • 2018-11-09 15:37 • 来自相关话题

当我们从5.5、5.6这些旧版本php升级到7.0、7.1、7.2版本时,可能会发现一些php函数报错,这时候可以在cpanel面板的software 下面​EasyApache 4中开启一些对应的php拓展,这样就能解决对应的报错了。
 





 
 





  查看全部
当我们从5.5、5.6这些旧版本php升级到7.0、7.1、7.2版本时,可能会发现一些php函数报错,这时候可以在cpanel面板的software 下面​EasyApache 4中开启一些对应的php拓展,这样就能解决对应的报错了。
 

TIM图片20181109154927.png

 
 

TIM图片20181109155007.png

 

wordpress前台页面如何快速找到后台对应编辑页面

Leo 发表了文章 • 1 个评论 • 568 次浏览 • 2018-11-06 11:48 • 来自相关话题

wordpress前台页面如何快速找到后台对应编辑页面?
很简单,每一个页面都有一个唯一的id,我们可以通过这个id来找页面,这样就很方便了





 
如图,就是post id为843的,如果是page的话就是page id,如果不会分辨是post还是blog等等,那大不了就是多试几个字段,举个例子,就是把后台的blog、news、post、page等等都点一个进去,然后通过修改浏览器url的id就可以。
  查看全部
wordpress前台页面如何快速找到后台对应编辑页面?
很简单,每一个页面都有一个唯一的id,我们可以通过这个id来找页面,这样就很方便了

1.png

 
如图,就是post id为843的,如果是page的话就是page id,如果不会分辨是post还是blog等等,那大不了就是多试几个字段,举个例子,就是把后台的blog、news、post、page等等都点一个进去,然后通过修改浏览器url的id就可以。
 

Wordpress 更改JPEG图片的压缩质量

Bob 发表了文章 • 1 个评论 • 523 次浏览 • 2018-11-05 11:45 • 来自相关话题

默认情况下,WordPress会针对用户上传的图片进行质量压缩,以提高用户体验,一级手机端的浏览速度。默认图片质量都是压缩到90%,自WordPress 4.5的版本以后,图片质量压缩为82%。虽然速度提升了一点,但是图片确实灰常的模糊,看不清。
WordPress提供了 jpeg_quality 的钩子,我们可以自定义上传图片质量的压缩比列。比如:
function ed_custom_jpeg_quality() {

return 90;}

add_filter( 'jpeg_quality', 'ed_custom_jpeg_quality');这里的90我们可以随意更改,如果不希望压缩,可以改成100. 查看全部
默认情况下,WordPress会针对用户上传的图片进行质量压缩,以提高用户体验,一级手机端的浏览速度。默认图片质量都是压缩到90%,自WordPress 4.5的版本以后,图片质量压缩为82%。虽然速度提升了一点,但是图片确实灰常的模糊,看不清。
WordPress提供了 jpeg_quality 的钩子,我们可以自定义上传图片质量的压缩比列。比如:
function ed_custom_jpeg_quality() {

return 90;}

add_filter( 'jpeg_quality', 'ed_custom_jpeg_quality');
这里的90我们可以随意更改,如果不希望压缩,可以改成100.

wow.js为网站增色

Leo 发表了文章 • 2 个评论 • 543 次浏览 • 2018-11-02 08:42 • 来自相关话题

不多说先看效果
http://igeelee.dfsj.net/
http://sunbright.dfsj.net/  
是不是觉得很有趣,这样小小的一款插件就能做出这么多动画效果。
一些小小的细节效果能为网站增色不少,下面就让我们来学习如何使用这款插件。
 
首先可以参考这篇教程
https://www.eastdesign.net/juanyongdongfangimaginationinspirationshowtime2017518/
1、引入文件

<link rel="stylesheet" href="animate.min.css">
<script src="wow.min.js"></script>
2、HTML

<div class="wow slideInLeft"></div>
<div class="wow slideInRight"></div>

可以加入 data-wow-duration(动画持续时间)和 data-wow-delay(动画延迟时间)属性,如:

<div class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="5s"></div>
<div class="wow slideInRight" data-wow-offset="10"  data-wow-iteration="10"></div>
(具体动画效果,可以在animate.css中找,动画效果很多,根据实际需求来)
3、JavaScript
new WOW().init();   //这种方法,有局限,移动端会出现横向滚动条

如果需要自定义配置,可如下使用:(推荐这种方法,移动端perfect)
var wow = new WOW({
    boxClass: 'wow',
    animateClass: 'animated',
    offset: 0,
    mobile: true,
    live: true
});
wow.init(); 查看全部
不多说先看效果
http://igeelee.dfsj.net/
http://sunbright.dfsj.net/  
是不是觉得很有趣,这样小小的一款插件就能做出这么多动画效果。
一些小小的细节效果能为网站增色不少,下面就让我们来学习如何使用这款插件。
 
首先可以参考这篇教程
https://www.eastdesign.net/juanyongdongfangimaginationinspirationshowtime2017518/
1、引入文件

<link rel="stylesheet" href="animate.min.css">
<script src="wow.min.js"></script>
2、HTML

<div class="wow slideInLeft"></div>
<div class="wow slideInRight"></div>

可以加入 data-wow-duration(动画持续时间)和 data-wow-delay(动画延迟时间)属性,如:

<div class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="5s"></div>
<div class="wow slideInRight" data-wow-offset="10"  data-wow-iteration="10"></div>
(具体动画效果,可以在animate.css中找,动画效果很多,根据实际需求来)
3、JavaScript
new WOW().init();   //这种方法,有局限,移动端会出现横向滚动条

如果需要自定义配置,可如下使用:(推荐这种方法,移动端perfect)
var wow = new WOW({
    boxClass: 'wow',
    animateClass: 'animated',
    offset: 0,
    mobile: true,
    live: true
});
wow.init();

推荐俩款辅助WPBakery Page Builder的免费插件

Leo 发表了文章 • 2 个评论 • 766 次浏览 • 2018-11-01 08:54 • 来自相关话题

第一款插件:Mega Addons For Visual Composer 这个插件激活人数5W+,里面包括了很多常用的功能,可以使用






第二款插件:Unlimited Addons for WPBakery Page Builder   这个插件激活人数也有1W+​





 
一些特殊页面需要客户能够更方便的操作,那么使用这种可视化编辑插件还是很Userbility的,而WPBakery Page Builder插件本身可能自带的一些功能不是很丰富,这时候我们就可以安装这些补丁插件了 查看全部
第一款插件:Mega Addons For Visual Composer 这个插件激活人数5W+,里面包括了很多常用的功能,可以使用

1.png


第二款插件:Unlimited Addons for WPBakery Page Builder   这个插件激活人数也有1W+​

2.png

 
一些特殊页面需要客户能够更方便的操作,那么使用这种可视化编辑插件还是很Userbility的,而WPBakery Page Builder插件本身可能自带的一些功能不是很丰富,这时候我们就可以安装这些补丁插件了