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





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

默认情况下，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. 查看全部

function ed_custom_jpeg_quality() {

   

    return 90;}

    

add_filter( 'jpeg_quality', 'ed_custom_jpeg_quality');

不多说先看效果
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(); 查看全部

基于对隽永智库的积极贡献给予隽永东方 Leo 现金红包奖励，也鼓励其他小伙伴们再接再厉。
 





 

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






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





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

我们平时做项目的时候，经常会为了方便，同时打开多个ftp，一个不小心就串项目了，覆盖错了。这时候就体现了平时做备份的好处，测试站项目必须和我们文件服务器做好同步，这样即使负责该项目的同事不在，你也可以进行恢复。
那么如果是客户的正式站呢，这个首先你要想自己有没有给这个站点做过本地的备份，如果本地没有备份，你也不要急，可以看看cpanel这种控制平台有没有设置过备份、阿里云有没有设置过镜像，如果连这种备份都没做，那就完了。
如果仅仅是覆盖了样式表，那么你还能从cloudflare上面入手（这时候就更加明显的体现了加载第三方cdn的好处），切记不要手滑清了缓存，如果连缓存都清除了，那就真的玩完。
 
当然这不是鼓励大家串项目了。
我们做任何事情都要仔细。经验之谈，都是我犯过的事
 
总而言之：备份很重要，cloudflare也很有效
 
另外和我们文件服务器做好同步，需要你本地打开drive这个软件，然后创建和我们文件服务器的连接，选择你想同步的项目，本地选择一个目录作为cloudstation目录，里面就是放文件服务器同步的项目，你做任何修改都会同步到文件服务器，这是所有测试站点都要做的。（我发现新同事还是没有这个习惯） 查看全部

现在win7还是win10开始，电脑上要找个ie浏览器，我个人经验是不太容易的，当然你可以去网上下载，但其实我们电脑上是有ie了，可以通过Microsoft Edge浏览器转ie浏览器打开，而Microsoft Edge这个浏览器就很容易找到 查看全部

最近做了下自己负责的项目的优化，小有收获，不敢独享特拿来分享。
一.最重要的一点莫过于图片的压缩。
图片压缩基本分三步走:1.手动用photoshop压缩，快捷键Ctrl+alt +shift+s，即是保存为web格式。图片可以选择png或者jpg格式，对于那种应该选择哪种格式，度娘那里都有介绍，我就不多赘述。一般质量80%就可以满足需求了。2.将保存的图片通过第三方压缩网站再次压缩https://tinypng.com/   最后下载的图片大小即可上传到网站后台。3.通过wordpress后台安装的插件EWWW img optimizer再次压缩。
二.WP rocket 插件的设置。
这里要根据不同网站，设置成不同的数值，因为如果随便文件都压缩的话，可能导致网站出现乱码情况，所以调整的时候要随时观察站点页面。总之一句话：能压缩的都压缩，最大化压缩网站文件。不废话直接上图：
























注意对于preload选项的设置，我在Prefetch DNS Requests设置了相应的资源之后，移动端的评分高达98分，所以这个挺关键的。
三.WordPress 设置浏览器端缓存，加快访问速度.
在网站根目录(即是服务器public_html文件夹下面) .htaccess 文件中添加以下代码：
#Expire Header
ExpiresActive on //开启缓存
ExpiresByType text/css "access 1 month"//css文件缓存1个月
ExpiresByType text/plain "access 2 days"//纯文本内容缓存2天
ExpiresByType text/html "access 2 days"//html文件缓存2天
ExpiresByType application/javascript "access 1 month"//JS文件缓存1个月
ExpiresByType image/jpeg "access 1 month"//jpeg图片缓存1个月
ExpiresByType image/x-icon "access 1 month"//icon缓存1个月
ExpiresByType image/gif "access 1 month"//gif图片缓存一个月
ExpiresByType image/png "access 1 month"//png图片缓存一个月
ExpiresByType image/ico "access 1 month"//ico缓存1个月
ExpiresByType application/pdf "access 1 month"//pdf文件缓存一个月
ExpiresByType application/x-shockwave-flash "access 1 month"//flash缓存一个月
ExpiresDefault "access 1 month"// 默认（未提及的可缓存文件）缓存1个月
 
 
当然具体code干货代码，我也私下保存了一份（复制在.htaccess文件里面）：

