A continuaci\u00f3n, veremos la representaci\u00f3n de contenido en el front-end. Nos acercamos al final de la refactorizaci\u00f3n de Boilerplate, pero queda un poco m\u00e1s por hacer antes de que estemos listos para fusionarlo en la rama maestra de la base de c\u00f3digo.<\/p>\n<\/blockquote>\n
Entonces, en esta publicaci\u00f3n, vamos a continuar all\u00ed. Ahora, si ha estado siguiendo hasta este punto, deber\u00eda tener todo lo que necesita de la rama de desarrollo.<\/p>\n
De lo contrario, aseg\u00farese de tirar de \u00e9l, ya que es donde vamos a continuar en el resto de la publicaci\u00f3n.<\/p>\n
El modelo de widget de WordPress: Refactorizaci\u00f3n Parte 12<\/h2>\n
Ahora, cuando se trata del front-end, es f\u00e1cil pensar en el front-end como algo que el usuario ve frente a \u00e9l, independientemente de si est\u00e1 en el \u00e1rea administrativa o no.<\/p>\n
Sin embargo, esta serie ha dejado claro que estamos dividiendo lo que el usuario ve entre el \u00e1rea administrativa y el \u00e1rea p\u00fablica del sitio.<\/p>\n
Entonces, lo que vamos a hacer es trabajar en el \u00e1rea del c\u00f3digo que brinda informaci\u00f3n para el usuario en el \u00e1rea p\u00fablica del sitio. Vamos a empezar simplemente leyendo la informaci\u00f3n y mostr\u00e1ndola.<\/p>\n
Luego, en la pr\u00f3xima publicaci\u00f3n, veremos c\u00f3mo trabajar con l\u00f3gica condicional con respecto a algunas de las opciones para ver si hay algo que debamos hacer.<\/p>\n
Dicho esto, pasemos al c\u00f3digo.<\/p>\n
Sobre los datos que mostraremos<\/h3>\n
Recuerde, el widget, en este punto, tiene tres cosas que influyen en su visualizaci\u00f3n:<\/p>\n
- \n
- el t\u00edtulo del widget,<\/li>\n
- el contenido del widget,<\/li>\n
- una alternancia en cuanto a si debemos o no mostrar el t\u00edtulo<\/li>\n<\/ol>\n
La tercera opci\u00f3n es principalmente para mostrar c\u00f3mo usar un tipo diferente de elemento. Porque, t\u00e9cnicamente, si no quisi\u00e9ramos mostrar el t\u00edtulo del widget, simplemente no pondr\u00edamos nada en el widget.<\/p>\n
Pero creo que ayuda mostrar el uso de diferentes tipos de elementos y sus valores de una manera pr\u00e1ctica (o semi-pr\u00e1ctica).<\/p>\n
De todos modos, dicho esto, sabemos que para cada instancia dada del widget, los datos se almacenan con el t\u00edtulo<\/strong> ,\u00a0 el contenido<\/strong> y\u00a0 el nombre del t\u00edtulo para mostrar<\/strong> y las ID proporcionadas por WordPress.<\/p>\n
Por lo tanto, los usaremos en nuestro c\u00f3digo frontal para mostrar los valores.<\/p>\n
Preparaci\u00f3n de las funciones de visualizaci\u00f3n<\/h3>\n
Normalmente, la\u00a0 funci\u00f3n de widget<\/strong> es responsable de mostrar la salida del widget. Pero una de las cosas que hemos estado tratando de hacer es separar las preocupaciones de nuestro widget en un conjunto de clases y funciones m\u00e1s enfocado.<\/p>\n
Lo primero que queremos hacer es escribir una\u00a0 clase WidgetDisplay<\/strong> que se encargar\u00e1, como seguramente es evidente, de mostrar el contenido del widget.<\/p>\n
Por ahora, esto incluir\u00e1 incondicionalmente el t\u00edtulo, el contenido y el valor de incluir o no el t\u00edtulo. WordPress tambi\u00e9n pone a disposici\u00f3n cierto contenido, como el marcado, que debe aparecer antes y despu\u00e9s del widget, por lo que nos aseguraremos de incluirlo tambi\u00e9n.<\/p>\n
Pero primero, apaguemos la clase<\/a> :<\/p>\n
<?php\n\nnamespace WordPressWidgetBoilerplateWordPress;\n\nclass WidgetDisplay\n{\n private $widgetSlug;\n\n public function __construct(string $widgetSlug)\n {\n $this->widgetSlug = $widgetSlug;\n }\n\n public function show($args, $instance)\n {\n \/\/ More to come\n }\n}\n<\/code><\/pre>\nDespu\u00e9s de eso, debemos asegurarnos de que tambi\u00e9n lo estamos escribiendo para las otras clases. Primero, nos aseguraremos de incluirlo en nuestra clase Widget<\/a> :<\/p>\n
<?php\npublic function widget($args, $instance)\n{\n return $this->widgetDisplay->show($args, $instance);\n}<\/code><\/pre>\nY luego lo agregaremos a la clase WidgetAdmin<\/a> (ya que aqu\u00ed es donde residen las funciones principales de la API de Widget; simplemente delega la responsabilidad a la clase adecuada):<\/p>\n
<?php\n\npublic function __construct($widgetSlug)\n{\n parent::__construct($widgetSlug);\n $this->widgetSerializer = new WidgetSerializer($this->getWidgetSlug());\n $this->widgetDisplay = new WidgetDisplay($this->getWidgetSlug());\n}<\/code><\/pre>\nEn este punto, no estamos mostrando nada todav\u00eda. Estamos cerca y nos centraremos en eso pronto.<\/p>\n
Visualizaci\u00f3n de los datos<\/h3>\n
Suponiendo que pueda agregar el c\u00f3digo anterior sin errores, es hora de mostrar el contenido del widget.<\/p>\n
Podemos hacer esto de muchas maneras, desde un simple var_dump<\/strong> hasta trabajar para mostrar el contenido de una manera m\u00e1s f\u00e1cil de usar. Y yo soy mucho m\u00e1s fan de este \u00faltimo.<\/p>\n
As\u00ed que hagamos eso.<\/p>\n
En la\u00a0 funci\u00f3n show<\/strong> de su\u00a0 clase WidgetDisplay<\/strong>, agregue el siguiente c\u00f3digo<\/a> :<\/p>\n
<?php\npublic function show($args, $instance)\n{\n include_once 'Views\/Widget.php';\n}<\/code><\/pre>\n
![\"Widgets](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-160763-61e7125f80aab.png\")
<\/a><\/p>\n