分类
技术研究

css实现纯文字扫光动效

纯css实现扫光动效,js辅助激活动效,非必要。
另用到伪元素是为实现阴影及渐变。效果及具体代码参考codepen

[codepen_embed height=”265″ theme_id=”0″ slug_hash=”EGJqLm” default_tab=”css,result” user=”sheshihui”]See the Pen 文字扫光动效 by Frank She (@sheshihui) on CodePen.[/codepen_embed]

分类
一些积累

纯CSS实现券的锯齿效果

如图示,这种卡券的锯齿效果,可用css radial-gradient 的 circle属性来实现。

[codepen_embed height=”265″ theme_id=”0″ slug_hash=”ZVZZQY” default_tab=”css,result” user=”sheshihui”]See the Pen coupon style by Frank She (@sheshihui) on CodePen.[/codepen_embed]

分类
一些积累

微信小程序笔记

参考url
https://www.cnblogs.com/pansidong/articles/7563155.html
https://www.jianshu.com/p/00724ab30c89
https://www.cnblogs.com/mhxy13867806343/p/6265159.html

  • 组件的样式只能定义在组件对应wxss
  • data:image/svg+xml;base64,{} 可通过这个方式引入svg图标,
  • 可在cssdata:image/svg+xml;utf-8,{svg code}引入svg图标
  • 作为组件,
    1. js须有Component构造器 参考 https://blog.csdn.net/u014490083/article/details/81026601,
    2. json
    里边有
    {
    “component”: true}
  • 关于跳转

页面跳转用 js用 navigateTo https://developers.weixin.qq.com/miniprogram/dev/api/wx.navigateTo.html?search-key=navigateTo

标签用 navigator https://developers.weixin.qq.com/miniprogram/dev/component/navigator.html

https://blog.csdn.net/sdlklyg/article/details/79246720

  • Swiper  nav, https://blog.csdn.net/li06359147/article/details/79184587
  • 页面传递参数到组件 http://www.cnblogs.com/wind-wang/p/10050380.html

    在组件设定 properties

    在父页面设定data-{}

  • 表单的placeholder需要用特别的类设定 placeholder-class=”input-placeholder”
  • 自定义导航栏 https://blog.csdn.net/qq_33744228/article/details/83656588
  • Swiper + Scroll-view 会触发一个莫名的最高层级的bug, 例如同级有个一浮动(fixed)的按钮,将会被遮挡,待缓动时间过后才能回复正常。动态给按钮加一个transtion, translate3d 可修正问题,参考运营小程序首页
  • 自带的button标签,会用:after定义有边框
  • 暫不支持css @supports 語法.. https://developers.weixin.qq.com/community/develop/doc/0006661cce0898698077eba9951000?highLine=css
  • 有关帧动画, 小程序不支持循环gif图(只播放一次),而css3 侦动画又不支持css直接读本地图片… 据闻(未验证)canvas可读本地图片,最终运营小程序用的是 cdn图片作为背景图。

 

工具

  1. 参考 https://www.jianshu.com/p/00724ab30c89 为webstorm设定代码高亮支持
分类
技术研究

Gulp Sprite实战

安装:

[cc]
npm install gulp.spritesmith –save-dev
[/cc]

设置:
[cc lang=”css”]
img: [‘src/img/**/*.*’,’!src/img/**/sprite/**/*.*’],
sprite_src:’src/img/’ + current_folder +’/sprite/**/*.*’,
sprite_img:’src/img/’ + current_folder + ‘/’,
sprite_scss:’src/sass/’ + current_folder + ‘/’
[/cc]

[cc lang=”js”]

