{"id":229766,"date":"2022-11-03T12:40:00","date_gmt":"2022-11-03T09:40:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=229766"},"modified":"2022-11-09T16:27:59","modified_gmt":"2022-11-09T13:27:59","slug":"prototipazione-rapida-con-wordpress-dal-concetto-al-plug-in","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/it\/prototipazione-rapida-con-wordpress-dal-concetto-al-plug-in\/","title":{"rendered":"Prototipazione rapida con WordPress: dal concetto al plug-in"},"content":{"rendered":"\n<p>Ho parlato dell&#8217;utilizzo di WordPress come strumento per <a href=\"https:\/\/tommcfarlin.com\/rapid-application-development\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">lo sviluppo rapido di applicazioni<\/a> in un articolo precedente.<\/p>\n<p>Ma pi\u00f9 a lungo lavoro con WordPress e pi\u00f9 codice vedo, maggiore \u00e8 il potenziale che ha sia come piattaforma per la prototipazione rapida che per portare quei prototipi ad applicazioni completamente sviluppate.<\/p>\n<p>Questi plugin possono essere applicazioni web, plugin, temi, siti web, qualunque cosa. Ai fini di questo post, non importa. Quello che invece importa \u00e8 che ad esempio:<\/p>\n<ul>\n<li>hai un&#8217;idea per un plugin,<\/li>\n<li>vuoi vedere come potrebbe funzionare all&#8217;interno di WordPress,<\/li>\n<li>metti insieme qualcosa velocemente,<\/li>\n<li>inizi a perfezionarlo.<\/li>\n<\/ul>\n<p>Per molti che si stanno impegnando per uno sviluppo pi\u00f9 serio di WordPress, ho pensato che valesse la pena dare un&#8217;occhiata a come appare. Vale a dire, prender\u00f2 un&#8217;idea per un plug-in, lo prototiporr\u00f2 e poi lo perfezioner\u00f2 in un plug-in ben organizzato e orientato agli oggetti.<\/p>\n<p>Quindi, nella prossima serie di articoli, analizzer\u00f2 questo processo.<\/p>\n<h2>Prototipazione rapida con WordPress: il concetto<\/h2>\n<p>Anche se questo non \u00e8 sempre il caso, i concetti iniziali per, diciamo, un plug-in verranno fuori dal bisogno di qualcosa che potresti desiderare per te stesso o per qualcun altro.<\/p>\n<p>Se sei come me, aiuta a abbozzare alcune idee iniziali su come potrebbe funzionare e prendere tutte le note necessarie che aiuteranno nello sviluppo.<\/p>\n<p>Le mie acute capacit\u00e0 di progettazione per il prototipo.<\/p>\n<p>Naturalmente, per gli altri, possono scegliere di passare direttamente all&#8217;IDE e iniziare a lavorare sul codice. E poich\u00e9, in questa fase, \u00e8 solo un prototipo rapido, non c&#8217;\u00e8 niente di sbagliato in questo.<\/p>\n<p>Come puoi vedere dallo schizzo sopra, sto cercando di scrivere un piccolo plugin che visualizzer\u00e0 i miei tre post pi\u00f9 recenti in una meta box.<\/p>\n<p>L&#8217;idea alla base del plugin \u00e8 questa:<\/p>\n<ul>\n<li>Quando scrivo un post, avere un facile riferimento ai miei tre post pi\u00f9 recenti mi dar\u00e0 la possibilit\u00e0 di collegarmi facilmente a loro quando voglio condividere i miei contenuti sui social.<\/li>\n<\/ul>\n<p>Forse lo scopo del plugin sembra sciocco; forse no. Ricorda che qualunque cosa tu scelga di costruire dovrebbe essere qualcosa di vantaggioso sia per te che per il tuo pubblico. Se qualcun altro non lo capisce, va bene.<\/p>\n<h3>Avvio del processo<\/h3>\n<p>Ora che abbiamo un&#8217;idea di base in atto, sappiamo che avremo bisogno di alcune cose:<\/p>\n<ol>\n<li>Il file del plug-in da visualizzare nella schermata del plug-in di WordPress,<\/li>\n<li>Una meta box per visualizzare i post,<\/li>\n<li>Una query per recuperare i post,<\/li>\n<li>Un modo per visualizzare un messaggio se non ci sono post da visualizzare.<\/li>\n<\/ol>\n<p>Attraverso l&#8217;uso di alcuni hook di base e API di WordPress, possiamo mettere insieme qualcosa, ehm, rapidamente. Ecco come:<\/p>\n<h4>L&#8217;intestazione del plugin<\/h4>\n<p>Ricorda che <a href=\"https:\/\/gist.github.com\/tommcfarlin\/a78a868ff9203c1ff39365e39a2e4803#file-00-plugin-header-php\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">l&#8217;intestazione del plug-<\/a> in \u00e8 responsabile della visualizzazione del contenuto del plug-in \u2013 titolo, descrizione, versione e autore \u2013 sullo schermo del plug-in. Assicurati che sia conciso, descrittivo e al punto.<\/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>Una volta scritto, il plugin apparir\u00e0 nell&#8217;area di amministrazione di WordPress, ma in realt\u00e0 non far\u00e0 nulla. Quindi diamo al plugin alcune funzionalit\u00e0 effettive.<\/p>\n<h4>La Meta Box<\/h4>\n<p>Innanzitutto, dobbiamo registrare una meta box. Possiamo usare l&#8217; hook <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/add_meta_box\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">add_meta_boxes<\/a> per questo. \u00c8 facile da definire e cablare sulla <a href=\"https:\/\/gist.github.com\/tommcfarlin\/a78a868ff9203c1ff39365e39a2e4803#file-01-register-a-meta-box-php\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">nostra meta box<\/a>. Prendere nota dei commenti per ciascuno degli argomenti del metodo.<\/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>Si noti quasi che abbiamo una funzione responsabile della visualizzazione delle informazioni. Dobbiamo definire questo altrimenti WordPress tenter\u00e0 di attivare una funzione che non esiste e questo risulter\u00e0 in un errore.<\/p>\n<p>Definiamo <a href=\"https:\/\/gist.github.com\/tommcfarlin\/a78a868ff9203c1ff39365e39a2e4803#file-02-display-recent-posts-php\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">ora quella funzione<\/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>Ora, se noti, questa funzione si basa su tre diverse funzioni per aiutarla a fare il suo lavoro. Quindi abbiamo anche bisogno di definire quelle funzioni. Idealmente, ciascuna di queste funzioni dovrebbe avere uno scopo funzionale, tuttavia, dato che stiamo rapidamente creando prototipi di questo progetto, potremmo avere un po&#8217; pi\u00f9 di lavoro per funzione del solito.<\/p>\n<h5>Interrogazione di post<\/h5>\n<p>Per prima cosa, dobbiamo <a href=\"https:\/\/gist.github.com\/tommcfarlin\/a78a868ff9203c1ff39365e39a2e4803#file-03-query-for-recent-posts-php\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">interrogare i post<\/a>. Per fare ci\u00f2, <a href=\"https:\/\/codex.wordpress.org\/Class_Reference\/WP_Query\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">sfrutteremo 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>Si noti che si restituisce l&#8217;istanza dell&#8217;oggetto query. Faremo di pi\u00f9 con questo momentaneamente.<\/p>\n<h5>Visualizzazione di un risultato<\/h5>\n<p>Se ci sono post da visualizzare, useremo una funzione per scorrere i post trovati dall&#8217;istanza di WP_Query e renderizzare <a href=\"https:\/\/gist.github.com\/tommcfarlin\/a78a868ff9203c1ff39365e39a2e4803#file-04-display-recent-posts-php\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">il permalink e il titolo in un elenco ordinato<\/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>Nota che questo elencher\u00e0 fino a tre, ma non necessariamente un totale di tre.<\/p>\n<h5>Visualizzazione di nessun risultato<\/h5>\n<p>Se non ci sono risultati, dobbiamo mostrare un messaggio all&#8217;utente che la query non ha trovato post. Il codice potrebbe assomigliare <a href=\"https:\/\/gist.github.com\/tommcfarlin\/a78a868ff9203c1ff39365e39a2e4803#file-05-displaying-no-posts-php\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">a questo<\/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>Naturalmente, puoi personalizzare il messaggio per questo tutto da solo.<\/p>\n<h2>Prototipazione rapida, fatto.<\/h2>\n<p>A questo punto, c&#8217;\u00e8 un plug-in completamente funzionante. Non \u00e8 senza problemi, per\u00f2:<\/p>\n<ol>\n<li>Stiamo mescolando HTML con il nostro PHP che si traduce in un accoppiamento pi\u00f9 stretto del necessario,<\/li>\n<li>L&#8217;HTML non \u00e8 disinfettato o protetto in alcun modo,<\/li>\n<li>Non c&#8217;\u00e8 assolutamente alcun orientamento agli oggetti per queste funzioni che, sebbene alcuni possano ritenere non necessario, lo rende altamente non modulare.<\/li>\n<\/ol>\n<p>Ma lo scopo di questa serie \u00e8 prendere un prototipo rapido e spostarlo in un plug-in di livello pi\u00f9 professionale. Quindi abbiamo fatto la prima parte e ora \u00e8 il momento di iniziare a passare alla seconda fase.<\/p>\n<p>Nel frattempo, puoi seguire lo sviluppo di questo plugin <a href=\"https:\/\/github.com\/tommcfarlin\/three-recent-posts\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">su GitHub<\/a>. Taggher\u00f2 ogni versione che corrisponde a un post del blog. Quindi questo particolare post pu\u00f2 essere trovato nel tag <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>Il ramo <a href=\"https:\/\/github.com\/tommcfarlin\/three-recent-posts\/tree\/master\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">master<\/a> includer\u00e0 anche l&#8217;ultima versione di tutto il codice unito e il ramo di sviluppo includer\u00e0 il codice su cui sto lavorando ma non \u00e8 completo (n\u00e9 stabile).<\/p>\n<p>E inizier\u00f2 a farlo nel prossimo post.<\/p>\n<h2>Messaggi di serie<\/h2>\n<ol>\n<li><a href=\"https:\/\/tommcfarlin.com\/rapid-prototyping\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Prototipazione rapida con WordPress: dal concetto al plug-in<\/a><\/li>\n<li><a href=\"https:\/\/wordpress.mediadoma.com\/it\/prototipazione-rapida-con-wordpress-analisi-concettuale\/\" title=\"Prototipazione rapida con WordPress: analisi concettuale\">Prototipazione rapida con WordPress: analisi concettuale<\/a><\/li>\n<li><a href=\"https:\/\/wordpress.mediadoma.com\/it\/prototipazione-rapida-da-prototipazione-a-codice-parte-1\/\" title=\"Prototipazione rapida: da prototipazione a codice, parte 1\">Prototipazione rapida: da prototipazione a codice, parte 1<\/a><\/li>\n<li><a href=\"https:\/\/wordpress.mediadoma.com\/it\/prototipazione-rapida-dal-prototipo-al-codice-parte-2\/\" title=\"Prototipazione rapida: dal prototipo al codice, parte 2\">Prototipazione rapida: dal prototipo al codice, parte 2<\/a><\/li>\n<li><a href=\"https:\/\/wordpress.mediadoma.com\/it\/prototipazione-rapida-introduzione-del-caricamento-automatico\/\" title=\"Prototipazione rapida: introduzione del caricamento automatico\">Prototipazione rapida: introduzione del caricamento automatico<\/a><\/li>\n<\/ol>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Fonte di registrazione:  <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 funziona sia come piattaforma per la prototipazione rapida che per portare quei prototipi ad applicazioni completamente sviluppate.<\/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":[918,720,844],"tags":[1168],"class_list":["post-229766","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-altro","category-sviluppatore","category-tutorial","tag-affiai-it"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/posts\/229766","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/comments?post=229766"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/posts\/229766\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/media\/223885"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/media?parent=229766"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/categories?post=229766"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/tags?post=229766"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}