{"id":229403,"date":"2022-11-03T12:00:00","date_gmt":"2022-11-03T09:00:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=229403"},"modified":"2022-11-09T07:03:15","modified_gmt":"2022-11-09T04:03:15","slug":"prototypage-rapide-avec-wordpress-du-concept-au-plugin","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/fr\/prototypage-rapide-avec-wordpress-du-concept-au-plugin\/","title":{"rendered":"Prototypage rapide avec WordPress\u00a0: du concept au plugin"},"content":{"rendered":"\n<p>J&rsquo;ai parl\u00e9 de l&rsquo;utilisation de WordPress comme outil de <a href=\"https:\/\/tommcfarlin.com\/rapid-application-development\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">d\u00e9veloppement rapide d&rsquo;applications<\/a> dans un article pr\u00e9c\u00e9dent.<\/p>\n<p>Mais plus je travaille longtemps avec WordPress et plus je vois de code, plus je me rends compte qu&rsquo;il a \u00e0 la fois un potentiel de plate-forme de prototypage rapide et de transfert de ces prototypes vers des applications enti\u00e8rement d\u00e9velopp\u00e9es.<\/p>\n<p>Ces plugins peuvent \u00eatre des applications web, des plugins, des th\u00e8mes, des sites web, peu importe. Pour les besoins de cet article, cela n&rsquo;a pas d&rsquo;importance. Au lieu de cela, ce qui compte, c&rsquo;est que, par exemple\u00a0:<\/p>\n<ul>\n<li>vous avez une id\u00e9e de plugin,<\/li>\n<li>vous voulez voir comment cela pourrait fonctionner dans WordPress,<\/li>\n<li>vous mettez rapidement quelque chose ensemble,<\/li>\n<li>vous commencez \u00e0 l&rsquo;affiner.<\/li>\n<\/ul>\n<p>Pour beaucoup de ceux qui s&rsquo;impliquent dans un d\u00e9veloppement WordPress plus s\u00e9rieux, j&rsquo;ai pens\u00e9 qu&rsquo;il pourrait \u00eatre utile de jeter un coup d&rsquo;\u0153il \u00e0 quoi cela ressemble. \u00c0 savoir, je vais prendre une id\u00e9e pour un plugin, le prototyper, puis l&rsquo;affiner en un plugin bien organis\u00e9 et orient\u00e9 objet.<\/p>\n<p>Donc, dans la prochaine s\u00e9rie d&rsquo;articles, je vais parcourir ce processus.<\/p>\n<h2>Prototypage rapide avec WordPress\u00a0: le concept<\/h2>\n<p>Bien que ce ne soit pas toujours le cas, les concepts initiaux pour, disons, un plugin proviendront d&rsquo;un besoin de quelque chose que vous voudrez peut-\u00eatre pour vous-m\u00eame ou pour quelqu&rsquo;un d&rsquo;autre.<\/p>\n<p>Si vous \u00eates comme moi, il est utile d&rsquo;esquisser quelques id\u00e9es initiales sur la fa\u00e7on dont cela pourrait fonctionner et de prendre toutes les notes n\u00e9cessaires qui aideront au d\u00e9veloppement.<\/p>\n<p>Mes comp\u00e9tences pointues en conception pour le prototype.<\/p>\n<p>Bien s\u00fbr, pour d&rsquo;autres, ils peuvent choisir de sauter directement dans l&rsquo;IDE et de commencer \u00e0 travailler sur le code. Et comme, \u00e0 ce stade, il ne s&rsquo;agit que d&rsquo;un prototype rapide, il n&rsquo;y a rien de mal \u00e0 cela.<\/p>\n<p>Comme vous pouvez le voir sur le croquis ci-dessus, je cherche \u00e0 \u00e9crire un petit plugin qui affichera mes trois messages les plus r\u00e9cents dans une m\u00e9ta-bo\u00eete.<\/p>\n<p>L&rsquo;id\u00e9e derri\u00e8re le plugin est la suivante :<\/p>\n<ul>\n<li>Lorsque j&rsquo;\u00e9cris un article, avoir une r\u00e9f\u00e9rence facile \u00e0 mes trois articles les plus r\u00e9cents me donnera la possibilit\u00e9 de cr\u00e9er facilement un lien vers eux lorsque je souhaite partager mon contenu sur les r\u00e9seaux sociaux.<\/li>\n<\/ul>\n<p>Peut-\u00eatre que le but du plugin semble idiot ; peut \u00eatre pas. N&rsquo;oubliez pas que tout ce que vous choisissez de construire doit \u00eatre b\u00e9n\u00e9fique \u00e0 la fois pour vous et pour votre public. Si quelqu&rsquo;un d&rsquo;autre ne comprend pas, c&rsquo;est tr\u00e8s bien.<\/p>\n<h3>D\u00e9marrer le processus<\/h3>\n<p>Maintenant que nous avons une id\u00e9e de base en place, nous savons que nous allons avoir besoin de quelques \u00e9l\u00e9ments\u00a0:<\/p>\n<ol>\n<li>Le fichier du plugin \u00e0 afficher dans l&rsquo;\u00e9cran du plugin WordPress,<\/li>\n<li>Une meta box pour afficher les posts,<\/li>\n<li>Une requ\u00eate pour r\u00e9cup\u00e9rer les posts,<\/li>\n<li>Un moyen d&rsquo;afficher un message s&rsquo;il n&rsquo;y a pas de messages \u00e0 afficher.<\/li>\n<\/ol>\n<p>Gr\u00e2ce \u00e0 l&rsquo;utilisation de quelques crochets de base et d&rsquo;API WordPress, nous pouvons assembler quelque chose, hum, rapidement. Voici comment:<\/p>\n<h4>L&rsquo;en-t\u00eate du plugin<\/h4>\n<p>N&rsquo;oubliez pas que <a href=\"https:\/\/gist.github.com\/tommcfarlin\/a78a868ff9203c1ff39365e39a2e4803#file-00-plugin-header-php\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">l&rsquo;en-t\u00eate du plugin<\/a> est responsable de l&rsquo;affichage du contenu du plugin &#8211; c&rsquo;est le titre, la description, la version et l&rsquo;auteur &#8211; sur l&rsquo;\u00e9cran du plugin. Assurez-vous qu&rsquo;il est concis, descriptif et pertinent.<\/p>\n<pre><code>&lt;?php\n\/**\n * Three Recent Posts\n *\n * @package     TRP\n * @author      Tom McFarlin\n * @copyright   2017 Tom McFarlin\n * @license     MIT\n *\n * @wordpress-plugin\n * Plugin Name: Three Recent Posts\n * Plugin URI:  https:\/\/tommcfarlin.com\/rapid-prototyping\/\n * Description: Displays the three mot recent posts in your post editor screen.\n * Version:     0.1.0\n * Author:      Tom McFarlin\n * Author URI:  https:\/\/tommcfarlin.com\n * Text Domain: three-recent-posts\n * License:     MIT\n * License URI: http:\/\/www.gnu.org\/licenses\/gpl-3.0.txt\n *\/<\/code><\/pre>\n<p>Une fois que cela est \u00e9crit, le plugin appara\u00eetra dans la zone d&rsquo;administration de WordPress, mais il ne fera rien. Donnons donc au plugin des fonctionnalit\u00e9s r\u00e9elles.<\/p>\n<h4>La m\u00e9ta-bo\u00eete<\/h4>\n<p>Tout d&rsquo;abord, nous devons enregistrer une m\u00e9ta-bo\u00eete. Nous pouvons utiliser le crochet <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/add_meta_box\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">add_meta_boxes<\/a> pour cela. C&rsquo;est facile \u00e0 d\u00e9finir et \u00e0 c\u00e2bler sur <a href=\"https:\/\/gist.github.com\/tommcfarlin\/a78a868ff9203c1ff39365e39a2e4803#file-01-register-a-meta-box-php\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">notre meta box<\/a>. Prenez note des commentaires pour chacun des arguments de la m\u00e9thode.<\/p>\n<pre><code>&lt;?php\n\nadd_action( 'add_meta_boxes', 'three_recent_posts_meta_box' );\n\/**\n * Registers the Meta Box with WordPress. Defines the ID, title, display function,\n * and the post type on which it will live.\n *\/\nfunction three_recent_posts_meta_box() {\n\n    add_meta_box(\n        'three-recent-posts',     \/\/ Meta Box ID.\n        'Three Recent Posts',     \/\/ Meta Box Title.\n        'three_recent_posts_display', \/\/ Function for rendering the meta box.\n        'post',               \/\/ Post type on which this meta box will live.\n        'side'                \/\/ Where the meta box will be displayed.\n    );\n}<\/code><\/pre>\n<p>Remarquez presque que nous avons une fonction charg\u00e9e d&rsquo;afficher les informations. Nous devons d\u00e9finir cela sinon WordPress tentera de d\u00e9clencher une fonction qui n&rsquo;existe pas et cela entra\u00eenera une erreur.<\/p>\n<p>D\u00e9finissons <a href=\"https:\/\/gist.github.com\/tommcfarlin\/a78a868ff9203c1ff39365e39a2e4803#file-02-display-recent-posts-php\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">cette fonction maintenant<\/a> :<\/p>\n<pre><code>&lt;?php\n\n\/**\n * If there are posts to display, renders them in the metabox. Otherwise, displays\n * a note that there are no posts to display.\n *\/\nfunction three_recent_posts_display() {\n\n    $query = _three_recent_posts_get();\n\n    if ($query-&gt;have_posts()) {\n        _three_recent_posts_show_posts( $query );\n    } else {\n        _three_recent_posts_no_posts();\n    }\n\n}\n<\/code><\/pre>\n<p>Maintenant, si vous remarquez, cette fonction s&rsquo;appuie sur trois fonctions diff\u00e9rentes pour l&rsquo;aider \u00e0 faire son travail. Nous devons donc \u00e9galement d\u00e9finir ces fonctions. Id\u00e9alement, chacune de ces fonctions devrait avoir un objectif de fonction, mais \u00e9tant donn\u00e9 que nous prototypons rapidement ce projet, nous pourrions avoir un peu plus de travail par fonction que d&rsquo;habitude.<\/p>\n<h5>Interroger les publications<\/h5>\n<p>Tout d&rsquo;abord, nous devons <a href=\"https:\/\/gist.github.com\/tommcfarlin\/a78a868ff9203c1ff39365e39a2e4803#file-03-query-for-recent-posts-php\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">interroger les posts<\/a>. Pour ce faire, nous allons profiter de <a href=\"https:\/\/codex.wordpress.org\/Class_Reference\/WP_Query\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">WP_Query<\/a>.<\/p>\n<pre><code>&lt;?php\n\n\/**\n * Defines a query for retrieving the three most recent posts and orders them by\n * descing date (with the most recent being first).\n *\n * @return WP_Query $query The query for retrieving the three most recent posts.\n *\/\nfunction _three_recent_posts_get() {\n\n    $args = array(\n        'post_type'   =&gt; 'post',\n        'post_status' =&gt; 'publish',\n        'orderby'     =&gt; 'date',\n        'order'       =&gt; 'desc',\n    );\n    $query = new WP_Query( $args );\n\n    return $query;\n}\n<\/code><\/pre>\n<p>Notez que nous renvoyons l&rsquo;instance de l&rsquo;objet de requ\u00eate. Nous ferons plus avec cela momentan\u00e9ment.<\/p>\n<h5>Afficher un r\u00e9sultat<\/h5>\n<p>S&rsquo;il y a des publications \u00e0 afficher, nous utiliserons une fonction pour parcourir les publications que l&rsquo;instance de WP_Query a trouv\u00e9es et afficherons <a href=\"https:\/\/gist.github.com\/tommcfarlin\/a78a868ff9203c1ff39365e39a2e4803#file-04-display-recent-posts-php\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">le permalien et le titre dans une liste ordonn\u00e9e<\/a>.<\/p>\n<pre><code>&lt;?php\n\n\/**\n * Creates the content for the meta box if there are posts to display. Creates a notice\n * that up to three posts will be displayed, then links to each of the three most recent\n * post.\n *\n * @param WP_Query $query The query that contains results to render in the display.\n *\/\nfunction _three_recent_posts_show_posts( $query) {\n\n    \/\/ There may not always be three posts, so display a message explaining.\n    $html = '&lt;p&gt;';\n        $html .= '&lt;span class=\"description\"&gt;';\n            $html .= 'Displays up to the three most recent posts.';\n        $html .= '&lt;\/span&gt;';\n    $html .= '&lt;\/p&gt;';\n\n    \/\/ Create an ordered lists of the most recent posts.\n    $html .= '&lt;ol&gt;';\n    while ($query-&gt;have_posts()) {\n        $query-&gt;the_post();\n\n        $html .= '&lt;li&gt;';\n            $html .= '&lt;a href=\"'. get_the_permalink(). '\"&gt;';\n                $html .= get_the_title();\n            $html .= '&lt;\/a&gt;';\n        $html .= '&lt;\/li&gt;';\n    }\n    $html .= '&lt;\/ol&gt;';\n\n    echo $html;\n}\n<\/code><\/pre>\n<p>Notez que cela en r\u00e9pertoriera jusqu&rsquo;\u00e0 trois, mais pas n\u00e9cessairement un total de trois.<\/p>\n<h5>Affichage d&rsquo;aucun r\u00e9sultat<\/h5>\n<p>S&rsquo;il n&rsquo;y a pas de r\u00e9sultats, nous devons afficher un message \u00e0 l&rsquo;utilisateur indiquant que la requ\u00eate n&rsquo;a trouv\u00e9 aucune publication. Le code peut ressembler <a href=\"https:\/\/gist.github.com\/tommcfarlin\/a78a868ff9203c1ff39365e39a2e4803#file-05-displaying-no-posts-php\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">\u00e0 ceci<\/a> :<\/p>\n<pre><code>&lt;?php\n\n\/**\n * Displays a message in the meta box if there are no recent posts.\n *\/\nfunction _three_recent_posts_no_posts() {\n\n    $html .= '&lt;span class=\"description\"&gt;';\n        $html .= 'There are no recent posts.';\n    $html .= '&lt;\/span&gt;';\n\n    echo $html;\n}\n<\/code><\/pre>\n<p>Bien s\u00fbr, vous pouvez personnaliser vous-m\u00eame le message pour cela.<\/p>\n<h2>Prototypage rapide, termin\u00e9.<\/h2>\n<p>\u00c0 ce stade, il existe un plugin enti\u00e8rement fonctionnel. Ce n&rsquo;est pas sans probl\u00e8mes, cependant:<\/p>\n<ol>\n<li>Nous m\u00e9langeons HTML avec notre PHP, ce qui entra\u00eene un couplage plus \u00e9troit que n\u00e9cessaire,<\/li>\n<li>Le HTML n&rsquo;est en aucun cas nettoy\u00e9 ou s\u00e9curis\u00e9,<\/li>\n<li>Il n&rsquo;y a absolument aucune orientation objet pour ces fonctions, ce qui, bien que certains puissent dire que ce n&rsquo;est pas n\u00e9cessaire, rend cela hautement non modulaire.<\/li>\n<\/ol>\n<p>Mais le but de cette s\u00e9rie est de prendre un prototype rapide et de le d\u00e9placer vers un plugin de qualit\u00e9 plus professionnelle. Nous avons donc termin\u00e9 la premi\u00e8re partie et il est maintenant temps de commencer \u00e0 passer \u00e0 la deuxi\u00e8me phase.<\/p>\n<p>En attendant, vous pouvez suivre le d\u00e9veloppement de ce plugin <a href=\"https:\/\/github.com\/tommcfarlin\/three-recent-posts\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">sur GitHub<\/a>. Je taguerai chaque version qui correspond \u00e0 un article de blog. Donc, ce message particulier peut \u00eatre trouv\u00e9 dans la balise <a href=\"https:\/\/github.com\/tommcfarlin\/three-recent-posts\/tree\/0.1.0\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">0.1.0 .<\/a><\/p>\n<p>La branche <a href=\"https:\/\/github.com\/tommcfarlin\/three-recent-posts\/tree\/master\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">master<\/a> inclura \u00e9galement la derni\u00e8re version de tout le code fusionn\u00e9 et la branche develop inclura le code sur lequel je travaille mais qui n&rsquo;est pas complet (ni stable).<\/p>\n<p>Et je commencerai \u00e0 le faire dans le prochain post.<\/p>\n<h2>Messages de la s\u00e9rie<\/h2>\n<ol>\n<li><a href=\"https:\/\/tommcfarlin.com\/rapid-prototyping\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Prototypage rapide avec WordPress\u00a0: du concept au plugin<\/a><\/li>\n<li><a href=\"https:\/\/wordpress.mediadoma.com\/fr\/prototypage-rapide-avec-wordpress-analyse-de-concept\/\" title=\"Prototypage rapide avec WordPress: analyse de concept\">Prototypage rapide avec WordPress: analyse de concept<\/a><\/li>\n<li><a href=\"https:\/\/wordpress.mediadoma.com\/fr\/prototypage-rapide-prototyper-pour-coder-partie-1\/\" title=\"Prototypage rapide: Prototyper pour coder, partie 1\">Prototypage rapide: Prototyper pour coder, partie 1<\/a><\/li>\n<li><a href=\"https:\/\/wordpress.mediadoma.com\/fr\/prototypage-rapide-prototyper-pour-coder-partie-2\/\" title=\"Prototypage rapide: Prototyper pour coder, partie 2\">Prototypage rapide: Prototyper pour coder, partie 2<\/a><\/li>\n<li><a href=\"https:\/\/wordpress.mediadoma.com\/fr\/prototypage-rapide-presentation-du-chargement-automatique\/\" title=\"Prototypage rapide\u00a0: pr\u00e9sentation du chargement automatique\">Prototypage rapide\u00a0: pr\u00e9sentation du chargement automatique<\/a><\/li>\n<\/ol>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Source d&rsquo;enregistrement:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/tommcfarlin.com\" class=\"external external_icon\">tommcfarlin.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>WordPress fonctionne \u00e0 la fois comme une plate-forme pour le prototypage rapide et pour amener ces prototypes vers des applications enti\u00e8rement d\u00e9velopp\u00e9es.<\/p>\n","protected":false},"author":1,"featured_media":223885,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[915,717,841],"tags":[1167],"class_list":["post-229403","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-autre","category-developpeur","category-tutoriels","tag-affiai-fr"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/posts\/229403","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/comments?post=229403"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/posts\/229403\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/media\/223885"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/media?parent=229403"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/categories?post=229403"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/tags?post=229403"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}