微信小程序“支付签名验证失败”问题的解决参考

官方文档如下:
微信小程序支付官方文档

验证失败的原因

  1. 官方文档少列出一个字段变量:appId;
  2. 字段变量名大小写错误;
  3. nonce_str:随机字符串取值错误;

排除以上问题后基本,就可以正常使用了。

“idea已连接上ftp但看不到文件”的解决办法

  1. 菜单“Tools”→“Deployment”→“Configuration”,打开“ftp配置信息”界面;
    “Tools”菜单
  2. 确认ftp用户名、密码等信息无误后;
    “ftp配置信息”界面
  3. 点击ftp配置界面的“Advanced options”按钮,打开“Advanced Options”面板;
    “Advanced Options”面板
  4. 勾选“Passive mode(被动模式)”,确定后即可看到ftp服务器的中文件了。

h5移动端ios输入法软键盘导致fixed布局bug的解决方案

移动端业务开发,iOS 下经常会有 fixed 元素和输入框(input 元素)同时存在的情况。 但是 fixed 元素在有软键盘唤起的情况下,会出现许多莫名其妙的问题。 这篇文章里就提供一个简单的有输入框情况下的 fixed 布局方案。


iOS下的 Fixed + Input BUG现象

让我们先举个栗子,最直观的说明一下这个 BUG 的现象。 常规的 fixed 布局,可能使用如下布局(以下仅示意代码):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<body class="layout-fixed">
<!-- fixed定位的头部 -->
<header>

</header>

<!-- 可以滚动的区域 -->
<main>
<!-- 内容在这里... -->
</main>

<!-- fixed定位的底部 -->
<footer>
<input type="text" placeholder="Footer..."/>
<button class="submit">提交</button>
</footer>
</body>

对应的样式如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
header, footer, main {
display: block;
}

header {
position: fixed;
height: 50px;
left: 0;
right: 0;
top: 0;
}

footer {
position: fixed;
height: 34px;
left: 0;
right: 0;
bottom: 0;
}

main {
margin-top: 50px;
margin-bottom: 34px;
height: 2000px
}

然后看起来就是下面这个样子。拖动页面时 header 和 footer 已经定位在了对应的位置,目测没问题了。
fixed定位
但接下来问题就来了!如果底部输入框软键盘被唤起以后,再次滑动页面,就会看到如下图所示:
fixed定位 fixed定位

我们看到 fixed 定位好的元素跟随页面滚动了起来… fixed 属性失效了!

这是为什么呢?简单解释下: > 软键盘唤起后,页面的 fixed 元素将失效(即无法浮动,也可以理解为变成了 absolute 定位),所以当页面超过一屏且滚动时,失效的 fixed 元素就会跟随滚动了。

这便是 iOS 上 fixed 元素和输入框的 bug 。其中不仅限于 type=text 的输入框,凡是软键盘(比如时间日期选择、select 选择等等)被唤起,都会遇到同样地问题。


虽然 isScroll.js 可以很好的解决 fixed 定位滚动的问题,但是不在万不得已的情况下,我们尽量尝试一下不依赖第三方库的布局方案,以简化实现方式。这里抛砖引玉作为参考。

解决思路:

既然在 iOS 下由于软键盘唤出后,页面 fixed 元素会失效,导致跟随页面一起滚动,那么 假如——页面不会过长出现滚动,那么即便 fixed 元素失效,也无法跟随页面滚动,也就不会出现上面的问题了

那么按照这个思路,如果使 fixed 元素的父级不出现滚动,而将原 body 滚动的区域域移到 main 内部,而 header 和 footer 的样式不变,代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<body class="layout-scroll-fixed">
<!-- fixed定位的头部 -->
<header>

</header>

<!-- 可以滚动的区域 -->
<main>
<div class="content">
<!-- 内容在这里... -->
</div>
</main>

<!-- fixed定位的底部 -->
<footer>
<input type="text" placeholder="Footer..."/>
<button class="submit">提交</button>
</footer>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
header, footer, main {
display: block;
}

header {
position: fixed;
height: 50px;
left: 0;
right: 0;
top: 0;
}

footer {
position: fixed;
height: 34px;
left: 0;
right: 0;
bottom: 0;
}

main {
/* main绝对定位,进行内部滚动 */
position: absolute;
top: 50px;
bottom: 34px;
/* 使之可以滚动 */
overflow-y: scroll;
}

