wordpress 移动端

tech2022-11-04 128

wordpress 移动端

WordPress Hybrid Client (WPHC) is an Open Source project available on GitHub that lets you easily create iOS and Android versions of your WordPress website for free.

WordPress Hybrid Client(WPHC)是GitHub上的一个开源项目，可让您轻松免费免费创建WordPress网站的iOS和Android版本。

WPHC is based on the Open Source hybrid stack Ionic SDK, Cordova, and Crosswalk .

WPHC基于开源混合堆栈Ionic SDK ， Cordova和Crosswalk 。

特征 (Features)

Push notifications

推送通知 Bookmarks (offline mode)

书签(离线模式) Google Analytics support

Google Analytics(分析)支持 Automatic content updates

自动内容更新 Social buttons

社交按钮 Accessibility (post font size)

辅助功能(后字体大小) Multi languages (English, French, Chinese)

多种语言(英语，法语，中文) Infinite scroll

无限滚动 Syntax highlighter for tech blogs

科技博客的语法荧光笔 Image cache

图像缓存 App rate

应用费率

内置WPHC (Built with WPHC)

Here are a few examples of projects built using WPHC:

以下是使用WPHC构建的项目的一些示例：

https://play.google.com/store/apps/details?id=com.shprinkinc.wordpresshybridclient

http://hiwaldorf.com/app/

安装 (Installation)

Warning: This installation works on both OS X and Linux. Windows is not supported yet.

警告：此安装在OS X和Linux上均可使用。尚不支持Windows。

First of all you’ll need to clone the project (no need to fork it):

首先，您需要克隆项目(无需分叉)：

$ git clone https://github.com/shprink/wordpress-hybrid-client.git # Open the project folder $ cd wordpress-hybrid-client # List all tags $ git tag v1.0.0 v1.1.0 v1.2.0 v1.3.0 v1.3.1 v1.4.2 # checkout the latest version available $ git checkout v1.4.2

Then, all you need to do is run the following script and wait:

然后，您需要做的就是运行以下脚本并等待：

sh ./install.sh

You can find more information on installation here.

您可以在此处找到有关安装的更多信息。

组态 (Configuration)

Now that the installation is done, you will have two config files created at the project root:

现在已经完成安装，您将在项目根目录下创建两个配置文件：

config.json for the application configuration

config.json用于应用程序配置

config.scss for the style configuration.

config.scss用于样式配置。

应用 (Application)

Most of the application behavior is configurable through the config.json file. Here is a simple view of what you can configure:

大多数应用程序行为都可以通过config.json文件进行配置。这是您可以配置的简单视图：

title

标题

api

baseUrl

baseUrl timeout

超时 maxAttempt

maxAttempt

菜单

exposeAsideWhen

暴露时间 list

清单 settings

设定

cache

快取

views

意见 forward

前锋 img

img data

数据 bookmark

书签 post

发布 syntaxHighlighter

语法Highlighter taxonomies

分类法 posts

帖子

translation

翻译

available

有空 prefered

偏爱 analytics

分析

cordova

科尔多瓦

statubar

状态栏 appRate

评估 pushNotifications

推送通知

You can find more information here.

您可以在此处找到更多信息。

样式 (Style)

You can overwrite any Ionic or WPHC Sass variables within the config.scss file. This is also the place to add any specific styles that you may require.

您可以覆盖config.scss文件中的任何Ionic或WPHC Sass变量。这也是添加您可能需要的任何特定样式的地方。

You can find more information here.

您可以在此处找到更多信息。

网络服务 (Web Service)

Install this plugin https://wordpress.org/plugins/json-rest-api/ and activate it, then modify config.json:

安装此插件https://wordpress.org/plugins/json-rest-api/并激活它，然后修改config.json ：

"api": { "baseUrl": "http://YourDomain.com/wp-json" },

Now your web service is ready to be queried.

现在，可以查询您的Web服务了。

推送通知 (Push Notifications)

Install this plugin https://wordpress.org/plugins/push-notifications-for-wp/ and activate it, then modify config.json accordingly. If you do not want push notifications enabled, set "enabled": false and skip this section.

