17713433920 info@mac163.com
如何逐步将wordpress网站变成应用程序
如何逐步将wordpress网站变成应用程序

我听说您为什么要首先制作一个应用程序?应用程序可能不再对营销有用,但对您的客户来说却非常方便-使他们可以选择与网站互动的方式。随着移动互联网的持续兴起- 通过移动应用程序访问互联网的人数已经超过了台式机-应用程序正在蓬勃发展,因为大多数应用程序都比移动Web浏览器难堪或麻烦。

建造一个人的成本和挫败感也大大降低了。在过去,很多企业都对应用程序感兴趣,但大多数企业都无法构建应用程序,因为这太困难了。但值得庆幸的是,现在情况有所不同。您不再需要太多金钱或编码知识来构建出色的应用程序。让我们探索它们,对吧?

关于免费App Builder的说明

在过去的几年中,出现了许多用于构建应用程序的免费选项,但最简单的方法之一是Adobe的PhoneGap Build。当他们的网站做广告时,您只需上传HTML5,CSS和JavaScript文件,该网站就会将它们组装成可立即下载的应用程序。最棒的是,它可以同时为Android,Windows 8和iOS构建三个版本,从而节省了大量时间。

结果不会太花哨。实际上,所有这些方法的真正作用是将您的主页伪装成应用程序。当查看者点击该图标时,他们将被带到相同的移动网站,他们将查看是否可以通过手机的浏览器对其进行访问。因此,为了使此方法有效,您必须拥有一个针对移动查看进行了优化的现有站点。这就是为什么我们的第一步是……

确保您的WordPress网站具有移动版本

如果您的WordPress网站没有针对移动设备进行优化,那么这实际上是没有意义的。所以优化它!当然,最简单的方法就是使用像Total这样的移动响应WordPress主题。但是,如果您的主题没有响应,那么有很多插件可以提供帮助。

WPtouch和iThemes Mobile都可以让您根据当前站点设计创建简单但有效的移动主题。通过管理面板,您可以自定义外观的大多数方面,而不必弄乱代码。

任何Mobile Theme Switcher是一个基本插件,它将检测您的查看器正在使用的设备并显示该设备的特定主题。因此,如果您想平衡多个主题(每个移动操作系统一个主题),则可以这样做。

最后,还有WordPress Mobile Pack,它提供了许多跨平台的移动Web应用程序,UI和主题选项,并易于与Google Analytics(分析)集成。

使用PhoneGap构建来创建应用

现在,您可以开始使用Adobe PhoneGap真正为WordPress网站创建一个应用程序。

1.准备

在开始之前,请确保您有一种方法可以立即测试您的应用程序。您可以使用浏览器开发工具来模仿移动设备视图,也可以尝试使用CrossBrowser Testing之类的服务。但是,如果可以管理的话,最好是手头有iOS和Android设备。

接下来,转到  Adobe的PhoneGap Build  ,然后单击巨大的“完全免费”计划按钮以创建一个免费的Adobe帐户(或使用当前登录名登录)以开始使用。免费计划允许单个私有应用程序(使用私有Github存储库)或无限制的开源应用程序(公共Github存储库),最大大小为50MB。因此,如果您仅制作一个应用程序,则免费计划应该可以正常工作。

虽然值得注意的是,如果您是Adobe Creative Cloud成员,那么PhoneGap Build会给您带来更多收益。您最多可以创建25个私人应用,也可以创建最大1GB的应用。如果您是网站设计师或开发人员,我们强烈建议您始终获得Creative Cloud会员资格,因为您将始终拥有最新版本的PhotoShop,Illustrator等,以及免费的在线Adobe产品组合。我们认为这是必不可少的工具包。但是回到这一点,让我们继续创建应用程序的下一步。

2.创建应用程序文件

您的根目录需要包含  密钥文件,以便PhoneGap  创建您的应用程序。特别是index.html,config.xml和一个res目录文件夹(最后一个目录是您将添加默认图标和特定于操作系统的图标的位置)。

您可以下载示例PhoneGap Hello World模板以查看该结构的工作方式。如果打开它,它将看起来像这样:

如您所见,您的两个核心文件将是config.xml和index.html,其中添加了CSS,图像,JS和我们提到的res文件夹的文件夹。

接下来,您需要使图标进入res文件夹。您可以使用任何图像处理或矢量程序,只要结果是大于1000×1000像素的.jpg或.png。

IconsFlow是一个很好的工具,可以帮助您使用预设的图像,颜色选项,渐变等快速创建专业的应用程序图标。只需设计图标,创建免费帐户并下载文件即可。如果您已经有一个图标,但需要针对所有设备和操作系统调整其大小,则免费的App Icon Maker可以做到这一点。但是,如果您快速进行Google搜索,就会发现还有很多其他网站,服务和应用可供选择,以创建您的图标。

