{"id":230736,"date":"2022-12-13T13:20:00","date_gmt":"2022-12-13T10:20:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=230736"},"modified":"2022-12-13T13:21:14","modified_gmt":"2022-12-13T10:21:14","slug":"widgets-de-wordpress-un-enfoque-orientado-a-objetos","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/es\/widgets-de-wordpress-un-enfoque-orientado-a-objetos\/","title":{"rendered":"Widgets de WordPress: un enfoque orientado a objetos"},"content":{"rendered":"\n<p>Hace a\u00f1os, cre\u00e9 <strong><a href=\"https:\/\/github.com\/tommcfarlin\/WordPress-Widget-Boilerplate\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">WordPress Widget Boilerplate<\/a><\/strong> con el objetivo de ser lo siguiente:<\/p>\n<blockquote>\n<p>Un modelo organizado y mantenible para crear widgets utilizando las mejores pr\u00e1cticas de WordPress.<\/p>\n<\/blockquote>\n<p>Desde entonces, no ha cambiado mucho con respecto a la <strong><a href=\"https:\/\/developer.wordpress.org\/themes\/functionality\/widgets\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">API de Widgets<\/a><\/strong> (que veremos m\u00e1s adelante en esta publicaci\u00f3n), pero lo que considero &quot;mejores pr\u00e1cticas&quot; ha cambiado. Adem\u00e1s, el grado en que creo que esta API es una s\u00f3lida ejemplo de introducci\u00f3n a la programaci\u00f3n orientada a objetos en WordPress es alto.<\/p>\n<p>No es porque use muchos principios orientados a objetos, no es porque use est\u00e1ndares modernos (al menos en lo que se refiere a PHP moderno), sino porque usa algunas cosas que nos ayudan a reconocer algunas, digamos, Se\u00f1ales con respecto a la programaci\u00f3n orientada a objetos en WordPress.<\/p>\n<p>Y esto es algo que no debe subestimarse: si est\u00e1 buscando ejemplos de programaci\u00f3n orientada a objetos en WordPress, busque API que la empleen.<\/p>\n<p>Adem\u00e1s, si est\u00e1 buscando formas de medir su propio nivel de evaluaci\u00f3n de una pieza de c\u00f3digo (por no hablar de una base de c\u00f3digo) para el uso de clases y algunas de las caracter\u00edsticas m\u00e1s avanzadas de OOP, \u00bfpor qu\u00e9 no tener alg\u00fan tipo de de una prueba de fuego para ver c\u00f3mo te va?<\/p>\n<\/p>\n<p>Y la API de Widgets hace precisamente eso.<\/p>\n<h2>Widgets de WordPress: una introducci\u00f3n<\/h2>\n<p>Entonces, en una serie m\u00e1s peque\u00f1a que la \u00faltima, mi objetivo es ver la API de Widgets y hacer algunas cosas:<\/p>\n<ol>\n<li>mostrarle el esqueleto b\u00e1sico de un widget y por qu\u00e9 est\u00e1 orientado a objetos,<\/li>\n<li>discuta qu\u00e9 cosas deber\u00eda poder notar y por qu\u00e9,<\/li>\n<li>primero actualice el modelo de widget directamente en este sitio y luego env\u00edelo a GitHub,<\/li>\n<li>construya un widget utilizando la API con el modelo como base para nuestro trabajo.<\/li>\n<\/ol>\n<p>Y en esta publicaci\u00f3n, vamos a comenzar con el primer punto anterior.<\/p>\n<h3>Pero primero\u2026<\/h3>\n<p>Antes de entrar en este art\u00edculo, recomiendo leer los siguientes art\u00edculos:<\/p>\n<ol>\n<li><strong><a href=\"https:\/\/wordpress.mediadoma.com\/es\/los-dos-primeros-pilares-de-la-programacion-orientada-a-objetos\/\" title=\"Dos pilares de la programaci\u00f3n orientada a objetos: Parte 1 de 2\">Dos pilares de la programaci\u00f3n orientada a objetos: Parte 1 de 2<\/a><\/strong><\/li>\n<li><strong><a href=\"https:\/\/wordpress.mediadoma.com\/es\/los-segundos-dos-pilares-de-la-programacion-orientada-a-objetos\/\" title=\"Dos pilares de la programaci\u00f3n orientada a objetos: Parte 2 de 2\">Dos pilares de la programaci\u00f3n orientada a objetos: Parte 2 de 2<\/a><\/strong><\/li>\n<li><strong><a href=\"https:\/\/wordpress.mediadoma.com\/es\/clases-abstractas-parte-1-comportamiento-de-abstraccion\/\" title=\"Clases abstractas, Parte 1: Comportamiento de abstracci\u00f3n\">Clases abstractas, Parte 1: Comportamiento de abstracci\u00f3n<\/a><\/strong><\/li>\n<li><strong><a href=\"https:\/\/wordpress.mediadoma.com\/es\/clases-abstractas-parte-2-clases-abstractas-e-interfaces\/\" title=\"Clases abstractas, Parte 2 - Clases abstractas e interfaces\">Clases abstractas, Parte 2 &#8211; Clases abstractas e interfaces<\/a><\/strong><\/li>\n<\/ol>\n<p>Una vez hecho esto (o si siente que ya domina los temas), entonces estamos listos para comenzar.<\/p>\n<p>[restringir pagado=&quot;verdadero\u00bb]<\/p>\n<h2>Los conceptos b\u00e1sicos de la API de widgets<\/h2>\n<p>Si lee la p\u00e1gina del manual sobre Widgets, ver\u00e1 una gran cantidad de contenido. Esto es algo bueno, pero no siempre es el mejor movimiento cuando se trata de destilar contenido para una audiencia como usted cuando busca consejos pr\u00e1cticos y orientados a objetos.<\/p>\n<p>As\u00ed que seleccionar\u00e9 las partes relevantes de la documentaci\u00f3n de la API y luego las aplicar\u00e9 al c\u00f3digo que tambi\u00e9n se nos proporcion\u00f3.<\/p>\n<h3>\u00bfQu\u00e9 es un widget?<\/h3>\n<p>Creo que la mayor\u00eda de los que trabajamos con WordPress sabemos qu\u00e9 es un widget, pero es importante definir el t\u00e9rmino para que todos trabajemos con la misma idea. <strong><a href=\"https:\/\/developer.wordpress.org\/themes\/functionality\/widgets\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">El manual dice:<\/a><\/strong><\/p>\n<blockquote>\n<p>Un widget es un objeto PHP que genera algo de HTML. El mismo tipo de widget se puede utilizar varias veces en la misma p\u00e1gina (por ejemplo, el widget de texto). Los widgets pueden guardar datos en la base de datos (en la tabla de opciones).<\/p>\n<\/blockquote>\n<p>Con esto en su lugar, echemos un vistazo al c\u00f3digo de un widget personalizado, al menos un trozo de \u00e9l, y veamos qu\u00e9 podemos deducir en lo que respecta a su naturaleza orientada a objetos.<\/p>\n<h3>La clase de widgets<\/h3>\n<p>Incluso antes de mirar el c\u00f3digo, sabemos que habr\u00e1 alg\u00fan nivel de programaci\u00f3n orientada a objetos simplemente porque la documentaci\u00f3n nos dice que hagamos tres cosas:<\/p>\n<ol>\n<li>Cree la clase de su widget ampliando la clase est\u00e1ndar <a href=\"https:\/\/developer.wordpress.org\/reference\/classes\/wp_widget\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">WP_Widget<\/a> y algunas de sus funciones.<\/li>\n<li>Registre su widget para que est\u00e9 disponible en la pantalla <strong>Widgets .<\/strong><\/li>\n<li>Aseg\u00farese de que su tema tenga al menos un <strong><a href=\"https:\/\/make.wordpress.org\/docs\/theme-developer-handbook\/theme-functionality\/sidebars\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">\u00e1rea de widgets<\/a><\/strong> en la que agregar los widgets.<\/li>\n<\/ol>\n<p>En esta publicaci\u00f3n, me centrar\u00e9 en el primer punto (aunque eventualmente veremos c\u00f3mo introducimos nuestros widgets en un tema antes de que termine la serie).<\/p>\n<p>Entonces, <strong><a href=\"https:\/\/gist.github.com\/tommcfarlin\/ea73655b0a022d65317529930cbb0cad#file-00-widget-base-php\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">dise\u00f1emos el c\u00f3digo<\/a><\/strong> tal como se presenta en la documentaci\u00f3n y hablemos sobre lo que podemos aprender de \u00e9l:<\/p>\n<pre><code>&lt;?php\nclass AcmeWidget extends WP_Widget \n{ \n    public function __construct() \n    {\n    }\n\n    public function widget($args, $instance) \n    {\n    }\n\n    public function form($instance)\n    {\n    }\n\n    public function update($newInstance, $oldInstance)\n    {\n    }\n}<\/code><\/pre>\n<p>Primero, notamos que aunque definimos una clase (a la que podemos nombrar como queramos, a mi manera), debe extender <strong>WP_Widget<\/strong>. Esto significa que en el n\u00facleo de WordPress hay una clase <strong>WP_Widget<\/strong>. Puede ver un desglose bien organizado del c\u00f3digo fuente en <strong><a href=\"https:\/\/developer.wordpress.org\/reference\/files\/wp-includes\/class-wp-widget.php\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">esta p\u00e1gina.<\/a><\/strong><\/p>\n<p>En segundo lugar, la palabra clave <strong>se extiende<\/strong> indica que estamos utilizando la <strong><a href=\"https:\/\/php.net\/manual\/en\/language.oop5.inheritance.php\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">herencia de PHP<\/a><\/strong>, que es un pilar fundamental de la programaci\u00f3n orientada a objetos.<\/p>\n<p>Tercero, hay cuatro funciones que debemos implementar, dos de las cuales requieren argumentos. Las funciones que debemos implementar son las siguientes:<\/p>\n<ul>\n<li><strong>__construct()<\/strong> que es el constructor de clase b\u00e1sico. Aqu\u00ed es donde tendremos que asegurarnos de que se llame al constructor de la clase principal, si lo hay, y luego inicializaremos las propiedades que consideremos necesarias para nuestro widget. Echaremos un vistazo a esto m\u00e1s adelante en la serie.<\/li>\n<li><strong>widget()<\/strong> es responsable de generar los contenidos del widget que el usuario proporciona mediante la interfaz en el \u00e1rea administrativa. Acepta dos par\u00e1metros: <strong>$args<\/strong> y <strong>$instance.<\/strong> El par\u00e1metro <strong>$args<\/strong> es la informaci\u00f3n que se representar\u00e1 en la p\u00e1gina, y <strong>$instance<\/strong> es una referencia a la instancia del widget (dado que se pueden representar varios widgets en una p\u00e1gina).<\/li>\n<li><strong>form()<\/strong> muestra la interfaz administrativa con la que interact\u00faa el usuario para guiar lo que se genera en el front-end del sitio. Tambi\u00e9n requiere el argumento <strong>$instance<\/strong> para que la informaci\u00f3n proporcionada sea para el widget real con el que est\u00e1 trabajando el usuario (frente a todas las instancias del widget).<\/li>\n<li><strong>update()<\/strong> se usa para guardar los valores en la instancia actual del widget. Acepta dos argumentos. El primero es la nueva instancia del widget con valores actualizados que el usuario ha proporcionado (piense en actualizar el valor de un widget de texto activo) y el segundo argumento es el de la instancia anterior del widget o quiz\u00e1s la instancia anterior o quiz\u00e1s \u00bb la instancia que conten\u00eda los valores anteriores.\u00bb<\/li>\n<\/ul>\n<p>Estas cuatro funciones deben implementarse como parte de la API de Widget, como parte de las funciones heredadas de la interfaz extendida y para producir la funcionalidad b\u00e1sica de un widget.<\/p>\n<p>Esto no significa que no se pueda agregar m\u00e1s, pero de una buena manera orientada a objetos, probablemente ser\u00eda mejor relegar ese comportamiento a otras clases. Pero veremos c\u00f3mo hacerlo m\u00e1s adelante en la serie cuando estemos creando nuestro propio widget.<\/p>\n<h3>\u00bfCu\u00e1les son los puntos clave?<\/h3>\n<p>Para asegurarme de que tengo claro lo que se entender\u00eda de esta publicaci\u00f3n, es lo siguiente:<\/p>\n<ul>\n<li>La API de Widgets est\u00e1 orientada a objetos. No solo est\u00e1 orientado a objetos porque usa una clase (aunque ciertamente es un buen punto de partida), sino tambi\u00e9n porque hereda la funcionalidad integrada en una clase base preexistente.<\/li>\n<li>Cada vez que heredamos el comportamiento de una clase base o una clase principal, obtenemos una funcionalidad predesarrollada de forma gratuita. Es realmente genial la programaci\u00f3n orientada a objetos porque nos permite centrarnos espec\u00edficamente en la l\u00f3gica de programaci\u00f3n que deseamos implementar.<\/li>\n<\/ul>\n<p>Imagine por un momento que desea desarrollar un widget, pero cada vez que lo hace, tiene que escribir toda la funcionalidad para enganchar a WordPress para hacer la misma funcionalidad repetitiva repetitiva.<\/p>\n<p>Aqu\u00ed es donde entran en juego la herencia y la programaci\u00f3n orientada a objetos. El c\u00f3digo repetitivo se abstrae en una clase base, por lo que solo se escribe una vez y luego el c\u00f3digo en el que queremos centrarnos queda para que lo implementemos.<\/p>\n<p>Todo lo anterior es lo que debe entenderse al leer este paso inicial en el c\u00f3digo fuente de una API b\u00e1sica orientada a objetos en WordPress.<\/p>\n<h2>\u00bfQue sigue?<\/h2>\n<p>En la pr\u00f3xima publicaci\u00f3n de esta serie, veremos la naturaleza orientada a objetos de la API de Widgets y qu\u00e9 cosas deber\u00eda poder detectar de inmediato al leer el c\u00f3digo.<\/p>\n<p>Esto se debe a que es importante reconocer ciertos principios orientados a objetos en la pr\u00e1ctica y esta es una buena manera de evaluar si puede hacerlo o no. Si lo eres, \u00a1genial! Luego continuar\u00e1 ayudando a desarrollar ese m\u00fasculo. Si no, no te preocupes, todav\u00eda te ayuda a desarrollar ese m\u00fasculo.<\/p>\n<p>Y le ser\u00e1 de gran utilidad a medida que continuamos avanzando m\u00e1s y m\u00e1s hacia el desarrollo de WordPress orientado a objetos a trav\u00e9s de medios pr\u00e1cticos.<\/p>\n<p>La teor\u00eda necesaria ha sido cubierta. Entonces, comencemos a ponerlo en pr\u00e1ctica.<\/p>\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>La API de widgets de WordPress ayuda a proporcionar una prueba de fuego s\u00f3lida y un ejemplo de c\u00f3mo comenzar con la programaci\u00f3n orientada a objetos en WordPress.<\/p>\n","protected":false},"author":1,"featured_media":236133,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[892,716,800,861],"tags":[1172],"class_list":["post-230736","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-codigo","category-desarrollador","category-php-2","category-wordpress-2","tag-affiai-es"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/posts\/230736","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=230736"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/posts\/230736\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/media\/236133"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/media?parent=230736"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/categories?post=230736"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/tags?post=230736"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}