WordPress

WordPress

WordPress建站及WordPress SEO相关话题
Shopify

Shopify

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

Google SEO

Google SEO相关话题
SEM

SEM

SEM相关话题
Zoho

Zoho

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

EDM

讨论Email Marketing相关话题
Symantec SSL

Symantec SSL

讨论Symantec SSL安全相关话题
隽永东方售后服务

隽永东方售后服务

隽永东方售后服务专区

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

WordPressLeo 发表了文章 • 2 个评论 • 9 次浏览 • 21 小时前 • 来自相关话题

效果图:








 
/*引入资源*/
<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>
 
资源包下载:
看附件

Shopify sections模板文件里面添加text、textarea等字段

ShopifyBob 发表了文章 • 1 个评论 • 33 次浏览 • 2 天前 • 来自相关话题

现在使用Shopify的用户越来越多,但是自己有不会程序的开发,所以基本上都是使用免费或者购买shopify主题来搭建自己的店铺。但不是所有的主题都能完美的符合自己的心意,比如想在一些图片下面添加一段简单的描述、或者在某个板块上面添加一个标题,点单的方法是找到对应的标签下面添加一个标签,然后把一段文字或者一个标题放在里面,但是这样比较麻烦,每次修改还得找到对应的文件,并且还得天天和一大堆HTML打交道,对于不懂得人是一件非常头疼的事情。下面我给大家说一个方法,只要复制粘贴就可以了,
例如;在首页的三个图片的上面和下面添加标题和描述,如图所示:





 
1、首先需要打开后台,进入到代码编辑的部分:




 
同时把Customize theme页面也打开,将标题的输入框放在下图左边的位置:




 
2、然后在sections文件下面找到对应的模块文件,然后鼠标拉到最下面黑色标签位置:




 
3、将下面的代码添加在上图红色位置,





  ,

{
"type": "text",
"id": "title",
"label": "Heading",
"info": "Optional"
}4、然后刷新Customize theme页面,就会看到一个输入框:





 
然后将需要添加的标题写在里面,保存。
 
5、接下来还是回到原来的模块文件,鼠标拉到最上面,并找到需要添加的位置:





 
6、添加以下代码,并保存:




<h2>{{ section.settings.title }}</h2>7、刷新前台,添加的内容就显示了,当然样式要简单的调整下就可以了。





 
图片下面的标题和一段文字也是同样的添加方法:












 
如果想成CheckBox,只要将type改成checkbox,id重新改一个小写的名字,方便调用,label改成一个小的标题就可以。
 
如果在添加的过程中遇到其他的问题,可通过下面的链接联系我们。
https://www.eastdesign.net/contact/ 查看全部
现在使用Shopify的用户越来越多,但是自己有不会程序的开发,所以基本上都是使用免费或者购买shopify主题来搭建自己的店铺。但不是所有的主题都能完美的符合自己的心意,比如想在一些图片下面添加一段简单的描述、或者在某个板块上面添加一个标题,点单的方法是找到对应的标签下面添加一个标签,然后把一段文字或者一个标题放在里面,但是这样比较麻烦,每次修改还得找到对应的文件,并且还得天天和一大堆HTML打交道,对于不懂得人是一件非常头疼的事情。下面我给大家说一个方法,只要复制粘贴就可以了,
例如;在首页的三个图片的上面和下面添加标题和描述,如图所示:

QQ图片20181114134134.png

 
1、首先需要打开后台,进入到代码编辑的部分:
QQ图片20181114133659.png

 
同时把Customize theme页面也打开,将标题的输入框放在下图左边的位置:
QQ图片20181114135135.png

 
2、然后在sections文件下面找到对应的模块文件,然后鼠标拉到最下面黑色标签位置:
QQ图片20181114135425.png

 
3、将下面的代码添加在上图红色位置,

QQ图片20181114135756.png

 
	  ,

{
"type": "text",
"id": "title",
"label": "Heading",
"info": "Optional"
}
4、然后刷新Customize theme页面,就会看到一个输入框:

QQ图片20181114140125.png

 
然后将需要添加的标题写在里面,保存。
 
5、接下来还是回到原来的模块文件,鼠标拉到最上面,并找到需要添加的位置:

QQ图片20181114140434.png

 
6、添加以下代码,并保存:

QQ图片20181114140527.png
<h2>{{ section.settings.title }}</h2>
7、刷新前台,添加的内容就显示了,当然样式要简单的调整下就可以了。

QQ图片20181114140712.png

 
图片下面的标题和一段文字也是同样的添加方法:
QQ图片20181114141042.png

QQ图片20181114141227.png

QQ图片20181114141304.png

 
如果想成CheckBox,只要将type改成checkbox,id重新改一个小写的名字,方便调用,label改成一个小的标题就可以。
 
如果在添加的过程中遇到其他的问题,可通过下面的链接联系我们。
https://www.eastdesign.net/contact/

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

WordPressLeo 发表了文章 • 1 个评论 • 27 次浏览 • 3 天前 • 来自相关话题

 <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升级主程序、主题、插件时卡住

WordPressLeo 发表了文章 • 1 个评论 • 32 次浏览 • 4 天前 • 来自相关话题

