Categories
功能演示

WordPress小程序(WP-App 多端小程序套件)

前言:原本是自己一个wordpress网站想转换成小程序版本,本来打算从市面现成的插件(有免费的也有收费的)直接使用,但发现都无法满足自己的要求,索性还不如我们自己开发一款功能更全面,更好的小程序插件,因此诞生了该WP-App套件(包含后台插件及前端代码包),目前发布版本已经可以满足大部分用户需求,但对于我们自己要求的“更全面,更好的小程序插件”还一些距离,因此功能和特性还再不断更新完善中,请拭目以待

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信息。

后台插件功能截图(百度小程序SEO设置)

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

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

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

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

后台插件功能截图(列表页设置)

后台插件功能截图(列表页样式设置)

后台插件功能截图(底部“tabbar”设置)

后台插件功能截图(首页选项卡设置)

后台插件功能截图(首页轮播图设置)

后台插件功能截图(首页通知栏设置)

后台插件功能截图(首页文章列表设置)

左右滑动查看更多

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

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

文章基本HTML元素渲染测试

后台插件功能截图(文章基本样式后台设置)

Categories
功能演示

文章基本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标签测试

这里是div标签里面的文字,没有P标签
这里是div标签里面的文字,没有P标签

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>

文字渲染测试

em标签测试

上下标展示:水的化学式是H2O,23=8
插入和删除文本:我想出去玩,不你不想,你想学习
引用:这是一句引用的文字,这是code标签
粗体斜体
大一号正常小一号

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属性渲染测试

该元素使用了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>

图片1

图片2

图片3

左右滑动查看更多

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>
Categories
功能演示

HTML视频音频渲染测试

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>

视频的海报图片

Categories
PSD

Botique 多用途eCommerce PSD模板

Botique 多用途eCommerce PSD模板-创客云
  Botique 多用途 eCommerce PSD 模板

主题特点:

  Botique 是一个干净的简约 PSD 多用途电子商务和博客模板适用于时装店、家具店、手工店、时尚饰品店、美容店的博客。

演示与下载

演示地址:https://themeforest.net/item/botique-responsive-multipurpose-ecommerce-psd-template/screenshots/19743830

百度网盘

Categories
PSD

Diamond 多用途购物商城 PSD模板

Diamond 多用途购物商城 PSD模板-创客云
Diamond PSD 模板,多用途购物商城 PSD 模板!

演示与下载

演示地址:http://www.weidea.net/page/3

百度网盘

Categories
PSD

Gem 购物商城 PSD模板

Gem 购物商城 PSD模板-创客云
Gem PSD 模板, 购物商城 PSD 模板。

主要特点:

  2 个颜色,28 个层 PSD 文件,轻松自定义,视差效果,1200px 栅格系统,创客云提供说明文档等!

演示与下载

演示地址:http://themeforest.net/item/gem-luxury-ecommerce-psd-theme/12087736

百度网盘

Categories
PSD

Globals 教育学校培训 PSD模板

Globals 教育学校培训 PSD模板-创客云
  Globals PSD 模板,是一个教育学校培训主题。主题特点:100+ PSD 模板,1170 栅格!

演示与下载

演示地址:http://themeforest.net/item/globals-material-universal-psd-template/11932290

百度网盘

Categories
PSD

Lincoln 教育培训 PSD模板

Lincoln 教育培训 PSD模板-创客云
Lincoln 教育培训 PSD 模板,30+ PSD 文件等。

演示与下载

演示地址:http://themeforest.net/item/lincoln-educational-material-design-psd-theme/12457054

百度网盘

Categories
PSD

Unreal Estate 地产租售置业 PSD网站模板

Unreal Estate 地产租售置业 PSD网站模板-创客云
  Buna 地产租售置业 PSD 网站模板。

演示与下载

演示地址:http://themeforest.net/item/unreal-estate-real-estate-psd-template/4555714

百度网盘

Categories
PSD

imbus 商务企业 PSD网站模板

imbus 商务企业 PSD网站模板-创客云
  imbus 商务企业 PSD 网站模板,14 个 PSD 文件,宽和窄布局,960 栅格系统,4 个预置颜色。

演示与下载

演示地址:http://themeforest.net/item/imbus-simple-psd-template/4265686

百度网盘