作者：Frank She

一些积累

WordPress 多语言包处理方法

文章作者由Frank She
发布日期 2020-10-24

中文版产品转换支持多语言处理方案：

Php里用 _e(), __()等方法且中文写描述文字相关；js用到的文案用wp_localize_script() 方法统一在php设定对应变量；
对应__e,__()里的中文补充英文译文；
运行gulp的gulp-wp-pot模块，将php里所有_e(), __()等写法的字段抽离生成 .pot文件；
用Poedit将.pot文件生成.po文件，并翻译完整中文语言包文件(xx_ZH_CN.po)；
记事本打开xx_ZH_CN.po 手动将（msgid字段）混合中文的源句子里的中文去掉；同时php里同样将_e(), __()里的中文去掉只保留英文；
将处理好的.po文件编译.mo文件；
再次执行步骤3，生成最终的.pot文件；

如果一开始就是用纯英文写的页面，可用如下方案：

保证Php里用 _e(), __()等方法用纯英文写描述文字相关；js用到的文案用wp_localize_script() 方法统一在php设定对应变量；
运行gulp的gulp-wp-pot模块，将php里所有_e(), __()等写法的字段抽离生成 .pot文件；
用Poedit将.pot文件生成.po文件，并翻译完整中文语言包文件(xx_ZH_CN.po)；
将处理好的.po文件编译.mo文件；

* 其他语言也是基于.pot文件来生成po文件及mo文件

标签 __(), _e(), .mo, .po, .pot, Poedit, wordpress js多语言, wp_localize_script()

一些积累

暗黑模式实现方式

文章作者由Frank She
发布日期 2020-09-11

通过sass(scss)结合css变量简易实现暗黑显示模式：

Sass引入为包含css变量的参数, 如
body{ font-color: $bfc; }

