ExpressPress
ExpressPress est une excellente application pour Node JS afin d’utiliser l’API REST de WordPress.
Installation ExpressPress
Il va falloir cloner le reposity sur Github.
|
1 |
git clone https://github.com/kadamwhite/expresspress.git |
On va installer les indépendances :
|
1 |
npm install |
Une fois installé, on va créer un fichier config.yml en ajoutant ces quelques lignes dans le dossier racine de notre projet :
|
1 2 3 |
wordpress: endpoint: 'http://www.domaine.tld/wp-json/' cacheLimit: 3600000 # 1000ms * 60s * 60m = 1hr |
Installation du plugin côté WordPress
On va faire l’installation du plugin WP REST API, on l’active. Rien de plus de ce coté la !
On commence les choses sérieuses
Pour commencer notre projet, il faut lancer l’application dans notre terminal :
|
1 |
npm start |
On peut ajouter un port, dans ce cas la :
|
1 |
PORT=8000 npm start |
J’ai choisi cette option avec le Port 8000.
En ouvrant votre naviguateur, rendez-vous sur http://localhost:3000 ( par défault ) et si on a ajouté un port, on change juste le port. Dans mon cas, je vais aller sur http://localhost:8000.
Il ne vous reste plus qu’à installer les packages pour Stylus dans votre Editeur de code préféré ( Atom ou Sublim Text pour ma part ), mais la bonne nouvelle, l’application utilise pour la mise en page et le style du célèbre Bootstrap de Twitter.
Voici la liste des éléments que vous allez avoir dans le dossier de notre projet :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
ExpressPress/ ├── bin/ │ └── www ├── middleware/ │ └── site-info.js ├── public/ │ ├── css/ │ ├── fonts/ │ ├── images/ │ ├── js/ │ └── stylus/ ├── routes/ │ ├── category.js │ ├── index.js │ ├── public-router.js │ ├── single.js │ ├── tag.js │ └── users.js ├── services/ │ ├── config.js │ ├── content-cache.js │ ├── content-service.js │ ├── archive-category.js │ ├── page-numbers.js │ ├── page-title.js │ └── wp.js ├── views/ │ ├── filters/ │ ├── layouts/ │ ├── partials/ │ ├── archive-category.tmpl │ ├── archive-tag.tmpl │ ├── error.tmpl │ ├── index.tmpl │ └── single.tmpl ├── app.js ├── config.yml ( à créer ) ├── Gruntfile.js ├── LICENSE ├── nodemon.json ├── package.json └── README.md |
Résultat
Vous pouvez modifier les fichiers dans le dossiers views pour la mise en page. J’ai fait un appel à la feuille de style de mon WP pour garder la même charte graphique.
Conclusion
Maintenant c’est à vous de jouer !
N’hésitez pas à me faire un petit tweet pour me montrer votre projet.
Auteur : K.Adam White
