标签： wordpress小程序

使用文档

WordPress小程序（WP-APP）-使用文档（19）-小程序首页顶部操作栏设置

文章作者 Firenze
发布日期 2020年2月13日
WordPress小程序（WP-APP）-使用文档（19）-小程序首页顶部操作栏设置无评论

可分别开启和关闭是否显示首页顶部搜索框和顶部选项卡，设置选项卡栏目选项，顶部操作栏是否吸顶效果，及设置显示样式，颜色，及背景颜色（含透明度），设置后小程序前端即时生效，无需重复上传代码。

可扫码打开demo版小程序在组件预览处参考效果，各种样式效果可自由组合，自由设置各元素颜色，背景颜色（含透明度），满足个性化需求，以下是部分设置案例参考：

标签 wordpress小程序

使用文档

WordPress小程序（WP-APP）-使用文档（18）-小程序文章列表及样式设置

文章作者 Firenze
发布日期 2020年2月13日
WordPress小程序（WP-APP）-使用文档（18）-小程序文章列表及样式设置无评论

小程序文章列表及样式设置对于某个端的小程序而言是全局设置，设置后对小程序所有页面（首页，标签页，分类页，搜索结果页面等）显示的文章列表都会生效，但每个端（微信小程序，百度小程序，头条小程序，QQ小程序，支付宝小程序，H5端）的设置相互独立（就是说不同端的小程序可以有不同的设置及样式）。

文章列表及样式，设置后即时生效，无需重复上传前端代码再走审核流程。

列表页基本设置

列表页面每次提取文章数量：
默认为10，每次加载列表加载的文章数量

列表封面优先使用文章特色图像：
列表封面图是否优先使用文章的特色图像

如果为 “是” 的话，顺序如果文章有特色图像那么将使用特色图像作为封面图，如果没有特色图像，那么将尝试从文章寻找第一张图像做为封面图。

如果为 “否” 的话，顺序是从文章中自动寻找第一张图片，如果文章里没有图片，那么将尝试寻找文章的特色图像。

列表展示文章“参数”设置

列表展示文章“参数”为文章列表上显示的文章额外的参数信息，比如浏览量，点赞量，评论量，所属分类等，如下所示：

可在wordpress后台直接设置需要展示的项目，显示图标还是文字，设置后即时生效，设置如下：

预设项目包含如下4个可直接使用，这4个预设项目name的值为固定为term，comment，view，like不可更改

{name:'term',taxonomy:'category',display:'分类',icon:'apps'}
{name:'comment',display:'评论',icon:'mark'}
{name:'view',display:'浏览',icon:'attention'}
{name:'like',display:'点赞',icon:'like'}

name
用来区分项目，name为term 时，必须设置taxonomy的值，一般为 ‘category’，’post_tag’ 或其他自定义分类

dispaly
为显示的前缀文字

icon
为显示的前缀图标名称，可在后面样式里设置前缀显示为文字还是图标。（关于图标名称，可扫码打开demo小程序，“组件”菜单里查看所有图标样式及图标名称）

除了这4个预设项目外，也可自定义添加，自定义添加必须设置自定义栏目custom_field名称，例如：

{name:'some_name',display:'some_text',icon:'icon_name',custom_field:'custom_field_name'}

设置时，每个项目以新行开始，同一个项目{大括号}之间不可以换行

列表样式设置

可通过后台直接设置展示的列表页样式，设置后即时生效，无需重复上传前端代码

各种样式效果可自由组合，自由设置各元素颜色，背景颜色（含透明度），满足个性化需求，以下是部分设置案例参考

标签 wordpress小程序

使用文档

WordPress小程序（WP-APP）-使用文档（17）-小程序文章CSS样式设置

文章作者 Firenze
发布日期 2020年2月13日
WordPress小程序（WP-APP）-使用文档（17）-小程序文章CSS样式设置无评论

可通过WordPress后台直接设置在小程序端文章显示的基本CSS样式（比如标题段落的字体大小，子间距，行间距，段间距等等，也可支持特殊样式需求），即时生效，不用重新上传前端代码再走审核流程，方便可靠，如图：

支持签选择器，如

h1 { margin:10px 0;}

支持class选择器，如

