通知设置 新通知
wordpress前台页面如何快速找到后台对应编辑页面
WordPress • Leo 发表了文章 • 1 个评论 • 3464 次浏览 • 2018-11-06 11:48
很简单,每一个页面都有一个唯一的id,我们可以通过这个id来找页面,这样就很方便了
如图,就是post id为843的,如果是page的话就是page id,如果不会分辨是post还是blog等等,那大不了就是多试几个字段,举个例子,就是把后台的blog、news、post、page等等都点一个进去,然后通过修改浏览器url的id就可以。
查看全部
Wordpress 更改JPEG图片的压缩质量
WordPress • Bob 发表了文章 • 1 个评论 • 3341 次浏览 • 2018-11-05 11:45
WordPress提供了 jpeg_quality 的钩子,我们可以自定义上传图片质量的压缩比列。比如:
function ed_custom_jpeg_quality() {
return 90;}
add_filter( 'jpeg_quality', 'ed_custom_jpeg_quality');这里的90我们可以随意更改,如果不希望压缩,可以改成100. 查看全部
WordPress提供了 jpeg_quality 的钩子,我们可以自定义上传图片质量的压缩比列。比如:
function ed_custom_jpeg_quality() {这里的90我们可以随意更改,如果不希望压缩,可以改成100.
return 90;}
add_filter( 'jpeg_quality', 'ed_custom_jpeg_quality');
wow.js为网站增色
WordPress • Leo 发表了文章 • 2 个评论 • 2984 次浏览 • 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();
基于对隽永智库的积极贡献给予隽永东方 Leo 现金红包奖励
隽永风采 • East_Digi_Marketing 发表了文章 • 0 个评论 • 3705 次浏览 • 2018-11-01 10:07
推荐俩款辅助WPBakery Page Builder的免费插件
WordPress • Leo 发表了文章 • 2 个评论 • 3979 次浏览 • 2018-11-01 08:54
第二款插件:Unlimited Addons for WPBakery Page Builder 这个插件激活人数也有1W+
一些特殊页面需要客户能够更方便的操作,那么使用这种可视化编辑插件还是很Userbility的,而WPBakery Page Builder插件本身可能自带的一些功能不是很丰富,这时候我们就可以安装这些补丁插件了 查看全部
ftp上传文件,覆盖错项目了怎么办,首先不要急
WordPress • Leo 发表了文章 • 1 个评论 • 3427 次浏览 • 2018-10-26 13:50
那么如果是客户的正式站呢,这个首先你要想自己有没有给这个站点做过本地的备份,如果本地没有备份,你也不要急,可以看看cpanel这种控制平台有没有设置过备份、阿里云有没有设置过镜像,如果连这种备份都没做,那就完了。
如果仅仅是覆盖了样式表,那么你还能从cloudflare上面入手(这时候就更加明显的体现了加载第三方cdn的好处),切记不要手滑清了缓存,如果连缓存都清除了,那就真的玩完。
当然这不是鼓励大家串项目了。
我们做任何事情都要仔细。经验之谈,都是我犯过的事
总而言之:备份很重要,cloudflare也很有效
另外和我们文件服务器做好同步,需要你本地打开drive这个软件,然后创建和我们文件服务器的连接,选择你想同步的项目,本地选择一个目录作为cloudstation目录,里面就是放文件服务器同步的项目,你做任何修改都会同步到文件服务器,这是所有测试站点都要做的。(我发现新同事还是没有这个习惯) 查看全部
那么如果是客户的正式站呢,这个首先你要想自己有没有给这个站点做过本地的备份,如果本地没有备份,你也不要急,可以看看cpanel这种控制平台有没有设置过备份、阿里云有没有设置过镜像,如果连这种备份都没做,那就完了。
如果仅仅是覆盖了样式表,那么你还能从cloudflare上面入手(这时候就更加明显的体现了加载第三方cdn的好处),切记不要手滑清了缓存,如果连缓存都清除了,那就真的玩完。
当然这不是鼓励大家串项目了。
我们做任何事情都要仔细。经验之谈,都是我犯过的事
总而言之:备份很重要,cloudflare也很有效
另外和我们文件服务器做好同步,需要你本地打开drive这个软件,然后创建和我们文件服务器的连接,选择你想同步的项目,本地选择一个目录作为cloudstation目录,里面就是放文件服务器同步的项目,你做任何修改都会同步到文件服务器,这是所有测试站点都要做的。(我发现新同事还是没有这个习惯)
Microsoft Edge 浏览器转 ie浏览器
其他 • Leo 发表了文章 • 1 个评论 • 4263 次浏览 • 2018-10-25 15:04
初步seo优化小结
WordPress • chad 发表了文章 • 3 个评论 • 3877 次浏览 • 2018-10-24 11:50
一.最重要的一点莫过于图片的压缩。
图片压缩基本分三步走: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
查看全部
一.最重要的一点莫过于图片的压缩。
图片压缩基本分三步走: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
关于前面文章提到的slide revolution插件的responsive设置的最新发现
WordPress • Leo 发表了文章 • 1 个评论 • 3466 次浏览 • 2018-10-23 14:53
一些插件的设置细节需要记录下来,这些平时很少用到的设置,不记录下来,下次又是要花时间去找
建站的经验分享-新同事减少弯路*
WordPress • Leo 发表了文章 • 3 个评论 • 3547 次浏览 • 2018-10-23 14:29
我这边是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。但其实吧,这个模板也是在心里的,做任何事情,你要有个大致的构想,就像写文章一样,你开头写什么、中间写什么,结尾写什么,心里要有点数,这样作文才能拿个基础分。建站也是一个道理,不能写到自己都乱了。(开始做这个的时候我也乱,可以说非常乱了,但第二个项目我就会有个大致的构想,当然了中间少不了各位老同事的帮助,那会问问题的次数,我是第二,没人第一了。)
另外关于内容的调用,我们文件服务器上面有同事上传的很多很多的代码,都是能拿来用的,不会用,大家可以一起讨论。
一时间能想到的也不多,后续会持续更新...... 查看全部
我这边是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。但其实吧,这个模板也是在心里的,做任何事情,你要有个大致的构想,就像写文章一样,你开头写什么、中间写什么,结尾写什么,心里要有点数,这样作文才能拿个基础分。建站也是一个道理,不能写到自己都乱了。(开始做这个的时候我也乱,可以说非常乱了,但第二个项目我就会有个大致的构想,当然了中间少不了各位老同事的帮助,那会问问题的次数,我是第二,没人第一了。)
另外关于内容的调用,我们文件服务器上面有同事上传的很多很多的代码,都是能拿来用的,不会用,大家可以一起讨论。
一时间能想到的也不多,后续会持续更新......