gulp.task(‘sprite’,function() {
gulp.src(paths.src.sprite_src)
.pipe(spritesmith({
imgName: paths.src.sprite_img + ‘sprite.png’, //合并后大图的名称
cssName: paths.src.sprite_scss + ‘_sprite.scss’,
algorithm:’binary-tree’,
padding: 10,
cssTemplate: function (data) {

// data为对象,保存合成前小图和合成打大图的信息包括小图在大图之中的信息
var arr = [],
width = data.spritesheet.px.width,
height = data.spritesheet.px.height,
// url = data.spritesheet.image;
url = ‘#{$imgurl}sprite.png’;

data.sprites.forEach(function (sprite) {
var rs = 2;//相同元素设计稿与scss具体数值的比例,如750px设计稿,写scss以1x来写,即此参数设定为2, 同理sketch 本身是1x设计图,则rs = 1;
var className = sprite.name.indexOf(“%”) != -1 ? sprite.name : “.” + sprite.name; //以%开头的文件名,作为@extend供引用

arr.push(
className +
“{” + “\n” +
“display:inline-block;” + “\n” +
“background: url(‘” + url + “‘) ” +
“no-repeat (” +
sprite.px.offset_x + ” / ” + rs + “)” + ” (” + sprite.px.offset_y + ” / ” + rs + “)” + “;” + “\n” +
“background-size: (” + width + ” / ” + rs + “)” + ” (” + height + ” / ” + rs + “)” + “;” + “\n” +
“width: (” + sprite.px.width + ” / ” + rs + “)” + “;” + “\n” +
“height: (” + sprite.px.height + ” / ” + rs + “)” + “;” + “\n” +
“}\n”
)
});
// return “@fs:108rem;\n”+arr.join(“”)
return arr.join(“”)
}
}))
.pipe(gulp.dest(”));
});

[/cc]

1. 同时执行sprite和img,有可能最终dest得到一张半截的图,是因为sprite在生成过程中,img已将半截图给更新到了dest; 暂时将sprite (如用命令:gulp sprite)单独执行。
2. 图片命名即生成类名;
3. 图片名若包含有%,例如%filename,则生成的scss会是以%filename作为类名,供sass @extend方法引用。

分类
一些积累

svg图标处理的在线工具推荐

svg图标处理时,个人会习惯使用如下工具,且都是在线的(正常点的,或者说正版前端应该会用gulp之类吧?)

https://jakearchibald.github.io/svgomg/
爱死这个在线工具了,你可以直接将sketch或ps里边的svg代码,直接复制粘贴到站点,然后就可以生成一个干净的svg文件,且多选项可按需配置。当然你也可以直接将下载好的svg拉到这个在线站点来优化。

https://icomoon.io/app/
早期是用www.iconfont.com管理iconfont的,但…谁用谁知道,反正我很多年没使用了,不知后面是否已优化。而当前推荐的这个站点,管理iconfont棒棒的,当然管理svg也是同样很赞。

 

分类
一些积累

小程序sass转wxss

wxss其实基本就是css, 而已习惯用sass写样式的我们,再一行一行,原始地敲css,是件很奇特的事。就像明知道可以发微信,但还要在邮局发电报一样…故要写小程序,环境必不可少的是将sass转为wxss。

思路

  1. 先生成正常的css, 再将css转为wxss格式
  2. 将px转为rpx

实现

  1. 可用gulp rename工具来将css直接重命名为wxss
    var rename = require('gulp-rename')
    ...pipe(rename(function (path) {
        path.extname = ".wxss";
    }))
  2. 可用gulp-px2rpx实现px单位自动转为rpx
    var px2rpx = require('gulp-px2rpx');
    ...pipe(px2rpx({
        screenWidth: 750, // 设计稿屏幕, 默认750
        wxappScreenWidth: 750, // 微信小程序屏幕, 默认750
        remPrecision: 6 // 小数精度, 默认6
    }))

Done, 就是这么简单…

分类
技术收录

腾讯干货!超实用的高清图标SVG解决方案全总结

随着硬件快速的发展,Retina技术发展至今,目前Google Nexus6的devicePixelRatio已经到了3.5,虽然目前主流的Retina显示器还是以devicePixelRatio = 2的为主,但是为了更好的用户体验,前端和视觉同学经常都要为了各种图标能够在Retina屏幕下高清显示而头痛。下面先介绍下目前的一些常规的解决方案。

1. 多倍图片

目前用的比较多的做法是兼容devicePixelRatio = 2 就做实际图片大小的两倍,devicePixelRatio= 3就做三倍,有些人可能会直接做3倍的图片,这样就可以同时兼容devicePixelRatio = 2 ,但是这样其实对于devicePixelRatio = 1和devicePixelRatio = 2的用户他们就会浪费带宽去加载devicePixelRatio = 3的图片,所以为了提升用户体验,一般我们会分开做几套图片,根据用用户的devicePixelRatio判断让他们加载对应的图片。

