{"id":228829,"date":"2022-11-03T11:58:00","date_gmt":"2022-11-03T08:58:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=228829"},"modified":"2022-11-09T04:35:52","modified_gmt":"2022-11-09T01:35:52","slug":"szybkie-prototypowanie-z-wordpress-od-koncepcji-do-wtyczki","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/pl\/szybkie-prototypowanie-z-wordpress-od-koncepcji-do-wtyczki\/","title":{"rendered":"Szybkie prototypowanie z WordPress: od koncepcji do wtyczki"},"content":{"rendered":"\n<p>W poprzednim artykule m\u00f3wi\u0142em o u\u017cywaniu WordPressa jako narz\u0119dzia do <a href=\"https:\/\/tommcfarlin.com\/rapid-application-development\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">szybkiego tworzenia aplikacji .<\/a><\/p>\n<p>Ale im d\u0142u\u017cej pracuj\u0119 z WordPressem i im wi\u0119cej kodu widz\u0119, tym wi\u0119kszy jest dla mnie potencja\u0142 zar\u00f3wno jako platformy do szybkiego prototypowania, jak i przenoszenia tych prototyp\u00f3w do w pe\u0142ni opracowanych aplikacji.<\/p>\n<p>Wtyczkami tymi mog\u0105 by\u0107 aplikacje internetowe, wtyczki, motywy, strony internetowe, cokolwiek. Na potrzeby tego posta nie ma to znaczenia. Zamiast tego wa\u017cne jest, \u017ce na przyk\u0142ad:<\/p>\n<ul>\n<li>masz pomys\u0142 na wtyczk\u0119,<\/li>\n<li>chcesz zobaczy\u0107, jak to mo\u017ce dzia\u0142a\u0107 w WordPressie,<\/li>\n<li>szybko co\u015b posk\u0142adasz,<\/li>\n<li>zaczynasz go udoskonala\u0107.<\/li>\n<\/ul>\n<p>Dla wielu, kt\u00f3rzy anga\u017cuj\u0105 si\u0119 w powa\u017cniejszy rozw\u00f3j WordPressa, pomy\u015bla\u0142em, \u017ce warto przyjrze\u0107 si\u0119, jak to wygl\u0105da. Mianowicie wezm\u0119 pomys\u0142 na wtyczk\u0119, sprototypuj\u0119 go, a nast\u0119pnie dopracuj\u0119 w dobrze zorganizowan\u0105, zorientowan\u0105 obiektowo wtyczk\u0119.<\/p>\n<p>W nast\u0119pnej serii artyku\u0142\u00f3w om\u00f3wi\u0119 ten proces.<\/p>\n<h2>Szybkie prototypowanie z WordPress: koncepcja<\/h2>\n<p>Chocia\u017c nie zawsze tak jest, pocz\u0105tkowe koncepcje, powiedzmy, wtyczki wyjd\u0105 z potrzeby czego\u015b, czego mo\u017cesz chcie\u0107 dla siebie lub dla kogo\u015b innego.<\/p>\n<p>Je\u015bli jeste\u015b podobny do mnie, warto naszkicowa\u0107 kilka wst\u0119pnych pomys\u0142\u00f3w na to, jak to mo\u017ce dzia\u0142a\u0107 i zrobi\u0107 niezb\u0119dne notatki, kt\u00f3re pomog\u0105 w rozwoju.<\/p>\n<p>Moje ostre umiej\u0119tno\u015bci projektowania prototypu.<\/p>\n<p>Oczywi\u015bcie inni mog\u0105 zdecydowa\u0107 si\u0119 na przej\u015bcie od razu do IDE i rozpocz\u0119cie pracy nad kodem. A poniewa\u017c na tym etapie jest to tylko szybki prototyp, nie ma w tym nic z\u0142ego.<\/p>\n<p>Jak wida\u0107 na powy\u017cszym szkicu, chc\u0119 napisa\u0107 ma\u0142\u0105 wtyczk\u0119, kt\u00f3ra wy\u015bwietli moje trzy najnowsze posty w metaboxie.<\/p>\n<p>Idea wtyczki jest nast\u0119puj\u0105ca:<\/p>\n<ul>\n<li>Kiedy pisz\u0119 post, posiadanie \u0142atwego odniesienia do moich trzech ostatnich post\u00f3w da mi mo\u017cliwo\u015b\u0107 \u0142atwego linkowania do nich, gdy chc\u0119 udost\u0119pni\u0107 moje tre\u015bci w mediach spo\u0142eczno\u015bciowych.<\/li>\n<\/ul>\n<p>Mo\u017ce cel wtyczki wydaje si\u0119 g\u0142upi; mo\u017ce nie. Pami\u0119taj, \u017ce cokolwiek zdecydujesz si\u0119 zbudowa\u0107, powinno by\u0107 czym\u015b korzystnym zar\u00f3wno dla Ciebie, jak i Twoich odbiorc\u00f3w. Je\u015bli kto\u015b inny tego nie rozumie, to w porz\u0105dku.<\/p>\n<h3>Rozpocz\u0119cie procesu<\/h3>\n<p>Teraz, gdy mamy ju\u017c podstawowy pomys\u0142, wiemy, \u017ce b\u0119dziemy potrzebowa\u0107 kilku rzeczy:<\/p>\n<ol>\n<li>Plik wtyczki do wy\u015bwietlenia na ekranie wtyczki WordPress,<\/li>\n<li>Meta box do wy\u015bwietlania post\u00f3w,<\/li>\n<li>Zapytanie o pobranie post\u00f3w,<\/li>\n<li>Spos\u00f3b wy\u015bwietlania wiadomo\u015bci, je\u015bli nie ma post\u00f3w do wy\u015bwietlenia.<\/li>\n<\/ol>\n<p>Dzi\u0119ki zastosowaniu kilku podstawowych hook\u00f3w i interfejs\u00f3w API WordPressa mo\u017cemy co\u015b szybko z\u0142o\u017cy\u0107. Oto jak:<\/p>\n<h4>Nag\u0142\u00f3wek wtyczki<\/h4>\n<p>Pami\u0119taj, \u017ce <a href=\"https:\/\/gist.github.com\/tommcfarlin\/a78a868ff9203c1ff39365e39a2e4803#file-00-plugin-header-php\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">nag\u0142\u00f3wek wtyczki<\/a> odpowiada za wy\u015bwietlanie zawarto\u015bci wtyczki \u2013 jej tytu\u0142u, opisu, wersji i autora \u2013 na ekranie wtyczki. Upewnij si\u0119, \u017ce jest zwi\u0119z\u0142y, opisowy i na temat.<\/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>Gdy to zostanie napisane, wtyczka pojawi si\u0119 w obszarze administracyjnym WordPressa, ale w rzeczywisto\u015bci nic nie zrobi. Dajmy wi\u0119c wtyczce troch\u0119 rzeczywistej funkcjonalno\u015bci.<\/p>\n<h4>Meta Box<\/h4>\n<p>Najpierw musimy zarejestrowa\u0107 metabox. W tym celu mo\u017cemy u\u017cy\u0107 haka <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/add_meta_box\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">add_meta_boxes<\/a>. \u0141atwo jest zdefiniowa\u0107 i pod\u0142\u0105czy\u0107 do <a href=\"https:\/\/gist.github.com\/tommcfarlin\/a78a868ff9203c1ff39365e39a2e4803#file-01-register-a-meta-box-php\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">naszego metaboxa<\/a>. Zwr\u00f3\u0107 uwag\u0119 na komentarze dla ka\u017cdego z argument\u00f3w metody.<\/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>Zwr\u00f3\u0107 uwag\u0119, \u017ce mamy funkcj\u0119 odpowiedzialn\u0105 za wy\u015bwietlanie informacji. Musimy to zdefiniowa\u0107, w przeciwnym razie WordPress spr\u00f3buje uruchomi\u0107 funkcj\u0119, kt\u00f3ra nie istnieje, co spowoduje b\u0142\u0105d.<\/p>\n<p>Zdefiniujmy <a href=\"https:\/\/gist.github.com\/tommcfarlin\/a78a868ff9203c1ff39365e39a2e4803#file-02-display-recent-posts-php\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">teraz t\u0119 funkcj\u0119<\/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>Teraz, je\u015bli zauwa\u017cysz, ta funkcja opiera si\u0119 na trzech r\u00f3\u017cnych funkcjach, kt\u00f3re pomagaj\u0105 jej wykonywa\u0107 swoj\u0105 prac\u0119. Wi\u0119c musimy r\u00f3wnie\u017c zdefiniowa\u0107 te funkcje. W idealnym przypadku ka\u017cda z tych funkcji powinna mie\u0107 okre\u015blony cel, jednak bior\u0105c pod uwag\u0119, \u017ce szybko prototypujemy ten projekt, mo\u017cemy mie\u0107 troch\u0119 wi\u0119cej pracy na funkcj\u0119 ni\u017c zwykle.<\/p>\n<h5>Zapytanie o posty<\/h5>\n<p>Najpierw musimy <a href=\"https:\/\/gist.github.com\/tommcfarlin\/a78a868ff9203c1ff39365e39a2e4803#file-03-query-for-recent-posts-php\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">zapyta\u0107 o posty<\/a>. Aby to zrobi\u0107, skorzystamy z <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>Zauwa\u017c, \u017ce zwracamy instancj\u0119 obiektu zapytania. Za chwil\u0119 zrobimy z tym wi\u0119cej.<\/p>\n<h5>Wy\u015bwietlanie wyniku<\/h5>\n<p>Je\u015bli istniej\u0105 posty do wy\u015bwietlenia, u\u017cyjemy funkcji do iteracji post\u00f3w znalezionej instancji WP_Query i renderowania <a href=\"https:\/\/gist.github.com\/tommcfarlin\/a78a868ff9203c1ff39365e39a2e4803#file-04-display-recent-posts-php\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">permalinku i tytu\u0142u na uporz\u0105dkowanej li\u015bcie<\/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>Zwr\u00f3\u0107 uwag\u0119, \u017ce b\u0119dzie to lista do trzech, ale niekoniecznie w sumie do trzech.<\/p>\n<h5>Wy\u015bwietlanie braku wynik\u00f3w<\/h5>\n<p>Je\u015bli nie ma wynik\u00f3w, to musimy wy\u015bwietli\u0107 u\u017cytkownikowi komunikat, \u017ce zapytanie nie znalaz\u0142o post\u00f3w. Kod mo\u017ce wygl\u0105da\u0107 mniej wi\u0119cej <a href=\"https:\/\/gist.github.com\/tommcfarlin\/a78a868ff9203c1ff39365e39a2e4803#file-05-displaying-no-posts-php\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">tak<\/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>Oczywi\u015bcie mo\u017cesz samodzielnie dostosowa\u0107 wiadomo\u015b\u0107 do tego wszystkiego.<\/p>\n<h2>Szybkie prototypowanie, gotowe.<\/h2>\n<p>W tym momencie dost\u0119pna jest w pe\u0142ni funkcjonalna wtyczka. Nie oby\u0142o si\u0119 jednak bez problem\u00f3w:<\/p>\n<ol>\n<li>Mieszamy HTML z naszym PHP, co skutkuje \u015bci\u015blejszym sprz\u0119\u017ceniem ni\u017c to konieczne,<\/li>\n<li>HTML nie jest w \u017caden spos\u00f3b oczyszczony ani bezpieczny,<\/li>\n<li>Nie ma absolutnie \u017cadnej orientacji obiektowej dla tych funkcji, co, chocia\u017c niekt\u00f3rzy mog\u0105 twierdzi\u0107, \u017ce jest niepotrzebne, sprawia, \u017ce \u200b\u200bjest to wysoce niemodularne.<\/li>\n<\/ol>\n<p>Ale celem tej serii jest wzi\u0119cie szybkiego prototypu i przeniesienie go do bardziej profesjonalnej wtyczki. Zrobili\u015bmy wi\u0119c pierwsz\u0105 cz\u0119\u015b\u0107, a teraz nadszed\u0142 czas, aby przej\u015b\u0107 do drugiej fazy.<\/p>\n<p>W mi\u0119dzyczasie mo\u017cesz \u015bledzi\u0107 rozw\u00f3j tej wtyczki <a href=\"https:\/\/github.com\/tommcfarlin\/three-recent-posts\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">na GitHub<\/a>. Ka\u017cde wydanie, kt\u00f3re odpowiada wpisowi na blogu, b\u0119dzie oznacza\u0107 tagami. Tak wi\u0119c ten konkretny post mo\u017cna znale\u017a\u0107 w tagu <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>Ga\u0142\u0105\u017a <a href=\"https:\/\/github.com\/tommcfarlin\/three-recent-posts\/tree\/master\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">g\u0142\u00f3wna<\/a> b\u0119dzie r\u00f3wnie\u017c zawiera\u0142a najnowsz\u0105 wersj\u0119 ca\u0142ego scalonego kodu, a ga\u0142\u0105\u017a deweloperska b\u0119dzie zawiera\u0142a kod, nad kt\u00f3rym pracuj\u0119, ale nie jest kompletny (ani stabilny).<\/p>\n<p>I zaczn\u0119 to robi\u0107 w nast\u0119pnym po\u015bcie.<\/p>\n<h2>Posty z serii<\/h2>\n<ol>\n<li><a href=\"https:\/\/tommcfarlin.com\/rapid-prototyping\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Szybkie prototypowanie z WordPress: od koncepcji do wtyczki<\/a><\/li>\n<li><a href=\"https:\/\/wordpress.mediadoma.com\/pl\/szybkie-prototypowanie-z-wordpress-analiza-koncepcji\/\" title=\"Szybkie prototypowanie z WordPress: analiza koncepcji\">Szybkie prototypowanie z WordPress: analiza koncepcji<\/a><\/li>\n<li><a href=\"https:\/\/wordpress.mediadoma.com\/pl\/szybkie-prototypowanie-prototypowanie-do-kodu-czesc-1\/\" title=\"Szybkie prototypowanie: Prototypowanie do kodu, cz\u0119\u015b\u0107 1\">Szybkie prototypowanie: Prototypowanie do kodu, cz\u0119\u015b\u0107 1<\/a><\/li>\n<li><a href=\"https:\/\/wordpress.mediadoma.com\/pl\/szybkie-prototypowanie-prototypowanie-do-kodu-czesc-2\/\" title=\"Szybkie prototypowanie: Prototypowanie do kodu, cz\u0119\u015b\u0107 2\">Szybkie prototypowanie: Prototypowanie do kodu, cz\u0119\u015b\u0107 2<\/a><\/li>\n<li><a href=\"https:\/\/wordpress.mediadoma.com\/pl\/szybkie-prototypowanie-przedstawiamy-automatyczne-ladowanie\/\" title=\"Szybkie prototypowanie: Przedstawiamy automatyczne \u0142adowanie\">Szybkie prototypowanie: Przedstawiamy automatyczne \u0142adowanie<\/a><\/li>\n<\/ol>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">\u0179r\u00f3d\u0142o nagrywania:  <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 dzia\u0142a zar\u00f3wno jako platforma do szybkiego prototypowania, jak i do przenoszenia tych prototyp\u00f3w do w pe\u0142ni opracowanych aplikacji.<\/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":[721,919,845],"tags":[1169],"class_list":["post-228829","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-deweloper","category-inny","category-samouczki","tag-affiai-pl"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/posts\/228829","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/comments?post=228829"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/posts\/228829\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/media\/223885"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/media?parent=228829"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/categories?post=228829"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/tags?post=228829"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}