参数：$bfc: var(—wbBfc, #666)；
通过js在外层，如body toggle class “wb-dm”, 来控制暗黑与正常模式的切换；
那么暗黑下的css变量改变数值即：
.dm{
–wbBfc: #ccc;
…
}

实践例子参考https://eyes.demo.wbolt.com/

标签暗黑模式

技术研究

WBUI 说明文档

文章作者由Frank She
发布日期 2019-08-28

基于LayerUI Mobile V2改造。

参数

即核心接口：wbui.open(options) 中的options：

type – 设置弹层的类型
类型：Number
默认：0 （0表示信息框(Dialog)，1表示消息提示(Toast)，2表示加载层(Loading)）

content – 设置弹层内容
类型：String
必选参数

title – 设置弹层标题
类型：String或Array
默认：空，值可以为字符串或者数组。，为空则不显示

title: ‘标题’
//或者
title: [‘标题’, ‘class-name’] //第二个参数是自定义标题样式对应的类名

time – 控制自动关闭层所需秒数
类型：Number
默认不开启，支持整数和浮点数，对于Toast初始值设定为2秒

style – 自定义层的样式
类型：String
用法如
wbui.open({ style: 'border:none; background-color:#78BA32; color:#fff;', content:'内容' })

运行

skin – 设定弹层显示风格
类型：String
msg（普通提示）, 建议用快捷方式wbui.toast()

className – 自定义一个css类
类型：String

用于自定义样式。如
wbui.open({
className: ‘popuo-login’, //这样你就可以在css里面控制该弹层的风格了
content:’内容’
})

btn – 按钮
类型：String/Array
不设置则不显示按钮。如果只需要一个按钮，则btn: ‘按钮’，如果有两个，则：btn: [‘按钮一’, ‘按钮二’]。
点击即关闭弹窗。

anim – 动画类型
类型：String/Boolean
可支持的支持动画配置：scale（默认）、up（从下往上弹出），如果不开启动画，设置false即可

mask – 控制遮罩展现
类型：String/Boolean
默认：true，该参数可允许你是否显示遮罩，并且定义遮罩风格

mask: false //不显示遮罩
或者
mask: ‘background-color: rgba(0,0,0,.3)’ //自定义遮罩的透明度

maskClose
类型：Boolean
默认：true，是否点击遮罩时关闭层

fixed – 是否固定层的位置
类型：Boolean
默认：true

top – 控制层的纵坐标
类型：Number
默认：无，一般情况下不需要设置，因为层会始终垂直水平居中，只有当fixed: false时top才有效。

success – 层成功弹出层的回调
类型：Function
该回调参数返回一个参数为当前层元素对象
success: function(elem){
console.log(elem);
}

yes
类型：Function
点确定按钮触发的回调函数，返回一个参数为当前层的索引

yes: function(index){
alert(‘点击了是’)
}

no
类型：Function
点取消按钮触发的回调函数

end
类型：Function
层彻底销毁后的回调函数

其它内置方法/属性

wbui.v
返回当前使用的wbui mobile版本号

wbui.close(index)
用于关闭特定层，index为该特定层的索引

wbui.closeAll()
关闭页面所有wbui的层

常用快捷调用

wbui.alert() 快捷弹窗提示
wbui.alert('弹窗内容');

//加关闭时回调
wbui.alert(‘弹窗内容’,function(index){
//回调输出
});

//其他特别配置方式
wbui.alert(‘弹窗内容’,{
btn:’ok‘，
mask:0,
…
});

wbui.confirm() 对话框

//确认时回调
wbui.confirm(‘弹窗内容’,function(index){
//确认回调
},function(index){
//取消回调
});

//其他特别配置方式
wbui.confirm(‘弹窗内容’,{
btn:[‘确认‘,’取消’],
yes:function(index){ //确认回调 }
no:function(index){ //取消回调 }
…
});

wbui.toast()消息弹窗
wbui.toast('弹出消息内容');

//设定其他参数，例如关闭时间
wbui.toast(‘弹出消息内容’,{
time:5
});

wbui.loading()调用方式
var wbloading = wbui.loading(); wbui.close(wbloading); //注销

WordPress笔记

wordpress 如何为js加async或defer

文章作者由Frank She
发布日期 2019-06-13

WordPress 4.1版本开始引入了一个新的filter，最终提供了一种简单的方法来添加异步/延迟属性。
apply_filters('script_loader_tag', string $tag, string $handle, string $src);

具体用法：
function add_async_attribute($tag, $handle) { if ( 'my-js-handle' !== $handle ) return $tag; return str_replace( ' src', ' async="async" src', $tag ); }

add_filter('script_loader_tag', 'add_async_attribute', 10, 2);

同理若需设置defer, 将async=”async”改成defer=”defer”即可。

标签 async, defer, wordpress加async/defer

WordPress笔记

wpautop() 控制文章内容是否自动换行

文章作者由Frank She
发布日期 2019-05-28

WordPress默认方法输出内容时，会为编辑器内换行的内容自动加上<p>标签。

如果想去掉这个功能，可使用

remove_filter( 'the_content', 'wpautop' );

而有时，例如用了$post->post_content会使这个功能失效，若想还原，可这样写

$content = $post->post_content; $content = wpautop( $content );

同理可处理摘要the_excerpt()及评论内容comment_text().

标签 wpautop(), 自动换行

一些积累

position sticky 失效 – 有点另类的写法

文章作者由Frank She
发布日期 2019-03-22

一开始在sass这样写的，gulp给我过滤掉了-webkit-sticky… 然后Chromre有效，但Safari失效。
.sticky{ top:0; position: -webkit-sticky; position: sticky;

}

直接用position: -webkit-sticky; Safari好了，但Chrome失效了…

网上找了下，解决方法竟然是将前辍写法写最后（如下），所以说有点另类哇.
.sticky{ top:0; position: sticky; position: -webkit-sticky; }

另外，需要满足如下条件sticky才能生效：
使用条件：
1、父元素不能overflow:hidden或者overflow:auto；
2、必须指定top、bottom、left、right4个值之一，否则只会处于相对定位
3、父元素的高度不能低于sticky元素的高度
4、sticky元素仅在其父元素内生效

标签 position sticky, sticky兼容性, sticky失效

一些积累

不能正常显示svg的解决方案

文章作者由Frank She
发布日期 2019-02-27

原本用data:img/svg+xml;utf-8,<svg …. 这种写法，将svg作为css引入的背景图，既矢量，又能比base64更小，本来是不错的方案。但升级到最新Chrome (72.0.3626.109) 发觉竟不能正常显示了。

Google一翻，在Stackoverflow 找到了原因及解决方案：需要将<svg/> 转换为URL编码(URL encode)。也即原来的写法，
[cc lang=”css”]data:image/svg+xml;utf8,<svg width=”40″ height=”38″ xmlns=”http://www.w3.org/2000/svg”><g fill=”#C7D5FF” fill-rule=”evenodd”><path d=”M28.804 11.071h9.827a1.321 1.321 0 1 1 .001 2.642h-10.98L21.26 36.525a1.343 1.343 0 0 1-.125.3 1.319 1.319 0 0 1-1.158.668 1.345 1.345 0 0 1-1.159-.67 1.319 1.319 0 0 1-.133-.332L12.3 13.713H1.321a1.321 1.321 0 1 1 0-2.642h9.838L6.792 2.415a1.316 1.316 0 0 1 .6-1.773 1.337 1.337 0 0 1 1.784.591l4.268 8.46 5.351-8.488A1.335 1.335 0 0 1 20.682.7c.19.117.345.278.453.468l5.373 8.523 4.266-8.459a1.337 1.337 0 0 1 1.795-.59 1.316 1.316 0 0 1 .6 1.773l-4.365 8.656zm-8.829-6.756l-4.257 6.756h8.516l-4.259-6.756zm-4.908 9.398l4.91 17.524 4.91-17.524h-9.82z”/><path d=”M18.924 36.983L.269 13.2a1.312 1.312 0 0 1-.078-1.511L6.854 1.124A1.336 1.336 0 0 1 7.984.5h23.985c.458 0 .885.234 1.13.621l6.663 10.568c.296.47.265 1.075-.078 1.511L21.029 36.982a1.339 1.339 0 0 1-2.105.001zM2.945 12.309l17.032 21.71 17.032-21.71-5.778-9.164H8.722l-5.777 9.164z”/></g></svg>[/cc]

需要改成：
[cc lang=”css”]data:image/svg+xml;utf8,<svg%20width%3D”40″%20height%3D”38″%20xmlns%3D”http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg”><g%20fill%3D”%23C7D5FF”%20fill-rule%3D”evenodd”><path%20d%3D”M28.804%2011.071h9.827a1.321%201.321%200%201%201%20.001%202.642h-10.98L21.26%2036.525a1.343%201.343%200%200%201-.125.3%201.319%201.319%200%200%201-1.158.668%201.345%201.345%200%200%201-1.159-.67%201.319%201.319%200%200%201-.133-.332L12.3%2013.713H1.321a1.321%201.321%200%201%201%200-2.642h9.838L6.792%202.415a1.316%201.316%200%200%201%20.6-1.773%201.337%201.337%200%200%201%201.784.591l4.268%208.46%205.351-8.488A1.335%201.335%200%200%201%2020.682.7c.19.117.345.278.453.468l5.373%208.523%204.266-8.459a1.337%201.337%200%200%201%201.795-.59%201.316%201.316%200%200%201%20.6%201.773l-4.365%208.656zm-8.829-6.756l-4.257%206.756h8.516l-4.259-6.756zm-4.908%209.398l4.91%2017.524%204.91-17.524h-9.82z”%2F><path%20d%3D”M18.924%2036.983L.269%2013.2a1.312%201.312%200%200%201-.078-1.511L6.854%201.124A1.336%201.336%200%200%201%207.984.5h23.985c.458%200%20.885.234%201.13.621l6.663%2010.568c.296.47.265%201.075-.078%201.511L21.029%2036.982a1.339%201.339%200%200%201-2.105.001zM2.945%2012.309l17.032%2021.71%2017.032-21.71-5.778-9.164H8.722l-5.777%209.164z”%2F><%2Fg><%2Fsvg>[/cc]

进阶解决方案

国外小伙对于sass处理URL encode写了一个很赞的function, 完美。
[cc lang=”css”]
// Replace letters
@function str-replace($string, $search, $replace: ”) {
$index: str-index($string, $search);

@if $index {
@return str-slice($string, 1, $index – 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
}

@return $string;
}

// Encode symbols
@function url-encode($string) {
$map: (
“%”: “%25”,
“<": "%3C", ">“: “%3E”,
” “: “%20”,
“!”: “%21”,
“*”: “%2A”,
“‘”: “%27”,
‘”‘: “%22”,
“(“: “%28”,
“)”: “%29”,
“;”: “%3B”,
“:”: “%3A”,
“@”: “%40”,
“&”: “%26”,
“=”: “%3D”,
“+”: “%2B”,
“$”: “%24”,
“,”: “%2C”,
“/”: “%2F”,
“?”: “%3F”,
“#”: “%23”,
“[“: “%5B”,
“]”: “%5D”
);

$new: $string;

@each $search, $replace in $map {
$new: str-replace($new, $search, $replace);
}

@return $new;
}

// Format the SVG as a URL
@function inline-svg($string) {
@return url(‘data:image/svg+xml,#{url-encode($string)}’);

[/cc]
> github url

再进一步

据张鑫旭博文介绍，不用全部标点都转码，只需要将关键的几个转换即可正常显示，部分转码可使文件更小，故优化方案如下，实践可行。

[cc lang=”css”]
// Replace letters
@function str-replace($string, $search, $replace: ”) {
$index: str-index($string, $search);

@if $index {
@return str-slice($string, 1, $index – 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
}

@return $string;
}

// Encode symbols
@function url-encode($string) {
$map: (
“%”: “%25”,
“<": "%3C", ">“: “%3E”,
“!”: “%21”,
“*”: “%2A”,
“‘”: “%27”,
‘”‘: “%22”,
“#”: “%23”);

$new: $string;

@each $search, $replace in $map {
$new: str-replace($new, $search, $replace);
}

@return $new;
}

// Format the SVG as a URL
@function inline-svg($string) {
@return url(‘data:image/svg+xml,#{url-encode($string)}’);

[/cc]

标签 Chrome不能显示svg, data:image/svg, svg, svg+xml

Wordpress技术点收录

作者信息 wordpress函数the_author_meta()

文章作者由Frank She
发布日期 2019-01-29

用法：

1	<?php the_author_meta( $field, $userID ); ?>

参数说明：

1、$field(字符串)将要显示的用户信息的字段名称(这些在数据库中都可以找到)。以下是常用的：

user_login(用户登录名)

user_pass(用户登录密码)

user_nicename(用户昵称)

user_email(用户邮箱地址)

user_url(用户网站地址)

user_registered(用户注册时间)

user_status(用户状态)

display_name(作者显示的名称)

nickname(作者昵称)

first_name(作者名字)

last_name(作者姓氏)

description(作者描述)

user_level(用户等级)

user_firstname(用户名字)

user_lastname(用户姓氏)

user_description(用户描述)

2、ID(用户ID值)

实例：

<?php  echo the_author_meta( 'user_email' ); ?>
//获取作者的邮箱地址
<?php  echo the_author_meta( 'user_nicename' ); ?>
//获取作者的昵称

提醒：如果该函数在文章主循环(Loop)中，则不必指定作者的ID值，标签所显示的就是当前文章作者的内容。如果在主循环(Loop)外，则需要指定用户ID值。如果需要获取用户信息但是不想显示出来(比如用在php方法中)，请使用get_the_author_meta()方法。

标签 the_author_meta, 作者

一些积累技术收录

jQuery对SVG用class()方法失效的解决方案

文章作者由Frank She
发布日期 2019-01-20

JQuery (版本3.0以下) 不能直接用addClass()或removeClass()或toggleClass()来控制SVG。但.attr() 方法支持SVG的类名控制:

// 代替 .addClass("newclass")
$("#item").attr("class", "oldclass newclass");
// 代替.removeClass("newclass")
$("#item").attr("class", "oldclass");


或者你不想用jQuery，可尝试如下原生写法:

var element = document.getElementById("item");
// 代替 .addClass("newclass")
element.setAttribute("class", "oldclass newclass");
// 代替 .removeClass("newclass")
element.setAttribute("class", "oldclass");

标签 class() svg, jquery svg, svg