我们在对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版本的注意点

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

 

推荐几个SEO优化过程中可以利用的网站

Google SEOcarol 发表了文章 • 1 个评论 • 51 次浏览 • 2018-11-09 15:01 • 来自相关话题

一、检测网站在移动设备的适合性
当前,Mobile SEO的重要程度不断提高。具体表现为,60%的Google搜索现在来自移动设备。谷歌也开始使用移动优先算法。可以参考谷歌3月份的webmasters——rolling-out-mobile-first-indexing.html。既然做谷歌SEO,要想知道网站是否适合移动设备,当然还是推荐谷歌的工具:Google’s Mobile-Friendly Testing Tool.
1、用我们网站做了个测试




谷歌对我们官网在手移动设备的适应性还是有很高的认可的
 
2、如果网站在移动端适应差,谷歌会给出下图这个分析,并给出一定的意见您。利用这个工具我们可以看到Google是否认为我们网站针对移动设备进行了优化。



 
二、测试网站速度
1、通过我们常用的pagespeed insight检查网速是,除了主页,其实博客页和产品页这样的内部页面也可以稍微测一下。
2、利用WebpageTest ,这个网站进行的测试实际上是通过加载页面,让我们了解导致速度难以上升的原因。




他会在显示每个阶段所加载的内容以及前端的效果。
 
三、查找并修复broken links
broken links对用户体验不利,也可能会损害到网站的SEO,网站出现Broken links时分数往往会被降低。当然如果是那些僵尸页面,谷歌会停止这个报错,但是如果是那些我们重要的页面,还是希望尽快能够恢复。因此可以利用免费工具brokenlinkcheck





 
 
 
  查看全部
一、检测网站在移动设备的适合性
当前,Mobile SEO的重要程度不断提高。具体表现为,60%的Google搜索现在来自移动设备。谷歌也开始使用移动优先算法。可以参考谷歌3月份的webmasters——rolling-out-mobile-first-indexing.html。既然做谷歌SEO,要想知道网站是否适合移动设备,当然还是推荐谷歌的工具:Google’s Mobile-Friendly Testing Tool.
1、用我们网站做了个测试
111.jpg

谷歌对我们官网在手移动设备的适应性还是有很高的认可的
 
2、如果网站在移动端适应差,谷歌会给出下图这个分析,并给出一定的意见您。利用这个工具我们可以看到Google是否认为我们网站针对移动设备进行了优化。
example.png

 
二、测试网站速度
1、通过我们常用的pagespeed insight检查网速是,除了主页,其实博客页和产品页这样的内部页面也可以稍微测一下。
2、利用WebpageTest ,这个网站进行的测试实际上是通过加载页面,让我们了解导致速度难以上升的原因。
123.png

他会在显示每个阶段所加载的内容以及前端的效果。
 
三、查找并修复broken links
broken links对用户体验不利,也可能会损害到网站的SEO,网站出现Broken links时分数往往会被降低。当然如果是那些僵尸页面,谷歌会停止这个报错,但是如果是那些我们重要的页面,还是希望尽快能够恢复。因此可以利用免费工具brokenlinkcheck

333.png

 
 
 
 

隽永东方推荐一款非常适合外贸企业低成本自制宣传视频的软件--VideoScribe

其他Eastern_Design_Studio 发表了文章 • 0 个评论 • 124 次浏览 • 2018-11-07 17:18 • 来自相关话题

很多外贸中小企业都有制作简单的宣传视频的需求,可往往被专业视频公司高昂的价格给吓着了,迫切需要一款价格亲民,上手很小白的视频制作软件,今天我们就来推荐一款很不错的视频制作软件:https://www.videoscribe.co 
 
制作出来的效果可以发给大家看看:
 
https://www.eastdesign.net/wp-content/uploads/2018/11/%E9%9A%BD%E6%B0%B8%E9%A3%8E%E9%87%87%E8%A7%86%E9%A2%91.mp4
 这款软件很容易上手,基本不需要什么专业的IT知识,简单录制了一个视频给大家参考:
 
https://www.eastdesign.net/videos/screencast%202018-11-07%2015-24-57.mp4 查看全部
很多外贸中小企业都有制作简单的宣传视频的需求,可往往被专业视频公司高昂的价格给吓着了,迫切需要一款价格亲民,上手很小白的视频制作软件,今天我们就来推荐一款很不错的视频制作软件:https://www.videoscribe.co 
 
制作出来的效果可以发给大家看看:
 
https://www.eastdesign.net/wp-content/uploads/2018/11/%E9%9A%BD%E6%B0%B8%E9%A3%8E%E9%87%87%E8%A7%86%E9%A2%91.mp4
 这款软件很容易上手,基本不需要什么专业的IT知识,简单录制了一个视频给大家参考:
 
https://www.eastdesign.net/videos/screencast%202018-11-07%2015-24-57.mp4

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

WordPressLeo 发表了文章 • 1 个评论 • 51 次浏览 • 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图片的压缩质量

WordPressBob 发表了文章 • 1 个评论 • 49 次浏览 • 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为网站增色

WordPressLeo 发表了文章 • 2 个评论 • 49 次浏览 • 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();