WordPress

WordPress

分享一款YouTube插件

WordPressLeo 发表了文章 • 1 个评论 • 7 次浏览 • 16 小时前 • 来自相关话题

插件名:YouTube
作者:EmbedPlus Team
YouTube Embed and YouTube Gallery WordPress Plugin. Embed a responsive video, YouTube channel, playlist gallery, or live stream
支持自适应视频,youtube频道订阅,视频列表画册,甚至是直播
设置相对简单,以画册为例,可以设置为一行三列,一页显示六个,多余视频会以分页形式出现
用这个插件前提是要获取youtube api key
方法:新建一个page,里面插入一个视频列表,然后在页面模板对应的位置获取这个页面的内容即可。
页面加载的时候也不会加载视频,针对国外站并且有单独的中文站,那么完全可以用这个插件,完全不影响加载速度。中文站不适合,毕竟是加载的谷歌资源。 查看全部
插件名:YouTube
作者:EmbedPlus Team
YouTube Embed and YouTube Gallery WordPress Plugin. Embed a responsive video, YouTube channel, playlist gallery, or live stream
支持自适应视频,youtube频道订阅,视频列表画册,甚至是直播
设置相对简单,以画册为例,可以设置为一行三列,一页显示六个,多余视频会以分页形式出现
用这个插件前提是要获取youtube api key
方法:新建一个page,里面插入一个视频列表,然后在页面模板对应的位置获取这个页面的内容即可。
页面加载的时候也不会加载视频,针对国外站并且有单独的中文站,那么完全可以用这个插件,完全不影响加载速度。中文站不适合,毕竟是加载的谷歌资源。

推荐一款插件配合contact form 7

WordPressLeo 发表了文章 • 1 个评论 • 73 次浏览 • 2018-07-09 12:03 • 来自相关话题

Contact Form CFDB7,Save and manage Contact Form 7 messages. Never lose important data. Contact Form CFDB7 plugin is an add-on for the Contact Form 7 plugin.
可以用来当做邮箱的功能,邮件都会在这个插件里保存,格式完全和邮箱里一样,完全按照你的字段设置来的
用了这个的话,上回我分享的留言插件就不需要了,完全可以用这个插件,更方便 查看全部
Contact Form CFDB7,Save and manage Contact Form 7 messages. Never lose important data. Contact Form CFDB7 plugin is an add-on for the Contact Form 7 plugin.
可以用来当做邮箱的功能,邮件都会在这个插件里保存,格式完全和邮箱里一样,完全按照你的字段设置来的
用了这个的话,上回我分享的留言插件就不需要了,完全可以用这个插件,更方便

分享一款留言插件Gwolle Guestbook

WordPressLeo 发表了文章 • 1 个评论 • 192 次浏览 • 2018-06-22 12:01 • 来自相关话题

Gwolle Guestbook 这个留言插件比较小众,4W人激活,目前没有发现有什么问题。
使用方法较为简单:
首先搜索Gwolle Guestbook安装并激活此插件;
然后新建一个page,随便取个名字,比如message board,接着将插件短代码[gwolle_gb]放置新建的page中;
接着设置看需求定,需要的打钩即可;
最后将你前面新建的message board 页面调用引入到你需要显示这个留言板的位置,大功告成!
 
私以为,此插件适用于代替一些表单,比如类似底部那种contact form 7表单,相比第三方表单来说,这个样式可以diy调整,不足的是,这个仅仅是留言,只能后台看到,无法发送邮件,但碰到确实需要底部放样式可以diy的表单,smtp插件又始终调整不好,邮件无法发送的情况下,那么可以考虑一下,毕竟邮件只是一种信息传递形式,对一个公司最重要的还是浏览者给到的信息。 查看全部
Gwolle Guestbook 这个留言插件比较小众,4W人激活,目前没有发现有什么问题。
使用方法较为简单:
首先搜索Gwolle Guestbook安装并激活此插件;
然后新建一个page,随便取个名字,比如message board,接着将插件短代码[gwolle_gb]放置新建的page中;
接着设置看需求定,需要的打钩即可;
最后将你前面新建的message board 页面调用引入到你需要显示这个留言板的位置,大功告成!
 
私以为,此插件适用于代替一些表单,比如类似底部那种contact form 7表单,相比第三方表单来说,这个样式可以diy调整,不足的是,这个仅仅是留言,只能后台看到,无法发送邮件,但碰到确实需要底部放样式可以diy的表单,smtp插件又始终调整不好,邮件无法发送的情况下,那么可以考虑一下,毕竟邮件只是一种信息传递形式,对一个公司最重要的还是浏览者给到的信息。

wordpress指定插件禁止更新

WordPressLeo 发表了文章 • 1 个评论 • 212 次浏览 • 2018-06-11 13:49 • 来自相关话题

function remove_update_notifications( $value ) {

    if ( isset( $value ) && is_object( $value ) ) {
        unset( $value->response[ 'js_composer/js_composer.php' ] );
    }

    return $value;
}
add_filter( 'site_transient_update_plugins', 'remove_update_notifications' );
 
只需找到插件目录下插件名.php的文件,将“js_composer/js_composer.php”路径替换为指定插件目录下的插件名.php文件,因为这个文件里包含插件版本号,出新版本后,wordpress匹配后会提示更新的,对于某些特殊插件,不建议更新的、不方便更新的,都可以这样指定禁止。
之前我有分享过一个主题和所有插件都禁止更新的文章,考虑到杀伤范围略大,不建议使用,今次这个更加适用。 查看全部
function remove_update_notifications( $value ) {

    if ( isset( $value ) && is_object( $value ) ) {
        unset( $value->response[ 'js_composer/js_composer.php' ] );
    }

    return $value;
}
add_filter( 'site_transient_update_plugins', 'remove_update_notifications' );
 
只需找到插件目录下插件名.php的文件,将“js_composer/js_composer.php”路径替换为指定插件目录下的插件名.php文件,因为这个文件里包含插件版本号,出新版本后,wordpress匹配后会提示更新的,对于某些特殊插件,不建议更新的、不方便更新的,都可以这样指定禁止。
之前我有分享过一个主题和所有插件都禁止更新的文章,考虑到杀伤范围略大,不建议使用,今次这个更加适用。

公司自己部门电脑网站都打的开,其他部门都打不开,缓存也清了,这是什么原因?有什么解决的方法吗?

WordPressEastern_Design_Studio 回复了问题 • 2 人关注 • 1 个回复 • 245 次浏览 • 2018-05-29 18:05 • 来自相关话题

ssl怎么安装?(从零开始)

WordPressEastern_Design_Studio 回复了问题 • 2 人关注 • 1 个回复 • 204 次浏览 • 2018-05-28 17:09 • 来自相关话题

web移动端页面性能优化方案(进阶版)

WordPressLeo 发表了文章 • 2 个评论 • 163 次浏览 • 2018-05-28 16:31 • 来自相关话题

如何优化HTML5在移动设置上的性能表现,首先我们需要明确以下几个原则:
1、PC优化手段在Mobile侧同样适用。
2、在Mobile侧我们提出三秒种渲染完成首屏指标。
3、基于第二点,首屏加载3秒完成或使用Loading。
4、基于联通3G网络平均338KB/s(2.71Mb/s),所以首屏资源不应超过1014KB。
5、Mobile侧因手机配置原因,除加载外渲染速度也是优化重点。
6、基于第五点,要合理处理代码减少渲染损耗。
7、基于第二、第五点,所有影响首屏加载和渲染的代码应在处理逻辑中后置。
8、加载完成后用户交互使用时也需注意性能。
 
我们可以先看下面的一张图片:





 
从上图可以看出,上面基本涵盖所有的优化方案了。在这里,只是针对其中几个代表性方案出来探讨。
加载优化
对于移动端的网页来说,加载过程是最为耗时的过程,可能会占到总耗时的80%时间,因此是优化的重点,当然,手机站的其他前端要素优化也是不能忽略的。


1、减少HTTP请求
 因为手机浏览器同时响应请求为4个请求(Android支持4个,iOS 5后可支持6个),所以要尽量减少页面的请求数,首次加载同时请求数不能超过4个,
(1)、合并CSS、JavaScript
(2)、合并小图片,使用雪碧图(简单说:就是一张png透明背景图片,上面有很多其他图片,然后通过css的背景图片定位属性定到所需图片,这样就不用一张张图片的请求了,请求一张雪碧图即可,这样大大减少请求数)
 
2、缓存
 使用缓存可以减少向服务器的请求数,节省加载时间,所以所有静态资源都要在服务器端设置缓存,并且尽量使用长Cache(长Cache资源的更新可使用时间戳)。
(1)、缓存一切可缓存的资源
(2)、使用长Cache(使用时间戳更新Cache)
(3)、使用外联式引用CSS、JavaScript(所以千万别写内联这些了)
 
3、压缩HTML、CSS、JavaScript
减少资源大小可以加快网页显示速度,所以要对HTML、CSS、JavaScript等进行代码压缩,并在服务器端设置GZip。
(2)、压缩(例如,多余的空格、换行符和缩进)
(3)、启用GZip
 
4、无阻塞
写在HTML头部的JavaScript(无异步),和写在HTML标签中的Style会阻塞页面的渲染,因此CSS放在页面头部并使用Link方式引入,避免在HTML标签中写Style,JavaScript放在页面尾部或使用异步方式加载。
 
5、压缩图片
图片是最占流量的资源,因此尽量避免使用他,使用时选择最合适的格式(实现需求的前提下,以大小判断),合适的大小,然后使用智图压缩,同时在代码中用Srcset来按需显示。(关于srcset 属性可以狠狠地点击查看)
(  !important 过度压缩图片大小影响图片显示效果。)
 
6、减少Cookie,Cookie会影响加载速度,所以静态资源域名不使用Cookie。
 
7、异步加载第三方资源
第三方资源不可控会影响页面的加载和显示,因此要异步加载第三方资源,当然最好还是本地化!
 
脚本执行优化
脚本处理不当会阻塞页面加载、渲染,因此在使用时需要注意以下几点:

1、CSS写在头部,JavaScript写在尾部或异步。
2、避免图片和iFrame等的空Src,空Src会重新加载当前页面,影响速度和效率。
 
CSS优化

1、尽量避免写在HTML标签中写Style属性。
2、避免CSS表达式,CSS表达式的执行需跳出CSS树的渲染,因此请避免CSS表达式。
3、移除空的CSS规则,空的CSS规则增加了CSS文件的大小,且影响CSS树的执行,所以需移除空的CSS规则。
4、正确使用Display的属性,Display属性会影响页面的渲染,因此建议各位要合理使用。
    (1)、display:inline后不应该再使用width、height、margin、padding以及float
    (2)、display:inline-block后不应该再使用float
    (3)、display:block后不应该再使用vertical-align
    (4)、display:table-*后不应该再使用margin或者float
至于为什么,可以网上查看一下w3c,举例,inline-block是行内块级元素,如果你再使用float又变成浮动元素;
inline是行内元素,是没有宽高的,自然就没有办法设置内外间距
5、不滥用Float,Float在渲染时计算量比较大,尽量减少使用。
6、不滥用Web字体,Web字体需要下载,解析,重绘当前页面,尽量减少使用,所以字体要本地化。
7、不声明过多的Font-size,过多的Font-size引发CSS树的效率。
8、值为0时不需要任何单位,为了浏览器的兼容性和性能,值为0时不要带单位,举例padding:0 而不是0px。
9、标准化各种浏览器前缀
    (1)、无前缀应放在最后。
    (2)、CSS动画只用(-webkit- 无前缀)两种即可。
    (3)、其它前缀为“-webkit- -moz- -ms-无前缀”四种(-o-Opera浏览器改用blink内核,所以淘汰)。
10、避免让选择符看起来像正则表达式。(不过一般来说我们不会将css选择器写的过于复杂)
 
JavaScript执行优化
1、减少重绘和回流
    (1)、避免不必要的Dom操作(如果套模板,没有用到的千万记得删除)
    (2)、尽量改变Class而不是Style,使用classList代替className(举例,jquery改变一个节点的属性,最好是通过addClass,而不是直接改变css属性)
    (3)、避免使用document.write
    (4)、减少drawImage
2、缓存Dom选择与计算,每次Dom选择都要计算,缓存他。
3、缓存列表.length,每次.length都要计算,用一个变量保存这个值。
4、尽量使用事件代理,避免批量绑定事件。(事件冒泡、事件补货了解一下,一次使用终生受益)
5、尽量使用ID选择器,ID选择器是最快的。
6、TOUCH事件优化,使用touchstart、touchend代替click,因快影响速度快,但应注意Touch响应过快,易引发误操作。
 
渲染优化
HTML文档是以包含文档编码信息的数据流方式在网络间传输,页面的编码信息一般会在HTTP响应的头部信息或在文档内的HTML标记中指明,客户端浏览 器只有在确定了页面编码后才能正确的渲染页面,所以在绘制页面或执行任何的javascript代码前,大部分的浏览器(ie6、ie7、ie8除外)都 会缓冲一定字节的数据来从中查找编码信息,不同的浏览器当中预缓冲的字节数是不一样的。


1、HTML使用Viewport
Viewport可以加速页面的渲染,请使用以下代码:
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
2、减少Dom节点
Dom节点太多影响页面的渲染,应尽量减少Dom节点。(html也要精简,减少不必要的节点)

3、动画优化
(1)、尽量使用CSS3动画。
(2)、合理使用requestAnimationFrame动画代替setTimeout。
(3)、适当使用Canvas动画5个元素以内使用css动画,5个以上使用Canvas动画(iOS8可使用webGL)。


4、高频事件优化
 Touchmove、Scroll事件可导致多次渲染(尽量不要用)。
(1)、使用requestAnimationFrame监听帧变化,使得在正确的时间进行渲染。
(2)、增加响应变化的时间间隔,减少重绘次数。

5、GPU加速
CSS中以下属性(CSS3 transitions、CSS3 3D transforms、Opacity、Canvas、WebGL、Video)来触发GPU渲染,请合理使用。

另外,过渡使用会引发手机过耗电增加。

HTML5只是一种方法和手段,并不是万能的,思考怎么符合移动端设备特别是没错,但前提务必要基于PC站框架结构和内容。
  查看全部
如何优化HTML5在移动设置上的性能表现,首先我们需要明确以下几个原则:
1、PC优化手段在Mobile侧同样适用。
2、在Mobile侧我们提出三秒种渲染完成首屏指标。
3、基于第二点,首屏加载3秒完成或使用Loading。
4、基于联通3G网络平均338KB/s(2.71Mb/s),所以首屏资源不应超过1014KB。
5、Mobile侧因手机配置原因,除加载外渲染速度也是优化重点。
6、基于第五点,要合理处理代码减少渲染损耗。
7、基于第二、第五点,所有影响首屏加载和渲染的代码应在处理逻辑中后置。
8、加载完成后用户交互使用时也需注意性能。
 
我们可以先看下面的一张图片:

20160218103753_24106.jpeg

 
从上图可以看出,上面基本涵盖所有的优化方案了。在这里,只是针对其中几个代表性方案出来探讨。
加载优化
对于移动端的网页来说,加载过程是最为耗时的过程,可能会占到总耗时的80%时间,因此是优化的重点,当然,手机站的其他前端要素优化也是不能忽略的。


1、减少HTTP请求
 因为手机浏览器同时响应请求为4个请求(Android支持4个,iOS 5后可支持6个),所以要尽量减少页面的请求数,首次加载同时请求数不能超过4个,
(1)、合并CSS、JavaScript
(2)、合并小图片,使用雪碧图(简单说:就是一张png透明背景图片,上面有很多其他图片,然后通过css的背景图片定位属性定到所需图片,这样就不用一张张图片的请求了,请求一张雪碧图即可,这样大大减少请求数
 
2、缓存
 使用缓存可以减少向服务器的请求数,节省加载时间,所以所有静态资源都要在服务器端设置缓存,并且尽量使用长Cache(长Cache资源的更新可使用时间戳)。
(1)、缓存一切可缓存的资源
(2)、使用长Cache(使用时间戳更新Cache)
(3)、使用外联式引用CSS、JavaScript(所以千万别写内联这些了)
 
3、压缩HTML、CSS、JavaScript
减少资源大小可以加快网页显示速度,所以要对HTML、CSS、JavaScript等进行代码压缩,并在服务器端设置GZip。
(2)、压缩(例如,多余的空格、换行符和缩进)
(3)、启用GZip
 
4、无阻塞
写在HTML头部的JavaScript(无异步),和写在HTML标签中的Style会阻塞页面的渲染,因此CSS放在页面头部并使用Link方式引入,避免在HTML标签中写Style,JavaScript放在页面尾部或使用异步方式加载。
 
5、压缩图片
图片是最占流量的资源,因此尽量避免使用他,使用时选择最合适的格式(实现需求的前提下,以大小判断),合适的大小,然后使用智图压缩,同时在代码中用Srcset来按需显示。(关于srcset 属性可以狠狠地点击查看)
(  !important 过度压缩图片大小影响图片显示效果。)
 
6、减少Cookie,Cookie会影响加载速度,所以静态资源域名不使用Cookie。
 
7、异步加载第三方资源
第三方资源不可控会影响页面的加载和显示,因此要异步加载第三方资源,当然最好还是本地化!
 
脚本执行优化
脚本处理不当会阻塞页面加载、渲染,因此在使用时需要注意以下几点:

1、CSS写在头部,JavaScript写在尾部或异步。
2、避免图片和iFrame等的空Src,空Src会重新加载当前页面,影响速度和效率。
 
CSS优化

1、尽量避免写在HTML标签中写Style属性。
2、避免CSS表达式,CSS表达式的执行需跳出CSS树的渲染,因此请避免CSS表达式。
3、移除空的CSS规则,空的CSS规则增加了CSS文件的大小,且影响CSS树的执行,所以需移除空的CSS规则。
4、正确使用Display的属性,Display属性会影响页面的渲染,因此建议各位要合理使用。
    (1)、display:inline后不应该再使用width、height、margin、padding以及float
    (2)、display:inline-block后不应该再使用float
    (3)、display:block后不应该再使用vertical-align
    (4)、display:table-*后不应该再使用margin或者float

至于为什么,可以网上查看一下w3c,举例,inline-block是行内块级元素,如果你再使用float又变成浮动元素;
inline是行内元素,是没有宽高的,自然就没有办法设置内外间距
5、不滥用Float,Float在渲染时计算量比较大,尽量减少使用。
6、不滥用Web字体,Web字体需要下载,解析,重绘当前页面,尽量减少使用,所以字体要本地化。
7、不声明过多的Font-size,过多的Font-size引发CSS树的效率。
8、值为0时不需要任何单位,为了浏览器的兼容性和性能,值为0时不要带单位,举例padding:0 而不是0px
9、标准化各种浏览器前缀
    (1)、无前缀应放在最后。
    (2)、CSS动画只用(-webkit- 无前缀)两种即可。
    (3)、其它前缀为“-webkit- -moz- -ms-无前缀”四种(-o-Opera浏览器改用blink内核,所以淘汰)。
10、避免让选择符看起来像正则表达式。(不过一般来说我们不会将css选择器写的过于复杂)
 
JavaScript执行优化
1、减少重绘和回流
    (1)、避免不必要的Dom操作(如果套模板,没有用到的千万记得删除)
    (2)、尽量改变Class而不是Style,使用classList代替className(举例,jquery改变一个节点的属性,最好是通过addClass,而不是直接改变css属性)
    (3)、避免使用document.write
    (4)、减少drawImage
2、缓存Dom选择与计算,每次Dom选择都要计算,缓存他。
3、缓存列表.length,每次.length都要计算,用一个变量保存这个值。
4、尽量使用事件代理,避免批量绑定事件。(事件冒泡、事件补货了解一下,一次使用终生受益
5、尽量使用ID选择器,ID选择器是最快的。
6、TOUCH事件优化,使用touchstart、touchend代替click,因快影响速度快,但应注意Touch响应过快,易引发误操作。
 
渲染优化
HTML文档是以包含文档编码信息的数据流方式在网络间传输,页面的编码信息一般会在HTTP响应的头部信息或在文档内的HTML标记中指明,客户端浏览 器只有在确定了页面编码后才能正确的渲染页面,所以在绘制页面或执行任何的javascript代码前,大部分的浏览器(ie6、ie7、ie8除外)都 会缓冲一定字节的数据来从中查找编码信息,不同的浏览器当中预缓冲的字节数是不一样的。


1、HTML使用Viewport
Viewport可以加速页面的渲染,请使用以下代码:
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
2、减少Dom节点
Dom节点太多影响页面的渲染,应尽量减少Dom节点。(html也要精简,减少不必要的节点)

3、动画优化
(1)、尽量使用CSS3动画。
(2)、合理使用requestAnimationFrame动画代替setTimeout。
(3)、适当使用Canvas动画5个元素以内使用css动画,5个以上使用Canvas动画(iOS8可使用webGL)。


4、高频事件优化
 Touchmove、Scroll事件可导致多次渲染(尽量不要用)。
(1)、使用requestAnimationFrame监听帧变化,使得在正确的时间进行渲染。
(2)、增加响应变化的时间间隔,减少重绘次数。

5、GPU加速
CSS中以下属性(CSS3 transitions、CSS3 3D transforms、Opacity、Canvas、WebGL、Video)来触发GPU渲染,请合理使用。

另外,过渡使用会引发手机过耗电增加。

HTML5只是一种方法和手段,并不是万能的,思考怎么符合移动端设备特别是没错,但前提务必要基于PC站框架结构和内容。
 

修改WordPress后台登录页Logo和链接

WordPressBob 发表了文章 • 1 个评论 • 141 次浏览 • 2018-05-28 09:58 • 来自相关话题

Wordpress后台登录页面通常带有一个指向WordPress官网的 Logo 图片和链接,如果是使用WordPress来搭建自己的网站,将后台登录页面的logo和URL替换成自己的,会更显得专业一点。
 
方法一:
 
修改后台登录页Logo链接
需要我们我做的事情非常简单,我们在主题目录下面找到functions.php文件,将下面的代码复制在文件的最下面:function custom_loginlogo_url($url) {
return 'http://yourdomain.com';
}
add_filter( 'login_headerurl', 'custom_loginlogo_url' );
修改后台登录页Logo图片
和上面修改链接的方法一致,在functions.php的最下面添加一下代码:function my_custom_login_logo() {
echo '<style type="text/css">
.login h1 a {
background-image:url("/wp-content/themes/yourzhuti/images/logo.png") !important;
height: 60px;
width: 186px !important;
-webkit-background-size: 186px;
background-size: 186px;
}
</style>';
}
add_action('login_head', 'my_custom_login_logo');
代码里面的样式可根据自己logo图片的宽高进行修改。
 
方法二:
如果以上步骤感觉麻烦,可以直接替换系统文件中的图片和URL:
 
第一、更换logo图片
事先将我们logo图片重新另存一份,命名为wordpress-logo.png,在Wordpress根目录wp-admin/images文件夹中找到wordpress-logo.png覆盖替换成我们自己图片即可。
 
第二、自定义logo链接地址
在Wordpress根目录下的wp-login.php文件,打开该文件后查找$login_header_url,将其后面的链接地址替换成自己想要的链接即可。
 
以上两种方法建议采用第一种,第二种是当WordPress系统文件更新是,该修改的内容会被替换,每次更新每次替换,非常麻烦。 查看全部
Wordpress后台登录页面通常带有一个指向WordPress官网的 Logo 图片和链接,如果是使用WordPress来搭建自己的网站,将后台登录页面的logo和URL替换成自己的,会更显得专业一点。
 
方法一:
 
修改后台登录页Logo链接
需要我们我做的事情非常简单,我们在主题目录下面找到functions.php文件,将下面的代码复制在文件的最下面:
function custom_loginlogo_url($url) {
return 'http://yourdomain.com';
}
add_filter( 'login_headerurl', 'custom_loginlogo_url' );

修改后台登录页Logo图片
和上面修改链接的方法一致,在functions.php的最下面添加一下代码:
function my_custom_login_logo() {
echo '<style type="text/css">
.login h1 a {
background-image:url("/wp-content/themes/yourzhuti/images/logo.png") !important;
height: 60px;
width: 186px !important;
-webkit-background-size: 186px;
background-size: 186px;
}
</style>';
}
add_action('login_head', 'my_custom_login_logo');

代码里面的样式可根据自己logo图片的宽高进行修改。
 
方法二:
如果以上步骤感觉麻烦,可以直接替换系统文件中的图片和URL:
 
第一、更换logo图片
事先将我们logo图片重新另存一份,命名为wordpress-logo.png,在Wordpress根目录wp-admin/images文件夹中找到wordpress-logo.png覆盖替换成我们自己图片即可。
 
第二、自定义logo链接地址
在Wordpress根目录下的wp-login.php文件,打开该文件后查找$login_header_url,将其后面的链接地址替换成自己想要的链接即可。
 
以上两种方法建议采用第一种,第二种是当WordPress系统文件更新是,该修改的内容会被替换,每次更新每次替换,非常麻烦。

WordPress文章删除时同时删除文章所包含的图片

WordPressBob 发表了文章 • 1 个评论 • 135 次浏览 • 2018-05-24 10:43 • 来自相关话题

好的网站需要不停的更新内容和图片,才能不断地增加网站的流量,并且提升网站的排名。网站内容的更新不知需要添加,有时候也需要将老的,没有实用性的文章删除,让网站变得更加有吸引力。删除文章的同时也要将其所带的图片一起删除,这样可以节省不少的空间资源。而WordPress在删除图片的同时,默认是不会删除文章所带有的图片,简单的方法就是安装WordPress插件来删除图片。还有一种方法就是在主题functions.php函数文件里面添加一段代码:/* 删除文章时删除图片附件 */
/* 定义函数名称 */
function delete_post_and_attachments($post_ID) {
global $wpdb;
//删除文章特色图片
$thumbnails = $wpdb->get_results( "SELECT * FROM $wpdb->postmeta WHERE meta_key = '_thumbnail_id' AND post_id = $post_ID" );
foreach ( $thumbnails as $thumbnail ) {
wp_delete_attachment( $thumbnail->meta_value, true );
}
//删除文章的图片附件
$attachments = $wpdb->get_results( "SELECT * FROM $wpdb->posts WHERE post_parent = $post_ID AND post_type = 'attachment'" );
foreach ( $attachments as $attachment ) {
wp_delete_attachment( $attachment->ID, true );
}
$wpdb->query( "DELETE FROM $wpdb->postmeta WHERE meta_key = '_thumbnail_id' AND post_id = $post_ID" );
}
add_action('before_delete_post', 'delete_post_and_attachments');只要将这段代码放在主题的functions.php文件里面就可以了。 查看全部
好的网站需要不停的更新内容和图片,才能不断地增加网站的流量,并且提升网站的排名。网站内容的更新不知需要添加,有时候也需要将老的,没有实用性的文章删除,让网站变得更加有吸引力。删除文章的同时也要将其所带的图片一起删除,这样可以节省不少的空间资源。而WordPress在删除图片的同时,默认是不会删除文章所带有的图片,简单的方法就是安装WordPress插件来删除图片。还有一种方法就是在主题functions.php函数文件里面添加一段代码:
/* 删除文章时删除图片附件 */
/* 定义函数名称 */
function delete_post_and_attachments($post_ID) {
global $wpdb;
//删除文章特色图片
$thumbnails = $wpdb->get_results( "SELECT * FROM $wpdb->postmeta WHERE meta_key = '_thumbnail_id' AND post_id = $post_ID" );
foreach ( $thumbnails as $thumbnail ) {
wp_delete_attachment( $thumbnail->meta_value, true );
}
//删除文章的图片附件
$attachments = $wpdb->get_results( "SELECT * FROM $wpdb->posts WHERE post_parent = $post_ID AND post_type = 'attachment'" );
foreach ( $attachments as $attachment ) {
wp_delete_attachment( $attachment->ID, true );
}
$wpdb->query( "DELETE FROM $wpdb->postmeta WHERE meta_key = '_thumbnail_id' AND post_id = $post_ID" );
}
add_action('before_delete_post', 'delete_post_and_attachments');
只要将这段代码放在主题的functions.php文件里面就可以了。

What does Cloudflare Development mode mean?

WordPressLeo 发表了文章 • 1 个评论 • 115 次浏览 • 2018-05-21 11:59 • 来自相关话题

新版本的wp-rockets插件,对于cloudflare有了三个设置,
那么我这边就讲下开发者模式
What does Cloudflare Development mode mean?
所谓开发者模式,顾名思义,就是适合开发人员的模式;作为网站开发者,我们对于cloudflare,说实话,真的是又爱又恨,好处是增加全球网络节点,坏的是修改网站很麻烦,往往我们改一个样式就要清一次缓存,这样严重影响我们开发者的效率。
好在新版wp-rockets推出了针对cloudflare开发者模式,只需我们开发者在对网站进行修改的时候,开启按钮即可,而且默认三小时后会关闭按钮,这样我们就不用重复去清除cloudflare缓存了,大大提升了我们的效率。
彩蛋:另外针对之前图片的attachment页面问题,老版本yoast seo是在Advanced里面Redirect attachment URLs to parent post URL按钮开启,






其实新版本的yoast seo也有相关设置,search appearance里面的media,开启即可






  查看全部
新版本的wp-rockets插件,对于cloudflare有了三个设置,
那么我这边就讲下开发者模式
What does Cloudflare Development mode mean?
所谓开发者模式,顾名思义,就是适合开发人员的模式;作为网站开发者,我们对于cloudflare,说实话,真的是又爱又恨,好处是增加全球网络节点,坏的是修改网站很麻烦,往往我们改一个样式就要清一次缓存,这样严重影响我们开发者的效率。
好在新版wp-rockets推出了针对cloudflare开发者模式,只需我们开发者在对网站进行修改的时候,开启按钮即可,而且默认三小时后会关闭按钮,这样我们就不用重复去清除cloudflare缓存了,大大提升了我们的效率。
彩蛋:另外针对之前图片的attachment页面问题,老版本yoast seo是在Advanced里面Redirect attachment URLs to parent post URL按钮开启,

1.png


其实新版本的yoast seo也有相关设置,search appearance里面的media,开启即可

2.png


 
条新动态, 点击查看
Leo

Leo 回答了问题 • 2018-01-29 13:40 • 2 个回复 不感兴趣

怎么将域名加载到CLOUDFLARE上面呢?

赞同来自:

首先注册一个cloudflare账号,然后登入进去后scan一下域名,一般选择free(免费的即可),scan之后,再在cloudflare控制面板的dns那边进去对照域名解析进行添加记录(一般scan之后就会把记录自动添加上去,不过最好还是确认一下),最后记... 显示全部 »
首先注册一个cloudflare账号,然后登入进去后scan一下域名,一般选择free(免费的即可),scan之后,再在cloudflare控制面板的dns那边进去对照域名解析进行添加记录(一般scan之后就会把记录自动添加上去,不过最好还是确认一下),最后记得在域名注册商那把ns改为cloudflare给到的ns,这样就成功托管到cloudflare了
 
把​Rocket Loader给关掉内容就可以出现了,虽然可以提速但是有时也会出现问题
把​Rocket Loader给关掉内容就可以出现了,虽然可以提速但是有时也会出现问题

wordpress指定插件禁止更新

WordPressLeo 发表了文章 • 1 个评论 • 212 次浏览 • 2018-06-11 13:49 • 来自相关话题

function remove_update_notifications( $value ) {

    if ( isset( $value ) && is_object( $value ) ) {
        unset( $value->response[ 'js_composer/js_composer.php' ] );
    }

    return $value;
}
add_filter( 'site_transient_update_plugins', 'remove_update_notifications' );
 
只需找到插件目录下插件名.php的文件,将“js_composer/js_composer.php”路径替换为指定插件目录下的插件名.php文件,因为这个文件里包含插件版本号,出新版本后,wordpress匹配后会提示更新的,对于某些特殊插件,不建议更新的、不方便更新的,都可以这样指定禁止。
之前我有分享过一个主题和所有插件都禁止更新的文章,考虑到杀伤范围略大,不建议使用,今次这个更加适用。 查看全部
function remove_update_notifications( $value ) {

    if ( isset( $value ) && is_object( $value ) ) {
        unset( $value->response[ 'js_composer/js_composer.php' ] );
    }

    return $value;
}
add_filter( 'site_transient_update_plugins', 'remove_update_notifications' );
 
只需找到插件目录下插件名.php的文件,将“js_composer/js_composer.php”路径替换为指定插件目录下的插件名.php文件,因为这个文件里包含插件版本号,出新版本后,wordpress匹配后会提示更新的,对于某些特殊插件,不建议更新的、不方便更新的,都可以这样指定禁止。
之前我有分享过一个主题和所有插件都禁止更新的文章,考虑到杀伤范围略大,不建议使用,今次这个更加适用。

分享一些slider以及一些布局上不错的小细节

WordPressLeo 发表了文章 • 1 个评论 • 140 次浏览 • 2018-05-16 17:29 • 来自相关话题

http://demo.wponlinesupport.com/slick-slider-demo/?utm_source=hp&event=demo  首先可以通过这个链接,打开,然后点击一个菜单图标的按钮,可以看到右侧有很多插件可供选择,插件可以直接用,当然主要还是我们可以参考一些不错的小细节。
由于插件比较多,这边就列部分效果截图























































  查看全部
http://demo.wponlinesupport.com/slick-slider-demo/?utm_source=hp&event=demo  首先可以通过这个链接,打开,然后点击一个菜单图标的按钮,可以看到右侧有很多插件可供选择,插件可以直接用,当然主要还是我们可以参考一些不错的小细节。
由于插件比较多,这边就列部分效果截图

1.png


2.png


3.png


4.png


5.png


6.png


7.png


8.png


9.png


10.png


11.png

 

用子目录做二级网站需要注意的地方

WordPressLeo 发表了文章 • 1 个评论 • 156 次浏览 • 2018-05-08 17:13 • 来自相关话题

首先提及一下子目录和二级域名的优劣势:
 
二级域名: 首先,二级域名的权重大于子目录的,二级域名在搜索引擎看来和主域名是两个独立的网站,主域名在很多时候会传递一小部分信任度给二级域名(是信任度不是PR)。所以,很多做SEO的人都知道二级域名天生就比子目录具有更高的权重和更好的排名。 
子目录: 首先要知道一点,子目录其实是主站的一部分,正如上面所说,权重天生就比二级域名低,但个人还是建议以子目录建立子站,原因主要是: ①、二级域名和主域名是两个相互独立的站,要优化的话,需要分别优化两个站,并且在外链的建设过程中,网站的权重会被这些独立的网站分散。主域名通过外链的建设获得高权重,并不意味者二级域名就能获得高权重。 ②、二级域名的变多,会使分离出来的二级网站变小。 ③、子目录则相反,子目录的增多会使主网站变大,随着网站的变大,主站的收录量,权重,信任度也将提升。
 
 
最后这边重点提及一下,用子目录做二级网站,我们必须要更改的.htaccess规则
# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /es/
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /es/index.php [L]
</IfModule>
# END WordPress
 
 
以上加粗斜体就是我们必须要更改的规则,默认是没有/es/的,举例,如果你的子目录是以es命名,那么这边就要更改为/es/,否则除了首页,所有页面点击之后都会跳转到主站对应的页面。
  查看全部
首先提及一下子目录和二级域名的优劣势:
 
二级域名: 首先,二级域名的权重大于子目录的,二级域名在搜索引擎看来和主域名是两个独立的网站,主域名在很多时候会传递一小部分信任度给二级域名(是信任度不是PR)。所以,很多做SEO的人都知道二级域名天生就比子目录具有更高的权重和更好的排名。 
子目录: 首先要知道一点,子目录其实是主站的一部分,正如上面所说,权重天生就比二级域名低,但个人还是建议以子目录建立子站,原因主要是: ①、二级域名和主域名是两个相互独立的站,要优化的话,需要分别优化两个站,并且在外链的建设过程中,网站的权重会被这些独立的网站分散。主域名通过外链的建设获得高权重,并不意味者二级域名就能获得高权重。 ②、二级域名的变多,会使分离出来的二级网站变小。 ③、子目录则相反,子目录的增多会使主网站变大,随着网站的变大,主站的收录量,权重,信任度也将提升。
 
 
最后这边重点提及一下,用子目录做二级网站,我们必须要更改的.htaccess规则
# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /es/
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /es/index.php [L]
</IfModule>
# END WordPress
 
 
以上加粗斜体就是我们必须要更改的规则,默认是没有/es/的,举例,如果你的子目录是以es命名,那么这边就要更改为/es/,否则除了首页,所有页面点击之后都会跳转到主站对应的页面。
 

WordPress图片压缩插件:Compress JPEG & PNG images

WordPressLeo 发表了文章 • 2 个评论 • 214 次浏览 • 2018-04-24 09:36 • 来自相关话题

我们在英文建站的时候,经常会碰到要设置一些尺寸较大的 banner图片,产品细节图片,工厂厂区和车间环境图片等等。通常这类图片文件都比较大,那么就需要进行图片优化,加快页面的载入速度,提高浏览体验。对于 WordPress 来说,也有各式各样的图片优化插件,有时候你可能也不知道选哪个来用。

在图片优化上,TinyPNG 可谓名声赫赫。https://tinypng.com/
 
往常我们习惯于点击 TinyPNG 网站上的上传按钮,然后按 Ctrl 键选择多张图片上传压缩。TinyPNG 的压缩效率非常高,曾经有张 380K 的 PNG 图片压缩到了 60K,而且图片清晰度并没有明显的降低,可谓超强!

TinyPNG 对于一些深度 PhotoShop 用户也是福音,它的 PhotoShop Plugin 用起来也是相当方便的。价格50刀,永久使用,性价比无敌。

现在,在 WordPress 上,我们也可以使用 TinyPNG 出的插件:Compress JPEG & PNG images。在 WP 后台插件-安装插件 那里关键词输入”TinyPNG”,即可找到这款插件:




激活,然后去设置:





一般只要勾选 Original image 即可,这样在你上传图片的时候会自动进行压缩。

初次使用的时候要注册一下,获取 TinyPNG API Key。注意,不支持 qq邮箱。

激活之后,每个月你可以免费压缩高达 500 张 JPG/PNG 格式的图片。一般外贸建站每个月上传顶多十几张图片吧,所以这基本就是免费的。

对于之前已经上传到网站上的图片,它也可以进行批量压缩(bulk optimization)。





 
推荐理由:没发现更好的

之前也用过其他的图片压缩插件,如:

WP Smush Image Compression:此插件能压缩图片,减小图片大小,但图片质量清晰度也下降明显。
EWWW Image Optimizer:此插件是需要付费购买 API 才能用,而且需要服务器开启 exec() 函数。用起来感觉设置挺多,但是正因为设置非常多,感觉挺晕的。 查看全部
我们在英文建站的时候,经常会碰到要设置一些尺寸较大的 banner图片,产品细节图片,工厂厂区和车间环境图片等等。通常这类图片文件都比较大,那么就需要进行图片优化,加快页面的载入速度,提高浏览体验。对于 WordPress 来说,也有各式各样的图片优化插件,有时候你可能也不知道选哪个来用。

在图片优化上,TinyPNG 可谓名声赫赫。https://tinypng.com/
 
往常我们习惯于点击 TinyPNG 网站上的上传按钮,然后按 Ctrl 键选择多张图片上传压缩。TinyPNG 的压缩效率非常高,曾经有张 380K 的 PNG 图片压缩到了 60K,而且图片清晰度并没有明显的降低,可谓超强!

TinyPNG 对于一些深度 PhotoShop 用户也是福音,它的 PhotoShop Plugin 用起来也是相当方便的。价格50刀,永久使用,性价比无敌。

现在,在 WordPress 上,我们也可以使用 TinyPNG 出的插件:Compress JPEG & PNG images。在 WP 后台插件-安装插件 那里关键词输入”TinyPNG”,即可找到这款插件:
tiny-png-plugin.png

激活,然后去设置:

setting.png

一般只要勾选 Original image 即可,这样在你上传图片的时候会自动进行压缩。

初次使用的时候要注册一下,获取 TinyPNG API Key。注意,不支持 qq邮箱。

激活之后,每个月你可以免费压缩高达 500 张 JPG/PNG 格式的图片。一般外贸建站每个月上传顶多十几张图片吧,所以这基本就是免费的。

对于之前已经上传到网站上的图片,它也可以进行批量压缩(bulk optimization)。

screenshot-4.png

 
推荐理由:没发现更好的

之前也用过其他的图片压缩插件,如:

WP Smush Image Compression:此插件能压缩图片,减小图片大小,但图片质量清晰度也下降明显。
EWWW Image Optimizer:此插件是需要付费购买 API 才能用,而且需要服务器开启 exec() 函数。用起来感觉设置挺多,但是正因为设置非常多,感觉挺晕的。

wordpress网站被恶意攻击(大量访问xmlrpc.php)解决方法

WordPressLeo 发表了文章 • 1 个评论 • 189 次浏览 • 2018-03-26 11:52 • 来自相关话题

通过查看wordpress网站的日志发现,每天有大量的IP访问wordpress网站xmlrpc.php文件,这个文件本是wordpress程序方便用户进行远程发布的,基本上很少用到。但现在却有人恶意大量的访问这个wordpress网站xmlrpc.php文件,说明很不正常。
 
攻击原理
wordpress网站xmlrpc.php文件是一个远程端口文件,攻击者通过POST提交恶意大量的提交,不断的访问xmlrpc.php文件,形成DDOS攻击,致使网站服务器CPU过高停机,网站无法打开。

解决方法
解决wordpress网站xmlrpc.php文件被恶意攻击,最好的方法就是关闭掉自己网站xmlrpc.php文件。

方法如下:
第一步:在自己网站使用的wordpress模板中找到模板函数文件functions.php,当下面的代码粘贴进去。
add_filter('xmlrpc_enabled', '__return_false');
 
第二步:再通过.htaccess屏蔽xmlrpc.php文件的访问,这个文件是放在网站空间的根目录下。
<Files xmlrpc.php>
Order Deny,Allow
Deny from all
</Files>
 
通过以上二步的操作,就可以解决wordpress网站xmlrpc.php文件被恶意攻击的问题。在此建议使用wordpress程序建网站的朋友全部关闭掉xmlrpc.php文件,不要等到网站被恶意攻击了才去关闭。 查看全部
通过查看wordpress网站的日志发现,每天有大量的IP访问wordpress网站xmlrpc.php文件,这个文件本是wordpress程序方便用户进行远程发布的,基本上很少用到。但现在却有人恶意大量的访问这个wordpress网站xmlrpc.php文件,说明很不正常。
 
攻击原理
wordpress网站xmlrpc.php文件是一个远程端口文件,攻击者通过POST提交恶意大量的提交,不断的访问xmlrpc.php文件,形成DDOS攻击,致使网站服务器CPU过高停机,网站无法打开。

解决方法
解决wordpress网站xmlrpc.php文件被恶意攻击,最好的方法就是关闭掉自己网站xmlrpc.php文件。

方法如下:
第一步:在自己网站使用的wordpress模板中找到模板函数文件functions.php,当下面的代码粘贴进去。
add_filter('xmlrpc_enabled', '__return_false');
 
第二步:再通过.htaccess屏蔽xmlrpc.php文件的访问,这个文件是放在网站空间的根目录下。
<Files xmlrpc.php>
Order Deny,Allow
Deny from all
</Files>
 
通过以上二步的操作,就可以解决wordpress网站xmlrpc.php文件被恶意攻击的问题。在此建议使用wordpress程序建网站的朋友全部关闭掉xmlrpc.php文件,不要等到网站被恶意攻击了才去关闭。

网页使用Font Awesome图标字体时,css定义 content 属性必不可少,如下所示:

WordPressLeo 发表了文章 • 1 个评论 • 211 次浏览 • 2018-03-09 09:29 • 来自相关话题

有些情况下,我们不得不使用伪元素::before 和 ::after来实现fontawesome的小图标,所以我收集了一下图标类对应的字符编码表:
NAME CODE NAME CODE
.fa-glass \f000 .fa-github-alt \f113
.fa-music \f001 .fa-folder-o \f114
.fa-search \f002 .fa-folder-open-o \f115
.fa-envelope-o \f003 .fa-smile-o \f118
.fa-heart \f004 .fa-frown-o \f119
.fa-star \f005 .fa-meh-o \f11a
.fa-star-o \f006 .fa-gamepad \f11b
.fa-user \f007 .fa-keyboard-o \f11c
.fa-film \f008 .fa-flag-o \f11d
.fa-th-large \f009 .fa-flag-checkered \f11e
.fa-th \f00a .fa-terminal \f120
.fa-th-list \f00b .fa-code \f121
.fa-check \f00c .fa-mail-reply-all \f122
.fa-remove \f00d .fa-reply-all \f122
.fa-close \f00d .fa-star-half-empty \f123
.fa-times \f00d .fa-star-half-full \f123
.fa-search-plus \f00e .fa-star-half-o \f123
.fa-search-minus \f010 .fa-location-arrow \f124
.fa-power-off \f011 .fa-crop \f125
.fa-signal \f012 .fa-code-fork \f126
.fa-gear \f013 .fa-unlink \f127
.fa-cog \f013 .fa-chain-broken \f127
.fa-trash-o \f014 .fa-question \f128
.fa-home \f015 .fa-info \f129
.fa-file-o \f016 .fa-exclamation \f12a
.fa-clock-o \f017 .fa-superscript \f12b
.fa-road \f018 .fa-subscript \f12c
.fa-download \f019 .fa-eraser \f12d
.fa-arrow-circle-o-down \f01a .fa-puzzle-piece \f12e
.fa-arrow-circle-o-up \f01b .fa-microphone \f130
.fa-inbox \f01c .fa-microphone-slash \f131
.fa-play-circle-o \f01d .fa-shield \f132
.fa-rotate-right \f01e .fa-calendar-o \f133
.fa-repeat \f01e .fa-fire-extinguisher \f134
.fa-refresh \f021 .fa-rocket \f135
.fa-list-alt \f022 .fa-maxcdn \f136
.fa-lock \f023 .fa-chevron-circle-left \f137
.fa-flag \f024 .fa-chevron-circle-right \f138
.fa-headphones \f025 .fa-chevron-circle-up \f139
.fa-volume-off \f026 .fa-chevron-circle-down \f13a
.fa-volume-down \f027 .fa-html5 \f13b
.fa-volume-up \f028 .fa-css3 \f13c
.fa-qrcode \f029 .fa-anchor \f13d
.fa-barcode \f02a .fa-unlock-alt \f13e
.fa-tag \f02b .fa-bullseye \f140
.fa-tags \f02c .fa-ellipsis-h \f141
.fa-book \f02d .fa-ellipsis-v \f142
.fa-bookmark \f02e .fa-rss-square \f143
.fa-print \f02f .fa-play-circle \f144
.fa-camera \f030 .fa-ticket \f145
.fa-font \f031 .fa-minus-square \f146
.fa-bold \f032 .fa-minus-square-o \f147
.fa-italic \f033 .fa-level-up \f148
.fa-text-height \f034 .fa-level-down \f149
.fa-text-width \f035 .fa-check-square \f14a
.fa-align-left \f036 .fa-pencil-square \f14b
.fa-align-center \f037 .fa-external-link-square \f14c
.fa-align-right \f038 .fa-share-square \f14d
.fa-align-justify \f039 .fa-compass \f14e
.fa-list \f03a .fa-toggle-down \f150
.fa-dedent \f03b .fa-caret-square-o-down \f150
.fa-outdent \f03b .fa-toggle-up \f151
.fa-indent \f03c .fa-caret-square-o-up \f151
.fa-video-camera \f03d .fa-toggle-right \f152
.fa-photo \f03e .fa-caret-square-o-right \f152
.fa-image \f03e .fa-euro \f153
.fa-picture-o \f03e .fa-eur \f153
.fa-pencil \f040 .fa-gbp \f154
.fa-map-marker \f041 .fa-dollar \f155
.fa-adjust \f042 .fa-usd \f155
.fa-tint \f043 .fa-rupee \f156
.fa-edit \f044 .fa-inr \f156
.fa-pencil-square-o \f044 .fa-cny \f157
.fa-share-square-o \f045 .fa-rmb \f157
.fa-check-square-o \f046 .fa-yen \f157
.fa-arrows \f047 .fa-jpy \f157
.fa-step-backward \f048 .fa-ruble \f158
.fa-fast-backward \f049 .fa-rouble \f158
.fa-backward \f04a .fa-rub \f158
.fa-play \f04b .fa-won \f159
.fa-pause \f04c .fa-krw \f159
.fa-stop \f04d .fa-bitcoin \f15a
.fa-forward \f04e .fa-btc \f15a
.fa-fast-forward \f050 .fa-file \f15b
.fa-step-forward \f051 .fa-file-text \f15c
.fa-eject \f052 .fa-sort-alpha-asc \f15d
.fa-chevron-left \f053 .fa-sort-alpha-desc \f15e
.fa-chevron-right \f054 .fa-sort-amount-asc \f160
.fa-plus-circle \f055 .fa-sort-amount-desc \f161
.fa-minus-circle \f056 .fa-sort-numeric-asc \f162
.fa-times-circle \f057 .fa-sort-numeric-desc \f163
.fa-check-circle \f058 .fa-thumbs-up \f164
.fa-question-circle \f059 .fa-thumbs-down \f165
.fa-info-circle \f05a .fa-youtube-square \f166
.fa-crosshairs \f05b .fa-youtube \f167
.fa-times-circle-o \f05c .fa-xing \f168
.fa-check-circle-o \f05d .fa-xing-square \f169
.fa-ban \f05e .fa-youtube-play \f16a
.fa-arrow-left \f060 .fa-dropbox \f16b
.fa-arrow-right \f061 .fa-stack-overflow \f16c
.fa-arrow-up \f062 .fa-instagram \f16d
.fa-arrow-down \f063 .fa-flickr \f16e
.fa-mail-forward \f064 .fa-adn \f170
.fa-share \f064 .fa-bitbucket \f171
.fa-expand \f065 .fa-bitbucket-square \f172
.fa-compress \f066 .fa-tumblr \f173
.fa-plus \f067 .fa-tumblr-square \f174
.fa-minus \f068 .fa-long-arrow-down \f175
.fa-asterisk \f069 .fa-long-arrow-up \f176
.fa-exclamation-circle \f06a .fa-long-arrow-left \f177
.fa-gift \f06b .fa-long-arrow-right \f178
.fa-leaf \f06c .fa-apple \f179
.fa-fire \f06d .fa-windows \f17a
.fa-eye \f06e .fa-android \f17b
.fa-eye-slash \f070 .fa-linux \f17c
.fa-warning \f071 .fa-dribbble \f17d
.fa-exclamation-triangle \f071 .fa-skype \f17e
.fa-plane \f072 .fa-foursquare \f180
.fa-calendar \f073 .fa-trello \f181
.fa-random \f074 .fa-female \f182
.fa-comment \f075 .fa-male \f183
.fa-magnet \f076 .fa-gittip \f184
.fa-chevron-up \f077 .fa-sun-o \f185
.fa-chevron-down \f078 .fa-moon-o \f186
.fa-retweet \f079 .fa-archive \f187
.fa-shopping-cart \f07a .fa-bug \f188
.fa-folder \f07b .fa-vk \f189
.fa-folder-open \f07c .fa-weibo \f18a
.fa-arrows-v \f07d .fa-renren \f18b
.fa-arrows-h \f07e .fa-pagelines \f18c
.fa-bar-chart-o \f080 .fa-stack-exchange \f18d
.fa-bar-chart \f080 .fa-arrow-circle-o-right \f18e
.fa-twitter-square \f081 .fa-arrow-circle-o-left \f190
.fa-facebook-square \f082 .fa-toggle-left \f191
.fa-camera-retro \f083 .fa-caret-square-o-left \f191
.fa-key \f084 .fa-dot-circle-o \f192
.fa-gears \f085 .fa-wheelchair \f193
.fa-cogs \f085 .fa-vimeo-square \f194
.fa-comments \f086 .fa-turkish-lira \f195
.fa-thumbs-o-up \f087 .fa-try \f195
.fa-thumbs-o-down \f088 .fa-plus-square-o \f196
.fa-star-half \f089 .fa-space-shuttle \f197
.fa-heart-o \f08a .fa-slack \f198
.fa-sign-out \f08b .fa-envelope-square \f199
.fa-linkedin-square \f08c .fa-wordpress \f19a
.fa-thumb-tack \f08d .fa-openid \f19b
.fa-external-link \f08e .fa-institution \f19c
.fa-sign-in \f090 .fa-bank \f19c
.fa-trophy \f091 .fa-university \f19c
.fa-github-square \f092 .fa-mortar-board \f19d
.fa-upload \f093 .fa-graduation-cap \f19d
.fa-lemon-o \f094 .fa-yahoo \f19e
.fa-phone \f095 .fa-google \f1a0
.fa-square-o \f096 .fa-reddit \f1a1
.fa-bookmark-o \f097 .fa-reddit-square \f1a2
.fa-phone-square \f098 .fa-stumbleupon-circle \f1a3
.fa-twitter \f099 .fa-stumbleupon \f1a4
.fa-facebook \f09a .fa-delicious \f1a5
.fa-github \f09b .fa-digg \f1a6
.fa-unlock \f09c .fa-pied-piper \f1a7
.fa-credit-card \f09d .fa-pied-piper-alt \f1a8
.fa-rss \f09e .fa-drupal \f1a9
.fa-hdd-o \f0a0 .fa-joomla \f1aa
.fa-bullhorn \f0a1 .fa-language \f1ab
.fa-bell \f0f3 .fa-fax \f1ac
.fa-certificate \f0a3 .fa-building \f1ad
.fa-hand-o-right \f0a4 .fa-child \f1ae
.fa-hand-o-left \f0a5 .fa-paw \f1b0
.fa-hand-o-up \f0a6 .fa-spoon \f1b1
.fa-hand-o-down \f0a7 .fa-cube \f1b2
.fa-arrow-circle-left \f0a8 .fa-cubes \f1b3
.fa-arrow-circle-right \f0a9 .fa-behance \f1b4
.fa-arrow-circle-up \f0aa .fa-behance-square \f1b5
.fa-arrow-circle-down \f0ab .fa-steam \f1b6
.fa-globe \f0ac .fa-steam-square \f1b7
.fa-wrench \f0ad .fa-recycle \f1b8
.fa-tasks \f0ae .fa-automobile \f1b9
.fa-filter \f0b0 .fa-car \f1b9
.fa-briefcase \f0b1 .fa-cab \f1ba
.fa-arrows-alt \f0b2 .fa-taxi \f1ba
.fa-group \f0c0 .fa-tree \f1bb
.fa-users \f0c0 .fa-spotify \f1bc
.fa-chain \f0c1 .fa-deviantart \f1bd
.fa-link \f0c1 .fa-soundcloud \f1be
.fa-cloud \f0c2 .fa-database \f1c0
.fa-flask \f0c3 .fa-file-pdf-o \f1c1
.fa-cut \f0c4 .fa-file-word-o \f1c2
.fa-scissors \f0c4 .fa-file-excel-o \f1c3
.fa-copy \f0c5 .fa-file-powerpoint-o \f1c4
.fa-files-o \f0c5 .fa-file-photo-o \f1c5
.fa-paperclip \f0c6 .fa-file-picture-o \f1c5
.fa-save \f0c7 .fa-file-image-o \f1c5
.fa-floppy-o \f0c7 .fa-file-zip-o \f1c6
.fa-square \f0c8 .fa-file-archive-o \f1c6
.fa-navicon \f0c9 .fa-file-sound-o \f1c7
.fa-reorder \f0c9 .fa-file-audio-o \f1c7
.fa-bars \f0c9 .fa-file-movie-o \f1c8
.fa-list-ul \f0ca .fa-file-video-o \f1c8
.fa-list-ol \f0cb .fa-file-code-o \f1c9
.fa-strikethrough \f0cc .fa-vine \f1ca
.fa-underline \f0cd .fa-codepen \f1cb
.fa-table \f0ce .fa-jsfiddle \f1cc
.fa-magic \f0d0 .fa-life-bouy \f1cd
.fa-truck \f0d1 .fa-life-buoy \f1cd
.fa-pinterest \f0d2 .fa-life-saver \f1cd
.fa-pinterest-square \f0d3 .fa-support \f1cd
.fa-google-plus-square \f0d4 .fa-life-ring \f1cd
.fa-google-plus \f0d5 .fa-circle-o-notch \f1ce
.fa-money \f0d6 .fa-ra \f1d0
.fa-caret-down \f0d7 .fa-rebel \f1d0
.fa-caret-up \f0d8 .fa-ge \f1d1
.fa-caret-left \f0d9 .fa-empire \f1d1
.fa-caret-right \f0da .fa-git-square \f1d2
.fa-columns \f0db .fa-git \f1d3
.fa-unsorted \f0dc .fa-hacker-news \f1d4
.fa-sort \f0dc .fa-tencent-weibo \f1d5
.fa-sort-down \f0dd .fa-qq \f1d6
.fa-sort-desc \f0dd .fa-wechat \f1d7
.fa-sort-up \f0de .fa-weixin \f1d7
.fa-sort-asc \f0de .fa-send \f1d8
.fa-envelope \f0e0 .fa-paper-plane \f1d8
.fa-linkedin \f0e1 .fa-send-o \f1d9
.fa-rotate-left \f0e2 .fa-paper-plane-o \f1d9
.fa-undo \f0e2 .fa-history \f1da
.fa-legal \f0e3 .fa-circle-thin \f1db
.fa-gavel \f0e3 .fa-header \f1dc
.fa-dashboard \f0e4 .fa-paragraph \f1dd
.fa-tachometer \f0e4 .fa-sliders \f1de
.fa-comment-o \f0e5 .fa-share-alt \f1e0
.fa-comments-o \f0e6 .fa-share-alt-square \f1e1
.fa-flash \f0e7 .fa-bomb \f1e2
.fa-bolt \f0e7 .fa-soccer-ball-o \f1e3
.fa-sitemap \f0e8 .fa-futbol-o \f1e3
.fa-umbrella \f0e9 .fa-tty \f1e4
.fa-paste \f0ea .fa-binoculars \f1e5
.fa-clipboard \f0ea .fa-plug \f1e6
.fa-lightbulb-o \f0eb .fa-slideshare \f1e7
.fa-exchange \f0ec .fa-twitch \f1e8
.fa-cloud-download \f0ed .fa-yelp \f1e9
.fa-cloud-upload \f0ee .fa-newspaper-o \f1ea
.fa-user-md \f0f0 .fa-wifi \f1eb
.fa-stethoscope \f0f1 .fa-calculator \f1ec
.fa-suitcase \f0f2 .fa-paypal \f1ed
.fa-bell-o \f0a2 .fa-google-wallet \f1ee
.fa-coffee \f0f4 .fa-cc-visa \f1f0
.fa-cutlery \f0f5 .fa-cc-mastercard \f1f1
.fa-file-text-o \f0f6 .fa-cc-discover \f1f2
.fa-building-o \f0f7 .fa-cc-amex \f1f3
.fa-hospital-o \f0f8 .fa-cc-paypal \f1f4
.fa-ambulance \f0f9 .fa-cc-stripe \f1f5
.fa-medkit \f0fa .fa-bell-slash \f1f6
.fa-fighter-jet \f0fb .fa-bell-slash-o \f1f7
.fa-beer \f0fc .fa-trash \f1f8
.fa-h-square \f0fd .fa-copyright \f1f9
.fa-plus-square \f0fe .fa-at \f1fa
.fa-angle-double-left \f100 .fa-eyedropper \f1fb
.fa-angle-double-right \f101 .fa-paint-brush \f1fc
.fa-angle-double-up \f102 .fa-birthday-cake \f1fd
.fa-angle-double-down \f103 .fa-area-chart \f1fe
.fa-angle-left \f104 .fa-pie-chart \f200
.fa-angle-right \f105 .fa-line-chart \f201
.fa-angle-up \f106 .fa-lastfm \f202
.fa-angle-down \f107 .fa-lastfm-square \f203
.fa-desktop \f108 .fa-toggle-off \f204
.fa-laptop \f109 .fa-toggle-on \f205
.fa-tablet \f10a .fa-bicycle \f206
.fa-mobile-phone \f10b .fa-bus \f207
.fa-mobile \f10b .fa-ioxhost \f208
.fa-circle-o \f10c .fa-angellist \f209
.fa-quote-left \f10d .fa-cc \f20a
.fa-quote-right \f10e .fa-shekel \f20b
.fa-spinner \f110 .fa-sheqel \f20b
.fa-circle \f111 .fa-ils \f20b
.fa-mail-reply \f112 .fa-meanpath \f20c
.fa-reply \f112    
 
(.fa-mail-reply \f112                              .fa-meanpath \f20c             注意这样区分,一行是俩个图标) 查看全部
有些情况下,我们不得不使用伪元素::before 和 ::after来实现fontawesome的小图标,所以我收集了一下图标类对应的字符编码表:
NAME CODE NAME CODE
.fa-glass \f000 .fa-github-alt \f113
.fa-music \f001 .fa-folder-o \f114
.fa-search \f002 .fa-folder-open-o \f115
.fa-envelope-o \f003 .fa-smile-o \f118
.fa-heart \f004 .fa-frown-o \f119
.fa-star \f005 .fa-meh-o \f11a
.fa-star-o \f006 .fa-gamepad \f11b
.fa-user \f007 .fa-keyboard-o \f11c
.fa-film \f008 .fa-flag-o \f11d
.fa-th-large \f009 .fa-flag-checkered \f11e
.fa-th \f00a .fa-terminal \f120
.fa-th-list \f00b .fa-code \f121
.fa-check \f00c .fa-mail-reply-all \f122
.fa-remove \f00d .fa-reply-all \f122
.fa-close \f00d .fa-star-half-empty \f123
.fa-times \f00d .fa-star-half-full \f123
.fa-search-plus \f00e .fa-star-half-o \f123
.fa-search-minus \f010 .fa-location-arrow \f124
.fa-power-off \f011 .fa-crop \f125
.fa-signal \f012 .fa-code-fork \f126
.fa-gear \f013 .fa-unlink \f127
.fa-cog \f013 .fa-chain-broken \f127
.fa-trash-o \f014 .fa-question \f128
.fa-home \f015 .fa-info \f129
.fa-file-o \f016 .fa-exclamation \f12a
.fa-clock-o \f017 .fa-superscript \f12b
.fa-road \f018 .fa-subscript \f12c
.fa-download \f019 .fa-eraser \f12d
.fa-arrow-circle-o-down \f01a .fa-puzzle-piece \f12e
.fa-arrow-circle-o-up \f01b .fa-microphone \f130
.fa-inbox \f01c .fa-microphone-slash \f131
.fa-play-circle-o \f01d .fa-shield \f132
.fa-rotate-right \f01e .fa-calendar-o \f133
.fa-repeat \f01e .fa-fire-extinguisher \f134
.fa-refresh \f021 .fa-rocket \f135
.fa-list-alt \f022 .fa-maxcdn \f136
.fa-lock \f023 .fa-chevron-circle-left \f137
.fa-flag \f024 .fa-chevron-circle-right \f138
.fa-headphones \f025 .fa-chevron-circle-up \f139
.fa-volume-off \f026 .fa-chevron-circle-down \f13a
.fa-volume-down \f027 .fa-html5 \f13b
.fa-volume-up \f028 .fa-css3 \f13c
.fa-qrcode \f029 .fa-anchor \f13d
.fa-barcode \f02a .fa-unlock-alt \f13e
.fa-tag \f02b .fa-bullseye \f140
.fa-tags \f02c .fa-ellipsis-h \f141
.fa-book \f02d .fa-ellipsis-v \f142
.fa-bookmark \f02e .fa-rss-square \f143
.fa-print \f02f .fa-play-circle \f144
.fa-camera \f030 .fa-ticket \f145
.fa-font \f031 .fa-minus-square \f146
.fa-bold \f032 .fa-minus-square-o \f147
.fa-italic \f033 .fa-level-up \f148
.fa-text-height \f034 .fa-level-down \f149
.fa-text-width \f035 .fa-check-square \f14a
.fa-align-left \f036 .fa-pencil-square \f14b
.fa-align-center \f037 .fa-external-link-square \f14c
.fa-align-right \f038 .fa-share-square \f14d
.fa-align-justify \f039 .fa-compass \f14e
.fa-list \f03a .fa-toggle-down \f150
.fa-dedent \f03b .fa-caret-square-o-down \f150
.fa-outdent \f03b .fa-toggle-up \f151
.fa-indent \f03c .fa-caret-square-o-up \f151
.fa-video-camera \f03d .fa-toggle-right \f152
.fa-photo \f03e .fa-caret-square-o-right \f152
.fa-image \f03e .fa-euro \f153
.fa-picture-o \f03e .fa-eur \f153
.fa-pencil \f040 .fa-gbp \f154
.fa-map-marker \f041 .fa-dollar \f155
.fa-adjust \f042 .fa-usd \f155
.fa-tint \f043 .fa-rupee \f156
.fa-edit \f044 .fa-inr \f156
.fa-pencil-square-o \f044 .fa-cny \f157
.fa-share-square-o \f045 .fa-rmb \f157
.fa-check-square-o \f046 .fa-yen \f157
.fa-arrows \f047 .fa-jpy \f157
.fa-step-backward \f048 .fa-ruble \f158
.fa-fast-backward \f049 .fa-rouble \f158
.fa-backward \f04a .fa-rub \f158
.fa-play \f04b .fa-won \f159
.fa-pause \f04c .fa-krw \f159
.fa-stop \f04d .fa-bitcoin \f15a
.fa-forward \f04e .fa-btc \f15a
.fa-fast-forward \f050 .fa-file \f15b
.fa-step-forward \f051 .fa-file-text \f15c
.fa-eject \f052 .fa-sort-alpha-asc \f15d
.fa-chevron-left \f053 .fa-sort-alpha-desc \f15e
.fa-chevron-right \f054 .fa-sort-amount-asc \f160
.fa-plus-circle \f055 .fa-sort-amount-desc \f161
.fa-minus-circle \f056 .fa-sort-numeric-asc \f162
.fa-times-circle \f057 .fa-sort-numeric-desc \f163
.fa-check-circle \f058 .fa-thumbs-up \f164
.fa-question-circle \f059 .fa-thumbs-down \f165
.fa-info-circle \f05a .fa-youtube-square \f166
.fa-crosshairs \f05b .fa-youtube \f167
.fa-times-circle-o \f05c .fa-xing \f168
.fa-check-circle-o \f05d .fa-xing-square \f169
.fa-ban \f05e .fa-youtube-play \f16a
.fa-arrow-left \f060 .fa-dropbox \f16b
.fa-arrow-right \f061 .fa-stack-overflow \f16c
.fa-arrow-up \f062 .fa-instagram \f16d
.fa-arrow-down \f063 .fa-flickr \f16e
.fa-mail-forward \f064 .fa-adn \f170
.fa-share \f064 .fa-bitbucket \f171
.fa-expand \f065 .fa-bitbucket-square \f172
.fa-compress \f066 .fa-tumblr \f173
.fa-plus \f067 .fa-tumblr-square \f174
.fa-minus \f068 .fa-long-arrow-down \f175
.fa-asterisk \f069 .fa-long-arrow-up \f176
.fa-exclamation-circle \f06a .fa-long-arrow-left \f177
.fa-gift \f06b .fa-long-arrow-right \f178
.fa-leaf \f06c .fa-apple \f179
.fa-fire \f06d .fa-windows \f17a
.fa-eye \f06e .fa-android \f17b
.fa-eye-slash \f070 .fa-linux \f17c
.fa-warning \f071 .fa-dribbble \f17d
.fa-exclamation-triangle \f071 .fa-skype \f17e
.fa-plane \f072 .fa-foursquare \f180
.fa-calendar \f073 .fa-trello \f181
.fa-random \f074 .fa-female \f182
.fa-comment \f075 .fa-male \f183
.fa-magnet \f076 .fa-gittip \f184
.fa-chevron-up \f077 .fa-sun-o \f185
.fa-chevron-down \f078 .fa-moon-o \f186
.fa-retweet \f079 .fa-archive \f187
.fa-shopping-cart \f07a .fa-bug \f188
.fa-folder \f07b .fa-vk \f189
.fa-folder-open \f07c .fa-weibo \f18a
.fa-arrows-v \f07d .fa-renren \f18b
.fa-arrows-h \f07e .fa-pagelines \f18c
.fa-bar-chart-o \f080 .fa-stack-exchange \f18d
.fa-bar-chart \f080 .fa-arrow-circle-o-right \f18e
.fa-twitter-square \f081 .fa-arrow-circle-o-left \f190
.fa-facebook-square \f082 .fa-toggle-left \f191
.fa-camera-retro \f083 .fa-caret-square-o-left \f191
.fa-key \f084 .fa-dot-circle-o \f192
.fa-gears \f085 .fa-wheelchair \f193
.fa-cogs \f085 .fa-vimeo-square \f194
.fa-comments \f086 .fa-turkish-lira \f195
.fa-thumbs-o-up \f087 .fa-try \f195
.fa-thumbs-o-down \f088 .fa-plus-square-o \f196
.fa-star-half \f089 .fa-space-shuttle \f197
.fa-heart-o \f08a .fa-slack \f198
.fa-sign-out \f08b .fa-envelope-square \f199
.fa-linkedin-square \f08c .fa-wordpress \f19a
.fa-thumb-tack \f08d .fa-openid \f19b
.fa-external-link \f08e .fa-institution \f19c
.fa-sign-in \f090 .fa-bank \f19c
.fa-trophy \f091 .fa-university \f19c
.fa-github-square \f092 .fa-mortar-board \f19d
.fa-upload \f093 .fa-graduation-cap \f19d
.fa-lemon-o \f094 .fa-yahoo \f19e
.fa-phone \f095 .fa-google \f1a0
.fa-square-o \f096 .fa-reddit \f1a1
.fa-bookmark-o \f097 .fa-reddit-square \f1a2
.fa-phone-square \f098 .fa-stumbleupon-circle \f1a3
.fa-twitter \f099 .fa-stumbleupon \f1a4
.fa-facebook \f09a .fa-delicious \f1a5
.fa-github \f09b .fa-digg \f1a6
.fa-unlock \f09c .fa-pied-piper \f1a7
.fa-credit-card \f09d .fa-pied-piper-alt \f1a8
.fa-rss \f09e .fa-drupal \f1a9
.fa-hdd-o \f0a0 .fa-joomla \f1aa
.fa-bullhorn \f0a1 .fa-language \f1ab
.fa-bell \f0f3 .fa-fax \f1ac
.fa-certificate \f0a3 .fa-building \f1ad
.fa-hand-o-right \f0a4 .fa-child \f1ae
.fa-hand-o-left \f0a5 .fa-paw \f1b0
.fa-hand-o-up \f0a6 .fa-spoon \f1b1
.fa-hand-o-down \f0a7 .fa-cube \f1b2
.fa-arrow-circle-left \f0a8 .fa-cubes \f1b3
.fa-arrow-circle-right \f0a9 .fa-behance \f1b4
.fa-arrow-circle-up \f0aa .fa-behance-square \f1b5
.fa-arrow-circle-down \f0ab .fa-steam \f1b6
.fa-globe \f0ac .fa-steam-square \f1b7
.fa-wrench \f0ad .fa-recycle \f1b8
.fa-tasks \f0ae .fa-automobile \f1b9
.fa-filter \f0b0 .fa-car \f1b9
.fa-briefcase \f0b1 .fa-cab \f1ba
.fa-arrows-alt \f0b2 .fa-taxi \f1ba
.fa-group \f0c0 .fa-tree \f1bb
.fa-users \f0c0 .fa-spotify \f1bc
.fa-chain \f0c1 .fa-deviantart \f1bd
.fa-link \f0c1 .fa-soundcloud \f1be
.fa-cloud \f0c2 .fa-database \f1c0
.fa-flask \f0c3 .fa-file-pdf-o \f1c1
.fa-cut \f0c4 .fa-file-word-o \f1c2
.fa-scissors \f0c4 .fa-file-excel-o \f1c3
.fa-copy \f0c5 .fa-file-powerpoint-o \f1c4
.fa-files-o \f0c5 .fa-file-photo-o \f1c5
.fa-paperclip \f0c6 .fa-file-picture-o \f1c5
.fa-save \f0c7 .fa-file-image-o \f1c5
.fa-floppy-o \f0c7 .fa-file-zip-o \f1c6
.fa-square \f0c8 .fa-file-archive-o \f1c6
.fa-navicon \f0c9 .fa-file-sound-o \f1c7
.fa-reorder \f0c9 .fa-file-audio-o \f1c7
.fa-bars \f0c9 .fa-file-movie-o \f1c8
.fa-list-ul \f0ca .fa-file-video-o \f1c8
.fa-list-ol \f0cb .fa-file-code-o \f1c9
.fa-strikethrough \f0cc .fa-vine \f1ca
.fa-underline \f0cd .fa-codepen \f1cb
.fa-table \f0ce .fa-jsfiddle \f1cc
.fa-magic \f0d0 .fa-life-bouy \f1cd
.fa-truck \f0d1 .fa-life-buoy \f1cd
.fa-pinterest \f0d2 .fa-life-saver \f1cd
.fa-pinterest-square \f0d3 .fa-support \f1cd
.fa-google-plus-square \f0d4 .fa-life-ring \f1cd
.fa-google-plus \f0d5 .fa-circle-o-notch \f1ce
.fa-money \f0d6 .fa-ra \f1d0
.fa-caret-down \f0d7 .fa-rebel \f1d0
.fa-caret-up \f0d8 .fa-ge \f1d1
.fa-caret-left \f0d9 .fa-empire \f1d1
.fa-caret-right \f0da .fa-git-square \f1d2
.fa-columns \f0db .fa-git \f1d3
.fa-unsorted \f0dc .fa-hacker-news \f1d4
.fa-sort \f0dc .fa-tencent-weibo \f1d5
.fa-sort-down \f0dd .fa-qq \f1d6
.fa-sort-desc \f0dd .fa-wechat \f1d7
.fa-sort-up \f0de .fa-weixin \f1d7
.fa-sort-asc \f0de .fa-send \f1d8
.fa-envelope \f0e0 .fa-paper-plane \f1d8
.fa-linkedin \f0e1 .fa-send-o \f1d9
.fa-rotate-left \f0e2 .fa-paper-plane-o \f1d9
.fa-undo \f0e2 .fa-history \f1da
.fa-legal \f0e3 .fa-circle-thin \f1db
.fa-gavel \f0e3 .fa-header \f1dc
.fa-dashboard \f0e4 .fa-paragraph \f1dd
.fa-tachometer \f0e4 .fa-sliders \f1de
.fa-comment-o \f0e5 .fa-share-alt \f1e0
.fa-comments-o \f0e6 .fa-share-alt-square \f1e1
.fa-flash \f0e7 .fa-bomb \f1e2
.fa-bolt \f0e7 .fa-soccer-ball-o \f1e3
.fa-sitemap \f0e8 .fa-futbol-o \f1e3
.fa-umbrella \f0e9 .fa-tty \f1e4
.fa-paste \f0ea .fa-binoculars \f1e5
.fa-clipboard \f0ea .fa-plug \f1e6
.fa-lightbulb-o \f0eb .fa-slideshare \f1e7
.fa-exchange \f0ec .fa-twitch \f1e8
.fa-cloud-download \f0ed .fa-yelp \f1e9
.fa-cloud-upload \f0ee .fa-newspaper-o \f1ea
.fa-user-md \f0f0 .fa-wifi \f1eb
.fa-stethoscope \f0f1 .fa-calculator \f1ec
.fa-suitcase \f0f2 .fa-paypal \f1ed
.fa-bell-o \f0a2 .fa-google-wallet \f1ee
.fa-coffee \f0f4 .fa-cc-visa \f1f0
.fa-cutlery \f0f5 .fa-cc-mastercard \f1f1
.fa-file-text-o \f0f6 .fa-cc-discover \f1f2
.fa-building-o \f0f7 .fa-cc-amex \f1f3
.fa-hospital-o \f0f8 .fa-cc-paypal \f1f4
.fa-ambulance \f0f9 .fa-cc-stripe \f1f5
.fa-medkit \f0fa .fa-bell-slash \f1f6
.fa-fighter-jet \f0fb .fa-bell-slash-o \f1f7
.fa-beer \f0fc .fa-trash \f1f8
.fa-h-square \f0fd .fa-copyright \f1f9
.fa-plus-square \f0fe .fa-at \f1fa
.fa-angle-double-left \f100 .fa-eyedropper \f1fb
.fa-angle-double-right \f101 .fa-paint-brush \f1fc
.fa-angle-double-up \f102 .fa-birthday-cake \f1fd
.fa-angle-double-down \f103 .fa-area-chart \f1fe
.fa-angle-left \f104 .fa-pie-chart \f200
.fa-angle-right \f105 .fa-line-chart \f201
.fa-angle-up \f106 .fa-lastfm \f202
.fa-angle-down \f107 .fa-lastfm-square \f203
.fa-desktop \f108 .fa-toggle-off \f204
.fa-laptop \f109 .fa-toggle-on \f205
.fa-tablet \f10a .fa-bicycle \f206
.fa-mobile-phone \f10b .fa-bus \f207
.fa-mobile \f10b .fa-ioxhost \f208
.fa-circle-o \f10c .fa-angellist \f209
.fa-quote-left \f10d .fa-cc \f20a
.fa-quote-right \f10e .fa-shekel \f20b
.fa-spinner \f110 .fa-sheqel \f20b
.fa-circle \f111 .fa-ils \f20b
.fa-mail-reply \f112 .fa-meanpath \f20c
.fa-reply \f112    
 
(.fa-mail-reply \f112                              .fa-meanpath \f20c             注意这样区分,一行是俩个图标)

360和遨游浏览器底下字体会被截取一半的兼容性问题

WordPresslena 发表了文章 • 3 个评论 • 253 次浏览 • 2018-02-07 13:46 • 来自相关话题

这俩个浏览器都有兼容模式和极速模式
​<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="renderer" content="ie-comp">
这两个代码就是让浏览器用兼容模式
不加这个浏览器会优先使用极速模式,所以造成兼容性问题
  查看全部

这俩个浏览器都有兼容模式和极速模式
​<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="renderer" content="ie-comp">
这两个代码就是让浏览器用兼容模式
不加这个浏览器会优先使用极速模式,所以造成兼容性问题
 

如何解决WordPress媒体库一直处于loading的状态

WordPressBob 发表了文章 • 1 个评论 • 226 次浏览 • 2018-02-05 11:34 • 来自相关话题

不知道大家有没有遇到过这种问题,就是当网站运营一段时间以后,需要进行定期的维护,有时候网站在上线一段时间以后会出现很多问题,比如在打开媒体库的时候,他会一直处于加载的状态,下面的页面一直显示不出来,如下图所示:




当出现这种情况的时候,我们应该考虑到应该是WordPress自身配置文件的问题,这个时候我们应该先去看下在主题目录下面的function.php文件是否是处于闭合的状态,如下图所示:




所以我们需要在function文件的结尾加上闭合符号“?>”,如下图所示:




添加好以后,媒体库就可以正常打开了。一般在小型网站里面,如果这里是处于没有闭合的状态是不会出现什么问题的,但是在大型的网站上面,因为功能和结构比较复杂,所以这里建议还是闭合的好,以免到时候出现什么问题,导致网站无法运行。 查看全部
不知道大家有没有遇到过这种问题,就是当网站运营一段时间以后,需要进行定期的维护,有时候网站在上线一段时间以后会出现很多问题,比如在打开媒体库的时候,他会一直处于加载的状态,下面的页面一直显示不出来,如下图所示:
QQ图片20180205113032.png

当出现这种情况的时候,我们应该考虑到应该是WordPress自身配置文件的问题,这个时候我们应该先去看下在主题目录下面的function.php文件是否是处于闭合的状态,如下图所示:
QQ图片20180205112029.png

所以我们需要在function文件的结尾加上闭合符号“?>”,如下图所示:
QQ图片20180205112554.png

添加好以后,媒体库就可以正常打开了。一般在小型网站里面,如果这里是处于没有闭合的状态是不会出现什么问题的,但是在大型的网站上面,因为功能和结构比较复杂,所以这里建议还是闭合的好,以免到时候出现什么问题,导致网站无法运行。

对wordpress插件NextGEN Gallery的一个愚见

WordPressLeo 发表了文章 • 1 个评论 • 209 次浏览 • 2018-01-30 16:48 • 来自相关话题

这俩天碰到一个项目,大量使用了NextGEN Gallery这个插件,我觉得这插件确实很好,使用后也感觉网站很美观,但是有一点问题需要使用这个插件的朋友注意“点击NextGEN Gallery这个插件的other options这个配置选项,你可以看到Backup the original images这个配置,如果你大量使用了这个插件,那么请不要点击yes进行备份,万一备份了,首先你的网站所占服务器空间会变大,其次又万一以后要对网站进行迁移,那么将会增加很大的迁移难度。” 查看全部
这俩天碰到一个项目,大量使用了NextGEN Gallery这个插件,我觉得这插件确实很好,使用后也感觉网站很美观,但是有一点问题需要使用这个插件的朋友注意“点击NextGEN Gallery这个插件的other options这个配置选项,你可以看到Backup the original images这个配置,如果你大量使用了这个插件,那么请不要点击yes进行备份,万一备份了,首先你的网站所占服务器空间会变大,其次又万一以后要对网站进行迁移,那么将会增加很大的迁移难度。”
2K224LULS{@9M816B[OZ9UH.png

WordPress搭建的国外知名网站

WordPressEastern_Design_Studio 发表了文章 • 0 个评论 • 276 次浏览 • 2018-01-15 18:30 • 来自相关话题

接近30%的网站是基于WordPress的。

1. TechCrunch
2. The New Yorker
3. BBC America
4. Bloomberg Professional
5. The Official Star Wars Blog
6. Variety
7. Sony Music
8. MTV News
9. Beyonce
10. PlayStation.Blog
11. Sweden’s Official Website
12. Microsoft News Center
13. Boingo
14. Bata
15. cPanel Blog
16. Quartz
17. Usain Bolt
18. The Walt Disney Company
19. Time Inc.
20. Facebook Newsroom
21. The New York Times Company
22. Marks & Spencer for Business
23. The Official Rackspace Blog
24. ExpressJet Blog
25. Inside BlackBerry
26. Rotary Means Business – Rotary Club
27. The Rolling Stones
28. The Walking Dead – AMC
29. The Mozilla Blog
30. The Wall Street Journal Law Blog
31. Will Wheaton
32. Snoop Dogg
33. SAP News Center
34. Wolverine Worldwide
35. Reuters Blogs
36. Katy Perry
37. Vogue India
38. Mercedes-Benz
39. Staples Canda Blog
40. Harvard Gazette Onine
41. Pulse by Target 查看全部
接近30%的网站是基于WordPress的。


1. TechCrunch
2. The New Yorker
3. BBC America
4. Bloomberg Professional
5. The Official Star Wars Blog
6. Variety
7. Sony Music
8. MTV News
9. Beyonce
10. PlayStation.Blog
11. Sweden’s Official Website
12. Microsoft News Center
13. Boingo
14. Bata
15. cPanel Blog
16. Quartz
17. Usain Bolt
18. The Walt Disney Company
19. Time Inc.
20. Facebook Newsroom
21. The New York Times Company
22. Marks & Spencer for Business
23. The Official Rackspace Blog
24. ExpressJet Blog
25. Inside BlackBerry
26. Rotary Means Business – Rotary Club
27. The Rolling Stones
28. The Walking Dead – AMC
29. The Mozilla Blog
30. The Wall Street Journal Law Blog
31. Will Wheaton
32. Snoop Dogg
33. SAP News Center
34. Wolverine Worldwide
35. Reuters Blogs
36. Katy Perry
37. Vogue India
38. Mercedes-Benz
39. Staples Canda Blog
40. Harvard Gazette Onine
41. Pulse by Target


公司自己部门电脑网站都打的开,其他部门都打不开,缓存也清了,这是什么原因?有什么解决的方法吗?

回复

WordPressEastern_Design_Studio 回复了问题 • 2 人关注 • 1 个回复 • 245 次浏览 • 2018-05-29 18:05 • 来自相关话题

ssl怎么安装?(从零开始)

回复

WordPressEastern_Design_Studio 回复了问题 • 2 人关注 • 1 个回复 • 204 次浏览 • 2018-05-28 17:09 • 来自相关话题

使用cookie-free domains的方法优化网站性能

回复

WordPressLeo 发起了问题 • 2 人关注 • 0 个回复 • 285 次浏览 • 2018-03-27 11:56 • 来自相关话题

为什么cloudflare开启后网站有部分内容不显示,但是html里面内容又都有

回复

WordPresslena 回复了问题 • 2 人关注 • 2 个回复 • 261 次浏览 • 2018-01-30 15:24 • 来自相关话题

怎么将域名加载到CLOUDFLARE上面呢?

回复

WordPressEastern_Design_Studio 回复了问题 • 3 人关注 • 2 个回复 • 192 次浏览 • 2018-01-29 15:32 • 来自相关话题

分享一款YouTube插件

WordPressLeo 发表了文章 • 1 个评论 • 7 次浏览 • 16 小时前 • 来自相关话题

插件名:YouTube
作者:EmbedPlus Team
YouTube Embed and YouTube Gallery WordPress Plugin. Embed a responsive video, YouTube channel, playlist gallery, or live stream
支持自适应视频,youtube频道订阅,视频列表画册,甚至是直播
设置相对简单,以画册为例,可以设置为一行三列,一页显示六个,多余视频会以分页形式出现
用这个插件前提是要获取youtube api key
方法:新建一个page,里面插入一个视频列表,然后在页面模板对应的位置获取这个页面的内容即可。
页面加载的时候也不会加载视频,针对国外站并且有单独的中文站,那么完全可以用这个插件,完全不影响加载速度。中文站不适合,毕竟是加载的谷歌资源。 查看全部
插件名:YouTube
作者:EmbedPlus Team
YouTube Embed and YouTube Gallery WordPress Plugin. Embed a responsive video, YouTube channel, playlist gallery, or live stream
支持自适应视频,youtube频道订阅,视频列表画册,甚至是直播
设置相对简单,以画册为例,可以设置为一行三列,一页显示六个,多余视频会以分页形式出现
用这个插件前提是要获取youtube api key
方法:新建一个page,里面插入一个视频列表,然后在页面模板对应的位置获取这个页面的内容即可。
页面加载的时候也不会加载视频,针对国外站并且有单独的中文站,那么完全可以用这个插件,完全不影响加载速度。中文站不适合,毕竟是加载的谷歌资源。

推荐一款插件配合contact form 7

WordPressLeo 发表了文章 • 1 个评论 • 73 次浏览 • 2018-07-09 12:03 • 来自相关话题

Contact Form CFDB7,Save and manage Contact Form 7 messages. Never lose important data. Contact Form CFDB7 plugin is an add-on for the Contact Form 7 plugin.
可以用来当做邮箱的功能,邮件都会在这个插件里保存,格式完全和邮箱里一样,完全按照你的字段设置来的
用了这个的话,上回我分享的留言插件就不需要了,完全可以用这个插件,更方便 查看全部
Contact Form CFDB7,Save and manage Contact Form 7 messages. Never lose important data. Contact Form CFDB7 plugin is an add-on for the Contact Form 7 plugin.
可以用来当做邮箱的功能,邮件都会在这个插件里保存,格式完全和邮箱里一样,完全按照你的字段设置来的
用了这个的话,上回我分享的留言插件就不需要了,完全可以用这个插件,更方便

分享一款留言插件Gwolle Guestbook

WordPressLeo 发表了文章 • 1 个评论 • 192 次浏览 • 2018-06-22 12:01 • 来自相关话题

Gwolle Guestbook 这个留言插件比较小众,4W人激活,目前没有发现有什么问题。
使用方法较为简单:
首先搜索Gwolle Guestbook安装并激活此插件;
然后新建一个page,随便取个名字,比如message board,接着将插件短代码[gwolle_gb]放置新建的page中;
接着设置看需求定,需要的打钩即可;
最后将你前面新建的message board 页面调用引入到你需要显示这个留言板的位置,大功告成!
 
私以为,此插件适用于代替一些表单,比如类似底部那种contact form 7表单,相比第三方表单来说,这个样式可以diy调整,不足的是,这个仅仅是留言,只能后台看到,无法发送邮件,但碰到确实需要底部放样式可以diy的表单,smtp插件又始终调整不好,邮件无法发送的情况下,那么可以考虑一下,毕竟邮件只是一种信息传递形式,对一个公司最重要的还是浏览者给到的信息。 查看全部
Gwolle Guestbook 这个留言插件比较小众,4W人激活,目前没有发现有什么问题。
使用方法较为简单:
首先搜索Gwolle Guestbook安装并激活此插件;
然后新建一个page,随便取个名字,比如message board,接着将插件短代码[gwolle_gb]放置新建的page中;
接着设置看需求定,需要的打钩即可;
最后将你前面新建的message board 页面调用引入到你需要显示这个留言板的位置,大功告成!
 
私以为,此插件适用于代替一些表单,比如类似底部那种contact form 7表单,相比第三方表单来说,这个样式可以diy调整,不足的是,这个仅仅是留言,只能后台看到,无法发送邮件,但碰到确实需要底部放样式可以diy的表单,smtp插件又始终调整不好,邮件无法发送的情况下,那么可以考虑一下,毕竟邮件只是一种信息传递形式,对一个公司最重要的还是浏览者给到的信息。

wordpress指定插件禁止更新

WordPressLeo 发表了文章 • 1 个评论 • 212 次浏览 • 2018-06-11 13:49 • 来自相关话题

function remove_update_notifications( $value ) {

    if ( isset( $value ) && is_object( $value ) ) {
        unset( $value->response[ 'js_composer/js_composer.php' ] );
    }

    return $value;
}
add_filter( 'site_transient_update_plugins', 'remove_update_notifications' );
 
只需找到插件目录下插件名.php的文件,将“js_composer/js_composer.php”路径替换为指定插件目录下的插件名.php文件,因为这个文件里包含插件版本号,出新版本后,wordpress匹配后会提示更新的,对于某些特殊插件,不建议更新的、不方便更新的,都可以这样指定禁止。
之前我有分享过一个主题和所有插件都禁止更新的文章,考虑到杀伤范围略大,不建议使用,今次这个更加适用。 查看全部
function remove_update_notifications( $value ) {

    if ( isset( $value ) && is_object( $value ) ) {
        unset( $value->response[ 'js_composer/js_composer.php' ] );
    }

    return $value;
}
add_filter( 'site_transient_update_plugins', 'remove_update_notifications' );
 
只需找到插件目录下插件名.php的文件,将“js_composer/js_composer.php”路径替换为指定插件目录下的插件名.php文件,因为这个文件里包含插件版本号,出新版本后,wordpress匹配后会提示更新的,对于某些特殊插件,不建议更新的、不方便更新的,都可以这样指定禁止。
之前我有分享过一个主题和所有插件都禁止更新的文章,考虑到杀伤范围略大,不建议使用,今次这个更加适用。

web移动端页面性能优化方案(进阶版)

WordPressLeo 发表了文章 • 2 个评论 • 163 次浏览 • 2018-05-28 16:31 • 来自相关话题

如何优化HTML5在移动设置上的性能表现,首先我们需要明确以下几个原则:
1、PC优化手段在Mobile侧同样适用。
2、在Mobile侧我们提出三秒种渲染完成首屏指标。
3、基于第二点,首屏加载3秒完成或使用Loading。
4、基于联通3G网络平均338KB/s(2.71Mb/s),所以首屏资源不应超过1014KB。
5、Mobile侧因手机配置原因,除加载外渲染速度也是优化重点。
6、基于第五点,要合理处理代码减少渲染损耗。
7、基于第二、第五点,所有影响首屏加载和渲染的代码应在处理逻辑中后置。
8、加载完成后用户交互使用时也需注意性能。
 
我们可以先看下面的一张图片:





 
从上图可以看出,上面基本涵盖所有的优化方案了。在这里,只是针对其中几个代表性方案出来探讨。
加载优化
对于移动端的网页来说,加载过程是最为耗时的过程,可能会占到总耗时的80%时间,因此是优化的重点,当然,手机站的其他前端要素优化也是不能忽略的。


1、减少HTTP请求
 因为手机浏览器同时响应请求为4个请求(Android支持4个,iOS 5后可支持6个),所以要尽量减少页面的请求数,首次加载同时请求数不能超过4个,
(1)、合并CSS、JavaScript
(2)、合并小图片,使用雪碧图(简单说:就是一张png透明背景图片,上面有很多其他图片,然后通过css的背景图片定位属性定到所需图片,这样就不用一张张图片的请求了,请求一张雪碧图即可,这样大大减少请求数)
 
2、缓存
 使用缓存可以减少向服务器的请求数,节省加载时间,所以所有静态资源都要在服务器端设置缓存,并且尽量使用长Cache(长Cache资源的更新可使用时间戳)。
(1)、缓存一切可缓存的资源
(2)、使用长Cache(使用时间戳更新Cache)
(3)、使用外联式引用CSS、JavaScript(所以千万别写内联这些了)
 
3、压缩HTML、CSS、JavaScript
减少资源大小可以加快网页显示速度,所以要对HTML、CSS、JavaScript等进行代码压缩,并在服务器端设置GZip。
(2)、压缩(例如,多余的空格、换行符和缩进)
(3)、启用GZip
 
4、无阻塞
写在HTML头部的JavaScript(无异步),和写在HTML标签中的Style会阻塞页面的渲染,因此CSS放在页面头部并使用Link方式引入,避免在HTML标签中写Style,JavaScript放在页面尾部或使用异步方式加载。
 
5、压缩图片
图片是最占流量的资源,因此尽量避免使用他,使用时选择最合适的格式(实现需求的前提下,以大小判断),合适的大小,然后使用智图压缩,同时在代码中用Srcset来按需显示。(关于srcset 属性可以狠狠地点击查看)
(  !important 过度压缩图片大小影响图片显示效果。)
 
6、减少Cookie,Cookie会影响加载速度,所以静态资源域名不使用Cookie。
 
7、异步加载第三方资源
第三方资源不可控会影响页面的加载和显示,因此要异步加载第三方资源,当然最好还是本地化!
 
脚本执行优化
脚本处理不当会阻塞页面加载、渲染,因此在使用时需要注意以下几点:

1、CSS写在头部,JavaScript写在尾部或异步。
2、避免图片和iFrame等的空Src,空Src会重新加载当前页面,影响速度和效率。
 
CSS优化

1、尽量避免写在HTML标签中写Style属性。
2、避免CSS表达式,CSS表达式的执行需跳出CSS树的渲染,因此请避免CSS表达式。
3、移除空的CSS规则,空的CSS规则增加了CSS文件的大小,且影响CSS树的执行,所以需移除空的CSS规则。
4、正确使用Display的属性,Display属性会影响页面的渲染,因此建议各位要合理使用。
    (1)、display:inline后不应该再使用width、height、margin、padding以及float
    (2)、display:inline-block后不应该再使用float
    (3)、display:block后不应该再使用vertical-align
    (4)、display:table-*后不应该再使用margin或者float
至于为什么,可以网上查看一下w3c,举例,inline-block是行内块级元素,如果你再使用float又变成浮动元素;
inline是行内元素,是没有宽高的,自然就没有办法设置内外间距
5、不滥用Float,Float在渲染时计算量比较大,尽量减少使用。
6、不滥用Web字体,Web字体需要下载,解析,重绘当前页面,尽量减少使用,所以字体要本地化。
7、不声明过多的Font-size,过多的Font-size引发CSS树的效率。
8、值为0时不需要任何单位,为了浏览器的兼容性和性能,值为0时不要带单位,举例padding:0 而不是0px。
9、标准化各种浏览器前缀
    (1)、无前缀应放在最后。
    (2)、CSS动画只用(-webkit- 无前缀)两种即可。
    (3)、其它前缀为“-webkit- -moz- -ms-无前缀”四种(-o-Opera浏览器改用blink内核,所以淘汰)。
10、避免让选择符看起来像正则表达式。(不过一般来说我们不会将css选择器写的过于复杂)
 
JavaScript执行优化
1、减少重绘和回流
    (1)、避免不必要的Dom操作(如果套模板,没有用到的千万记得删除)
    (2)、尽量改变Class而不是Style,使用classList代替className(举例,jquery改变一个节点的属性,最好是通过addClass,而不是直接改变css属性)
    (3)、避免使用document.write
    (4)、减少drawImage
2、缓存Dom选择与计算,每次Dom选择都要计算,缓存他。
3、缓存列表.length,每次.length都要计算,用一个变量保存这个值。
4、尽量使用事件代理,避免批量绑定事件。(事件冒泡、事件补货了解一下,一次使用终生受益)
5、尽量使用ID选择器,ID选择器是最快的。
6、TOUCH事件优化,使用touchstart、touchend代替click,因快影响速度快,但应注意Touch响应过快,易引发误操作。
 
渲染优化
HTML文档是以包含文档编码信息的数据流方式在网络间传输,页面的编码信息一般会在HTTP响应的头部信息或在文档内的HTML标记中指明,客户端浏览 器只有在确定了页面编码后才能正确的渲染页面,所以在绘制页面或执行任何的javascript代码前,大部分的浏览器(ie6、ie7、ie8除外)都 会缓冲一定字节的数据来从中查找编码信息,不同的浏览器当中预缓冲的字节数是不一样的。


1、HTML使用Viewport
Viewport可以加速页面的渲染,请使用以下代码:
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
2、减少Dom节点
Dom节点太多影响页面的渲染,应尽量减少Dom节点。(html也要精简,减少不必要的节点)

3、动画优化
(1)、尽量使用CSS3动画。
(2)、合理使用requestAnimationFrame动画代替setTimeout。
(3)、适当使用Canvas动画5个元素以内使用css动画,5个以上使用Canvas动画(iOS8可使用webGL)。


4、高频事件优化
 Touchmove、Scroll事件可导致多次渲染(尽量不要用)。
(1)、使用requestAnimationFrame监听帧变化,使得在正确的时间进行渲染。
(2)、增加响应变化的时间间隔,减少重绘次数。

5、GPU加速
CSS中以下属性(CSS3 transitions、CSS3 3D transforms、Opacity、Canvas、WebGL、Video)来触发GPU渲染,请合理使用。

另外,过渡使用会引发手机过耗电增加。

HTML5只是一种方法和手段,并不是万能的,思考怎么符合移动端设备特别是没错,但前提务必要基于PC站框架结构和内容。
  查看全部
如何优化HTML5在移动设置上的性能表现,首先我们需要明确以下几个原则:
1、PC优化手段在Mobile侧同样适用。
2、在Mobile侧我们提出三秒种渲染完成首屏指标。
3、基于第二点,首屏加载3秒完成或使用Loading。
4、基于联通3G网络平均338KB/s(2.71Mb/s),所以首屏资源不应超过1014KB。
5、Mobile侧因手机配置原因,除加载外渲染速度也是优化重点。
6、基于第五点,要合理处理代码减少渲染损耗。
7、基于第二、第五点,所有影响首屏加载和渲染的代码应在处理逻辑中后置。
8、加载完成后用户交互使用时也需注意性能。
 
我们可以先看下面的一张图片:

20160218103753_24106.jpeg

 
从上图可以看出,上面基本涵盖所有的优化方案了。在这里,只是针对其中几个代表性方案出来探讨。
加载优化
对于移动端的网页来说,加载过程是最为耗时的过程,可能会占到总耗时的80%时间,因此是优化的重点,当然,手机站的其他前端要素优化也是不能忽略的。


1、减少HTTP请求
 因为手机浏览器同时响应请求为4个请求(Android支持4个,iOS 5后可支持6个),所以要尽量减少页面的请求数,首次加载同时请求数不能超过4个,
(1)、合并CSS、JavaScript
(2)、合并小图片,使用雪碧图(简单说:就是一张png透明背景图片,上面有很多其他图片,然后通过css的背景图片定位属性定到所需图片,这样就不用一张张图片的请求了,请求一张雪碧图即可,这样大大减少请求数
 
2、缓存
 使用缓存可以减少向服务器的请求数,节省加载时间,所以所有静态资源都要在服务器端设置缓存,并且尽量使用长Cache(长Cache资源的更新可使用时间戳)。
(1)、缓存一切可缓存的资源
(2)、使用长Cache(使用时间戳更新Cache)
(3)、使用外联式引用CSS、JavaScript(所以千万别写内联这些了)
 
3、压缩HTML、CSS、JavaScript
减少资源大小可以加快网页显示速度,所以要对HTML、CSS、JavaScript等进行代码压缩,并在服务器端设置GZip。
(2)、压缩(例如,多余的空格、换行符和缩进)
(3)、启用GZip
 
4、无阻塞
写在HTML头部的JavaScript(无异步),和写在HTML标签中的Style会阻塞页面的渲染,因此CSS放在页面头部并使用Link方式引入,避免在HTML标签中写Style,JavaScript放在页面尾部或使用异步方式加载。
 
5、压缩图片
图片是最占流量的资源,因此尽量避免使用他,使用时选择最合适的格式(实现需求的前提下,以大小判断),合适的大小,然后使用智图压缩,同时在代码中用Srcset来按需显示。(关于srcset 属性可以狠狠地点击查看)
(  !important 过度压缩图片大小影响图片显示效果。)
 
6、减少Cookie,Cookie会影响加载速度,所以静态资源域名不使用Cookie。
 
7、异步加载第三方资源
第三方资源不可控会影响页面的加载和显示,因此要异步加载第三方资源,当然最好还是本地化!
 
脚本执行优化
脚本处理不当会阻塞页面加载、渲染,因此在使用时需要注意以下几点:

1、CSS写在头部,JavaScript写在尾部或异步。
2、避免图片和iFrame等的空Src,空Src会重新加载当前页面,影响速度和效率。
 
CSS优化

1、尽量避免写在HTML标签中写Style属性。
2、避免CSS表达式,CSS表达式的执行需跳出CSS树的渲染,因此请避免CSS表达式。
3、移除空的CSS规则,空的CSS规则增加了CSS文件的大小,且影响CSS树的执行,所以需移除空的CSS规则。
4、正确使用Display的属性,Display属性会影响页面的渲染,因此建议各位要合理使用。
    (1)、display:inline后不应该再使用width、height、margin、padding以及float
    (2)、display:inline-block后不应该再使用float
    (3)、display:block后不应该再使用vertical-align
    (4)、display:table-*后不应该再使用margin或者float

至于为什么,可以网上查看一下w3c,举例,inline-block是行内块级元素,如果你再使用float又变成浮动元素;
inline是行内元素,是没有宽高的,自然就没有办法设置内外间距
5、不滥用Float,Float在渲染时计算量比较大,尽量减少使用。
6、不滥用Web字体,Web字体需要下载,解析,重绘当前页面,尽量减少使用,所以字体要本地化。
7、不声明过多的Font-size,过多的Font-size引发CSS树的效率。
8、值为0时不需要任何单位,为了浏览器的兼容性和性能,值为0时不要带单位,举例padding:0 而不是0px
9、标准化各种浏览器前缀
    (1)、无前缀应放在最后。
    (2)、CSS动画只用(-webkit- 无前缀)两种即可。
    (3)、其它前缀为“-webkit- -moz- -ms-无前缀”四种(-o-Opera浏览器改用blink内核,所以淘汰)。
10、避免让选择符看起来像正则表达式。(不过一般来说我们不会将css选择器写的过于复杂)
 
JavaScript执行优化
1、减少重绘和回流
    (1)、避免不必要的Dom操作(如果套模板,没有用到的千万记得删除)
    (2)、尽量改变Class而不是Style,使用classList代替className(举例,jquery改变一个节点的属性,最好是通过addClass,而不是直接改变css属性)
    (3)、避免使用document.write
    (4)、减少drawImage
2、缓存Dom选择与计算,每次Dom选择都要计算,缓存他。
3、缓存列表.length,每次.length都要计算,用一个变量保存这个值。
4、尽量使用事件代理,避免批量绑定事件。(事件冒泡、事件补货了解一下,一次使用终生受益
5、尽量使用ID选择器,ID选择器是最快的。
6、TOUCH事件优化,使用touchstart、touchend代替click,因快影响速度快,但应注意Touch响应过快,易引发误操作。
 
渲染优化
HTML文档是以包含文档编码信息的数据流方式在网络间传输,页面的编码信息一般会在HTTP响应的头部信息或在文档内的HTML标记中指明,客户端浏览 器只有在确定了页面编码后才能正确的渲染页面,所以在绘制页面或执行任何的javascript代码前,大部分的浏览器(ie6、ie7、ie8除外)都 会缓冲一定字节的数据来从中查找编码信息,不同的浏览器当中预缓冲的字节数是不一样的。


1、HTML使用Viewport
Viewport可以加速页面的渲染,请使用以下代码:
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
2、减少Dom节点
Dom节点太多影响页面的渲染,应尽量减少Dom节点。(html也要精简,减少不必要的节点)

3、动画优化
(1)、尽量使用CSS3动画。
(2)、合理使用requestAnimationFrame动画代替setTimeout。
(3)、适当使用Canvas动画5个元素以内使用css动画,5个以上使用Canvas动画(iOS8可使用webGL)。


4、高频事件优化
 Touchmove、Scroll事件可导致多次渲染(尽量不要用)。
(1)、使用requestAnimationFrame监听帧变化,使得在正确的时间进行渲染。
(2)、增加响应变化的时间间隔,减少重绘次数。

5、GPU加速
CSS中以下属性(CSS3 transitions、CSS3 3D transforms、Opacity、Canvas、WebGL、Video)来触发GPU渲染,请合理使用。

另外,过渡使用会引发手机过耗电增加。

HTML5只是一种方法和手段,并不是万能的,思考怎么符合移动端设备特别是没错,但前提务必要基于PC站框架结构和内容。
 

修改WordPress后台登录页Logo和链接

WordPressBob 发表了文章 • 1 个评论 • 141 次浏览 • 2018-05-28 09:58 • 来自相关话题

Wordpress后台登录页面通常带有一个指向WordPress官网的 Logo 图片和链接,如果是使用WordPress来搭建自己的网站,将后台登录页面的logo和URL替换成自己的,会更显得专业一点。
 
方法一:
 
修改后台登录页Logo链接
需要我们我做的事情非常简单,我们在主题目录下面找到functions.php文件,将下面的代码复制在文件的最下面:function custom_loginlogo_url($url) {
return 'http://yourdomain.com';
}
add_filter( 'login_headerurl', 'custom_loginlogo_url' );
修改后台登录页Logo图片
和上面修改链接的方法一致,在functions.php的最下面添加一下代码:function my_custom_login_logo() {
echo '<style type="text/css">
.login h1 a {
background-image:url("/wp-content/themes/yourzhuti/images/logo.png") !important;
height: 60px;
width: 186px !important;
-webkit-background-size: 186px;
background-size: 186px;
}
</style>';
}
add_action('login_head', 'my_custom_login_logo');
代码里面的样式可根据自己logo图片的宽高进行修改。
 
方法二:
如果以上步骤感觉麻烦,可以直接替换系统文件中的图片和URL:
 
第一、更换logo图片
事先将我们logo图片重新另存一份,命名为wordpress-logo.png,在Wordpress根目录wp-admin/images文件夹中找到wordpress-logo.png覆盖替换成我们自己图片即可。
 
第二、自定义logo链接地址
在Wordpress根目录下的wp-login.php文件,打开该文件后查找$login_header_url,将其后面的链接地址替换成自己想要的链接即可。
 
以上两种方法建议采用第一种,第二种是当WordPress系统文件更新是,该修改的内容会被替换,每次更新每次替换,非常麻烦。 查看全部
Wordpress后台登录页面通常带有一个指向WordPress官网的 Logo 图片和链接,如果是使用WordPress来搭建自己的网站,将后台登录页面的logo和URL替换成自己的,会更显得专业一点。
 
方法一:
 
修改后台登录页Logo链接
需要我们我做的事情非常简单,我们在主题目录下面找到functions.php文件,将下面的代码复制在文件的最下面:
function custom_loginlogo_url($url) {
return 'http://yourdomain.com';
}
add_filter( 'login_headerurl', 'custom_loginlogo_url' );

修改后台登录页Logo图片
和上面修改链接的方法一致,在functions.php的最下面添加一下代码:
function my_custom_login_logo() {
echo '<style type="text/css">
.login h1 a {
background-image:url("/wp-content/themes/yourzhuti/images/logo.png") !important;
height: 60px;
width: 186px !important;
-webkit-background-size: 186px;
background-size: 186px;
}
</style>';
}
add_action('login_head', 'my_custom_login_logo');

代码里面的样式可根据自己logo图片的宽高进行修改。
 
方法二:
如果以上步骤感觉麻烦,可以直接替换系统文件中的图片和URL:
 
第一、更换logo图片
事先将我们logo图片重新另存一份,命名为wordpress-logo.png,在Wordpress根目录wp-admin/images文件夹中找到wordpress-logo.png覆盖替换成我们自己图片即可。
 
第二、自定义logo链接地址
在Wordpress根目录下的wp-login.php文件,打开该文件后查找$login_header_url,将其后面的链接地址替换成自己想要的链接即可。
 
以上两种方法建议采用第一种,第二种是当WordPress系统文件更新是,该修改的内容会被替换,每次更新每次替换,非常麻烦。

WordPress文章删除时同时删除文章所包含的图片

WordPressBob 发表了文章 • 1 个评论 • 135 次浏览 • 2018-05-24 10:43 • 来自相关话题

好的网站需要不停的更新内容和图片,才能不断地增加网站的流量,并且提升网站的排名。网站内容的更新不知需要添加,有时候也需要将老的,没有实用性的文章删除,让网站变得更加有吸引力。删除文章的同时也要将其所带的图片一起删除,这样可以节省不少的空间资源。而WordPress在删除图片的同时,默认是不会删除文章所带有的图片,简单的方法就是安装WordPress插件来删除图片。还有一种方法就是在主题functions.php函数文件里面添加一段代码:/* 删除文章时删除图片附件 */
/* 定义函数名称 */
function delete_post_and_attachments($post_ID) {
global $wpdb;
//删除文章特色图片
$thumbnails = $wpdb->get_results( "SELECT * FROM $wpdb->postmeta WHERE meta_key = '_thumbnail_id' AND post_id = $post_ID" );
foreach ( $thumbnails as $thumbnail ) {
wp_delete_attachment( $thumbnail->meta_value, true );
}
//删除文章的图片附件
$attachments = $wpdb->get_results( "SELECT * FROM $wpdb->posts WHERE post_parent = $post_ID AND post_type = 'attachment'" );
foreach ( $attachments as $attachment ) {
wp_delete_attachment( $attachment->ID, true );
}
$wpdb->query( "DELETE FROM $wpdb->postmeta WHERE meta_key = '_thumbnail_id' AND post_id = $post_ID" );
}
add_action('before_delete_post', 'delete_post_and_attachments');只要将这段代码放在主题的functions.php文件里面就可以了。 查看全部
好的网站需要不停的更新内容和图片,才能不断地增加网站的流量,并且提升网站的排名。网站内容的更新不知需要添加,有时候也需要将老的,没有实用性的文章删除,让网站变得更加有吸引力。删除文章的同时也要将其所带的图片一起删除,这样可以节省不少的空间资源。而WordPress在删除图片的同时,默认是不会删除文章所带有的图片,简单的方法就是安装WordPress插件来删除图片。还有一种方法就是在主题functions.php函数文件里面添加一段代码:
/* 删除文章时删除图片附件 */
/* 定义函数名称 */
function delete_post_and_attachments($post_ID) {
global $wpdb;
//删除文章特色图片
$thumbnails = $wpdb->get_results( "SELECT * FROM $wpdb->postmeta WHERE meta_key = '_thumbnail_id' AND post_id = $post_ID" );
foreach ( $thumbnails as $thumbnail ) {
wp_delete_attachment( $thumbnail->meta_value, true );
}
//删除文章的图片附件
$attachments = $wpdb->get_results( "SELECT * FROM $wpdb->posts WHERE post_parent = $post_ID AND post_type = 'attachment'" );
foreach ( $attachments as $attachment ) {
wp_delete_attachment( $attachment->ID, true );
}
$wpdb->query( "DELETE FROM $wpdb->postmeta WHERE meta_key = '_thumbnail_id' AND post_id = $post_ID" );
}
add_action('before_delete_post', 'delete_post_and_attachments');
只要将这段代码放在主题的functions.php文件里面就可以了。

What does Cloudflare Development mode mean?

WordPressLeo 发表了文章 • 1 个评论 • 115 次浏览 • 2018-05-21 11:59 • 来自相关话题

新版本的wp-rockets插件,对于cloudflare有了三个设置,
那么我这边就讲下开发者模式
What does Cloudflare Development mode mean?
所谓开发者模式,顾名思义,就是适合开发人员的模式;作为网站开发者,我们对于cloudflare,说实话,真的是又爱又恨,好处是增加全球网络节点,坏的是修改网站很麻烦,往往我们改一个样式就要清一次缓存,这样严重影响我们开发者的效率。
好在新版wp-rockets推出了针对cloudflare开发者模式,只需我们开发者在对网站进行修改的时候,开启按钮即可,而且默认三小时后会关闭按钮,这样我们就不用重复去清除cloudflare缓存了,大大提升了我们的效率。
彩蛋:另外针对之前图片的attachment页面问题,老版本yoast seo是在Advanced里面Redirect attachment URLs to parent post URL按钮开启,






其实新版本的yoast seo也有相关设置,search appearance里面的media,开启即可






  查看全部
新版本的wp-rockets插件,对于cloudflare有了三个设置,
那么我这边就讲下开发者模式
What does Cloudflare Development mode mean?
所谓开发者模式,顾名思义,就是适合开发人员的模式;作为网站开发者,我们对于cloudflare,说实话,真的是又爱又恨,好处是增加全球网络节点,坏的是修改网站很麻烦,往往我们改一个样式就要清一次缓存,这样严重影响我们开发者的效率。
好在新版wp-rockets推出了针对cloudflare开发者模式,只需我们开发者在对网站进行修改的时候,开启按钮即可,而且默认三小时后会关闭按钮,这样我们就不用重复去清除cloudflare缓存了,大大提升了我们的效率。
彩蛋:另外针对之前图片的attachment页面问题,老版本yoast seo是在Advanced里面Redirect attachment URLs to parent post URL按钮开启,

1.png


其实新版本的yoast seo也有相关设置,search appearance里面的media,开启即可

2.png


 

分享一些slider以及一些布局上不错的小细节

WordPressLeo 发表了文章 • 1 个评论 • 140 次浏览 • 2018-05-16 17:29 • 来自相关话题

http://demo.wponlinesupport.com/slick-slider-demo/?utm_source=hp&event=demo  首先可以通过这个链接,打开,然后点击一个菜单图标的按钮,可以看到右侧有很多插件可供选择,插件可以直接用,当然主要还是我们可以参考一些不错的小细节。
由于插件比较多,这边就列部分效果截图























































  查看全部
http://demo.wponlinesupport.com/slick-slider-demo/?utm_source=hp&event=demo  首先可以通过这个链接,打开,然后点击一个菜单图标的按钮,可以看到右侧有很多插件可供选择,插件可以直接用,当然主要还是我们可以参考一些不错的小细节。
由于插件比较多,这边就列部分效果截图

1.png


2.png


3.png


4.png


5.png


6.png


7.png


8.png


9.png


10.png


11.png

 

用子目录做二级网站需要注意的地方

WordPressLeo 发表了文章 • 1 个评论 • 156 次浏览 • 2018-05-08 17:13 • 来自相关话题

首先提及一下子目录和二级域名的优劣势:
 
二级域名: 首先,二级域名的权重大于子目录的,二级域名在搜索引擎看来和主域名是两个独立的网站,主域名在很多时候会传递一小部分信任度给二级域名(是信任度不是PR)。所以,很多做SEO的人都知道二级域名天生就比子目录具有更高的权重和更好的排名。 
子目录: 首先要知道一点,子目录其实是主站的一部分,正如上面所说,权重天生就比二级域名低,但个人还是建议以子目录建立子站,原因主要是: ①、二级域名和主域名是两个相互独立的站,要优化的话,需要分别优化两个站,并且在外链的建设过程中,网站的权重会被这些独立的网站分散。主域名通过外链的建设获得高权重,并不意味者二级域名就能获得高权重。 ②、二级域名的变多,会使分离出来的二级网站变小。 ③、子目录则相反,子目录的增多会使主网站变大,随着网站的变大,主站的收录量,权重,信任度也将提升。
 
 
最后这边重点提及一下,用子目录做二级网站,我们必须要更改的.htaccess规则
# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /es/
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /es/index.php [L]
</IfModule>
# END WordPress
 
 
以上加粗斜体就是我们必须要更改的规则,默认是没有/es/的,举例,如果你的子目录是以es命名,那么这边就要更改为/es/,否则除了首页,所有页面点击之后都会跳转到主站对应的页面。
  查看全部
首先提及一下子目录和二级域名的优劣势:
 
二级域名: 首先,二级域名的权重大于子目录的,二级域名在搜索引擎看来和主域名是两个独立的网站,主域名在很多时候会传递一小部分信任度给二级域名(是信任度不是PR)。所以,很多做SEO的人都知道二级域名天生就比子目录具有更高的权重和更好的排名。 
子目录: 首先要知道一点,子目录其实是主站的一部分,正如上面所说,权重天生就比二级域名低,但个人还是建议以子目录建立子站,原因主要是: ①、二级域名和主域名是两个相互独立的站,要优化的话,需要分别优化两个站,并且在外链的建设过程中,网站的权重会被这些独立的网站分散。主域名通过外链的建设获得高权重,并不意味者二级域名就能获得高权重。 ②、二级域名的变多,会使分离出来的二级网站变小。 ③、子目录则相反,子目录的增多会使主网站变大,随着网站的变大,主站的收录量,权重,信任度也将提升。
 
 
最后这边重点提及一下,用子目录做二级网站,我们必须要更改的.htaccess规则
# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /es/
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /es/index.php [L]
</IfModule>
# END WordPress
 
 
以上加粗斜体就是我们必须要更改的规则,默认是没有/es/的,举例,如果你的子目录是以es命名,那么这边就要更改为/es/,否则除了首页,所有页面点击之后都会跳转到主站对应的页面。