This is starter package builds SPA using WordPress.com's REST API. I build it using Ionic Framework.
This package uses Node.js. If you do not install it please use it from here.
In Ionic Framework, development commands and production commands are separate.
For the development command, start dev-server. This is equipped with function that automatically reloads the browser after detecting the change of the file such as CSS and automatically building it.
The command for development is here. Please execute in this folder which clone this repository.
$ npm run-script ionic:serve
For the production command, there is no launch of dev-server and it takes time to build. However, since the file size is greatly compressed and it is designed to operate at high speed, it is common to use this when uploading to the server.
$ npm run-script build --prod
Show your WordPress
By default, the package developer rdlabo's REST API is displayed. Let's change this to WordPress you have.
The change is very easy.
src/wp-config.ts and change the following part to the URL of WordPress you have.
14 /* WordPress.comのURL、もしくはJetPack連携しているURL */ 15 export const wordpressURL = 'rdlabo.jp';
After change/save, hitting a command will display your WordPress data.
If you run a blog using WordPress.com, please enter the URL of WordPress.com in the above URL field.
For example, at https: //en.blog.wordpress.com, please change it as follows
14 /* WordPress.comのURL、もしくはJetPack連携しているURL */ 15 export const wordpressURL = 'ja.blog.wordpress.com';
For WordPress.org (installation type)
If you are using WordPress.org there are 5 steps to prepare.
- Install and enable the plugin Jetpack by WordPress.com in WordPress
- Jetpack and WordPress.com will work together (Connect Jetpack to WordPress.com). For this work you will need an account at WordPress.com.
Debugin the Footer of the Jetpack plugin's dashboard screen. It is in the upper left corner of the lower right version notation (it is hard to understand)
- Go to the full list of available Jetpack modules on your site.
- Since there is an item called
JSON APIthe fifth from the top, please enable it
After completing the above, change the URL field to WordPress URL (unique domain available).
Changing CSS is very easy. There is an SCSS file in
src/theme/variables.scss is the Ionic default theme editing file.
Please refer to Theming your Ionic App.
src/theme/ionic-wpcom.scss is the SCSS added to build this theme.
src/pages is the theme storage place.
Since it is written in TypeScript with SPA (Single Page Application),
it may be hard to get stuck at the beginning.
But I will make the approximate composition the same folder name as WordPress official theme, so please try it.
Usage package list (partial)
With Netlify you can easily host it. I am hosting the demo now, but please use it because I write the setting.
|Build command||npm run-script build --prod|