Prototypage rapide avec WordPress : du concept au plugin
J’ai parlé de l’utilisation de WordPress comme outil de développement rapide d’applications dans un article précédent.
Mais plus je travaille longtemps avec WordPress et plus je vois de code, plus je me rends compte qu’il a à la fois un potentiel de plate-forme de prototypage rapide et de transfert de ces prototypes vers des applications entièrement développées.
Ces plugins peuvent être des applications web, des plugins, des thèmes, des sites web, peu importe. Pour les besoins de cet article, cela n’a pas d’importance. Au lieu de cela, ce qui compte, c’est que, par exemple :
- vous avez une idée de plugin,
- vous voulez voir comment cela pourrait fonctionner dans WordPress,
- vous mettez rapidement quelque chose ensemble,
- vous commencez à l’affiner.
Pour beaucoup de ceux qui s’impliquent dans un développement WordPress plus sérieux, j’ai pensé qu’il pourrait être utile de jeter un coup d’œil à quoi cela ressemble. À savoir, je vais prendre une idée pour un plugin, le prototyper, puis l’affiner en un plugin bien organisé et orienté objet.
Donc, dans la prochaine série d’articles, je vais parcourir ce processus.
Prototypage rapide avec WordPress : le concept
Bien que ce ne soit pas toujours le cas, les concepts initiaux pour, disons, un plugin proviendront d’un besoin de quelque chose que vous voudrez peut-être pour vous-même ou pour quelqu’un d’autre.
Si vous êtes comme moi, il est utile d’esquisser quelques idées initiales sur la façon dont cela pourrait fonctionner et de prendre toutes les notes nécessaires qui aideront au développement.
Mes compétences pointues en conception pour le prototype.
Bien sûr, pour d’autres, ils peuvent choisir de sauter directement dans l’IDE et de commencer à travailler sur le code. Et comme, à ce stade, il ne s’agit que d’un prototype rapide, il n’y a rien de mal à cela.
Comme vous pouvez le voir sur le croquis ci-dessus, je cherche à écrire un petit plugin qui affichera mes trois messages les plus récents dans une méta-boîte.
L’idée derrière le plugin est la suivante :
- Lorsque j’écris un article, avoir une référence facile à mes trois articles les plus récents me donnera la possibilité de créer facilement un lien vers eux lorsque je souhaite partager mon contenu sur les réseaux sociaux.
Peut-être que le but du plugin semble idiot ; peut être pas. N’oubliez pas que tout ce que vous choisissez de construire doit être bénéfique à la fois pour vous et pour votre public. Si quelqu’un d’autre ne comprend pas, c’est très bien.
Démarrer le processus
Maintenant que nous avons une idée de base en place, nous savons que nous allons avoir besoin de quelques éléments :
- Le fichier du plugin à afficher dans l’écran du plugin WordPress,
- Une meta box pour afficher les posts,
- Une requête pour récupérer les posts,
- Un moyen d’afficher un message s’il n’y a pas de messages à afficher.
Grâce à l’utilisation de quelques crochets de base et d’API WordPress, nous pouvons assembler quelque chose, hum, rapidement. Voici comment:
L’en-tête du plugin
N’oubliez pas que l’en-tête du plugin est responsable de l’affichage du contenu du plugin – c’est le titre, la description, la version et l’auteur – sur l’écran du plugin. Assurez-vous qu’il est concis, descriptif et pertinent.
<?php
/**
* Three Recent Posts
*
* @package TRP
* @author Tom McFarlin
* @copyright 2017 Tom McFarlin
* @license MIT
*
* @wordpress-plugin
* Plugin Name: Three Recent Posts
* Plugin URI: https://tommcfarlin.com/rapid-prototyping/
* Description: Displays the three mot recent posts in your post editor screen.
* Version: 0.1.0
* Author: Tom McFarlin
* Author URI: https://tommcfarlin.com
* Text Domain: three-recent-posts
* License: MIT
* License URI: http://www.gnu.org/licenses/gpl-3.0.txt
*/Une fois que cela est écrit, le plugin apparaîtra dans la zone d’administration de WordPress, mais il ne fera rien. Donnons donc au plugin des fonctionnalités réelles.
La méta-boîte
Tout d’abord, nous devons enregistrer une méta-boîte. Nous pouvons utiliser le crochet add_meta_boxes pour cela. C’est facile à définir et à câbler sur notre meta box. Prenez note des commentaires pour chacun des arguments de la méthode.
<?php
add_action( 'add_meta_boxes', 'three_recent_posts_meta_box' );
/**
* Registers the Meta Box with WordPress. Defines the ID, title, display function,
* and the post type on which it will live.
*/
function three_recent_posts_meta_box() {
add_meta_box(
'three-recent-posts', // Meta Box ID.
'Three Recent Posts', // Meta Box Title.
'three_recent_posts_display', // Function for rendering the meta box.
'post', // Post type on which this meta box will live.
'side' // Where the meta box will be displayed.
);
}Remarquez presque que nous avons une fonction chargée d’afficher les informations. Nous devons définir cela sinon WordPress tentera de déclencher une fonction qui n’existe pas et cela entraînera une erreur.
Définissons cette fonction maintenant :
<?php
/**
* If there are posts to display, renders them in the metabox. Otherwise, displays
* a note that there are no posts to display.
*/
function three_recent_posts_display() {
$query = _three_recent_posts_get();
if ($query->have_posts()) {
_three_recent_posts_show_posts( $query );
} else {
_three_recent_posts_no_posts();
}
}
Maintenant, si vous remarquez, cette fonction s’appuie sur trois fonctions différentes pour l’aider à faire son travail. Nous devons donc également définir ces fonctions. Idéalement, chacune de ces fonctions devrait avoir un objectif de fonction, mais étant donné que nous prototypons rapidement ce projet, nous pourrions avoir un peu plus de travail par fonction que d’habitude.
Interroger les publications
Tout d’abord, nous devons interroger les posts. Pour ce faire, nous allons profiter de WP_Query.
<?php
/**
* Defines a query for retrieving the three most recent posts and orders them by
* descing date (with the most recent being first).
*
* @return WP_Query $query The query for retrieving the three most recent posts.
*/
function _three_recent_posts_get() {
$args = array(
'post_type' => 'post',
'post_status' => 'publish',
'orderby' => 'date',
'order' => 'desc',
);
$query = new WP_Query( $args );
return $query;
}
Notez que nous renvoyons l’instance de l’objet de requête. Nous ferons plus avec cela momentanément.
Afficher un résultat
S’il y a des publications à afficher, nous utiliserons une fonction pour parcourir les publications que l’instance de WP_Query a trouvées et afficherons le permalien et le titre dans une liste ordonnée.
<?php
/**
* Creates the content for the meta box if there are posts to display. Creates a notice
* that up to three posts will be displayed, then links to each of the three most recent
* post.
*
* @param WP_Query $query The query that contains results to render in the display.
*/
function _three_recent_posts_show_posts( $query) {
// There may not always be three posts, so display a message explaining.
$html = '<p>';
$html .= '<span class="description">';
$html .= 'Displays up to the three most recent posts.';
$html .= '</span>';
$html .= '</p>';
// Create an ordered lists of the most recent posts.
$html .= '<ol>';
while ($query->have_posts()) {
$query->the_post();
$html .= '<li>';
$html .= '<a href="'. get_the_permalink(). '">';
$html .= get_the_title();
$html .= '</a>';
$html .= '</li>';
}
$html .= '</ol>';
echo $html;
}
Notez que cela en répertoriera jusqu’à trois, mais pas nécessairement un total de trois.
Affichage d’aucun résultat
S’il n’y a pas de résultats, nous devons afficher un message à l’utilisateur indiquant que la requête n’a trouvé aucune publication. Le code peut ressembler à ceci :
<?php
/**
* Displays a message in the meta box if there are no recent posts.
*/
function _three_recent_posts_no_posts() {
$html .= '<span class="description">';
$html .= 'There are no recent posts.';
$html .= '</span>';
echo $html;
}
Bien sûr, vous pouvez personnaliser vous-même le message pour cela.
Prototypage rapide, terminé.
À ce stade, il existe un plugin entièrement fonctionnel. Ce n’est pas sans problèmes, cependant:
- Nous mélangeons HTML avec notre PHP, ce qui entraîne un couplage plus étroit que nécessaire,
- Le HTML n’est en aucun cas nettoyé ou sécurisé,
- Il n’y a absolument aucune orientation objet pour ces fonctions, ce qui, bien que certains puissent dire que ce n’est pas nécessaire, rend cela hautement non modulaire.
Mais le but de cette série est de prendre un prototype rapide et de le déplacer vers un plugin de qualité plus professionnelle. Nous avons donc terminé la première partie et il est maintenant temps de commencer à passer à la deuxième phase.
En attendant, vous pouvez suivre le développement de ce plugin sur GitHub. Je taguerai chaque version qui correspond à un article de blog. Donc, ce message particulier peut être trouvé dans la balise 0.1.0 .
La branche master inclura également la dernière version de tout le code fusionné et la branche develop inclura le code sur lequel je travaille mais qui n’est pas complet (ni stable).
Et je commencerai à le faire dans le prochain post.
Messages de la série
- Prototypage rapide avec WordPress : du concept au plugin
- Prototypage rapide avec WordPress: analyse de concept
- Prototypage rapide: Prototyper pour coder, partie 1
- Prototypage rapide: Prototyper pour coder, partie 2
- Prototypage rapide : présentation du chargement automatique