安装此插件https://wordpress.org/plugins/push-notifications-for-wp/并激活它，然后相应地修改config.json 。如果您不希望启用推送通知，请设置"enabled": false并跳过此部分。

"pushNotifications": { "enabled": true, "baseUrl" : "http://yourDomain.com/pnfw", "android": { "senderID": "" }, "ios": { "badge": true, "sound": true, "alert": true } }

安卓系统 (Android)

If you have not already done so, you will need to set up a Google API project, to generate your senderID. Follow these steps to do so.

如果尚未这样做，则需要设置一个Google API项目，以生成senderID。请按照以下步骤操作。

Get your senderID by following the Cloud messaging steps at https://developers.google.com/mobile/add.

按照https://developers.google.com/mobile/add上的Cloud消息传递步骤获取您的senderID。

Tip: the senderID is a 12 digit number.

提示： senderID是12位数字。

Open your WordPress admin page and go to Push Notifications > Settings to check the following checkboxes:

打开您的WordPress管理页面，然后转到“ Push Notifications > Settings以选中以下复选框：

Basic Options > Send push notifications when a new post is published

基本选项>发布新帖子时发送推送通知 Basic Options > Android devices

基本选项> Android设备 Send Push Notifications for > Posts

发送>帖子的推送通知 Misc > In the Android notification payload add the message field

杂项>在Android通知有效负载中添加消息字段

Then go to ‘Android Push Notifications (via GMC)’ section and enter your Google API key.

然后转到“ Android推送通知(通过GMC)”部分并输入您的Google API密钥。

Don’t forget to save.

不要忘记保存。

的iOS (iOS)

Open your WordPress admin page and go to Push Notifications > Settings to check the following checkboxes:

打开您的WordPress管理页面，然后转到“ Push Notifications > Settings以选中以下复选框：

Basic Options > Send push notifications when a new post is published

基本选项>发布新帖子时发送推送通知 Basic Options > iOS devices

基本选项> iOS设备 Send Push Notifications for > Posts

发送>帖子的推送通知

Get .perm files and upload them in the iOS Push Notifications section.

获取.perm文件并将其上传到iOS Push Notifications部分。

You can find more information on push notifications here.

您可以在此处找到有关推送通知的更多信息。

开发(网络) (Development (Web))

Now that the installation is done, make sure the project is running properly. To do so, run the following command:

现在安装已完成，请确保项目正常运行。为此，请运行以下命令：

npm run devserver

Then open http://localhost:8080/webpack-dev-server/ and check if everything runs as expected. Every source code modification (or config) will build the project automatically and live reload the application. You will immediately see the result.

然后打开http：// localhost：8080 / webpack-dev-server /并检查一切是否按预期运行。每次修改源代码(或配置)都会自动构建项目并实时重新加载应用程序。您将立即看到结果。

构建(本机) (Build (native))

安装Cordova的平台和插件 (Install Cordova’s Platforms and Plugins)

All you need to do is to run one command and answer the questions: npm run installCordova

您所需要做的就是运行一个命令并回答以下问题： npm run installCordova

$ npm run installCordova > wordpress-hybrid-client@1.4.0 installCordova /Users/shprink/Sites/demos/wphc-1.4 > sh ./install_cordova.sh Which platforms do you want to build? (android ios):

Once you’ve selected the platforms you want to build for, the script will install all the necessary Cordova plugins.

一旦选择了要构建的平台，该脚本将安装所有必需的Cordova插件。

安卓系统 (Android)

先决条件 (Prerequisites)

Android SDK

Android SDK Ant

蚂蚁

生成并运行开发版本(未精简版，调试未打开) (Build and Run the Dev Version (non minified and debug ON))

Plug your device in if you have one (make sure your device is listed by running: $ adb devices) or let Android emulator handle it.

如果有设备，请插入设备(通过运行$ adb devices确保已列出$ adb devices )，或让Android仿真器处理它。

# Dump dev files within the www folder npm run dumpdev npm run runAndroid

Pro tip: If you want to test the minification you could also run the prod version on debug mode by using npm run dumpprod instead of npm run dumpdev

