可通过WordPress后台直接设置在小程序端文章显示的基本CSS样式(比如标题段落的字体大小,子间距,行间距,段间距等等,也可支持特殊样式需求),即时生效,不用重新上传前端代码再走审核流程,方便可靠,如图:
支持签选择器,如
h1 { margin:10px 0;}
支持class选择器,如
.main { border: 1px solid #cdcdcd; padding: 5px;}
可通过WordPress后台直接设置在小程序端文章显示的基本CSS样式(比如标题段落的字体大小,子间距,行间距,段间距等等,也可支持特殊样式需求),即时生效,不用重新上传前端代码再走审核流程,方便可靠,如图:
支持签选择器,如
h1 { margin:10px 0;}
支持class选择器,如
.main { border: 1px solid #cdcdcd; padding: 5px;}
文章图片地址属性: 默认为 src,一般情况无需修改,如果网站的wordpress文章里图片地址属性用了其他比如data-src,修改为对应data-src即可。
用户默认头像地址: 一般用在评论里出现用户头像,通常情况下小程序端都会自动获取到用户头像,但是PC端如果有用户评论可能没有头像信息,小程序端显示的时候会使用这个默认头像地址
图像CDN域名地址 :会自动设置默认值(一般就是Wordpress的站点地址)
可对WordPress下所有term(分类,标签,自定义分类法)等设置描述和一个图片地址,将在小程序端显示。
对应图片地址如果一个一个设置比较麻烦,可设置一组图片地址,小程序端显示的时候将对于没有设置图片地址的 term 将随机调用显示,如下图:
开启缓存:
各小程序端可分别设置是否开启缓存,建议开启,加速小程序端访问并最大程度降低服务器负载
版权信息:
可为空,设置后小程序端每个页面页脚将出现该版权提示信息。
浏览量自定义栏目:
默认设置为wp_app_view_num
,如果你了解wordpress自定义栏目,也可使用其他以兼容您的PC网站的wordpress主题或其他浏览量记录插件,这样的话你的PC站浏览量记录将和小程序端统一。
初始值:可设置一个初始值,默认为0,也可设置一个初始随机值,比如100-200,初始值将为100-200之间的一个随机数。
显示为:在小程序端,该属性显示的名称。
点赞量(喜欢量或其他描述)自定义栏目:默认设置为wp_app_like_num
,同样也可使用其他以兼容您的PC网站的wordpress主题或其他插件,这样的话你的PC站点赞量(喜欢量)记录将和小程序端统一。
初始值:可设置一个初始值,默认为0,也可设置一个初始随机值,比如100-200,初始值将为100-200之间的一个随机数。
显示为:在小程序端,该属性显示的名称,比如点赞,喜欢等。
要修改原生导航栏字体颜色,背景颜色,及窗口的背景颜色需要小程序全局配置文件进行修改,该文件为根目录下的json格式文件
app.json
下面是微信小程序的底部tabbar配置示例,其他小程序配置基本类似:
"window": {
"navigationBarTextStyle": "black", //导航栏标题颜色,仅支持 black / white
"navigationBarTitleText": "WordPress小程序",//导航栏默认标题文字内容
"navigationBarBackgroundColor": "#FFFFFF" //导航栏背景颜色
},
更详细配置说明,参考官方文档
微信小程序 app.json配置文件 window配置说明
百度小程序 app.json配置文件 window配置说明
头条系小程序 app.json配置文件 window配置说明
QQ小程序 app.json配置文件 window配置说明
支付宝小程序 app.json配置文件 window配置说明
要修改原生底部tabbar显示的页面及字体颜色,图标颜色,需要小程序全局配置文件进行修改,该文件为根目录下的json格式文件
app.json
下面是微信小程序的底部tabbar配置示例,其他小程序配置基本类似:
"tabBar": {
"color": "#9F9F9F", // tabbar上的文字默认颜色,仅支持十六进制颜色
"selectedColor": "#00b3db", // tabbar上的文字选中时的颜色,仅支持十六进制颜色
"borderStyle": "black", // tabbar上边框的颜色, 仅支持 black/white
"backgroundColor": "#ffffff", // tabbar的背景色,仅支持十六进制颜色
"list": [ // tabbar的列表,最少2个、最多5个tab
{
"pagePath": "pages/index/index", // 页面路径
"iconPath": "static/tab-home.png", // 图片路径,建议尺寸为81px*81px
"selectedIconPath": "static/tab-home-on.png", // 选中时的图片路径
"text": "主页" // tabbar上按钮文字
},
{
"pagePath": "pages/cat/cat",
"iconPath": "static/tab-cat.png",
"selectedIconPath": "static/tab-cat-on.png",
"text": "分类"
},
{
"pagePath": "pages/term/term",
"iconPath": "static/tab-topic.png",
"selectedIconPath": "static/tab-topic-on.png",
"text": "专题"
},
{
"pagePath": "pages/my/my",
"iconPath": "static/tab-my.png",
"selectedIconPath": "static/tab-my-on.png",
"text": "我的"
}
]
},
更详细配置说明,参考官方文档
微信小程序tabbar配置说明
百度小程序tabbar配置说明
头条系小程序tabbar配置说明
QQ小程序tabbar配置说明
支付宝小程序tabbar配置说明
小程序原生底部tabbar图标文件在小程序的前端代码包里,路径为
/static
文件夹里以tab开头的png格式图片文件,以首页图标为例
/static/tab-home.png
为首页为默认情况未选中时显示的图标/static/tab-home-on.png
为首页选中时显示的图标
图标文件获取
在下载的wordpress插件zip包(wp-app.zip)解压后,app-icon文件夹下已提供部分常用图标文件,可自行修改颜色后使用或直接使用,也可访问 https://www.iconfont.cn/ 自己查找下载需要的图标文件进行替换。
图标文件颜色修改
因小程序原生底部tabbar图标的选中颜色无法通过代码自定义,使用的是图片本身的颜色,若要修改图标的颜色,需要借助PS(PhotoShop)进行修改后替换,使用PS修改图标颜色过程也非常简单容易,下面以PhotoShop CC为例:
tab-home-on.png 默认颜色为蓝色,假设需要将该图标颜色修改为红色(#FF5777),按如下步骤:
1) PhotoShop 打开 tab-home-on.png 文件,选择 图层菜单 -> 图层样式 -> 颜色叠加
2)在打开的 “颜色叠加对话框” 中,混合模式 “正常”,点击 “拾色器” 设置需要的颜色后保存文件,替换相关文件即可完成图标文件的颜色修改
该小程序提供的默认颜色主题为蓝色,用户可自定义颜色主题,修改颜色主题先修改前端代码包中的颜色代码,参考下面《快速搭建小程序说明》文档中的“修改小程序主色调颜色”
快速搭建微信小程序
快速搭建百度小程序
快速搭建头条系小程序
快速搭建QQ小程序
快速搭建支付宝小程序
参考文档 原生底部tabbar设置
参考文档 原生导航栏、窗口设置
页面其他元素,比如页面上各字体颜色,背景颜色(含透明效果),边框颜色等等都可以自行修改自定义,直接通过Wordpress后台->插件提供的小程序管理后台页面,直接设置保存后即时生效,无效重复上传前端代码包再走一遍审核流程, 以下是个示例
路径 | 参数 | 页面说明 | 示例 |
---|---|---|---|
/pages/index/index | 首页 | ||
/pages/cat/cat | 分类页面 | ||
/pages/term/term | 标签 (含自定义分类)页面 | ||
/pages/my/my | 用户页面 | ||
/pages/term_posts/term_posts | term_id | 分类,标签(自定义分类) 文章列表 | /pages/term_posts/term_posts?term_id=2 显示term_id为2的所有文章列表 |
/pages/post/post | post_id | 文章页面 | /pages/post/post?post_id=123 显示post_id为123的文章 |
/pages/page/page | post_id | 显示WordPress 文章类型为页面 的文章 | /pages/page/page?post_id=2 显示post_id为2的 “页面” 文章 |
/pages/search/search | 搜索功能页面 | ||
/pages/comments/comments | 最近评论列表页面 | ||
/pages/hot-tags/hot-tags | 热门标签页面 | ||
/pages/media-images/media-images | 图片库页面 | 显示WordPress媒体中心里所有图片 | |
/pages/media-audios/media-audios | 音频库页面 | 显示WordPress媒体中心里所有音频 | |
/pages/media-videos/media-videos | 视频库页面 | 显示WordPress媒体中心里所有视频 | |
/pages/my-posts/my-posts | type 参数可选值: my_views my_comments my_likes my_favors | 用户相关文章页面 | /pages/my-posts/my-posts?type=my_views 显示用户浏览过的文章 其他参数值示例: my_comments(评论过的文章) my_likes(点赞过的文章) my_favors(收藏的文章) |
/pages/posts-rank/posts-rank | 文章排行页面 | ||
/pages/random-posts/random-posts | 随机文章页面 | ||
/pages/form/form | form_id 后台自定义的 form_id | 自定义表单页面 | /pages/form/form?form_id=6 显示后台自定义的form_id为6的表单 |
访问 https://mini.open.alipay.com/ 使用你的支付宝账户进行登陆。
登陆后,可立即申请入驻开放平台,可选择入驻身份:自研开发者、系统服务商 ISV、线下服务商(仅限企业用户)。
如果只使用本插件快速搭建小程序,可直接选择 自研开发者 即可。
提交申请入驻成功后,可直接创建小程序。
若账号从未创建过小程序,点击 开始创建 ,填写小程序相关信息,完成创建流程。
进入小程序开发管理后台,进入 开发管理 菜单 功能列表 处,添加如下功能
获取会员基础信息
小程序模板消息
小程序二维码
支付宝不像其他端小程序,直接使用APP SECRET来保证数据及小程序安全,需要自行准备好私钥和公钥信息(所谓私钥和公钥只是一个无规则的字符串而已)。
我们可直接使用支付宝小程序RSA密钥生成工具:https://docs.open.alipay.com/291/105971/
(windows版本工具请不要安装在含有空格的目录路径下,如 D:\Program Files 该安装目录有空格, 否则会导致公私钥乱码的问题)
RSA密钥生成工具安装好后,直接运行生成我们需要的私钥和公钥。
密钥长度选择RSA2
密钥格式,因为我们wordpress插件是PHP语言版本,选择PKCS1(非JAVA适用)
然后直接点击 “生成密钥”,之后直接点击 复制私钥 和 复制公钥,将私钥和公钥信息都保存好,将复制好的私钥和公钥信息填入你 WordPress网站后台 -> WP-APP插件 -> “支付宝小程序” 菜单页面下进行保存。
登陆小程序开发管理后台
https://open.alipay.com/mini/dev/list
进入小程序管理后台,AppID如图所示,进入设置菜单页面->“开发设置” 选项下,可设置 公钥 同时可设置服务器域名
在 开发信息->接口加密方式 点击“设置”,打开设置对话框后复制上一步获取的公钥信息填入保存即可。
访问QQ小程序平台进行注册和申请
https://q.qq.com/
完成注册后,请在QQ小程序开发者平台首页 https://q.qq.com 的登录入口直接登录,点击「完善小程序信息」
小程序注册成功后,进入小程序管理后台 https://q.qq.com ,点击左边 “设置” 菜单后,点击 “开发设置” 选项卡,可查看 AppID 和设置 AppSecret
将获取到的 AppID 和 AppSecret,填入插件后台,进行保存即可。
同样小程序管理后台 https://q.qq.com ,点击左边 “设置” 菜单后,同样 “开发设置” 选项卡,可配置服务器域名信息,简单点,所有设置都填入你网站的域名即可。
进入字节跳动小程序开发者平台 https://developer.toutiao.com/
登陆后按提示步骤完成申请,申请通过之后即可创建小程序。
切记:手机号等信息请如实填写
需注意:
1)在必填信息中, 申请注册的公司主体信息请填写完整 ,请勿填写简称,小程序简介尽量与产品功能相关(后续可修改)
2)在选填信息中, 尽量不要空白 ,如实填写相关情况
上述申请通过后,可以在后台 https://developer.toutiao.com/ 进行接入创建小程序
小程序注册成功后,进入小程序管理后台 https://developer.toutiao.com/ ,点击左边 “开发” 菜单后,可查看 AppID 和设置 AppSecret,并设置域名服务器
注册并认证百度小程序请参考官方文档
https://smartprogram.baidu.com/docs/introduction/enter_application/
小程序注册成功后,进入小程序管理后台 https://smartprogram.baidu.com/ ,点击左边 “开发管理->设置” 菜单后,点击 “开发设置” 选项卡,可查看 APP ID,APP Key 和设置 APP SECRET
注意: 百度小程序比微信小程序多了APP Key, 插件后台需要填入并保存的是 APP Key 非 APP ID
APP ID 在百度开发者工具导入前端代码包时使用
将获取到的 APP Key 和 APP SECRET,填入插件后台,进行保存即可。
同样小程序管理后台 https://smartprogram.baidu.com/ ,点击左边 “开发管理->设置” 菜单后,同样 “开发设置” 选项卡,可配置服务器域名信息,简单点,所有设置都填入你网站的域名即可。
注意: 如果图片使用cdn, downloadFile合法域名处还需填写cdn的域名
注意: 因为可能要下载百度用户头像图片,downloadFile合法域名下还需添加:himg.bdimg.com