2. iconfont字体图标

在很多国外的响应式站点里一般会采用iconfont,因为可以直接通过font-size和color属性来控制icon的大小和颜色,非常方便,而且由于iconfont本身就是字体文件,会矢量适配各种不同devicePixelRatio,但是在PC上当图标小于等于16px时,或者复杂度高的图标会出现比较严重锯齿,图标无法展示清晰,特别在chrome下的表现尤为严重。正因为如此这个技术在推进过程中遇到许多困难,因为在很多场景下图标确实会较小甚至小于16px,而且有些16px的图标如果复杂度较高,iconfont实现出来的icon会经常出现看不清的情况,而且国内PC用户是占最多的,所以iconfont的这种表现效果很多用户和设计师无法接受。

为什么iconfont会出现锯齿?

这个问题其实并不是iconfont的错,但很多人都觉得是它的问题,关于锯齿问题,我们先来了解下浏览器的字体渲染机制:

(从左到右依次)理想的渲染状态、黑白渲染、灰度渲染、次像素渲染

上图左侧第一张是我们认为一种比较理想的渲染效果,但是通过刚才我们介绍栅格我们可以了解到这种状态是不可能的,因为第一代黑白渲染和第二代灰度渲染是不可能做到显示半格像素或一个像素中显示弧度的。

黑白渲染和灰度渲染在渲染图形遇到半格像素或则弧度的时候,他们会有各自不同的处理方式;

举个例子:

如上图红点处像素,我们理解他是有弧度的,且不占满一个像素;各个渲染方式的处理办法如下:

黑白渲染

黑白渲染相对来说比较粗暴,直接通过四舍五入的形式把这里要描绘的图形不显示了;(黑白渲染的形式主要应用于打印机渲染,但是打印机本身的精度非常高,所以打印出来的图形还是很细腻的)

灰度渲染

灰度渲染显得就智能一些了,他通过灰度降级的方式来表达,如果占不到一个像素那就根据他占的面积来降低这个像素的灰度;占的面积越小灰度就越低;

次像素渲染

次像素渲染是第三代渲染方式,相对来说比较高级,他从从左至右将一个像素分成三份;用不同的色彩值来显示图形,这样图形看起来就更加细腻;

现代浏览器字体渲染技术

目前mac系统采用的就是次像素渲染技术,但是现代的window下的高级浏览器例如:IE9+ 、chrome、FF等浏览器采用的是 DirectWrite 或 GDI 这种更高级的字体渲染技术,这里我简单介绍下这两种新的字体渲染技术:

上图从左至右分别用的是:灰度渲染、次像素渲染和 DirectWrite 或 GDI 实现的效果,在FF官方博客中有一篇文章对这两个新的渲染技术做了简单的一个解释,他们两个都是采用的LCD的像素红色、绿色、蓝色来进行像素填充,右侧的文字被放大后我们看到了字体栅格被不同色块填充,其实人眼对于亮度差异非常的敏感,当这些颜色用在像素级别里面我们的眼睛往往认为字形比单纯灰度消除锯齿的效果更好。

在Windows下的Firefox 4中采用的就是GDI这个技术进行字体渲染的,但是到了Firefox 4+之后的版本开始使用了DirectWrite这个技术,官方解释是说DirectWrite支持硬件加速,而且API也更加现代,而GDI API存在许多缺陷和问题。

关于DirectWrite和GDI他们之前的差异这里不作太多描述,在文章最后有相关文章链接,有兴趣的同学可以查看下。上面讲了字体渲染的历史,我们现在来看看目前Windows系统下的浏览器各自都是采用的都是什么字体渲染机制:

Chrome目前依旧是使用DirectWrite,而FF和IE9+已经是采用GDI 了,这就是为什么iconfont在Chrome下锯齿会比其他浏览器严重的原因,可能GDI确实像FF官方说的存在许多缺陷,不知为何Chrome至今还在使用这个技术。

上面说了这么多关于字体渲染机制原理,在这里能得出一个结论: 不管目前使用什么字体渲染技术,字体显示效果始终是会出现锯齿的。在Retina屏幕上,一个像素被拆成了4个像素,由于它的密度非常高,肉眼根本是看不出锯齿的,所以现在MAC系统下的FF和Chrome都还是用的次像素渲染这项技术。既然iconfont他是一个字体,就难逃出现锯齿的命运,特别在Chrome下就是更加的糟糕了,目前确实通过前端代码也是无法改变这个缺陷。

