wordpress移动_用WordPress创建移动应用的3种方法

wordpress移动

SitePoint has previously covered the topic of WordPress-powered mobile apps, however, in this article we take a deeper dive into three of the options available, discussing the pros and cons of each; App Builders, Custom Hybrid Apps and AppPresser (which I’m a co-founder of).

SitePoint 之前已经涵盖了基于WordPress的移动应用程序的主题 ，但是，在本文中，我们将更深入地探讨其中三个可用选项，并讨论每个选项的优缺点。 App Builders，Custom Hybrid Apps和AppPresser(我是他们的共同创始人)。

Over 24% of the Internet uses WordPress, and many of those folks want a mobile app.

超过24％的互联网使用WordPress，其中许多人都希望使用移动应用程序。

It makes perfect sense to use content from WordPress in the app, so that when the website is updated, the app is updated. For example, if you are an online magazine, you would want any new articles you publish to be available in the app instantly. If you make any changes to the website, you’d also want those changes to apply to the app without any extra work.

在应用程序中使用WordPress的内容是非常有意义的，因此当网站更新时，应用程序也会更新。 例如，如果您是在线杂志，则希望您发布的任何新文章都可以在应用程序中立即获得。 如果您对网站进行了任何更改，则还希望这些更改无需任何额外工作即可应用到该应用程序。

Some app builders use a third party content management system where you create your app content. If you have a WordPress website, why not use WordPress as the CMS?

一些应用程序构建器使用第三方内容管理系统来创建应用程序内容。 如果您有WordPress网站，为什么不使用WordPress作为CMS？

WordPress users are accustomed to using plugins and themes to customize their website, and these don’t always translate well to a mobile app. This presents some unique challenges when a developer is approached by a client who wants to mimic their WordPress website in a mobile app. For example, if a client uses BuddyPress to create a social network on their website, and they want a mobile app with the same experience, how can that be accomplished? What about the same situation with an event or ecommerce plugin?

WordPress用户习惯于使用插件和主题来自定义其网站，而这些插件和主题并不总是能很好地转换为移动应用程序。 当想要在移动应用中模仿其WordPress网站的客户端与开发人员联系时，这将带来一些独特的挑战。 例如，如果客户使用BuddyPress在其网站上创建社交网络，并且他们想要具有相同体验的移动应用程序，那该如何实现？ 事件或电子商务插件在相同情况下会怎样？

The technical constraints of a mobile app means that integrating website features such as WordPress plugins is often a difficult task. Luckily, there are some options available to get WordPress into a mobile app that can fit any project. Let’s take a look at three of them. For each of these methods I will cover building a mobile app with WordPress using hybrid app technology, along with PhoneGap (Narayan Prusty has also covered WordPress and PhoneGap here).

移动应用程序的技术限制意味着集成网站功能(如WordPress插件)通常是一项艰巨的任务。 幸运的是，有一些选项可以将WordPress集成到适合任何项目的移动应用程序中。 让我们看看其中的三个。 对于每种方法，我将介绍使用混合应用技术与WordPress构建移动应用以及PhoneGap的方法(Narayan Prusty在此也介绍了WordPress和PhoneGap )。

应用程式制作工具 (App Builders)

App builders allow you to create a mobile app with no coding, and very little technical expertise.

应用程序构建器使您可以创建无需编码且技术知识很少的移动应用程序。

They can work great if you don’t want to spend a lot of money, and you don’t need anything really custom. There are a variety of app builders, including Mobile Roadie, Shoutem, Good Barber, Reactor (that uses AppPresser), Telerik AppBuilder. Each one has a varying degree of WordPress support, most allow you to integrate posts and comments, but not much else.

如果您不想花很多钱，而且您不需要任何真正定制的东西，它们可以很好地工作。 有各种各样的应用程序构建器，包括Mobile Roadie ， Shoutem ， Good Barber ， Reactor (使用AppPresser)， Telerik AppBuilder 。 每个人都有不同程度的WordPress支持，大多数都允许您集成帖子和评论，但没有太多其他功能。

For example, Shoutem allows you to pull in posts by installing their plugin on your WordPress site. This lets you display your WordPress content and accept comments to your app.

例如，Shoutem允许您通过在WordPress网站上安装其插件来发布帖子。 这使您可以显示WordPress内容并接受对应用程序的评论。

