The WordPress folks have been busy creating a RESTful API, and that is good because it is the way of the future. This API will be the basis for Single Page Applications (SPA).
The API could also (hand waving here) be used for communications between web services.
My interest is in the heart of the WordPress page: the posts, as seen by a visitor (the admin UI is important too, but it can wait). Traditional WordPress displays a list of posts, and you can scroll down to see more. I would prefer to see a list of excerpts, each with a ‘more’ control so you can see the whole post. I do not want to be inserting ‘Read More’ tags manually. And I want the ‘more’ button to be snappy: no page refresh needed. This becomes possible with the RESTful API. How is it done? There are a few things needed:
- Install you own WordPress. I suspect this is needed, because I am adding files to the WordPress root directory.
- Install the WP REST API plugin as instructed at http://v2.wp-api.org/
WordPress uses a single entry Facade pattern: the default route is handled by index.php. An Apache rewrite rule directs all viewing requests to index.php. For example, this post is viewed at http://blinkmonitor.com/2016/04/angular-wordpress/ .
The standard WordPress root directory looks like this:
$ ls -l /usr/share/wordpress
-rw-r--r-- 1 root root 418 Sep 24 2013 index.php
-rw-r--r-- 1 root root 5035 Oct 6 2015 wp-activate.php
drwxr-xr-x 9 root root 4096 Feb 29 14:18 wp-admin
-rw-r--r-- 1 root root 271 Jan 8 2012 wp-blog-header.php
-rw-r--r-- 1 root root 1369 Oct 3 2015 wp-comments-post.php
lrwxrwxrwx 1 root root 36 Feb 3 08:48 wp-config.php ../../../etc/wordpress/wp-config.php
-rw-r--r-- 1 root root 2853 Dec 16 04:58 wp-config-sample.php
drwxr-xr-x 6 root root 4096 Feb 29 14:18 wp-content
-rw-r--r-- 1 root root 3286 May 24 2015 wp-cron.php
drwxr-xr-x 14 root root 12288 Feb 29 14:18 wp-includes
We will create the separate web site with these files and directories:
-rw-r--r-- 1 rleir rleir 5953 Apr 14 10:48 index.html
drwxrwxr-x 2 rleir rleir 4096 Apr 14 10:44 js
drwxrwxr-x 2 rleir rleir 4096 Apr 12 15:01 img
drwxrwxr-x 2 rleir rleir 4096 Apr 12 15:01 css
The directories contain, for a start:
The WordPress dashboard will still be accessed via domain.com/wp-admin/something.php, but when you are reading posts you will be using domain.com/index.html.
The index.html contains, for a start:
<html lang="en" ng-app="ricksiteApp">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="css/app.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
More to come as I sort this out.