iconfont由于这个严重的锯齿缺陷导致一些大型的站点很多时候并不会考虑大规模使用它,例如QQ空间,腾讯云这些站点早期也都尝试过iconfont方案,但最后都放弃了,为了能给用户更好的感官体验。像淘宝虽然目前有许多地方都用了iconfont但也只是局部使用,并非全站使用。

SVG技术

什么是SVG? SVG可缩放矢量图形(Scalable Vector Graphics)是基于可扩展标记语言(XML),用于描述二维矢量图形的一种图形格式。SVG是W3C制定的一种新的二维矢量图形格式,也是规范中的网络矢量图形标准。SVG严格遵从XML语法,并用文本格式的描述性语言来描述图像内容,因此是一种和图像分辨率无关的矢量图形格式。简单的说他就是一个可伸缩矢量图形 (Scalable Vector Graphics),在浏览器中采用绘图技术。

接下来我们来看看使用iconfont和使用SVG做出来的图标有什么差异:

Chrome下效果:

FF下效果

IE9下效果

上面的demo分别在不同浏览器下的效果,第一行用的是iconfont实现,下面三行都是用的SVG实现的图标,只是调用SVG时的方法不同:第一行是用inline SVG,将SVG直接写在html中来使用,第二行是用的img标签去调用SVG,第三行用样式的background来调用SVG文件。从Chrome和FF下的显示效果,我们看到SVG画的ICON的质量确实是比iconfont要好,iconfont做的图标,我截图后放大后看到线的边缘发虚了,这是因为字体渲染的原因导致,在FF下也是发虚,只是不那么明显。在IE9+下的效果上我们看到IE对SVG的支持性着实差的令人无法直视,IE10,IE11效果和IE9几乎一样(真的是坑爹)。

如何绘制高质量ICON

在上面的demo中眼尖的同学应该可以看出在FF下,inline SVG图标有一个出问题了,然而Chrome却是正常的:

但左边那个图标却是正常的,相当不科学,如果是渲染问题理应左边的也发虚才对,但是却只有右边的出问题了,定位了很久问题出在哪里,最后发现是画AI文件时出问题了,AI本身不像PS那样,有网格辅助视觉画图,所以iconfont.cn出了一个AI模板,其实这套模板就是给AI画了一套辅助线,帮助设计师按照栅格画ICON,我前面的案例就是用的他们提供的模板画的图标,第一个没问题,但是第二个出问题了。他们这套AI模板实际导出后的画布大小是1002p*1002px,后分成1616个格子,也就是每个格子实际分得62.625px*62.625px,其实在很多时候貌似不会出问题的,但是我的demo中却出问题了,于是猜测:

  • 是否是绘制图标出问题了,没有按照某种规范画法?
  • 是否是因为他的网格不能被整除导致的?

1、由于绘制这个锁型的图标时我们留下了一个单数列,会不会因为这样导致了他出现锯齿,如果是,那问题就来了,如果一定要左右对称或者每次画图都要铺满所有格子,这种做法不太现实,因为很多图标是不一定都全部能铺满16*16的格子。

2、发现iconfont这套模板的网格有些问题,画布网格竟然有1px像素是留空的,也是说16格子其实是1001/16=62.5625px,虽说画布是1002px,不知道这是否是人工失误。

决心和视觉自己做一套AI模板,AI模板也是1616的网格,但是每个网格将他们的实际导出像素设置成1px,也就是整个画布是16px16px,这样的就不怕不会被整除了。然后用新AI模板重新做了三个图标,进行测试,左右上下对称的做了一个,不能左右对称的做了一个,左右上下不能对称的也做了一份。然后导出效果查看:

按照这套模板做了图标后,FF下面三个图标都是完美的,没有出现虚边,并且Chrome也同样是完好的,这是我们希望看的的。也证实了上面的两个问题猜测是正确的。所以这套AI模板是完全可以满足不同场景图标绘制。

小结:

本文介绍了字体渲染机制,并分析iconfont出现锯齿的底层原因,再到如何绘制高质量SVG ICON的步骤和输出了一套严谨的AI绘制图标模板。

明天将介绍如何在项目中应用SVG图标,并兼容IE6+ 、Chrome 、 FF 、Retina Safari 、 Retina Chrome等浏览器的方案。

AI模板下载链接:http://pan.baidu.com/s/1bnc9eqj

 

下篇

在上一篇文章中,我们讲述了字体渲染机制和导致iconfont出现锯齿的原因,以及如何才能出绘制高质量SVG ICON,并且提供了一套AI模版供大家参考使用。下文将讲诉前端侧我们如何用SVG来做成高清IOCN,并且良好支持PC下的各个浏览器,并兼容IE6+以上的浏览器。

从上一篇文章中我们得知SVG 做的图标在IE9+的浏览器渲染效果相当的差,所以在IE下我们我们不使用SVG ICON,我们可以将SVG转成一倍的png图片来进行替代。首先来简单的普及一下SVG ICON的几个使用方法:

第一种Inline SVG

这种方法就是直接把SVG标签写入到HTML中去,直接通过修改fill和stroke属性来控制填充颜色和边框颜色,但是缺点就是维护性不好,如果一个页面Icon特别多,可能要写好几十个SVG在页面,复用性差,后期扩展性也不佳。

1
2
3
 <svg  width="74" height="74" viewBox="0 0 74 74">
    <path fill="#444444" d="M25.42 27.737v-11.555c0-6.382 5.174-11.555 11.555-11.555s11.555 5.174 11.555 11.555v11.555h4.622v-11.555c0-8.935-7.243-16.178-16.178-16.178s-16.178 7.243-16.178 16.178v11.555h4.622z"></path>
</svg>

第二种img/object 标签

这种方法直接将SVG ICON保存成一个一个单独文件,通过img或object标签引用,他的缺点就是请求数增加,每个图标都去独自加载,对服务器负载和页面高速加载不好。

1
<img src="svg/16-16.svg" alt="test icon" />

第三种background and Data URIs

在上一篇文章中我有一种调用方法就是采用background去调用SVG文件:

1
2
3
.icon {
  backgound-image: url(test.svg)
}

还有如果单独使用background引用SVG也会和第一种方案一样造成请求数增加,所以有不少人通过使用base64 编码来减少HTTP请求:

1
2
3
.icon{ 
  background: url(data:text/svg+xml;base64,)
}

不过不太建议使用base64 编码,无论性能和维护方面都不是特别好,记得看过一个测试base64性能的文章,base64在移动端渲染时间比正常使用url的渲染时间要慢6倍。

第四种SVG Sprites

目前市面上有很多提供ICON FONT制作的网站,例如:icomoon不止开源,而且功能实在强大,可以提供输出SVG Sprites的功能,SVG Sprites它的使用方法其实就跟Png sprites是一样的,把多个SVG ICON合并到一个SVG文件里面去,然后通过background-position进行定位,这种方法可以解决请求数增多的问题。

1
2
3
4
5
6
7
8
.icon {
    width: 16px;
    height: 16px;
    display: inline-block;
    background-repeat: no-repeat;
    background-image: url(sprite.svg);
     background-position: 0 0;
}

当然如果你不喜欢用icomoon也可以用自动化工具生成SVG Sprite例如用:gulp-svgstoregrunt-iconizrgulp-svg-sprites

第五种SVG Defs/Symbols

这种其实就是在SVG Sprites上面更进一步的使用了,SVG Sprites是需要我们去通过坐标获取对应位置图标的,但是SVG Defs/Symbols就更简单了,直接通过给每个SVG ICON定义ID,直接调用对应ID即可:

1
2
3
4
5
6
7
8
<svg xmlns="http://www.w3.org/2000/svg">
    <symbol id="icon1" viewBox="0 0 32 32">
        <path fill="#444444" d="M3 3h1v12h-1v-12z"></path>
    </symbol>
    <symbol id="icon2" viewBox="0 0 32 32">
        <path fill="#444444" d="M3 14h10v1h-10v-1z"></path>
    </symbol>
</svg>

将上面代码保存为SVG文件后,在HTML我们通过下面的方式可以直接调用:

1
2
3
4
5
6
<svg>
    <use xlink:href="/svg/symbol.svg#icon1"></use>
</svg>
<svg>
    <use xlink:href="/svg/symbol.svg#icon2"></use>
</svg>

新的方案:Svg Sprites +Png Sprites + Image-set

由于我们知道SVG在IE下的兼容性并不好,所以在高清ICON的适配在第四种方案的基础上进行优化,首先用icomoon进行下面的步骤操作:

第一步将用AI模板做好的图标转换成SVG文件后导入到icomoon中:

第二步:

第三步,设置导出文件前的类名,图标间距,颜色等等一系列参数,然后下载压缩包:

第四步,只获取我们所需要的文件夹的内容:

第五步,对icomoon生成的样式sprite.css进行微调整让其适配所有PC浏览器和Retina下的浏览器:

最后的效果:

CSS4 Image-set

这里应该有人会觉得也可以使用Media Queries来进行判断处理在Retinal来加载SVG Sprites,但其实Image-set它和Media Queries有些许,它不需要告诉浏览器使用什么图像,而是直接提供了图像让浏览器自己去选择加载合适的图片。兼容性方面在Safari6.1开始和Chrome21就开始支持这个属性了。

总结

SVG目前还是存在许多问题,Windows下使用IE的兼容性和渲染效果都太差,在PC侧我们无法全量使用,所以我们可以用上面的这套解决方案解决PC下所有浏览器下兼容问题,在Retina下,不管是device =2还是3都可以兼容,不管未来是否会有更高的devicePixelRatio出来,按照上面的方法都能完美兼容,并且在对应不同的devicePixelRatio下浏览器会自动选择加载SVG或者PNG,不会两张都同时加载。

上一篇文章之所以在火狐图标出问题那块讲了许久,并抛出更严谨的图标制作方法的主要原因这个方案需要对合并后的SVG Sprites转成PNG Sprite图片,如果SVG ICON做的有问题,那生成的图片也然出现发虚的情况,大家看我最后那个效果图下,PC下所有浏览下,中间那个锁的图标虽然是用的生成的图片但是依旧是发虚的和火狐下当时出问题的效果是一样。

AI模板下载链接:http://pan.baidu.com/s/1i3zxAXB

原文地址:腾讯ISUX

分类
一些积累

gulp配置小tips合集

如何使用Gulp.js将流保存到多个目录