# BEGIN WP Rocket v3.1.4
# Use UTF-8 encoding for anything served text/plain or text/html
AddDefaultCharset UTF-8
# Force UTF-8 for a number of file formats
<IfModule mod_mime.c>
AddCharset UTF-8 .atom .css .js .json .rss .vtt .xml
</IfModule>
# FileETag None is not enough for every server.
<IfModule mod_headers.c>
Header unset ETag
</IfModule>
# Since we’re sending far-future expires, we don’t need ETags for static content.
# developer.yahoo.com/performance/rules.html#etags
FileETag None
<IfModule mod_alias.c>
<FilesMatch "\.(html|htm|rtf|rtx|txt|xsd|xsl|xml)$">
<IfModule mod_headers.c>
Header set X-Powered-By "WP Rocket/3.1.4"
Header unset Pragma
Header append Cache-Control "public"
Header unset Last-Modified
</IfModule>
</FilesMatch>
<FilesMatch "\.(css|htc|js|asf|asx|wax|wmv|wmx|avi|bmp|class|divx|doc|docx|eot|exe|gif|gz|gzip|ico|jpg|jpeg|jpe|json|mdb|mid|midi|mov|qt|mp3|m4a|mp4|m4v|mpeg|mpg|mpe|mpp|otf|odb|odc|odf|odg|odp|ods|odt|ogg|pdf|png|pot|pps|ppt|pptx|ra|ram|svg|svgz|swf|tar|tif|tiff|ttf|ttc|wav|wma|wri|xla|xls|xlsx|xlt|xlw|zip)$">
<IfModule mod_headers.c>
Header unset Pragma
Header append Cache-Control "public"
</IfModule>
</FilesMatch>
</IfModule>
# Expires headers (for better cache control)
<IfModule mod_expires.c>
ExpiresActive on
# Perhaps better to whitelist expires rules? Perhaps.
ExpiresDefault                          "access 1 month"
# cache.appcache needs re-requests in FF 3.6 (thanks Remy ~Introducing HTML5)
ExpiresByType text/cache-manifest       "access plus 0 seconds"
# Your document html
ExpiresByType text/html                 "access 2 days"
# Data
ExpiresByType text/xml                  "access plus 0 seconds"
ExpiresByType application/xml           "access plus 0 seconds"
ExpiresByType application/json          "access plus 0 seconds"
# Feed
ExpiresByType application/rss+xml       "access plus 1 hour"
ExpiresByType application/atom+xml      "access plus 1 hour"
# Favicon (cannot be renamed)
ExpiresByType image/x-icon              "access 1 month"
# Media: images, video, audio
ExpiresByType image/gif                 "access 1 month"
ExpiresByType image/png                 "access 1 month"
ExpiresByType image/jpeg                "access 1 month"
ExpiresByType video/ogg                 "access plus 1 month"
ExpiresByType audio/ogg                 "access plus 1 month"
ExpiresByType video/mp4                 "access plus 1 month"
ExpiresByType video/webm                "access plus 1 month"
ExpiresByType image/ico                 "access 1 month"
# HTC files  (css3pie)
ExpiresByType text/x-component          "access plus 1 month"

# Webfonts
ExpiresByType application/x-font-ttf    "access plus 1 month"
ExpiresByType font/opentype             "access plus 1 month"
ExpiresByType application/x-font-woff   "access plus 1 month"
ExpiresByType application/x-font-woff2  "access plus 1 month"
ExpiresByType image/svg+xml             "access plus 1 month"
ExpiresByType application/vnd.ms-fontobject "access plus 1 month"
ExpiresByType application/pdf                 "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
# CSS and JavaScript
ExpiresByType text/css                  "access 1 month"
ExpiresByType application/javascript    "access 1 month"
ExpiresByType text/plain                "access 2 days"
</IfModule>
# Gzip compression
<IfModule mod_deflate.c>
# Active compression
SetOutputFilter DEFLATE
# Force deflate for mangled headers
<IfModule mod_setenvif.c>
<IfModule mod_headers.c>
SetEnvIfNoCase ^(Accept-EncodXng|X-cept-Encoding|X{15}|~{15}|-{15})$ ^((gzip|deflate)\s*,?\s*)+|[X~-]{4,13}$ HAVE_Accept-Encoding
RequestHeader append Accept-Encoding "gzip,deflate" env=HAVE_Accept-Encoding
# Don’t compress images and other uncompressible content
SetEnvIfNoCase Request_URI \
\.(?:gif|jpe?g|png|rar|zip|exe|flv|mov|wma|mp3|avi|swf|mp?g|mp4|webm|webp|pdf)$ no-gzip dont-vary
</IfModule>
</IfModule>
# Compress all output labeled with one of the following MIME-types
<IfModule mod_filter.c>
AddOutputFilterByType DEFLATE application/atom+xml \
                              application/javascript \
                              application/json \
                              application/rss+xml \
                              application/vnd.ms-fontobject \
                              application/x-font-ttf \
                              application/xhtml+xml \
                              application/xml \
                              font/opentype \
                              image/svg+xml \
                              image/x-icon \
                              text/css \
                              text/html \
                              text/plain \
                              text/x-component \
                              text/xml
</IfModule>
<IfModule mod_headers.c>
Header append Vary: Accept-Encoding
</IfModule>
</IfModule>
# END WP Rocket
# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>
# END WordPress
# BEGIN WP Performance Score Booster Settings
# END WP Performance Score Booster Settings
 
 
 
 

  查看全部