main .content {
height: 2000px;
}

这样再来看一下:

fixed定位

在原始输入法下, fixed 元素可以定位在页面的正确位置。滚动页面时,由于滚动的是 main 内部的 div,因此 footer 没有跟随页面滚动。

上面貌似解决了问题,但是如果在手机上实际测试一下,会发现 main 元素内的滚动非常不流畅,滑动的手指松开后,滚动立刻停止,失去了原本的流畅滚动特性。百度一下弹性滚动的问题,发现在 webkit 中,下面的属性可以恢复弹性滚动。

-webkit-overflow-scrolling: touch;

在 main 元素上加上该属性,嗯,丝般顺滑的感觉又回来了!

1
2
3
4
5
6
7
8
9
10
main {
/* main绝对定位,进行内部滚动 */
position: absolute;
top: 50px;
bottom: 34px;
/* 使之可以滚动 */
overflow-y: scroll;
/* 增加该属性,可以增加弹性 */
-webkit-overflow-scrolling: touch;
}

另外,这里的 header 和 footer 使用的是 fixed 定位,如果考虑到更老一些的 iOS 系统不支持 fixed 元素,完全可以把 fixed 替换成 absolute 。测试后效果是一样的。

至此一个不依赖第三方库的 fixed 布局就完成了。


Android 下布局

谈到了 iOS ,也来简单说一下 Android 下的布局吧。

在 Android2.3+ 中,因为不支持 overflow-scrolling ,因此部分浏览器内滚动会有不流畅的卡顿。但是目前发现在 body 上的滚动还是很流畅的,因此使用第一种在 iOS 出现问题的 fixed 定位的布局就可以了。

如果需要考虑 Android2.3 以下系统,因为不支持 fixed 元素,所以依然要需要考虑使用 isScroll.js 来实现内部滚动。

其实在 fixed 和输入框的问题上,基本思路就是: > 由于 fixed 在软键盘唤起后会失效,导致在页面可以滚动时,会跟随页面一起滚动。因此如果页面无法滚动,那么 fixed 元素即使失效,也不会滚动,也就不会出现 bug 了。

所以可以在这个方面去考虑解决问题。


其他的一些细节处理

在细节处理上,其实还有很多要注意的,挑几个实际遇到比较大的问题来说一下:

  1. 有时候输入框 focus 以后,会出现软键盘遮挡输入框的情况,这时候可以尝试 input 元素的 scrollIntoView 进行修复。
  2. 在 iOS 下使用第三方输入法时,输入法在唤起经常会盖住输入框,只有在输入了一条文字后,输入框才会浮出。目前也不知道有什么好的办法能让唤起输入框时正确显示。这暂时算是 iOS 下的一个坑吧。
  3. 有些第三方浏览器底部的工具栏是浮在页面之上的,因此底部 fixed 定位会被工具栏遮挡。解决办法也比较简单粗暴——适配不同的浏览器,调整 fixed 元素距离底部的距离。
  4. 最好将 header 和 footer 元素的 touchmove 事件禁止,以防止滚动在上面触发了部分浏览器全屏模式切换,而导致顶部地址栏和底部工具栏遮挡住 header 和 footer 元素。
  5. 在页面滚动到上下边缘的时候,如果继续拖拽会将整个 View 一起拖拽走,导致页面的“露底”。
    fixed定位

为了防止页面露底,可以在页面拖拽到边缘的时候,通过判断拖拽方向以及是否为边缘来阻止 touchmove 事件,防止页面继续拖拽。

以上面内滚动 layout-scroll-fixed 布局为例,给出一段代码作为参考:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
// 防止内容区域滚到底后引起页面整体的滚动
var content = document.querySelector('main');
var startY;

content.addEventListener('touchstart', function (e) {
startY = e.touches[0].clientY;
});

content.addEventListener('touchmove', function (e) {
// 高位表示向上滚动
// 底位表示向下滚动
// 1容许 0禁止
var status = '11';
var ele = this;

var currentY = e.touches[0].clientY;

if (ele.scrollTop === 0) {
// 如果内容小于容器则同时禁止上下滚动
status = ele.offsetHeight >= ele.scrollHeight ? '00' : '01';
} else if (ele.scrollTop + ele.offsetHeight >= ele.scrollHeight) {
// 已经滚到底部了只能向上滚动
status = '10';
}

if (status != '11') {
// 判断当前的滚动方向
var direction = currentY - startY > 0 ? '10' : '01';
// 操作方向和当前允许状态求与运算,运算结果为0,就说明不允许该方向滚动,则禁止默认事件,阻止滚动
if (!(parseInt(status, 2) & parseInt(direction, 2))) {
stopEvent(e);
}
}
});