.main { border: 1px solid #cdcdcd; padding: 5px;}

标签 wordpress小程序

使用文档

WordPress小程序（WP-APP）-使用文档（16）-小程序全局基本选项设置

文章作者 Firenze
发布日期 2020年2月13日
WordPress小程序（WP-APP）-使用文档（16）-小程序全局基本选项设置无评论

1 全局选项设置->“基本设置”选项卡

文章图片地址属性：默认为 src，一般情况无需修改，如果网站的wordpress文章里图片地址属性用了其他比如data-src，修改为对应data-src即可。

用户默认头像地址：一般用在评论里出现用户头像，通常情况下小程序端都会自动获取到用户头像，但是PC端如果有用户评论可能没有头像信息，小程序端显示的时候会使用这个默认头像地址

图像CDN域名地址 ：会自动设置默认值（一般就是Wordpress的站点地址）

2 全局选项设置->“term(分类,标签等)设置”选项卡

可对WordPress下所有term（分类，标签，自定义分类法）等设置描述和一个图片地址，将在小程序端显示。

对应图片地址如果一个一个设置比较麻烦，可设置一组图片地址，小程序端显示的时候将对于没有设置图片地址的 term 将随机调用显示，如下图：

3 各小程序端设置页面->“全局参数”选项卡->基本设置

开启缓存：
各小程序端可分别设置是否开启缓存，建议开启，加速小程序端访问并最大程度降低服务器负载

版权信息：
可为空，设置后小程序端每个页面页脚将出现该版权提示信息。

浏览量自定义栏目：
默认设置为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之间的一个随机数。

显示为：在小程序端，该属性显示的名称，比如点赞，喜欢等。

标签 wordpress小程序

使用文档

WordPress小程序（WP-APP）-使用文档（15）-原生导航栏及窗口设置

文章作者 Firenze
发布日期 2020年2月13日
WordPress小程序（WP-APP）-使用文档（15）-原生导航栏及窗口设置无评论

1 app.json全局配置文件设置导航栏，窗口等

要修改原生导航栏字体颜色，背景颜色，及窗口的背景颜色需要小程序全局配置文件进行修改，该文件为根目录下的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配置说明

标签 wordpress小程序

使用文档

WordPress小程序（WP-APP）-使用文档（14）-原生底部tabbar设置

文章作者 Firenze
发布日期 2020年2月13日
WordPress小程序（WP-APP）-使用文档（14）-原生底部tabbar设置无评论

1 app.json全局配置文件设置tabbar

要修改原生底部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配置说明

2 修改原生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）在打开的 “颜色叠加对话框” 中，混合模式 “正常”，点击 “拾色器” 设置需要的颜色后保存文件，替换相关文件即可完成图标文件的颜色修改

标签 wordpress小程序

使用文档

WordPress小程序（WP-APP）-使用文档（13）-小程序颜色主题设置

文章作者 Firenze
发布日期 2020年2月13日
WordPress小程序（WP-APP）-使用文档（13）-小程序颜色主题设置无评论

1 修改前端代码包主题颜色代码

该小程序提供的默认颜色主题为蓝色，用户可自定义颜色主题，修改颜色主题先修改前端代码包中的颜色代码，参考下面《快速搭建小程序说明》文档中的“修改小程序主色调颜色”

快速搭建微信小程序
 快速搭建百度小程序
 快速搭建头条系小程序
 快速搭建QQ小程序
 快速搭建支付宝小程序

2 修改原生底部tabbar图标及图标选中（激活）颜色

参考文档原生底部tabbar设置

3 修改原生顶部导航栏字体颜色及背景颜色，窗口默认背景颜色

参考文档原生导航栏、窗口设置

4 页面其他元素颜色修改

页面其他元素，比如页面上各字体颜色，背景颜色（含透明效果），边框颜色等等都可以自行修改自定义，直接通过Wordpress后台->插件提供的小程序管理后台页面，直接设置保存后即时生效，无效重复上传前端代码包再走一遍审核流程, 以下是个示例

标签 wordpress小程序

使用文档

WordPress小程序（WP-APP）-使用文档（12）-小程序页面路径说明

文章作者 Firenze
发布日期 2020年2月13日
WordPress小程序（WP-APP）-使用文档（12）-小程序页面路径说明无评论

路径	参数	页面说明	示例
/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的表单