专家提示：如果要测试缩小版本，还可以通过使用npm run dumpprod而不是npm run dumpdev在调试模式下运行prod版本

的iOS (iOS)

先决条件 (Prerequisites)

OS X

OS X Xcode

Xcode Provisioning profile

供应配置文件 iOS Simulator

iOS模拟器 sudo npm install -g ios-sim npm install ios-deploy

生成并运行开发版本(未精简版，调试未打开) (Build and Run the Dev Version (non minified and debug ON))

Plug in your device if you have one or let the iOS simulator handle it.

如果您有设备，请插入设备，或让iOS模拟器处理。

# Dump dev files within the www folder npm run dumpdev npm run runIOS

Pro tip: If you want to test the minification you could also run the prod version on debug mode by using npm run dumpprod instead of npm run dumpdev

专家提示：如果要测试缩小版本，还可以通过使用npm run dumpprod而不是npm run dumpdev在调试模式下运行prod版本

You can find more information here.

您可以在此处找到更多信息。

释放 (Release)

Make sure you have iOS and/or Android platforms installed. If you’ve correctly run npm run installCordova it should be fine.

确保您已安装iOS和/或Android平台。如果您已正确运行npm run installCordova 。

安卓系统 (Android)

获取并保存许可证密钥 (Get and Save the Licence Key)

https://support.google.com/googleplay/android-developer/answer/186113?hl=en

https://support.google.com/googleplay/android-developer/answer/186113?hl=zh_CN

Copy and paste the key within your ~/.ssh folder with that name android_wphc.keystore

将密钥复制并粘贴到您的~/.ssh文件夹中，并命名为android_wphc.keystore

NB: You can put the key wherever you want and even rename it. But if you do that, you will need to modify release.sh accordingly.

注意：您可以将密钥放在任意位置，甚至可以重命名。但是，如果这样做，则需要相应地修改release.sh 。

生成PROD APK (Build PROD APKs)

npm run build

Then, follow the prompts.

然后，按照提示进行操作。

的iOS (iOS)

文献资料 (Documentation)

Building for iOS can be painful if you have not read the following documentation first:

如果您没有先阅读以下文档，则iOS版的构建可能会很痛苦：

https://developer.apple.com/programs/ios/gettingstarted/

https://developer.apple.com/library/mac/documentation/LanguagesUtilities/Conceptual/iTunesConnect_Guide/Chapters/CreatingiTunesConnectRecord.html#//apple_ref/doc/uid/TP40011225-CH13

http://codewithchris.com/submit-your-app-to-the-app-store/

叹气 (Install sigh)

‘Sigh’ allows us to sign .app’s with a provisioning file via the terminal.

通过“叹气”，我们可以通过终端使用配置文件对.app进行签名。

# https://github.com/KrauseFx/sigh sudo gem install sigh

建立PROD IPA (Build PROD IPA)

npm run build

Again, follow the prompts.

再次，按照提示进行操作。

You can find more information here.

您可以在此处找到更多信息。

结论 (Conclusion)

By now you should have a running application of your WordPress website. If you like this project, you can contribute (there are many great features coming), follow the blog or even chat with us!

现在，您应该已经拥有WordPress网站的正在运行的应用程序。如果您喜欢这个项目，则可以做出贡献 (即将推出许多强大的功能)，关注博客甚至与我们聊天！

Also if your application is available on stores, feel free to share it with us, we will promote it in our “Built with WPHC” section!

另外，如果您的应用程序在商店有售，请随时与我们共享，我们将在“与WPHC结合使用”部分中进行推广！

If WPHC isn’t exactly what you’re looking for, here’s a list of my favorite paid services:

如果WPHC并非您所需要的，那么这里是我最喜欢的付费服务的列表：

http://reactorapps.io

http://www.mobiloud.com

http://ideapress.me/

翻译自: https://www.sitepoint.com/wordpress-hybrid-client-wordpress-powered-ios-android-apps/

wordpress 移动端

相关资源：手机插件WordPress Mobile Pack1.2.2汉化包 for WordPress.zip

最新回复(0)