这边可以对应几个不同设备屏幕的banner
一些插件的设置细节需要记录下来，这些平时很少用到的设置，不记录下来，下次又是要花时间去找

1、头部的菜单，要调用后台appearance中的menu，主题默认会有几个menu，




我这边是top menu，对应的调用代码为
<?php wp_nav_menu( array( 'theme_location' => 'top', 'menu_class' => 'nav-menu','container' => false,'items_wrap' => '%3$s' ) ); ?>
theme location 必须为top，具体为什么是top，可以看一下functions.php文件。
后续要有更多的menu，比如说底部有很多栏目，考虑用户友好性，我们最好也在functions.php当中新建几个menu，模仿前面已经有的menu来
2、头部做完，设计稿上面体现的就是接着一个banner，banner可以自己用swiper、bxslider等等插件做，但是我们一般是用一款slide revolution付费插件做的，只需要后台插入图片，然后简单可视化配置一下，短代码调用即可，至于为什么要用这个wordpress的插件，“用户友好性”，这是很重要的，下面很多地方我都会提到这个词，要便于客户使用，你要知道这个网站不是做给开发人员使用的。
3、banner做完，从设计稿上来看，一般而言，下面就是我们首页的主体内容了。下面讲一些小坑，主要就是元素的使用规范
（1）、按钮，因为一般是链接，所以不建议使用button、input这些，用了也还需要包一个a标签，所以直接使用a标签，按钮a标签建议display:inline-block; 内联块级元素，好处是我们可以定按钮的宽高，也可以定按钮的padding、margin等等，a标签默认是inline内联元素，是不能定宽高这些的。
（2）、我们建的站，一般来说，所有的标题都是需要有链接的，据我观察，新同事都会使用p标签，考虑多一点的会用个h1、h2...标签。我们要记住标题要有a标签，可以包在标题标签内，考虑到a标签在css上的特性，如果开始是用的p标签、h标签，那么后续这些p、h标签的样式都是没用的，还是要重写一遍给a标签，这种无用功完全可以避免。
（3）、所有可以点击的地方，必须要cursor: pointer，必须是这个手掌的图标，默认箭头的光标是不行的！
（4）、客户友好性，如何体现？简单说，就是后台要能设置，最初级的就是要让客户在后台直接设置、添加内容，而不是要跑到模板里添加（当然有些情况确实需要写到模板里，那也只能写模板，尽量和后台关联）。
            数据和后台关联，就需要用到字段插件，我们可以新建一些各种各样的字段，比如说图标字段、文本框字段，url字段等等，复杂点的有repeater字段，这个字段又可以包括几个其他的字段并关联起来，具体需要自己去研究，我们可以把前台需要的内容都写到对应的post、page当中去，这样客户只需要到对应的post、page当中添加前台需要的图片、文字等内容了。
            等做的多了，你就要考虑如何建字段更合适，不仅仅是客户可以设置，还要客户一眼就能明白这个字段是做什么的（因为我以前做字段的时候，经验不足，很多字段做好了，其实客户也不知道是干嘛用的）。
            如何把字段建好，可以参考一下那些付费主题的后台的文章编辑，付费主题一般这些做的比较好，当然要做到一样好，难度很大，毕竟付费主题会有很多其他的资源加载。
4、剩下最后一部分就是我们的底部菜单，前面也说到了，考虑到用户的友好性，最好也是调用menu，这样客户可以在menu当中添加菜单。
5、wordpress有个widgets我们要好好利用起来，共用的一些版块，我们可以写在widgets中，然后需要的地方调用一些即可，这样日后维护起来也是方便很多，不需要相同的版块改十来遍。默认functions.php文件也是提供了俩三个的wigets，需要新建可以模仿着新建几个。（这个也是相当推荐的，也就是做模板的时候多花个几分钟，不要建站的时候偷懒，到时维护起来就需要改十来个文件。）
6、另外对于一些问题，你要知道的是如何使用它，而不是花上半天想它为什么是这样的。
     为什么是这样这个问题留在你闲得无聊的时候再想。至于为什么这样，我只会告诉你，去问开源的人去，“为什么不按照你的想法来！”
7、之前提到做一些通用模板，我觉得这个想法ok。但其实吧，这个模板也是在心里的，做任何事情，你要有个大致的构想，就像写文章一样，你开头写什么、中间写什么，结尾写什么，心里要有点数，这样作文才能拿个基础分。建站也是一个道理，不能写到自己都乱了。（开始做这个的时候我也乱，可以说非常乱了，但第二个项目我就会有个大致的构想，当然了中间少不了各位老同事的帮助，那会问问题的次数，我是第二，没人第一了。）
     另外关于内容的调用，我们文件服务器上面有同事上传的很多很多的代码，都是能拿来用的，不会用，大家可以一起讨论。
 
 
 
一时间能想到的也不多，后续会持续更新...... 查看全部