This is similar for most app builders, with the exception of Reactor which allows for integration of some plugins. If you are a web developer, you can use a more advanced tool like Telerik AppBuilder, and developer APIs are available from most companies.

这与大多数应用程序构建器相似，但Reactor除外，它允许集成某些插件。 如果您是网络开发人员，则可以使用更高级的工具，例如Telerik AppBuilder，大多数公司都提供开发人员API。

优点 (Pros)

If you only need WordPress content in your app, and you are non-technical, an app builder is a great option.

如果您只需要在应用程序中使用WordPress内容，并且不是技术人员，则应用程序构建器是一个不错的选择。

App builders are probably the only option for a non-technical person who does not want to hire a developer.

对于不想雇用开发人员的非技术人员，应用程序构建者可能是唯一的选择。

缺点 (Cons)

If you need to make customizations to your app, or you want WordPress plugins in your app, an app builder is not the best option.

如果您需要对应用程序进行自定义，或者想要在应用程序中使用WordPress插件，则应用程序构建器不是最佳选择。

Let’s look at a couple of other ways to make an app with WordPress.

让我们看看使用WordPress制作应用程序的其他几种方法。

自定义混合应用程序 (A Custom Hybrid App)

The first method is creating a custom hybrid app using technology such as the Ionic Framework and the WP-API.

第一种方法是使用Ionic Framework和WP-API等技术创建自定义混合应用程序。

A traditional hybrid app uses web technology such as HTML, CSS, and JavaScript. It is then wrapped with PhoneGap to allow access to native device features, and to compile for the app stores.

传统的混合应用程序使用Web技术，例如HTML，CSS和JavaScript。 然后将其与PhoneGap封装在一起，以允许访问本机设备功能并为应用程序商店进行编译。

You can think of it like a single page web application that can access WordPress content through an API. This is where the WP-API comes in.

您可以将其视为可以通过API访问WordPress内容的单页Web应用程序。 这就是WP-API的来源。

The WP-API is a new feature that has been proposed for WordPress core. It is a JSON REST API for WordPress, which means it makes much of your content easy to use in external applications, such as a mobile app. It also allows two-way communication, such as creating posts and approving comments from the mobile app.

WP-API是针对WordPress核心提出的一项新功能。 它是WordPress的JSON REST API，这意味着它可以轻松在外部应用程序(例如移动应用程序)中使用您的大部分内容。 它还允许双向通信，例如从移动应用创建帖子和批准评论。

The WP-API makes it easy to get WordPress content into our mobile app. To use it, you just have to install and activate the WP-API plugin on your WordPress site. After activating the plugin, you can see your API data by visiting an endpoint such as http://yoursite.com/wp-json/wp/v2/posts.

WP-API可以轻松将WordPress内容添加到我们的移动应用程序中。 要使用它，您只需要在WordPress网站上安装并激活WP-API插件即可 。 激活插件后，您可以通过访问诸如http://yoursite.com/wp-json/wp/v2/posts的端点来查看API数据。

There you can see your posts in JSON, which is what we can then pull into our mobile app. For example, we can send an AJAX request to get all post data in jQuery like this:

在这里，您可以看到JSON中的帖子，然后我们可以将其放到我们的移动应用中。 例如，我们可以发送AJAX请求以获取jQuery中的所有发布数据，如下所示：

<ul id="app"></div>

  <script>
  jQuery(document).ready(function($) {
    $.get( "http://scottbolinger.com/wp-json/wp/v2/posts", function( data ) {
        $.each( data, function( i, val ) {
            $( "#app" ).append(
                '<li>' + 
                    '<h3>' +
                    val.title.rendered + 
                    '</h3>' +
                    '<p>' +
                    val.excerpt.rendered +
                    '</p>' +
                '</li>'
            );
        });
    });
  });
  </script>

If you add that code to a HTML file and load it in a web browser, you should see something like the image below. If you have the WP-API v2 plugin installed on your site, you can change the URL to your own site.

如果将代码添加到HTML文件并将其加载到Web浏览器中，则应该看到类似下图的内容。 如果您的站点上安装了WP-API v2插件 ，则可以将URL更改为自己的站点。

That’s a very simple example, to go beyond that you can use a mobile app framework such as Ionic. That will allow you to create something that looks like a mobile app much more easily. When developing a hybrid app, you can use web technologies like HTML and JavaScript to make the app. Using PhoneGap, you can wrap the app around your web code turning it into a native app for the iOS and Android app stores.