gulp.task('script', function() {
return gulp.src(jsFilesSrc)
// lint command
// uglify and minify commands
.pipe(concat('all.min.js'))
.pipe(gulp.dest('build/js')) //
.pipe(gulp.dest('../../target/build/js'))

也即用两次dest

分类
WordPress笔记

自定义主题初始小工具(widge)等方法:add_theme_support()

How to use it

Themes define a subset of core-provided starter content using add_theme_support() – let’s look at a breakdown of how Twenty Seventeen does things. In its setup function hooked to after_setup_theme, we see an array with collections of widgets, posts (pages), attachments, options, theme mods, and nav menus registered as the starter content. The customizer looks for this starter-content at after_setup_theme priority 100, so do make this call at that point or later:

add_theme_support( 'starter-content', array( /*...*/ ) )

Widgets

Each widget area ID corresponds to one sidebar registered by the theme, with the contents of each widget area array being a list of widget “symbols” that reference core-registered widget configurations. Most default widgets are available (archivescalendarcategoriesmetarecent-commentsrecent-posts, and search), as well as text widgets with business hours (text_business_info) and a short prompt for an “about this site” style blurb (text_about). Themes should place widgets based on what works best in that area – for instance, business info in a footer widget of a business-centric theme, or a nicely styled calendar widget in the sidebar of a blog.

Custom widgets can also be registered at the time of starter content registration or later filtered in, which will be more likely the case for plugins, as add_theme_support() for starter content will be overridden by any later calls.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// Custom registration example
add_theme_support( 'starter-content', array(
    'widgets' => array(
        'sidebar-1' => array(
            'meta_custom' => array( 'meta', array(
                'title' => 'Pre-hydrated meta widget.',
            ) ),
        ),
    ),
);
// Plugin widget added using filters
function myprefix_starter_content_add_widget( $content, $config ) {
    if ( isset( $content['widgets']['sidebar-1'] ) ) {
        $content['widgets']['sidebar-1']['a_custom_widget'] = array(
            'my_custom_widget', array(
                'title' => 'A Special Plugin Widget',
            ),
        );
    }
    return $content;
}
add_filter( 'get_theme_starter_content', 'myprefix_starter_content_add_widget', 10, 2 );
分类
WordPress笔记

widget – 注册到主题的特定区域

WordPress的Widget小工具是个非常实用的功能,它让非技术型WordPress用户也可以根据自己对版面的需求轻松定制主题,WordPress无数的widgets让用户得以尽情发挥自己的创意。 在很多人的意识里,widget就是出现在侧边栏的小工具,不过实际上它可以出现在主题的任何地方。 这篇文章我们就来看一下怎样用简单的步骤让主题的其它版块也支持widget。 最后还会送上几个widget使用技巧。

第一步

在当前主题的functions.php文件里添加下面这段代码:

if (function_exists('register_sidebar')) {

	register_sidebar(array(
		'name' => 'Widgetized Area',
		'id'   => 'widgetized-area',
		'description'   => 'This is a widgetized area.',
		'before_widget' => '<div id="%1$s" class="widget %2$s">',
		'after_widget'  => '</div>',
		'before_title'  => '<h4>',
		'after_title'   => '</h4>'
	));

}

第一步就是这么简单。 代码添加完毕后就可以继续下一步了。下面是对第一步过程的解释,没兴趣的可以跳过。

上面的代码用以确保当前使用的WordPress版本支持widget,并声明一个用来创建主题widget区域的值的数组。 下面我们来看看这些值:

  • Name——将要显示在WP 管理界面的新widget区域的名称
  • Id——新widget区域的唯一标识符
  • Description——对新widget区域的说明
  • Before_widget——用户添加widget小工具前生成的批注
  • after_widget——用户添加widget小工具后生成的批注
  • Before_title——添加widget小工具的用户名前的批注
  • After_title——添加widget小工具的用户名后的批注

有了这些参数,我们的新widget区域最后会得到以下输出(假设我们在新的widget区域添加的是一个内置搜索工具):

<div id="search-3" class="widget widget_search">
	<h4>Search</h4>
	<form role="search" method="get" id="searchform" action="http://localhost/283/" >
		<div>
			<label class="screen-reader-text" for="s">Search for:</label>
			<input type="text" value="" name="s" id="s" />
			<input type="submit" id="searchsubmit" value="Search" />
		</div>
	</form>
</div>

需要注意的是为开始<div>标签生成的批注(markup),该批注根据widget数组指定的通配符匹配获取相关的属性信息。

下面继续第二步骤。

第二步

你希望新的widget区域显示在主题的什么位置,就在相应的主题模板文件中添加以下代码:

<div id="widgetized-area">

	<?php if (function_exists('dynamic_sidebar') && dynamic_sidebar('widgetized-area')) : else : ?>

	<div class="pre-widget">
		<p><strong>Widgetized Area</strong></p>
		<p>This panel is active and ready for you to add some widgets via the WP Admin</p>
	</div>

	<?php endif; ?>

</div>

当这一步骤也完成后,你所选择的位置上就会出现一个新的支持widget的版块,你可以在这个版块添加任何一个自己需要的widget工具。 接下来就能用相同的方法让主题的其它位置也支持widget工具了。

下面是对第二步骤的解释。 如果你没有指定widget,那么If/endif语句之间的内容会被输出到浏览器。 通过这种形式,用户能了解到,自己可以在WordPress后台的“小工具”菜单中对内容输出的位置进行widget定制。 代码里还有一个“pre-widget”类可以设置pre-widget版块的样式。 当一个页面上出现多个widget区域时,可以用一个类名称来保持widget样式统一。

同时也要注意我们要将widget数组(见第一步)中指定的id作为代码第二行dynamic_sidebar() 的参数值。

多个新widget区域

重复第一步和第二步,你就可以让主题的各个位置支持widget了。下面假设你需要在主题的头部、侧边栏、和底部添加widget。 那么首先你需要把下面的代码复制到functions.php文件里:

if (function_exists('register_sidebar')) {

	register_sidebar(array(
		'name' => 'Header',
		'id'   => 'header',
		'description'   => 'This is the widgetized header.',
		'before_widget' => '<div id="%1$s" class="widget %2$s">',
		'after_widget'  => '</div>',
		'before_title'  => '<h4>',
		'after_title'   => '</h4>'
	));
	register_sidebar(array(
		'name' => 'Sidebar',
		'id'   => 'sidebar',
		'description'   => 'This is the widgetized sidebar.',
		'before_widget' => '<div id="%1$s" class="widget %2$s">',
		'after_widget'  => '</div>',
		'before_title'  => '<h4>',
		'after_title'   => '</h4>'
	));
	register_sidebar(array(
		'name' => 'Footer',
		'id'   => 'footer',
		'description'   => 'This is the widgetized footer.',
		'before_widget' => '<div id="%1$s" class="widget %2$s">',
		'after_widget'  => '</div>',
		'before_title'  => '<h4>',
		'after_title'   => '</h4>'
	));

}

接下来把下面的代码分别添加到header.php、sidebar.php和footer.php文件中。

header.php:

<div id="widgetized-header">

	<?php if (function_exists('dynamic_sidebar') && dynamic_sidebar('header')) : else : ?>

	<div class="pre-widget">
		<p><strong>Widgetized Header</strong></p>
		<p>This panel is active and ready for you to add some widgets via the WP Admin</p>
	</div>

	<?php endif; ?>

</div>

sidebar.php:

<div id="widgetized-sidebar">

	<?php if (function_exists('dynamic_sidebar') && dynamic_sidebar('sidebar')) : else : ?>

	<div class="pre-widget">
		<p><strong>Widgetized Sidebar</strong></p>
		<p>This panel is active and ready for you to add some widgets via the WP Admin</p>
	</div>

	<?php endif; ?>

</div>

footer.php:

<div id="widgetized-footer">

	<?php if (function_exists('dynamic_sidebar') && dynamic_sidebar('footer')) : else : ?>

	<div class="pre-widget">
		<p><strong>Widgetized Footer</strong></p>
		<p>This panel is active and ready for you to add some widgets via the WP Admin</p>
	</div>

	<?php endif; ?>

</div>

成功! 当然你也可以根据自己的需要调整代码中的各种细节,但是以上两步就是使主题其它版块支持widget的全部过程。 接下来要说的是一些widget的技巧。

Widget使用技巧

管理自定义的widget小工具

给主题添加新的widget后,你可以新建一个独立文件夹并命名为widgets.php,将所有自定义的widget都保存到这个文件夹。 用下面的这行代码实现保存自定义widget功能:

if ($wp_version >= 2.8) require_once(TEMPLATEPATH.’/widgets.php’);

将代码添加到functions.php文件里,然后将所有自定义的widget工具保存到widgets.php中。这种方法可以确保所有widget都能够顺利加载并且运行在WordPress支持widget的所有版本上。 如此,你的主题文件就能够得到有效管理。

替换WordPress默认widget

WordPress的很多默认小工具都有需要改进的地方。 但值得庆幸的是,在WordPress里你可以自由替换这些默认小工具。 例如,下面这段代码就可以将内置搜索工具换成你自己需要的widget工具。

<?php function custom_search_widget() { ?>

<form action="http://localhost/283/index.php" method="get">
	<div>
		<label for="s">Site Search</label>
		<input id="s" name="s" alt="Search" type="text" />
	</div>
</form>

<?php } if (function_exists('register_sidebar_widget'))

register_sidebar_widget(__('Search'), 'custom_search_widget'); ?>

隐藏不用的widget区域

如果你通过上面的方法让主题的某个位置支持了widget,但暂时没有在这个位置上安排合适的小工具,那么这个位置就会空出来,从整个版面看上去会很奇怪。 为了避免这种情况,请用下面的代码围绕暂时不用的widget区域:

<?php if (function_exists('is_sidebar_active') && is_sidebar_active('sidebar')) { ?

<!-- 第二步骤中的代码(或自定义内容) -->

<?php } ?>

有了上面这段代码,支持widget的版块只会在确实包含已启用小工具的情况下才显示在前台。 。 同时需要注意,这段代码也支持显示widget外的其它内容。

原文:How to Widgetize Your WordPress Theme in 2 Steps

转自:http://www.wordpress.la/widgetize-wordpress-theme.html