转载自: http://efe.baidu.com/blog/mobile-fixed-layout/

生命不息,折腾不止之“hexo”

前言

“hexo”,一个快速、简洁且高效的博客框架。支持markdown,另外还有好多插件可用。看了几个博主的空间之后,我便觉定要试一试了。

经过几天的折腾<在此心疼我的百度收录一下下…>,还想说:“网友们不好意思啦,又有好多文章链接要变成404了,哦no,原谅我吧”。

开工第一步

前提工作就不多说了,安装 Node.jsGit

准备工作

使用淘宝镜像“cnpm”命令

npm install -g cnpm –registry= https://registry.npm.taobao.org

或者你直接通过添加 npm 参数 alias 一个新命令:

alias cnpm=”npm –registry= https://registry.npm.taobao.org \
–cache=$HOME/.npm/.cache/cnpm \
–disturl= https://npm.taobao.org/dist \
–userconfig=$HOME/.cnpmrc”

Or alias it in .bashrc or .zshrc

echo ‘\n#alias for cnpm\nalias cnpm=”npm –registry= https://registry.npm.taobao.org \
–cache=$HOME/.npm/.cache/cnpm \
–disturl= https://npm.taobao.org/dist \
–userconfig=$HOME/.cnpmrc”‘ >> ~/.zshrc && source ~/.zshrc

安装hexo

1
2
3
4
5
npm install hexo-cli -g
hexo init blog
cd blog
npm install
hexo server

主题选择

这里我选择了“ next”主题,简洁大方符合我的审美观点<。。。>。

这里也要赞一下这个“next”主题,可配置项非常多,能满足日常的使用需求,功能还是相当赞的。

推荐插件

  1. hexo-abbrlink

    这个生成固定链接的插件,用起来效果还是不错的,推荐使用。

  2. hexo-adminhexo-hey

    这两个插件功能是一样的,都是为hexo博客提供个后台管理界面,可根据个人喜好使用。

  3. hexo-wordcount

    字数统计,也是一个必备插件,不多说咯。

bug处理

  1. hexo命令无效

    这个真的有点坑,就只移除了下“hexo-admin”模块,在用hexo命令就提示无效了,哦哦。

    $ hexo s
    ERROR Local hexo not found in D:\works\bmqy\bmqy.github.com
    ERROR Try running: ‘npm install hexo –save’

    解决方法如下:

    1. 删除“node_modules”文件夹;
    2. 执行如下命令:

      npm install

    3. 或者

      cnpm install

总结

呵呵,凑点字数吧。

希望以后的云服务器、虚拟主机可以支持nodejs,这个用的感觉还是相当不错的,唯一的遗憾就是,手机端发博文是个短板,希望以后有方法改进。

此文完结,期待更新~~~

ECharts中tooltips自定义数据结构与样式

直接上代码:
1、css样式代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
.myEchartsTooltips{
width: 180px;
padding: 0 !important;
opacity: 0.8;
border-radius: 5px !important;
font-size: 12px !important;
color: #666 !important;
box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
}
.myEchartsTooltips .echartsTooltipsWarp-head{
padding: 5px 10px;
background-color: #eee;
border-bottom: 1px solid #e6e6e6;
overflow: hidden;
}
.myEchartsTooltips .echartsTooltipsWarp-body{
padding: 0 10px;
background-color: #fff;
overflow: hidden;
}
.myEchartsTooltips .echartsTooltipsWarp-body p{
overflow: hidden;
line-height: 30px;
}