example这是一个非常简单的示例，除此之外，您还可以使用Ionic等移动应用程序框架。 这样您就可以更轻松地创建看起来像移动应用程序的内容。 开发混合应用程序时，可以使用HTML和JavaScript等网络技术来制作该应用程序。 使用PhoneGap，您可以将应用程序包装在您的Web代码周围，从而将其转换为适用于iOS和Android应用程序商店的本机应用程序。

For an in-depth article on creating a mobile app with Ionic and the WP-API, see this article or this article.

有关使用Ionic和WP-API创建移动应用程序的深入文章，请参阅本文或本文 。

这种方法的优点 (Pros of this approach)

Using this traditional hybrid mobile app approach allows you to create a fast app that allows for native transitions, caching, offline, and more. You can create an app that works entirely or partially offline, integrate multiple APIs (not just WordPress), and access device features such as the camera and push notifications.

使用这种传统的混合移动应用程序方法，您可以创建一个快速的应用程序，以实现本机转换，缓存，脱机等功能。 您可以创建一个可以完全或部分脱机工作的应用程序，集成多个API(不仅是WordPress)，还可以访问设备功能(例如摄像头和推送通知)。

这种方法的缺点 (Cons to this Approach)

This is a great way to get content into an app, but what about all the other features of WordPress, such as plugins? The WP-API is great for pulling in content like posts and pages, but it starts to get difficult if you want to do anything else.

这是将内容引入应用程序的好方法，但是WordPress的所有其他功能(例如插件)又如何呢？ WP-API非常适合拉入帖子和页面之类的内容，但是如果您想做其他事情，它就会变得越来越困难。

Many people want the plugins they use on their site to be available in the app. This is very difficult to do through the WP-API, if not impossible. For example, let’s take Gravity Forms. If you have a shortcode on your site that displays a Gravity Form, the HTML markup for the form will come through to the app. You will see the input fields and buttons, but they won’t work.

许多人希望他们在网站上使用的插件可在该应用中使用。 如果不是不可能的话，通过WP-API很难做到这一点。 例如，让我们采用重力形式。 如果您的网站上有显示“重力表格”的简码，则该表格HTML标记将通过该应用程序。 您将看到输入字段和按钮，但是它们不起作用。

This is because Gravity Forms (and most plugins) use scripts and PHP processing on the WordPress website, which are not present in the app. The result is a non-functioning form. To use a plugin like this, you would have to essentially build AJAX form processing that communicates with Gravity Forms from scratch. Although not impossible, this one feature would be very complex.

这是因为Gravity Forms(和大多数插件)使用WordPress网站上的脚本和PHP处理，但应用程序中不存在。 结果是无法正常工作的表格。 要使用这样的插件，必须从本质上构建AJAX表单处理程序，以从头开始与Gravity Forms通信。 尽管并非不可能，但这一功能将非常复杂。

One solution is to use iFrames to display the form, similar to Google Maps or YouTube. This works in some situations, but iFrames can be unreliable, and they don’t work for every plugin.

一种解决方案是使用iFrames来显示表单，类似于Google Maps或YouTube。 在某些情况下可以使用此功能，但iFrame可能不可靠，并且它们不适用于每个插件。

How can we solve this problem? Let’s look at AppPresser, which is a totally different approach.

我们如何解决这个问题？ 让我们看一下AppPresser，这是一种完全不同的方法。

AppPresser (AppPresser)

As we looked at above, you can’t get WordPress plugins and other custom functionality into a mobile app very easily.

正如我们在上面所述，您无法非常轻松地将WordPress插件和其他自定义功能添加到移动应用中。

In the Gravity Forms example, you can see that it’s not possible to process forms in our app without a lot of custom code. The same is true of many other WordPress plugins, such as ecommerce plugins, BuddyPress, bbPress, and more. Basically any plugin that does more than just display HTML won’t work in our app out of the box.

在“重力表单”示例中，您可以看到，如果没有大量自定义代码，就无法在我们的应用程序中处理表单。 许多其他WordPress插件也是如此，例如电子商务插件，BuddyPress，bbPress等。 基本上，任何不仅仅显示HTML的插件都无法在我们的应用程序中正常使用。

AppPresser is a free plugin (there is also a paid version with extra features) that solves this problem by loading your entire WordPress website in the app. That means we can use almost all WordPress plugins in the app without an issue. For many plugins, this is the only way to get them to work in the app.

