WP-App WordPress多端小程序套件可将你的wordpress网站轻松生成小程序版

支持所有小程序，包括微信小程序，百度小程序，头条/抖音小程序，支付宝小程序，QQ小程序

百度搜索流量全面倾斜扶持百度智能小程序，还不上线您的小程序版?

官方网站及购买地址：
https://wp-autoblog.net/zh

演示案例

本小程序Demo对应的网站:
https://wp-autoblog.net/wordpress/

包含一个wordpress后台插件及各端前端代码包，多端可用，支持微信小程序，百度小程序等

支持所有小程序，包括微信小程序，百度小程序，头条系小程序（头条，抖音），支付宝小程序，QQ小程序。

提供尽可能多的APP端常用组件及功能

提供尽可能多的APP端常用组件及功能，选项卡，轮播图，通知栏，评论，收藏，点赞，分享，海报等等

如果没有需要的组件及功能可提交反馈，都尽量提供，还再不断更新完善中~

自带缓存功能，提速APP性能和体验

后台插件自带缓存功能，自动生成缓存文件，用户访问APP直接提取缓存文件内容，最大程度减少数据库连接和数据加工处理步骤，加速用户APP访问速度和体验。

百度小程序SEO优化

目前百度全面扶持小程序内容和生态，搜索流量优先展示小程序内容，插件当然要做好小程序的SEO功能。

首页可自行设置按百度官方要求的SEO信息，文章内页会自动提取标题，关键词，摘要，相关图片等自动设置百度要求的SEO信息，其他页面分类页面，标签页面等都会自动设置SEO信息。

强大自定义能力，后台可自定义需要显示的组件及设置样式，可实现无限前端效果，设计您自己独立的视觉效果，避免千篇一律

后台可自定义需要显示的组件及设置样式，设置保存后前端即时生效，无需重复上传前端代码，避免各家超级APP重复审核流程。

提供图标系统，可自行设置需要显示的图标。

后台更多设置没有全部展示，可在本小程序底部“组件”菜单预览其自定义能力

支持单独设置前端文章CSS样式，文章比较特别，需要特别样式，没有问题，可设置CSS样式即时生效

支持单独设置前端文章CSS样式，也可以支持“内联”样式，本文章大部分特殊样式就是“内联”样式结果，关于“内联”样式详情可点击查看下面文章(下面文章为app内页面跳转):

文章基本HTML元素渲染测试

这是HTML的H1标题

这是HTML的H2标题

这是HTML的H3标题

这是HTML的H4标题

这是HTML的H5标题

这是HTML的H6标题

这是一个p标签段落，
这是一个p标签段落，这是一个p标签段落，这是一个p标签段落,这是一个p标签段落,这是一个p标签段落,这是一个p标签段落,这是一个p标签段落

这是另一个P标签段落，这是另一个P标签段落，这是另一个P标签段落,这是另一个P标签段落,这是另一个P标签段落,这是另一个P标签段落,这是另一个P标签段落,这是另一个P标签段落

div标签测试

HTML代码:

<div>这里是div标签里面的文字，没有P标签</div>

section标签测试

PRC

The People’s Republic of China was born in 1949…

HTML代码:

<section>
  <h1>PRC</h1>
  <p>The People's Republic of China was born in 1949...</p>
</section>

文字渲染测试

HTML代码:

<em>em标签测试</em>
<div>上下标展示：水的化学式是H<sub>2</sub>O，2<sup>3</sup>=8</div>
<div>插入和删除文本：<del>我想出去玩</del>，不你不想，<ins>你想学习</ins></div>
<div>引用：<q>这是一句引用的文字</q>，这是<code>code</code>标签</div>
<div><strong>粗体</strong>与<i>斜体</i></div>
<div><big>大一号</big>正常<small>小一号</small></div>

段落引用(blockquote标签)渲染测试

段落引用：欢迎！我白天是个邮递员，晚上就是个有抱负的演员。这是我的网站。我住在天朝的帝都，有条叫做Jack的狗。。

内联style属性渲染测试

HTML代码:

<div style="background-color:#00b3db;color:#ffffff;border-radius: 5px;padding:10px;">
   该元素使用了style属性设置样式
</div>

图像渲染测试

下面是2张图像，图像之间没有间隔（插件后台默认设置img标签样式为block，这样连续图像之间将没有间隔）

HTML代码:

<p>
 <img  src="image_url"/>
 <img  src="image_url"/>
</p>

下面是2张图像，图像之间有间隔

HTML代码:

<p><img  src="image_url"/></p>
<p><img  src="image_url"/></p>

下面是图像自定义样式布局

HTML代码:

<div style="width: 100%; box-sizing: border-box;">
  <div style="width: 100%;margin-bottom:5px;">
    <img  src="image_url">
  </div>
  <div style="margin-top:5px; display: flex;justify-content: center;-webkit-justify-content: center;display: -webkit-flex;">
    <div style="width: 100%;margin-right: 5px;">
      <img  src="image_url">
    </div>
    <div style="width: 100%;">
      <img  src="image_url">
    </div>
  </div>
</div>

HTML代码:

<div style="margin: 1em auto; white-space: normal; border: 0px none; text-align: center; padding: 0px; padding: 5px;border:1px solid #ddd;overflow: hidden;">
  <div style="white-space: nowrap; width:100%; overflow-x: scroll;">
    <div style="display: inline-block;word-wrap: break-word;white-space: normal;vertical-align: top;">
      <img src="image_url" style="display: inline-block;width:100%;"/>
      <p style="font-size:12px; text-align:center;">
        图片1
      </p>
    </div>
    <div style="display: inline-block;word-wrap: break-word;white-space: normal;vertical-align: top;">
      <img src="image_url" style="display: inline-block;width:100%;"/>
      <p style="font-size:12px; text-align:center;">
        图片2
      </p>
    </div>
    <div style="display: inline-block;word-wrap: break-word;white-space: normal;vertical-align: top;">
      <img src="image_url" style="display: inline-block;width:100%"/>
      <p style="font-size:12px; text-align:center;">
        图片3
      </p>
    </div>
  </div>
  <p style="line-height:32px;margin: 5px;">
    <span style="font-size: 12px;">左右滑动查看更多</span>
  </p>
</div>

列表渲染测试

有序列表

1. 多级列表
   1. 子标题1
   2. 子标题2
   3. 子标题3
2. 段落你好，我是一个在li标签里面的p标签段落，我是一个在li标签里面的p标签段落

无序列表

• 标题1
  • 子标题1
  • 子标题2
  • 子标题3
• 标题2
• 标题3

HTML代码:

<p>有序列表</p>
<ol>
  <li>多级列表
    <ol>
      <li>子标题1</li>
      <li>子标题2</li>
      <li>子标题3</li>
    </ol>
  </li>
  <li>段落
    <p>你好，我是一个在li标签里面的p标签段落，我是一个在li标签里面的p标签段落</p>
  </li>
</ol>
<br/>
<p>无序列表 </p>
<ul>
  <li>标题1
    <ul>
      <li>子标题1</li>
      <li>子标题2</li>
      <li>子标题3</li>
    </ul>
  </li>
  <li>标题2</li>
  <li>标题3</li>
</ul>

链接渲染测试

图片链接，点击可以跳转到APP内部其他页面

HTML代码:

<a href="/pages/page/page?post_id=2">
  <img src="image_url"/>
</a>

https://wp-autoblog.net/zh

APP外部链接(http链接)，点击可以复制链接

HTML代码:

<a href="https://wp-autoblog.net/zh">
  https://wp-autoblog.net/zh
</a>

表格渲染测试

表头th	表头th	表头th
表格td元素	表格td元素	表格td元素
表格td元素	表格td元素	表格td元素

表格显示默认样式，可通过插件后台自行设置样式

HTML代码:

<table>
  <tr>
    <th>表头th</th>
    <th>表头th</th>
    <th>表头th</th>
  </tr>
  <tr>
    <td>表格td元素</td>
    <td>表格td元素</td>
    <td>表格td元素</td>
  </tr>
  <tr>
    <td>表格td元素</td>
    <td>表格td元素</td>
    <td>表格td元素</td>
  </tr>
</table>

HTML音频测试

HTML代码:

<audio src="音频地址"  
       name="song.mp3"  
       controls="controls" >

带海报的音频

HTML代码:

<audio src="音频地址"  
       name="song.mp3"  
       poster="海报图片地址" 
       controls="controls" >

HTML视频测试

HTML代码:

<video  controls="controls"  width="100%">
  <source src="mp4格式视频地址"  type="video/mp4">
  <source src="ogg格式视频地址" type="video/ogg">
  Your browser does not support the video tag.
</video>

带海报的视频

HTML代码:

<video  controls="controls" poster="海报图片地址" >
  <source src="mp4格式视频地址"  type="video/mp4">
  <source src="ogg格式视频地址" type="video/ogg">
  Your browser does not support the video tag.
</video>

视频的海报图片