2、js代码( 主要是通过对dom的控制,实现数据结构与样式的自定义

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
tooltip: {
trigger: 'axis',
position: function (pos, params, dom, rect, size) {
console.log(params);
var sHtml = '';
var _tempHtml = '';
for(var i=0;i<params.length;i++){
var sName = params[i].name<10 ? '0' + params[i].name : params[i].name;
var iVal = params[i].value==0 ? '--' : params[i].value;
var sSeriesName = params[i].seriesName;

_tempHtml += '<p><span class="pull-left">'+ sSeriesName +'</span><span class="pull-right">'+ iVal +'</span></p>'
}
sHtml = '<div class="echartsTooltipsWarp-head"><span class="pull-left">'+ sName +':00 - '+ sName +':59 ' +'</span><span class="pull-right">'+ option.title.text +'</span></div><div class="echartsTooltipsWarp-body">'+ _tempHtml +'</div>';
$(dom).addClass('myEchartsTooltips').html(sHtml);// 通过对dom的控制,实现数据结构与样式的自定义
}
},

为子主题增加主题选项功能

用子主题的好处都知道:可以在使用的主题更新后,对其的更改不会被更新覆盖掉,

但是如果能为子主题增加主题选项,是不是会使子主题的使用效果更好呢,下面介绍步骤(以下仅为部分代码,后面有完整代码):

1、在子主题的“function.php”中增加以下代码,使外观菜单中增加“子主题选项”菜单,点击可进入对应标签页,各参数作用请看注释:

1
2
// 在后台外观导航下增加子主题设置标签页:[1]设置页的title、[2]显示在外观菜单中的标题、[3]访问这个页面需要的权限、[4]别名(出现在地址栏中:?page=XXXXXXXXX)、[5]执行的函数(设置页面包含的内容)
add_theme_page("子主题设置", "子主题设置", "administrator", "bmqy_subTheme_opts", 'display');

效果截图:

子主题设置菜单

2、为“子主题设置”的标签页编写需要进行主题选项的html代码,举例“广告位设置”代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
/* -- 子主题设置页标签面 -- */
function display() {
add_thickbox();
?>
<div class="wrap">
<h1>子主题设置项</h1>
<!-- 顶部推荐设置 -->
<form method="post" action="" name="bmqy_subTheme_topRecommend" id="bmqy_subTheme_topRecommend">
<?php
$bstTopRecommendOptions = get_option('bmqy_subTheme_topRecommend');
?>
<h2>广告位设置</h2>
<table class="form-table">
<tr>
<th scope="row"><label for="topRecommendStatus">顶部广告推荐位</label></th>
<td><fieldset><legend class="screen-reader-text"><span>顶部广告推荐位</span></legend><label for="topRecommendStatus"><input name="status" type="checkbox" id="topRecommendStatus" value="1" <?php checked('1', $bstTopRecommendOptions['status']); ?> />&nbsp;启用</label></fieldset></td>
</tr>
<tr>
<th scope="row"><label for="topRecommendTitle">顶部广告推荐位标题</label></th>
<td><input name="title" type="text" id="topRecommendTitle" value="<?php echo $bstTopRecommendOptions['title']; ?>" class="regular-text ltr" /></td>
</tr>
<tr>
<th scope="row"><label for="topRecommendLink">顶部广告推荐位链接</label></th>
<td><input name="link" type="text" id="topRecommendLink" value="<?php echo $bstTopRecommendOptions['link']; ?>" class="regular-text ltr" /></td>
</tr>
<tr>
<th scope="row"><label for="topRecommendImage">顶部广告推荐位图片</label></th>
<td><input name="image" type="text" id="topRecommendImage" aria-describedby="topRecommendImage_description" value="<?php echo $bstTopRecommendOptions['image']; ?>" class="regular-text ltr" />&nbsp;<a class="thickbox" title="插入图片" href="#">插入图片</a><p class="description" id="topRecommendImage_description">请填写图片链接地址,推荐尺寸:1198*80</p></td>
</tr>
</table>
<?php submit_button('保存', 'primary', 'submit_bmqy_subTheme_topRecommend'); ?>
</form>
</div>
<?php
// 调用处理插入图片的方法
send_to_editor();
}

效果截图:

子主题设置项

3、增加提交数据并保存到数据库的代码:

1
2
3
4
5
6
7
8
9
10
// 如果有提交数据,接收并保存到数据库
if(isset($_POST['submit_bmqy_subTheme_topRecommend'])) {
// 接收并处理数据:顶部推荐广告位
$bstTopRecommendOptions['status'] = ($_POST['status']==1) ? (bool)true : (bool)false;
$bstTopRecommendOptions['title'] = $_POST['title'];
$bstTopRecommendOptions['link'] = $_POST['link'];
$bstTopRecommendOptions['image'] = $_POST['image'];
// 更新数据
update_option('bmqy_subTheme_topRecommend', $bstTopRecommendOptions);
}

4、增加插入图片功能的处理代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
/* -- 接收并处理上传的图片信息 -- */
function send_to_editor(){
?>
<script>
jQuery(document).ready(function() {
var win = window.dialogArguments || opener || parent || top;
var sendToEditorTarget;

jQuery('.thickbox').click(function() {
sendToEditorTarget = jQuery(this).prev('input[name=image]');
tb_show('请选择图片', '/wp-admin/media-upload.php?type=image&amp;TB_iframe=true');
return false;
});
win.send_to_editor = function(html) {
imgurl = jQuery('img',html).attr('src');
jQuery(sendToEditorTarget).val(imgurl);
tb_remove();
}
});
</script>
<?php
}

5、前台调用时的代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
<?php
// 获取顶部推荐配置项
$bstTopRecommendOptions = get_option('bmqy_subTheme_topRecommend');
if ( $bstTopRecommendOptions['status'] == 1) {
?>
<!-- 顶部推荐内容 begin -->
<div id="topRecommend" class="top-recommend">
<a href="<?php echo $bstTopRecommendOptions['link']; ?>" title="<?php echo $bstTopRecommendOptions['title']; ?>">
<img src="<?php echo $bstTopRecommendOptions['image']; ?>" alt="<?php echo $bstTopRecommendOptions['title']; ?>">
</a>
</div>
<!-- 顶部推荐内容 end -->
<?php } ?>

6、本站点结合“露兜博客 http://www.ludou.org/wordpress-add-theme-options.html”和“阿树工作室http://www.ashuwp.com/courses/optionpage/206.html”两位博主分享的教程编写代码如下,再次感谢两位博主的分享!感谢!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
/** 子主题增加设置项 begin **/
class BmqySubThemeOptions {
/* -- 初始化 -- */
function init() {
// 如果有提交数据,接收并保存到数据库
if(isset($_POST['submit_bmqy_subTheme_topRecommend'])) {
// 接收并处理数据:顶部推荐广告位
$bstTopRecommendOptions['status'] = ($_POST['status']==1) ? (bool)true : (bool)false;
$bstTopRecommendOptions['title'] = $_POST['title'];
$bstTopRecommendOptions['link'] = $_POST['link'];
$bstTopRecommendOptions['image'] = $_POST['image'];
// 更新数据
update_option('bmqy_subTheme_topRecommend', $bstTopRecommendOptions);
}
if(isset($_POST['submit_bmqy_subTheme_copyright'])) {
// 接收并处理数据:版权信息
$bstCopyrightOptions['status'] = ($_POST['status']==1) ? (bool)true : (bool)false;
$bstCopyrightOptions['content_tpl'] = esc_html($_POST['content_tpl']); // 转义提交的html
$bstCopyrightOptions['inCateList'] = $_POST['inCateList'];
// 更新数据
update_option('bmqy_subTheme_copyright', $bstCopyrightOptions);
}
if(isset($_POST['submit_bmqy_subTheme_taobaoShops'])) {
// 接收并处理数据:淘宝店铺
$bstTaobaoShopsOptions['status'] = ($_POST['status']==1) ? (bool)true : (bool)false;
$bstTaobaoShopsOptions['title'] = $_POST['title'];
$bstTaobaoShopsOptions['image'] = $_POST['image'];
$bstTaobaoShopsOptions['desc'] = esc_html($_POST['desc']); // 转义提交的html
$bstTaobaoShopsOptions['inCateList'] = $_POST['inCateList'];
// 更新数据
update_option('bmqy_subTheme_taobaoShops', $bstTaobaoShopsOptions);
}

// 在后台外观导航下增加子主题设置标签页:[1]设置页的title、[2]显示在外观菜单中的标题、[3]访问这个页面需要的权限、[4]别名(出现在地址栏中:?page=XXXXXXXXX)、[5]执行的函数(设置页面包含的内容)
add_theme_page("子主题设置", "子主题设置", "administrator", "bmqy_subTheme_opts", array('BmqySubThemeOptions', 'display'));
}
/* -- 接收并处理上传的图片信息 -- */
function send_to_editor(){
?>
<script>
jQuery(document).ready(function() {
var win = window.dialogArguments || opener || parent || top;
var sendToEditorTarget;

jQuery('.thickbox').click(function() {
sendToEditorTarget = jQuery(this).prev('input[name=image]');
tb_show('请选择图片', '/wp-admin/media-upload.php?type=image&amp;TB_iframe=true');
return false;
});
win.send_to_editor = function(html) {
imgurl = jQuery('img',html).attr('src');
jQuery(sendToEditorTarget).val(imgurl);
tb_remove();
}
});
</script>
<?php
}
/* -- 子主题设置页标签面 -- */
function display() {
add_thickbox();
?>
<div class="wrap">
<h1>子主题设置项</h1>
<div class="catlist">
<h2>网站分类ID</h2>
<p><?php echo bmqy_show_category(); ?></p>
</div>

<hr>
<!-- 顶部推荐设置 -->
<form method="post" action="" name="bmqy_subTheme_topRecommend" id="bmqy_subTheme_topRecommend">
<?php
$bstTopRecommendOptions = get_option('bmqy_subTheme_topRecommend');
?>
<h2>广告位设置</h2>
<table class="form-table">
<tr>
<th scope="row"><label for="topRecommendStatus">顶部广告推荐位</label></th>
<td><fieldset><legend class="screen-reader-text"><span>顶部广告推荐位</span></legend><label for="topRecommendStatus"><input name="status" type="checkbox" id="topRecommendStatus" value="1" <?php checked('1', $bstTopRecommendOptions['status']); ?> />&nbsp;启用</label></fieldset></td>
</tr>
<tr>
<th scope="row"><label for="topRecommendTitle">顶部广告推荐位标题</label></th>
<td><input name="title" type="text" id="topRecommendTitle" value="<?php echo $bstTopRecommendOptions['title']; ?>" class="regular-text ltr" /></td>
</tr>
<tr>
<th scope="row"><label for="topRecommendLink">顶部广告推荐位链接</label></th>
<td><input name="link" type="text" id="topRecommendLink" value="<?php echo $bstTopRecommendOptions['link']; ?>" class="regular-text ltr" /></td>
</tr>
<tr>
<th scope="row"><label for="topRecommendImage">顶部广告推荐位图片</label></th>
<td><input name="image" type="text" id="topRecommendImage" aria-describedby="topRecommendImage_description" value="<?php echo $bstTopRecommendOptions['image']; ?>" class="regular-text ltr" />&nbsp;<a class="thickbox" title="插入图片" href="#">插入图片</a><p class="description" id="topRecommendImage_description">请填写图片链接地址,推荐尺寸:1198*80</p></td>
</tr>
</table>
<?php submit_button('保存', 'primary', 'submit_bmqy_subTheme_topRecommend'); ?>
</form>

<hr>
<!-- 文章尾部版权信息设置 -->
<form method="post" action="" name="bmqy_subTheme_copyright" id="bmqy_subTheme_copyright">
<?php
$bstCopyrightOptions = get_option('bmqy_subTheme_copyright');
// 默认设置
if(!is_array($bstCopyrightOptions)){
$bstCopyrightOptions['status'] = true;
$bstCopyrightOptions['content_tpl'] = esc_html('注:原创文章,转载请注明出自 <a href="" title="">⟪⟫</a> ,Thank you!');
$bstCopyrightOptions['inCateList'] = '12,15,22,45,52,154';
}
?>
<h2>文章尾部版权信息设置</h2>
<table class="form-table">
<tr>
<th scope="row"><label for="copyrightStatus">版全信息</label></th>
<td><fieldset><legend class="screen-reader-text"><span>版全信息</span></legend><label for="copyrightStatus"><input name="status" type="checkbox" id="copyrightStatus" value="1" <?php checked('1', $bstCopyrightOptions['status']); ?> />&nbsp;启用</label></fieldset></td>
</tr>
<tr>
<th scope="row"><label for="copyrightContentTpl">版全信息模板</label></th>
<td><input name="content_tpl" type="text" id="copyrightContentTpl" aria-describedby="copyrightContentTpl_description" value="<?php echo stripslashes($bstCopyrightOptions['content_tpl']); ?>" class="regular-text ltr" /><p class="description" id="copyrightContentTpl_description">版权信息模板:为文章标题、为文章链接</p></td>
</tr>
<tr>
<th scope="row"><label for="copyrightInCateList">启用的文章分类ID</label></th>
<td><input name="inCateList" type="text" id="copyrightInCateList" aria-describedby="copyrightInCateList_description" value="<?php echo $bstCopyrightOptions['inCateList']; ?>" class="regular-text ltr" /><p class="description" id="copyrightInCateList_description">设置哪些分类的文章下显示,多个ID以英文逗号分隔</p></td>
</tr>
</table>
<?php submit_button('保存', 'primary', 'submit_bmqy_subTheme_copyright'); ?>
</form>

<hr>
<!-- 文章尾部淘宝店铺设置 -->
<form method="post" action="" name="bmqy_subTheme_taobaoShops" id="bmqy_subTheme_taobaoShops">
<?php
$bstTaobaoShopsOptions = get_option('bmqy_subTheme_taobaoShops');
// 默认设置
if(!is_array($bstTaobaoShopsOptions)){
$bstTaobaoShopsOptions['status'] = true;
$bstTaobaoShopsOptions['title'] = '北门清燕淘宝小店';
$bstTaobaoShopsOptions['image'] = 'http://gqrcode.alicdn.com/img?type=cs&shop_id=117869181&seller_id=279690537&w=140&h=140&el=q&v=1';
$bstTaobaoShopsOptions['desc'] = '<h5>北门清燕仿站服务</h5>
<p>扫一扫,去淘宝小店下单吧</p><p>我的淘宝小店,优惠活动进行中,欢迎来店洽谈咨询哦!</p>
<p><a rel="nofollow" href="http://shop117869181.taobao.com/" title="北门清燕淘宝小店">立即进店</a>,或者在这里留言给我。</p>';
$bstTaobaoShopsOptions['inCateList'] = '248';
}
?>
<h2>文章尾部淘宝店铺设置</h2>
<table class="form-table">
<tr>
<th scope="row"><label for="taobaoShopsStatus">淘宝店铺</label></th>
<td><fieldset><legend class="screen-reader-text"><span>淘宝店铺</span></legend><label for="taobaoShopsStatus"><input name="status" type="checkbox" id="taobaoShopsStatus" value="1" <?php checked('1', $bstTaobaoShopsOptions['status']); ?> />&nbsp;启用</label></fieldset></td>
</tr>
<tr>
<th scope="row"><label for="taobaoShopsTitle">淘宝店铺标题</label></th>
<td><input name="title" type="text" id="taobaoShopsTitle" value="<?php echo $bstTaobaoShopsOptions['title']; ?>" class="regular-text ltr" /></td>
</tr>
<tr>
<th scope="row"><label for="taobaoShopsImage">淘宝店铺图片</label></th>
<td><input name="image" type="text" id="taobaoShopsImage" aria-describedby="image_description" value="<?php echo $bstTaobaoShopsOptions['image']; ?>" class="regular-text ltr" />&nbsp;<a class="thickbox" title="插入图片" href="/wp-admin/media-upload.php?type=image&amp;TB_iframe=true">插入图片</a><p class="description" id="taobaoShopsImage_description">请填写淘宝店铺二维码图片地址,推荐尺寸:140*140</p></td>
</tr>
<tr>
<th scope="row"><label for="taobaoShopsDesc">淘宝店铺描述</label></th>
<td><textarea name="desc" id="taobaoShopsDesc" aria-describedby="taobaoShopsDesc_description" rows="10" cols="50" class="regular-text code"><?php echo stripslashes($bstTaobaoShopsOptions['desc']); ?></textarea><p class="description" id="taobaoShopsDesc_description">可填加html标签,最终以显示 3 行为宜</p></td>
</tr>
<tr>
<th scope="row"><label for="taobaoShopsInCateList">启用的文章分类ID</label></th>
<td><input name="inCateList" type="text" id="taobaoShopsInCateList" aria-describedby="taobaoShopsInCateList_description" value="<?php echo $bstTaobaoShopsOptions['inCateList']; ?>" class="regular-text ltr" /><p class="description" id="taobaoShopsInCateList_description">设置哪些分类的文章下显示,多个ID以英文逗号分隔</p></td>
</tr>
</table>
<?php submit_button('保存', 'primary', 'submit_bmqy_subTheme_taobaoShops'); ?>
</form>
</div>
<?php
// 调用处理插入图片的方法
BmqySubThemeOptions::send_to_editor();
}
}
// 注册并初始化方法
add_action('admin_menu', array('BmqySubThemeOptions', 'init'));
/** 子主题增加设置项 end **/

整体效果截图:

子主题设置项

7、参考以上设置,相信您能让您的子主题功能更加强大o( ≧▽≦)ツ,最后再次感谢所有分享代码的朋友们,感谢o(≧▽≦)ツ

wordpress添加twentysixteen子主题

1、自定义标签云显示:

将以下代码粘贴到对应子主题的“function.php”中,代码亦可参考原主题“function.php”文件中代码。

对应属性作用可百度找到

1
2
3
4
5
6
7
8
9
10
/*&nbsp;自定义标签云&nbsp;*/
function&nbsp;bmqy_widget_tag_cloud_args(&nbsp;$args&nbsp;)&nbsp;{
&nbsp;&nbsp;&nbsp;&nbsp;$args[&#39;largest&#39;]&nbsp;=&nbsp;1;
&nbsp;&nbsp;&nbsp;&nbsp;$args[&#39;smallest&#39;]&nbsp;=&nbsp;1;
&nbsp;&nbsp;&nbsp;&nbsp;$args[&#39;unit&#39;]&nbsp;=&nbsp;&#39;em&#39;;
&nbsp;&nbsp;&nbsp;&nbsp;$args[&#39;orderby&#39;]&nbsp;=&nbsp;&#39;id&#39;;
&nbsp;&nbsp;&nbsp;&nbsp;$args[&#39;order&#39;]&nbsp;=&nbsp;&#39;RAND&#39;;
&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;$args;
}
add_filter(&nbsp;&#39;widget_tag_cloud_args&#39;,&nbsp;&#39;bmqy_widget_tag_cloud_args&#39;&nbsp;);

PS:如有其它需要,本篇可能会不定期更新

idea配置less自动编译

idea配置less自动编译:

1、电脑安装node.js环境;

2、打开“idea”→“settings”→“plugins”安装:“nodejs”插件,并按以下步骤进行配置:

QQ截图20161201180843.png

    1)打开“idea”→“settings”→“Languages & Frameworks”→“Node.js and NPM”;

    2)在打开的面板中点击右侧“+”加号按钮添加需要的“less”组件(如果此处不能添加,请使用npm命令进行全局安装)。

QQ截图20161201181901.png

3、打开“idea”→“settings”→“plugins”安装:“file watchers”插件,并按以下步骤进行设置:

QQ截图20161201180935.png

    1)打开“idea”→“settings”→“tools”→“file watchers”;

    2)在打开的面板中点击右侧加号按钮添加less配置,貌似插件自动就配置好了,如无配置,请参考《 webstorm10配置less编译环境 》。

3、安装 LESS CSS Compiler 插件,安装完成后无需进行任何配置;

4、以上步骤成功后,编辑less文件即可自动编译成css文件。

使用chrome浏览器调试移动端web页面

貌似史上最详尽的一篇教程,步步详细、步步带图,啥也不说开始往下看吧

以下所说软件都指android版

1、电脑中安装chrome浏览器,最新版就好了;

2、手机中安装chrome浏览器,总之安装最新版就好了;

3、将手机用usb线连接至电脑;

3、打开电脑中chrome浏览器,F12键开启开发者工具;

4、开发者工具中依次点开“最右更多菜单”→“More tools”→“Remote devices”,看图:

QQ截图20161125145630.png

5、打开后开发者工具下面会看到“Remote devices”面板,并且可以看到已连接的手机设备,看图:

QQ截图20161125145921.png

6、手机中打开chrome浏览器,并浏览你想要调试的页面,本例打开百度首页,随便截张图:

Screenshot_2016-11-25-14-46-19.png

7、查看电脑端chrome浏览器开发者工具的“Remote devices”面板,会看到手机设备中已经打开的百度首页,看图:

QQ截图20161125150702.png

8、点击 “Remote devices”面板右侧的“Inspect”按钮,即可开启chrome熟悉的调试工具,还有实时的预览图哦,看图:

QQ截图20161125144507.png

9、接下来能干点啥就不多说了。。。

PS:我不会告诉你们微信打开的web页面也是可以的,其它手机浏览器请自测