{"id":228827,"date":"2022-11-03T12:28:00","date_gmt":"2022-11-03T09:28:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=228827"},"modified":"2022-11-09T04:33:32","modified_gmt":"2022-11-09T01:33:32","slug":"snabb-prototyping-med-wordpress-fraan-koncept-till-plugin","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/sv\/snabb-prototyping-med-wordpress-fraan-koncept-till-plugin\/","title":{"rendered":"Snabb prototyping med WordPress: fr\u00e5n koncept till plugin"},"content":{"rendered":"\n<p>Jag har pratat om att anv\u00e4nda WordPress som ett verktyg f\u00f6r <a href=\"https:\/\/tommcfarlin.com\/rapid-application-development\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">snabb applikationsutveckling<\/a> i en tidigare artikel.<\/p>\n<p>Men ju l\u00e4ngre jag arbetar med WordPress och ju mer kod jag ser, desto st\u00f6rre potential inser jag att det har som b\u00e5de en plattform f\u00f6r snabb prototypframst\u00e4llning och att sedan ta dessa prototyper till fullt utvecklade applikationer.<\/p>\n<p>Dessa plugins kan vara webbapplikationer, plugins, teman, webbplatser, vad som helst. F\u00f6r detta inl\u00e4ggs syfte spelar det ingen roll. Det som \u00e4r viktigt \u00e4r att till exempel:<\/p>\n<ul>\n<li>du har en id\u00e9 om ett plugin,<\/li>\n<li>du vill se hur det kan fungera i WordPress,<\/li>\n<li>du s\u00e4tter snabbt ihop n\u00e5got,<\/li>\n<li>du b\u00f6rjar f\u00f6rfina det.<\/li>\n<\/ul>\n<p>F\u00f6r m\u00e5nga som engagerar sig f\u00f6r mer seri\u00f6s WordPress-utveckling t\u00e4nkte jag att det kan vara v\u00e4rt att ta en titt p\u00e5 hur det h\u00e4r ser ut. Jag ska n\u00e4mligen ta en id\u00e9 till ett plugin, prototypa det och sedan f\u00f6rfina det till ett v\u00e4lorganiserat, objektorienterat plugin.<\/p>\n<p>S\u00e5 i n\u00e4sta serie artiklar kommer jag att g\u00e5 igenom den processen.<\/p>\n<h2>Snabb prototyping med WordPress: konceptet<\/h2>\n<p>\u00c4ven om detta inte alltid \u00e4r fallet, kommer de initiala koncepten f\u00f6r, s\u00e4g, en plugin ur ett behov av n\u00e5got som du kanske vill ha f\u00f6r dig sj\u00e4lv eller f\u00f6r n\u00e5gon annan.<\/p>\n<p>Om du \u00e4r som jag, hj\u00e4lper det att skissera n\u00e5gra f\u00f6rsta id\u00e9er om hur det kan fungera och g\u00f6ra eventuella anteckningar som kan hj\u00e4lpa till i utvecklingen.<\/p>\n<p>Mina skarpa designkunskaper f\u00f6r prototypen.<\/p>\n<p>Naturligtvis, f\u00f6r andra kan de v\u00e4lja att hoppa direkt in i IDE och b\u00f6rja arbeta med koden. Och eftersom det i den h\u00e4r fasen bara \u00e4r en snabb prototyp, \u00e4r det inget fel med det.<\/p>\n<p>Som du kan se fr\u00e5n skissen ovan funderar jag p\u00e5 att skriva ett litet plugin som kommer att visa mina tre senaste inl\u00e4gg i en metabox.<\/p>\n<p>Tanken bakom pluginet \u00e4r denna:<\/p>\n<ul>\n<li>N\u00e4r jag skriver ett inl\u00e4gg, genom att l\u00e4tt referera till mina tre senaste inl\u00e4gg, kan jag enkelt l\u00e4nka till dem n\u00e4r jag vill dela mitt inneh\u00e5ll socialt.<\/li>\n<\/ul>\n<p>Kanske verkar syftet med plugin-programmet dumt; kanske inte. Kom ih\u00e5g att vad du \u00e4n v\u00e4ljer att bygga b\u00f6r vara n\u00e5got som \u00e4r f\u00f6rdelaktigt b\u00e5de f\u00f6r dig och din publik. Om n\u00e5gon annan inte f\u00f6rst\u00e5r det \u00e4r det bra.<\/p>\n<h3>Starta processen<\/h3>\n<p>Nu n\u00e4r vi har en grundl\u00e4ggande id\u00e9 p\u00e5 plats vet vi att vi kommer att beh\u00f6va n\u00e5gra saker:<\/p>\n<ol>\n<li>Plugin-filen f\u00f6r visning p\u00e5 WordPress Plugin-sk\u00e4rmen,<\/li>\n<li>En metabox f\u00f6r att visa inl\u00e4ggen,<\/li>\n<li>En fr\u00e5ga f\u00f6r att h\u00e4mta inl\u00e4ggen,<\/li>\n<li>Ett s\u00e4tt att visa ett meddelande om det inte finns n\u00e5gra inl\u00e4gg att visa.<\/li>\n<\/ol>\n<p>Genom att anv\u00e4nda n\u00e5gra grundl\u00e4ggande krokar och WordPress API:er kan vi s\u00e4tta ihop n\u00e5got, ahem, snabbt. H\u00e4r \u00e4r hur:<\/p>\n<h4>Instickshuvudet<\/h4>\n<p>Kom ih\u00e5g att <a href=\"https:\/\/gist.github.com\/tommcfarlin\/a78a868ff9203c1ff39365e39a2e4803#file-00-plugin-header-php\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">pluginhuvudet<\/a> \u00e4r ansvarigt f\u00f6r att visa inneh\u00e5llet i pluginet \u2013 dess titel, beskrivning, version och f\u00f6rfattare \u2013 p\u00e5 pluginsk\u00e4rmen. Se till att det \u00e4r kortfattat, beskrivande och rakt p\u00e5 sak.<\/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>N\u00e4r detta \u00e4r skrivet kommer pluginet att dyka upp inom WordPress administrationsomr\u00e5det, men det kommer faktiskt inte att g\u00f6ra n\u00e5gonting. S\u00e5 l\u00e5t oss ge pluginet lite faktisk funktionalitet.<\/p>\n<h4>Metaboxen<\/h4>\n<p>F\u00f6rst m\u00e5ste vi registrera en metabox. Vi kan anv\u00e4nda <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/add_meta_box\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">add_meta_boxes-<\/a> kroken f\u00f6r detta. Det \u00e4r l\u00e4tt att definiera och koppla upp p\u00e5 <a href=\"https:\/\/gist.github.com\/tommcfarlin\/a78a868ff9203c1ff39365e39a2e4803#file-01-register-a-meta-box-php\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">v\u00e5r metabox<\/a>. Notera kommentarerna f\u00f6r vart och ett av metodargumenten.<\/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>M\u00e4rker n\u00e4stan att vi har en funktion som ansvarar f\u00f6r att visa information. Vi m\u00e5ste definiera detta annars kommer WordPress att f\u00f6rs\u00f6ka aktivera en funktion som inte finns och detta kommer att resultera i ett fel.<\/p>\n<p>L\u00e5t oss definiera <a href=\"https:\/\/gist.github.com\/tommcfarlin\/a78a868ff9203c1ff39365e39a2e4803#file-02-display-recent-posts-php\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">den funktionen nu<\/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>Om du m\u00e4rker att den h\u00e4r funktionen f\u00f6rlitar sig p\u00e5 tre olika funktioner f\u00f6r att hj\u00e4lpa den att g\u00f6ra sitt arbete. S\u00e5 vi m\u00e5ste ocks\u00e5 definiera dessa funktioner. Helst b\u00f6r var och en av dessa funktioner ha ett funktionssyfte, men med tanke p\u00e5 att vi snabbt skapar prototyper f\u00f6r detta projekt kan vi ha lite mer arbete per funktion \u00e4n vanligt.<\/p>\n<h5>S\u00f6ker efter inl\u00e4gg<\/h5>\n<p>F\u00f6rst m\u00e5ste vi <a href=\"https:\/\/gist.github.com\/tommcfarlin\/a78a868ff9203c1ff39365e39a2e4803#file-03-query-for-recent-posts-php\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">fr\u00e5ga efter inl\u00e4gg<\/a>. F\u00f6r att g\u00f6ra detta kommer vi att dra f\u00f6rdel av <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>Observera att vi returnerar instansen av fr\u00e5geobjektet. Vi kommer att g\u00f6ra mer med detta ett \u00f6gonblick.<\/p>\n<h5>Visar ett resultat<\/h5>\n<p>Om det finns inl\u00e4gg att visa kommer vi att anv\u00e4nda en funktion f\u00f6r att iterera genom inl\u00e4ggen instansen av WP_Query hittade och \u00e5terge <a href=\"https:\/\/gist.github.com\/tommcfarlin\/a78a868ff9203c1ff39365e39a2e4803#file-04-display-recent-posts-php\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">permal\u00e4nken och titeln i en ordnad lista<\/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>Observera att detta kommer att lista upp till tre, men inte n\u00f6dv\u00e4ndigtvis totalt tre.<\/p>\n<h5>Visar inget resultat<\/h5>\n<p>Om det inte finns n\u00e5gra resultat m\u00e5ste vi visa ett meddelande till anv\u00e4ndaren att fr\u00e5gan inte hittade n\u00e5gra inl\u00e4gg. Koden kan se ut ungef\u00e4r <a href=\"https:\/\/gist.github.com\/tommcfarlin\/a78a868ff9203c1ff39365e39a2e4803#file-05-displaying-no-posts-php\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">s\u00e5 h\u00e4r<\/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>Naturligtvis kan du anpassa meddelandet f\u00f6r detta helt p\u00e5 egen hand.<\/p>\n<h2>Snabb prototypning, klar.<\/h2>\n<p>Vid det h\u00e4r laget finns det ett plugin med full funktionalitet. Det \u00e4r dock inte utan problem:<\/p>\n<ol>\n<li>Vi blandar HTML med v\u00e5r PHP vilket resulterar i t\u00e4tare koppling \u00e4n n\u00f6dv\u00e4ndigt,<\/li>\n<li>HTML-koden \u00e4r inte sanerad eller s\u00e4ker p\u00e5 n\u00e5got s\u00e4tt,<\/li>\n<li>Det finns absolut ingen objektorientering f\u00f6r dessa funktioner, vilket, \u00e4ven om vissa kanske h\u00e4vdar att det \u00e4r on\u00f6digt, g\u00f6r detta mycket omodul\u00e4rt.<\/li>\n<\/ol>\n<p>Men po\u00e4ngen med den h\u00e4r serien \u00e4r att ta en snabb prototyp och flytta den till ett mer professionellt plugin. S\u00e5 vi har gjort den f\u00f6rsta delen och nu \u00e4r det dags att b\u00f6rja g\u00e5 in i den andra fasen.<\/p>\n<p>Under tiden kan du f\u00f6lja utvecklingen av detta plugin <a href=\"https:\/\/github.com\/tommcfarlin\/three-recent-posts\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">p\u00e5 GitHub<\/a>. Jag kommer att tagga varje release som motsvarar ett blogginl\u00e4gg. S\u00e5 just detta inl\u00e4gg kan hittas i <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> -taggen.<\/p>\n<p>Mastergrenen <a href=\"https:\/\/github.com\/tommcfarlin\/three-recent-posts\/tree\/master\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">kommer<\/a> ocks\u00e5 att inkludera den senaste versionen av all sammanslagen kod och utvecklingsgrenen kommer att inkludera koden jag jobbar p\u00e5 men \u00e4r inte komplett (inte heller stabil).<\/p>\n<p>Och det ska jag b\u00f6rja g\u00f6ra i n\u00e4sta inl\u00e4gg.<\/p>\n<h2>Serie inl\u00e4gg<\/h2>\n<ol>\n<li><a href=\"https:\/\/tommcfarlin.com\/rapid-prototyping\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Snabb prototyping med WordPress: fr\u00e5n koncept till plugin<\/a><\/li>\n<li><a href=\"https:\/\/wordpress.mediadoma.com\/sv\/snabb-prototyping-med-wordpress-konceptanalys\/\" title=\"Snabb prototyping med WordPress: konceptanalys\">Snabb prototyping med WordPress: konceptanalys<\/a><\/li>\n<li><a href=\"https:\/\/wordpress.mediadoma.com\/sv\/rapid-prototyping-prototype-to-code-del-1\/\" title=\"Rapid Prototyping: Prototype To Code, del 1\">Rapid Prototyping: Prototype To Code, del 1<\/a><\/li>\n<li><a href=\"https:\/\/wordpress.mediadoma.com\/sv\/rapid-prototyping-prototype-to-code-del-2\/\" title=\"Rapid Prototyping: Prototype To Code, del 2\">Rapid Prototyping: Prototype To Code, del 2<\/a><\/li>\n<li><a href=\"https:\/\/wordpress.mediadoma.com\/sv\/rapid-prototyping-introduktion-av-autoloading\/\" title=\"Rapid Prototyping: Introduktion av Autoloading\">Rapid Prototyping: Introduktion av Autoloading<\/a><\/li>\n<\/ol>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Inspelningsk\u00e4lla:  <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 fungerar b\u00e5de som en plattform f\u00f6r snabb prototypframst\u00e4llning och f\u00f6r att ta dessa prototyper till fullt utvecklade applikationer.<\/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":[848,922,724],"tags":[1173],"class_list":["post-228827","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-handledningar","category-oevrig","category-utvecklaren","tag-affiai-sv"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/posts\/228827","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/comments?post=228827"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/posts\/228827\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/media\/223885"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/media?parent=228827"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/categories?post=228827"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/tags?post=228827"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}