AppPresser是一个免费插件 (还有带附加功能的付费版本)，可通过在应用程序中加载整个WordPress网站来解决此问题。 这意味着我们几乎可以在应用程序中使用几乎所有WordPress插件。 对于许多插件，这是使它们在应用程序中工作的唯一方法。

Let’s take the BuddyPress plugin for an example. BuddyPress is like “Facebook in a box” for WordPress. If you have a website using the social networking features of BuddyPress on it, you may want to make an app that allows the same type of social networking.

让我们以BuddyPress插件为例。 BuddyPress就像WordPress的“盒子里的Facebook”。 如果您的网站上使用BuddyPress的社交网络功能，则可能需要制作一个支持相同类型社交网络的应用程序。

Other integrations include WooCommerce, Gravity Forms, bbPress, and hundreds of other plugins.

其他集成包括WooCommerce，Gravity Forms，bbPress和数百个其他插件。

AppPresser allows you to work in WordPress to make the app, for example you can add a shortcode to a WordPress page called [app-camera] that adds a device camera when viewing the page in the app. This allows people familiar with WordPress to build an app without previous mobile development skills.

AppPresser允许您在WordPress中制作应用程序，例如，您可以在WordPress页面上添加一个短代码，称为[app-camera]，当在应用程序中查看该页面时，该设备会添加设备摄像头。 这样一来，熟悉WordPress的人就可以在没有以前的移动开发技能的情况下构建应用。

优点 (Pros)

If you want a mobile app that works the same way as your WordPress site on a budget, in my opinion AppPresser is your best bet. It is the only way to incorporate lots of different plugins without lots of custom development.

如果您希望移动应用程序在预算上与WordPress网站的工作方式相同，我认为AppPresser是最好的选择。 这是无需大量自定义开发即可合并许多不同插件的唯一方法。

缺点 (Cons)

AppPresser has limited offline functionality and device storage. If offline or speed are your main concerns, it may not be right for your project.

AppPresser具有有限的脱机功能和设备存储。 如果您主要关注脱机或速度，则可能不适合您的项目。

哪一个适合您的项目？ (Which One is Right For Your Project?)

We looked at three different ways to build a mobile app that integrates a WordPress website. Each method has pros and cons, and every project is different.

我们研究了构建集成WordPress网站的移动应用程序的三种不同方式。 每种方法都有优点和缺点，并且每个项目都是不同的。

Using an app builder may be your only option if you are non-technical, and you don’t want to pay a developer. There are app builders for almost every type of app out there, so you should be able to make something that works without spending a lot of money. However, if you want a lot of customization, or deep WordPress integration, you may be disappointed.

如果您不是技术人员，并且不想付钱给开发人员，那么使用应用程序构建器可能是您唯一的选择。 几乎每种类型的应用程序都有应用程序构建器，因此您无需花很多钱就可以制作出有用的东西。 但是，如果您需要大量自定义或深度WordPress集成，则可能会感到失望。

Creating a custom app using the WP-API and a framework such as Ionic can get you a fast, high-quality app. You can do almost anything you need to do, including building offline functionality, custom design, and almost any feature you need. If you need to integrate WordPress plugins, you basically have to build everything on your own, for example form processing with Gravity Forms. Integrating your custom code with WordPress requires thinking hard about security and will require lots of custom code.

使用WP-API和诸如Ionic之类的框架创建自定义应用程序可以为您提供快速，高质量的应用程序。 您几乎可以做任何需要做的事情，包括构建脱机功能，自定义设计以及几乎所有需要的功能。 如果需要集成WordPress插件，则基本上必须自己构建所有内容，例如使用Gravity Forms进行表单处理。 将自定义代码与WordPress集成需要认真考虑安全性，并且需要大量自定义代码。

If you are interested in an app that mimics your WordPress site, and you are using a lot of custom plugins, AppPresser may be right for you. It is a fast and affordable way to get your WordPress site into an app.

如果您对模仿您的WordPress网站的应用程序感兴趣，并且正在使用许多自定义插件，则AppPresser可能适合您。 这是一种将您的WordPress网站纳入应用程序的快速且经济的方式。

Every project has different requirements, and having three different ways to build your app will help you find the best fit each time.

每个项目都有不同的要求，采用三种不同的方式构建应用程序将帮助您每次都找到最合适的应用程序。

翻译自: https://www.sitepoint.com/3-ways-to-create-a-mobile-app-with-wordpress/

wordpress移动