3.配置您的应用

config.xml是您应用程序的配置文件,它控制着大多数应用程序功能。它适用于所有平台,因此您不必担心针对任何特定的操作系统进行修改。这是PhoneGap文档中提供的示例:

<?xml version="1.0" encoding="UTF-8" ?>
<widget xmlns   = "http://www.w3.org/ns/widgets"
    xmlns:gap   = "http://phonegap.com/ns/1.0"
    id          = "com.phonegap.example"
    versionCode = "10"
    version     = "1.0.0" >

<!-- versionCode is optional and Android only -->

  <name>PhoneGap Example</name>

  <description>
      An example for phonegap build docs.
  </description>

  <author href="https://build.phonegap.com" email="support@phonegap.com">
      Hardeep Shoker
  </author>

</widget>

对于您的应用程序,您将包括常规的小部件信息(反向域ID,Android的版本和版本代码),名称,描述,作者和平台(但仅当您要指定一个平台时才使用–省略表示所有3个平台将创建应用程序。在PhoneGap Docs中可以找到比我在本文中提供的更全面的指南  。

4.实际构建

转到PhoneGap Builder网站并登录。您将看到空白的应用程序屏幕。有了结构化的zip文件,您应该知道下一步该怎么做:通过右侧的按钮将其上传。

或者,您可以将Adobe帐户连接到Github。这样做的好处是能够从您的存储库中提取信息,但这取决于您。无论如何,请单击两个大按钮之一以启动该过程。

该程序将分析您的数据,并向您显示一个屏幕,其中显示了您将要应用的详细信息。从那里开始,只需单击即可构建,即可开始工作。

重要说明:如果您已加入iOS开发人员计划  (撰写本文时价格为99美元/年)并提供了证书,则PhoneGap Builder仅可与iOS一起使用。借助该程序的软件,您实际上可以在此处自行构建应用程序。但是,我们使用PhoneGap的原因是可以一次完成全部三个操作,从而节省了时间-无需单独进行任何操作。所以,是的,您要为一堆无用的服务付费,但是如果您想在任何iProducts上使用您的应用程序,它们都会给您带来很多负担。

测试您的应用

完成应用并准备就绪后,您可以通过单击图标进行测试,以将特定的应用平台下载到您的设备上。或者,您可以导航到Android / iOS设备上应用程序的公共页面,然后从那里下载它,然后从下载文件中进行安装。如果未显示该应用程序的图标,则可能是config.xml文件中的URL错误。修复它,重新上传并重建。

如果一切正常,请测试该应用程序,试用它并逐步进行。您不必为此花费太多时间,因为毕竟这是您自己的网站。但是,如果出现问题,您需要对其进行重建,然后更新GitHub存储库中的文件,请转到PhoneGap Builder中的应用程序页面,然后单击更新代码。如果这不起作用,请尝试全部重建。

替代应用程序构建器

除了iOS的工具外,您还可以使用许多其他应用程序构建服务和插件,其中许多至少也可以免费构建Android应用程序。

AppPresser是最大,最受欢迎和据称第一个适用于WordPress的移动应用程序框架。它提供了完整的集成:在大多数应用程序构建者仅使用WordPress网站中的供稿的情况下,AppPresser允许您使用所有插件,帖子和页面。此外,一旦您对网站进行任何编辑,它就会自动更新应用程序。它还具有对电子商务的全面支持。

WP Webapp是一个WordPress插件,其功能与上述PhoneGap方法大致相同,但更容易实现,并带有一些额外的优点。您不必麻烦弄乱文件夹或编辑配置文件。Pro和Enterprise还有另外两个级别,它们提供一键安装,启动屏幕和最多25个网站的安装等功能。

最后,有很多人可以为您做这些。但是,由于有许多简便且负担得起的DIY方法,您实际上并不需要为基本应用程序走那条路。


有很多构建应用程序的方法,尽管乍一看似乎令人生畏,但上述方法却使其变得异常简单。只要确保您拥有一个良好的移动网站即可,好吗?现在让我来。我在这里弄错了吗?我还应该知道其他方法吗?随时在下面留下您的反馈!


微信二维码

扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答:WP主题推荐,WP网站建设,Google SEO,百度SEO,专业服务器环境搭建


需要提供WordPress主题/插件的汉化服务可以随时联系我们!另外成品WordPress网站以及半成品WordPress网站建设,海外Google SEO优化托管服务,百度SEO优化托管服务,Centos/Debian服务器WP专用环境搭建,WP缓存服务器搭建,我们都是你的首选,拥有多年WP开源程序服务经验,我们一直在坚持客户体验,没有最好,只有更好!
Mac163网站建设,需要帮助点击我!
  • 17713433920
  • 在线客户
  • 联系邮箱
  • 扫一扫,加好友

关闭搜索
购物车
回到顶部