{"id":229102,"date":"2022-11-03T12:05:00","date_gmt":"2022-11-03T09:05:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=229102"},"modified":"2022-11-09T05:42:40","modified_gmt":"2022-11-09T02:42:40","slug":"creacion-rapida-de-prototipos-con-wordpress-del-concepto-al-complemento","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/es\/creacion-rapida-de-prototipos-con-wordpress-del-concepto-al-complemento\/","title":{"rendered":"Creaci\u00f3n r\u00e1pida de prototipos con WordPress: del concepto al complemento"},"content":{"rendered":"\n<p>Habl\u00e9 sobre el uso de WordPress como una herramienta para <a href=\"https:\/\/tommcfarlin.com\/rapid-application-development\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">el desarrollo r\u00e1pido de aplicaciones<\/a> en un art\u00edculo anterior.<\/p>\n<p>Pero cuanto m\u00e1s tiempo trabajo con WordPress y m\u00e1s c\u00f3digo veo, m\u00e1s potencial me doy cuenta de que tiene tanto como plataforma para la creaci\u00f3n r\u00e1pida de prototipos como para llevar esos prototipos a aplicaciones completamente desarrolladas.<\/p>\n<p>Estos complementos pueden ser aplicaciones web, complementos, temas, sitios web, lo que sea. Para los prop\u00f3sitos de esta publicaci\u00f3n, no importa. En cambio, lo que importa es que, por ejemplo:<\/p>\n<ul>\n<li>tienes una idea para un complemento,<\/li>\n<li>quieres ver c\u00f3mo podr\u00eda funcionar dentro de WordPress,<\/li>\n<li>r\u00e1pidamente armas algo,<\/li>\n<li>comienzas a refinarlo.<\/li>\n<\/ul>\n<p>Para muchos de los que se est\u00e1n involucrando en un desarrollo de WordPress m\u00e1s serio, pens\u00e9 que valdr\u00eda la pena echar un vistazo a c\u00f3mo se ve esto. Es decir, tomar\u00e9 una idea para un complemento, crear\u00e9 un prototipo y luego lo refinar\u00e9 hasta convertirlo en un complemento bien organizado y orientado a objetos.<\/p>\n<p>Entonces, en la pr\u00f3xima serie de art\u00edculos, voy a explicar ese proceso.<\/p>\n<h2>Creaci\u00f3n r\u00e1pida de prototipos con WordPress: el concepto<\/h2>\n<p>Aunque este no siempre es el caso, los conceptos iniciales para, digamos, un complemento surgir\u00e1n de la necesidad de algo que puede desear para usted o para otra persona.<\/p>\n<p>Si eres como yo, es \u00fatil esbozar algunas ideas iniciales sobre c\u00f3mo podr\u00eda funcionar y tomar las notas necesarias que ayudar\u00e1n en el desarrollo.<\/p>\n<p>Mis agudas habilidades de dise\u00f1o para el prototipo.<\/p>\n<p>Por supuesto, para otros, pueden optar por saltar directamente al IDE y comenzar a trabajar en el c\u00f3digo. Y dado que, en esta fase, es solo un prototipo r\u00e1pido, no hay nada de malo en eso.<\/p>\n<p>Como puede ver en el boceto anterior, estoy buscando escribir un peque\u00f1o complemento que muestre mis tres publicaciones m\u00e1s recientes en un cuadro meta.<\/p>\n<p>La idea detr\u00e1s del plugin es esta:<\/p>\n<ul>\n<li>Cuando estoy escribiendo una publicaci\u00f3n, tener una referencia f\u00e1cil a mis tres publicaciones m\u00e1s recientes me dar\u00e1 la capacidad de vincularlas f\u00e1cilmente cuando desee compartir mi contenido en las redes sociales.<\/li>\n<\/ul>\n<p>Tal vez el prop\u00f3sito del complemento parezca tonto; tal vez no. Recuerde que lo que sea que elija construir debe ser algo que sea beneficioso tanto para usted como para su audiencia. Si alguien m\u00e1s no lo entiende, est\u00e1 bien.<\/p>\n<h3>Comenzando el proceso<\/h3>\n<p>Ahora que tenemos una idea b\u00e1sica, sabemos que vamos a necesitar algunas cosas:<\/p>\n<ol>\n<li>El archivo del complemento para mostrar en la pantalla del complemento de WordPress,<\/li>\n<li>Un cuadro meta para mostrar las publicaciones,<\/li>\n<li>Una consulta para recuperar las publicaciones,<\/li>\n<li>Una forma de mostrar un mensaje si no hay publicaciones para mostrar.<\/li>\n<\/ol>\n<p>Mediante el uso de algunos ganchos b\u00e1sicos y API de WordPress, podemos armar algo, ejem, r\u00e1pidamente. As\u00ed es c\u00f3mo:<\/p>\n<h4>El encabezado del complemento<\/h4>\n<p>Recuerde que <a href=\"https:\/\/gist.github.com\/tommcfarlin\/a78a868ff9203c1ff39365e39a2e4803#file-00-plugin-header-php\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">el encabezado del complemento<\/a> es responsable de mostrar el contenido del complemento (su t\u00edtulo, descripci\u00f3n, versi\u00f3n y autor) en la pantalla del complemento. Aseg\u00farate de que sea conciso, descriptivo y directo.<\/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 vez escrito esto, el complemento aparecer\u00e1 dentro del \u00e1rea de administraci\u00f3n de WordPress, pero en realidad no har\u00e1 nada. Entonces, d\u00e9mosle al complemento alguna funcionalidad real.<\/p>\n<h4>La metacaja<\/h4>\n<p>Primero, necesitamos registrar un meta box. Podemos usar el gancho <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/add_meta_box\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">add_meta_boxes<\/a> para esto. Es f\u00e1cil de definir y conectar en <a href=\"https:\/\/gist.github.com\/tommcfarlin\/a78a868ff9203c1ff39365e39a2e4803#file-01-register-a-meta-box-php\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">nuestro cuadro meta<\/a>. Tome nota de los comentarios para cada uno de los argumentos del m\u00e9todo.<\/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>F\u00edjate casi que tenemos una funci\u00f3n encargada de mostrar informaci\u00f3n. Tenemos que definir esto, de lo contrario, WordPress intentar\u00e1 activar una funci\u00f3n que no existe y esto dar\u00e1 como resultado un error.<\/p>\n<p>Definamos <a href=\"https:\/\/gist.github.com\/tommcfarlin\/a78a868ff9203c1ff39365e39a2e4803#file-02-display-recent-posts-php\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">esa funci\u00f3n ahora<\/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>Ahora, si nota, esta funci\u00f3n se basa en tres funciones diferentes para ayudarlo a hacer su trabajo. As\u00ed que tambi\u00e9n necesitamos definir esas funciones. Idealmente, cada una de estas funciones deber\u00eda tener un prop\u00f3sito de funci\u00f3n, sin embargo, dado que estamos creando r\u00e1pidamente un prototipo de este proyecto, es posible que tengamos un poco m\u00e1s de trabajo por funci\u00f3n de lo habitual.<\/p>\n<h5>Consulta de publicaciones<\/h5>\n<p>Primero, necesitamos <a href=\"https:\/\/gist.github.com\/tommcfarlin\/a78a868ff9203c1ff39365e39a2e4803#file-03-query-for-recent-posts-php\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">consultar las publicaciones<\/a>. Para hacer esto, aprovecharemos <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>Observe que devolvemos la instancia del objeto de consulta. Haremos m\u00e1s con esto moment\u00e1neamente.<\/p>\n<h5>Mostrar un resultado<\/h5>\n<p>Si hay publicaciones para mostrar, usaremos una funci\u00f3n para recorrer las publicaciones que encontr\u00f3 la instancia de WP_Query y mostrar el enlace <a href=\"https:\/\/gist.github.com\/tommcfarlin\/a78a868ff9203c1ff39365e39a2e4803#file-04-display-recent-posts-php\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">permanente y el t\u00edtulo en una lista ordenada<\/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>Tenga en cuenta que esto enumerar\u00e1 hasta tres, pero no necesariamente un total de tres.<\/p>\n<h5>Mostrar ning\u00fan resultado<\/h5>\n<p>Si no hay resultados, debemos mostrar un mensaje al usuario de que la consulta no encontr\u00f3 publicaciones. El c\u00f3digo puede ser algo <a href=\"https:\/\/gist.github.com\/tommcfarlin\/a78a868ff9203c1ff39365e39a2e4803#file-05-displaying-no-posts-php\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">como esto<\/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>Por supuesto, puede personalizar el mensaje para esto por su cuenta.<\/p>\n<h2>Creaci\u00f3n r\u00e1pida de prototipos, listo.<\/h2>\n<p>En este punto, hay un complemento con todas las funciones. Sin embargo, no est\u00e1 exento de problemas:<\/p>\n<ol>\n<li>Estamos mezclando HTML con nuestro PHP, lo que da como resultado un acoplamiento m\u00e1s estrecho de lo necesario,<\/li>\n<li>El HTML no est\u00e1 desinfectado ni seguro de ninguna manera,<\/li>\n<li>No hay absolutamente ninguna orientaci\u00f3n a objetos para estas funciones que, aunque algunos pueden argumentar que es innecesaria, hace que esto sea muy poco modular.<\/li>\n<\/ol>\n<p>Pero el objetivo de esta serie es tomar un prototipo r\u00e1pido y moverlo a un complemento de nivel m\u00e1s profesional. As\u00ed que hemos hecho la primera parte y ahora es el momento de comenzar a pasar a la segunda fase.<\/p>\n<p>Mientras tanto, puede seguir el desarrollo de este complemento <a href=\"https:\/\/github.com\/tommcfarlin\/three-recent-posts\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">en GitHub<\/a>. Estar\u00e9 etiquetando cada lanzamiento que corresponda a una publicaci\u00f3n de blog. Entonces, esta publicaci\u00f3n en particular se puede encontrar en la etiqueta <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 rama <a href=\"https:\/\/github.com\/tommcfarlin\/three-recent-posts\/tree\/master\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">maestra<\/a> tambi\u00e9n incluir\u00e1 la \u00faltima versi\u00f3n de todo el c\u00f3digo fusionado y la rama de desarrollo incluir\u00e1 el c\u00f3digo en el que estoy trabajando pero que no est\u00e1 completo (ni es estable).<\/p>\n<p>Y empezar\u00e9 a hacerlo en el pr\u00f3ximo post.<\/p>\n<h2>Publicaciones de la serie<\/h2>\n<ol>\n<li><a href=\"https:\/\/tommcfarlin.com\/rapid-prototyping\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Creaci\u00f3n r\u00e1pida de prototipos con WordPress: del concepto al complemento<\/a><\/li>\n<li><a href=\"https:\/\/wordpress.mediadoma.com\/es\/prototipos-rapidos-con-wordpress-analisis-de-concepto\/\" title=\"Prototipos R\u00e1pidos con WordPress: An\u00e1lisis de Concepto\">Prototipos R\u00e1pidos con WordPress: An\u00e1lisis de Concepto<\/a><\/li>\n<li><a href=\"https:\/\/wordpress.mediadoma.com\/es\/creacion-rapida-de-prototipos-prototipo-a-codigo-parte-1\/\" title=\"Creaci\u00f3n r\u00e1pida de prototipos: Prototipo a c\u00f3digo, Parte 1\">Creaci\u00f3n r\u00e1pida de prototipos: Prototipo a c\u00f3digo, Parte 1<\/a><\/li>\n<li><a href=\"https:\/\/wordpress.mediadoma.com\/es\/creacion-rapida-de-prototipos-de-prototipo-a-codigo-parte-2\/\" title=\"Creaci\u00f3n r\u00e1pida de prototipos: de prototipo a c\u00f3digo, parte 2\">Creaci\u00f3n r\u00e1pida de prototipos: de prototipo a c\u00f3digo, parte 2<\/a><\/li>\n<li><a href=\"https:\/\/wordpress.mediadoma.com\/es\/creacion-rapida-de-prototipos-introduccion-a-la-carga-automatica\/\" title=\"Creaci\u00f3n r\u00e1pida de prototipos: Introducci\u00f3n a la carga autom\u00e1tica\">Creaci\u00f3n r\u00e1pida de prototipos: Introducci\u00f3n a la carga autom\u00e1tica<\/a><\/li>\n<\/ol>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Fuente de grabaci\u00f3n:  <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 funciona como una plataforma para la creaci\u00f3n r\u00e1pida de prototipos y para llevar esos prototipos a aplicaciones completamente desarrolladas.<\/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":[716,914,840],"tags":[1172],"class_list":["post-229102","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-desarrollador","category-otro","category-tutoriales","tag-affiai-es"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/posts\/229102","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/comments?post=229102"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/posts\/229102\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/media\/223885"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/media?parent=229102"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/categories?post=229102"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/tags?post=229102"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}