{"id":229508,"date":"2022-11-03T12:01:00","date_gmt":"2022-11-03T09:01:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=229508"},"modified":"2022-11-09T08:24:39","modified_gmt":"2022-11-09T05:24:39","slug":"nopea-prototyyppien-luominen-wordpressillae-konseptista-laajennukseen","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/fi\/nopea-prototyyppien-luominen-wordpressillae-konseptista-laajennukseen\/","title":{"rendered":"Nopea prototyyppien luominen WordPressill\u00e4: konseptista laajennukseen"},"content":{"rendered":"\n<p>Olen puhunut WordPressin k\u00e4ytt\u00e4misest\u00e4 ty\u00f6kaluna <a href=\"https:\/\/tommcfarlin.com\/rapid-application-development\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">nopeaan sovellusten kehitt\u00e4miseen<\/a> aiemmassa artikkelissa.<\/p>\n<p>Mutta mit\u00e4 pidemp\u00e4\u00e4n ty\u00f6skentelen WordPressin kanssa ja mit\u00e4 enemm\u00e4n n\u00e4en koodia, sit\u00e4 enemm\u00e4n ymm\u00e4rr\u00e4n, ett\u00e4 sill\u00e4 on sek\u00e4 alustana nopeaa prototyyppi\u00e4 ett\u00e4 prototyyppien viemist\u00e4 t\u00e4ysin kehitettyihin sovelluksiin.<\/p>\n<p>N\u00e4m\u00e4 laajennukset voivat olla verkkosovelluksia, laajennuksia, teemoja, verkkosivustoja, mit\u00e4 tahansa. T\u00e4m\u00e4n postauksen kannalta sill\u00e4 ei ole v\u00e4li\u00e4. Sen sijaan t\u00e4rke\u00e4\u00e4 on, ett\u00e4 esim.<\/p>\n<ul>\n<li>sinulla on idea lis\u00e4osasta,<\/li>\n<li>haluat n\u00e4hd\u00e4, kuinka se voisi toimia WordPressiss\u00e4,<\/li>\n<li>laitat nopeasti jotain yhteen,<\/li>\n<li>alat jalostaa sit\u00e4.<\/li>\n<\/ul>\n<p>Monille, jotka ovat mukana vakavammassa WordPress-kehityksess\u00e4, ajattelin, ett\u00e4 voisi olla syyt\u00e4 katsoa, \u200b\u200bmilt\u00e4 t\u00e4m\u00e4 n\u00e4ytt\u00e4\u00e4. Nimitt\u00e4in otan idean laajennukseksi, teen sen prototyypin ja jalostan sen sitten hyvin organisoiduksi, olioliitokseksi.<\/p>\n<p>Joten seuraavassa artikkelisarjassa aion k\u00e4yd\u00e4 t\u00e4m\u00e4n prosessin l\u00e4pi.<\/p>\n<h2>Nopea prototyyppien luominen WordPressill\u00e4: konsepti<\/h2>\n<p>Vaikka n\u00e4in ei aina ole, esimerkiksi laajennuksen alkuk\u00e4sitteet syntyv\u00e4t tarpeesta jotain, mit\u00e4 saatat haluta itsellesi tai jollekin toiselle.<\/p>\n<p>Jos olet kuten min\u00e4, se auttaa hahmottamaan alustavia ideoita siit\u00e4, miten se voisi toimia, ja tehd\u00e4 tarvittavia muistiinpanoja, jotka auttavat kehityst\u00e4.<\/p>\n<p>Ter\u00e4v\u00e4 suunnittelutaitoni prototyyppiin.<\/p>\n<p>Tietenkin muut voivat halutessaan hyp\u00e4t\u00e4 suoraan IDE:hen ja alkaa ty\u00f6st\u00e4\u00e4 koodia. Ja koska t\u00e4ss\u00e4 vaiheessa se on vain nopea prototyyppi, siin\u00e4 ei ole mit\u00e4\u00e4n v\u00e4\u00e4r\u00e4\u00e4.<\/p>\n<p>Kuten yll\u00e4 olevasta luonnoksesta n\u00e4et, aion kirjoittaa pienen laajennuksen, joka n\u00e4ytt\u00e4\u00e4 kolme viimeisint\u00e4 viesti\u00e4ni metalaatikossa.<\/p>\n<p>Pluginin idea on t\u00e4m\u00e4:<\/p>\n<ul>\n<li>Kun kirjoitan viesti\u00e4, voin helposti viitata kolmeen viimeisimp\u00e4\u00e4n viestiini, jotta voin helposti linkitt\u00e4\u00e4 niihin, kun haluan jakaa sis\u00e4lt\u00f6\u00e4ni sosiaalisessa mediassa.<\/li>\n<\/ul>\n<p>Ehk\u00e4 laajennuksen tarkoitus n\u00e4ytt\u00e4\u00e4 typer\u00e4lt\u00e4; ehk\u00e4 ei. Muista, ett\u00e4 mink\u00e4 tahansa valitsemasi rakentamisen pit\u00e4isi olla jotain, josta on hy\u00f6ty\u00e4 sek\u00e4 sinulle ett\u00e4 yleis\u00f6llesi. Jos joku muu ei ymm\u00e4rr\u00e4, ei h\u00e4t\u00e4\u00e4.<\/p>\n<h3>Prosessin aloittaminen<\/h3>\n<p>Nyt kun meill\u00e4 on perusidea, tied\u00e4mme, ett\u00e4 tarvitsemme muutamia asioita:<\/p>\n<ol>\n<li>WordPress Plugin -n\u00e4yt\u00f6ss\u00e4 n\u00e4ytett\u00e4v\u00e4 laajennustiedosto,<\/li>\n<li>Metalaatikko viestien n\u00e4ytt\u00e4miseen,<\/li>\n<li>Viestien hakemista koskeva kysely,<\/li>\n<li>Tapa n\u00e4ytt\u00e4\u00e4 viesti, jos n\u00e4ytett\u00e4vi\u00e4 viestej\u00e4 ei ole.<\/li>\n<\/ol>\n<p>Muutamien peruskoukkujen ja WordPress-sovellusliittymien avulla voimme koota jotain, heh, nopeasti. N\u00e4in:<\/p>\n<h4>Plugin Header<\/h4>\n<p>Muista, <a href=\"https:\/\/gist.github.com\/tommcfarlin\/a78a868ff9203c1ff39365e39a2e4803#file-00-plugin-header-php\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">ett\u00e4 laajennuksen otsikko<\/a> vastaa laajennuksen sis\u00e4ll\u00f6n \u2013 sen otsikon, kuvauksen, version ja tekij\u00e4n \u2013 n\u00e4ytt\u00e4misest\u00e4 laajennusn\u00e4yt\u00f6ll\u00e4. Varmista, ett\u00e4 se on ytimek\u00e4s, kuvaava ja ytimek\u00e4s.<\/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>Kun t\u00e4m\u00e4 on kirjoitettu, laajennus tulee n\u00e4kyviin WordPressin hallinta-alueelle, mutta se ei tee mit\u00e4\u00e4n. Joten annetaan laajennukselle joitain todellisia toimintoja.<\/p>\n<h4>Meta Box<\/h4>\n<p>Ensin meid\u00e4n on rekister\u00f6it\u00e4v\u00e4 metalaatikko. Voimme k\u00e4ytt\u00e4\u00e4 <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/add_meta_box\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">add_meta_boxes -koukkua<\/a> t\u00e4h\u00e4n. Se on helppo m\u00e4\u00e4ritt\u00e4\u00e4 ja liitt\u00e4\u00e4 <a href=\"https:\/\/gist.github.com\/tommcfarlin\/a78a868ff9203c1ff39365e39a2e4803#file-01-register-a-meta-box-php\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">metalaatikkoomme<\/a>. Huomioi kunkin menetelm\u00e4argumentin kommentit.<\/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>Huomaa melkein, ett\u00e4 meill\u00e4 on toiminto, joka vastaa tietojen n\u00e4ytt\u00e4misest\u00e4. Meid\u00e4n on m\u00e4\u00e4ritett\u00e4v\u00e4 t\u00e4m\u00e4, muuten WordPress yritt\u00e4\u00e4 k\u00e4ynnist\u00e4\u00e4 toiminnon, jota ei ole olemassa, ja t\u00e4m\u00e4 johtaa virheeseen.<\/p>\n<p>M\u00e4\u00e4ritet\u00e4\u00e4n <a href=\"https:\/\/gist.github.com\/tommcfarlin\/a78a868ff9203c1ff39365e39a2e4803#file-02-display-recent-posts-php\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">nyt t\u00e4m\u00e4 funktio<\/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>Jos nyt huomaat, t\u00e4m\u00e4 toiminto tukeutuu kolmeen eri toimintoon, jotka auttavat sit\u00e4 suorittamaan ty\u00f6ns\u00e4. Joten meid\u00e4n on my\u00f6s m\u00e4\u00e4ritelt\u00e4v\u00e4 n\u00e4m\u00e4 toiminnot. Ihannetapauksessa jokaisella n\u00e4ist\u00e4 toiminnoista tulisi olla funktion tarkoitus, mutta koska prototyyppimme projektin nopeasti valmistuu, meill\u00e4 voi olla tavallista enemm\u00e4n ty\u00f6t\u00e4 toimintoa kohti.<\/p>\n<h5>Viestien kysely<\/h5>\n<p>Ensin meid\u00e4n on <a href=\"https:\/\/gist.github.com\/tommcfarlin\/a78a868ff9203c1ff39365e39a2e4803#file-03-query-for-recent-posts-php\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">kysytt\u00e4v\u00e4 viestej\u00e4<\/a>. T\u00e4t\u00e4 varten hy\u00f6dynn\u00e4mme <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>Huomaa, ett\u00e4 palautamme kyselyobjektin ilmentym\u00e4n. Teemme t\u00e4ll\u00e4 hetkell\u00e4 lis\u00e4\u00e4.<\/p>\n<h5>Tuloksen n\u00e4ytt\u00e4minen<\/h5>\n<p>Jos n\u00e4ytett\u00e4vi\u00e4 viestej\u00e4 on, k\u00e4yt\u00e4mme funktiota, joka toistaa l\u00f6yt\u00e4m\u00e4ns\u00e4 WP_Query-esiintym\u00e4n viestit ja hahmonnamme pysyv\u00e4n linkin <a href=\"https:\/\/gist.github.com\/tommcfarlin\/a78a868ff9203c1ff39365e39a2e4803#file-04-display-recent-posts-php\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">ja otsikon j\u00e4rjestetyss\u00e4 luettelossa<\/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>Huomaa, ett\u00e4 t\u00e4ss\u00e4 luetellaan enint\u00e4\u00e4n kolme, mutta ei v\u00e4ltt\u00e4m\u00e4tt\u00e4 kaikkia kolmea.<\/p>\n<h5>Ei tulosta<\/h5>\n<p>Jos tuloksia ei ole, meid\u00e4n on n\u00e4ytett\u00e4v\u00e4 k\u00e4ytt\u00e4j\u00e4lle viesti, ett\u00e4 kysely ei l\u00f6yt\u00e4nyt viestej\u00e4. Koodi voi n\u00e4ytt\u00e4\u00e4 <a href=\"https:\/\/gist.github.com\/tommcfarlin\/a78a868ff9203c1ff39365e39a2e4803#file-05-displaying-no-posts-php\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">t\u00e4lt\u00e4<\/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>Voit tietysti muokata viesti\u00e4 t\u00e4t\u00e4 varten itse.<\/p>\n<h2>Nopea prototyyppi, valmis.<\/h2>\n<p>T\u00e4ss\u00e4 vaiheessa on t\u00e4ysin toiminnallinen laajennus. Se ei kuitenkaan ole ilman ongelmia:<\/p>\n<ol>\n<li>Sekoitamme HTML:\u00e4\u00e4 PHP:n kanssa, mik\u00e4 johtaa tarpeettoman tiiviimp\u00e4\u00e4n kytkent\u00e4\u00e4n,<\/li>\n<li>HTML ei ole desinfioitu tai turvallinen mill\u00e4\u00e4n tavalla,<\/li>\n<li>N\u00e4ill\u00e4 funktioilla ei ole mink\u00e4\u00e4nlaista oliosuuntausta, mik\u00e4, vaikka jotkut saattavat v\u00e4itt\u00e4\u00e4 olevan tarpeetonta, tekee t\u00e4st\u00e4 eritt\u00e4in ep\u00e4modulaarisen.<\/li>\n<\/ol>\n<p>Mutta t\u00e4m\u00e4n sarjan tarkoitus on ottaa nopea prototyyppi ja siirt\u00e4\u00e4 se ammattitason laajennukseen. Joten olemme tehneet ensimm\u00e4isen osan ja nyt on aika siirty\u00e4 toiseen vaiheeseen.<\/p>\n<p>Sill\u00e4 v\u00e4lin voit seurata t\u00e4m\u00e4n laajennuksen kehityst\u00e4 <a href=\"https:\/\/github.com\/tommcfarlin\/three-recent-posts\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">GitHubissa<\/a>. Merkitsen jokaisen julkaisun, joka vastaa blogikirjoitusta. Joten t\u00e4m\u00e4 tietty viesti l\u00f6ytyy <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> &#8211; tunnisteesta.<\/p>\n<p>P\u00e4\u00e4haara <a href=\"https:\/\/github.com\/tommcfarlin\/three-recent-posts\/tree\/master\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">sis\u00e4lt\u00e4\u00e4<\/a> my\u00f6s uusimman version kaikesta yhdistetyst\u00e4 koodista ja kehityshaara sis\u00e4lt\u00e4\u00e4 koodin, jonka parissa ty\u00f6skentelen, mutta se ei ole t\u00e4ydellinen (eik\u00e4 vakaa).<\/p>\n<p>Ja aion tehd\u00e4 sen seuraavassa postauksessa.<\/p>\n<h2>Sarjan postaukset<\/h2>\n<ol>\n<li><a href=\"https:\/\/tommcfarlin.com\/rapid-prototyping\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Nopea prototyyppien luominen WordPressill\u00e4: konseptista laajennukseen<\/a><\/li>\n<li><a href=\"https:\/\/wordpress.mediadoma.com\/fi\/nopea-prototyyppien-luominen-wordpressillae-konseptianalyysi\/\" title=\"Nopea prototyyppien luominen WordPressill\u00e4: konseptianalyysi\">Nopea prototyyppien luominen WordPressill\u00e4: konseptianalyysi<\/a><\/li>\n<li><a href=\"https:\/\/wordpress.mediadoma.com\/fi\/nopea-prototyyppi-prototype-to-code-osa-1\/\" title=\"Nopea prototyyppi: Prototype to Code, osa 1\">Nopea prototyyppi: Prototype to Code, osa 1<\/a><\/li>\n<li><a href=\"https:\/\/wordpress.mediadoma.com\/fi\/rapid-prototyping-prototype-to-code-osa-2\/\" title=\"Rapid Prototyping: Prototype to Code, osa 2\">Rapid Prototyping: Prototype to Code, osa 2<\/a><\/li>\n<li><a href=\"https:\/\/wordpress.mediadoma.com\/fi\/rapid-prototyping-esittelyssae-automaattinen-lataus\/\" title=\"Rapid Prototyping: Esittelyss\u00e4 automaattinen lataus\">Rapid Prototyping: Esittelyss\u00e4 automaattinen lataus<\/a><\/li>\n<\/ol>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">:  <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 toimii sek\u00e4 alustana nopealle prototyyppien luomiselle ett\u00e4 n\u00e4iden prototyyppien viemiselle t\u00e4ysin kehitettyihin sovelluksiin.<\/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":[719,917,843],"tags":[1166],"class_list":["post-229508","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-kehittaejae","category-muut","category-opetusohjelmia","tag-affiai-fi"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/posts\/229508","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/comments?post=229508"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/posts\/229508\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/media\/223885"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/media?parent=229508"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/categories?post=229508"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/tags?post=229508"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}