Trabajar con clases, plantillas y parciales en WordPress
Cuando me senté para comenzar esta publicación, planeé escribir algo mucho más complicado de lo que voy a compartir. Inicialmente, quería caminar a través de una de dos cosas:
- La guía completa para configurar un entorno de desarrollo,
- Integración de herramientas de calidad de código en PhpStorm
El primero sería centrarse en una variedad de otras cosas de las que he hablado, unirlas todas y tener una referencia definitiva. Pero esto es algo en lo que quiero tomarme el tiempo de armar para asegurarme de que se haga bien.
El segundo es uno que creo que es importante, pero estoy en una fase de transición con algunas de mis propias herramientas. Hasta que eso esté hecho, prefiero no escribir sobre eso.
Aún así, siempre hay algo que cubrir, ¿verdad? Así que hoy opté por algo más simple: desglosar el uso de clases, plantillas y parciales en los complementos de WordPress usando un ejemplo simple.
Clases, plantillas y parciales en WordPress
Para este tema en particular, una pregunta inmediata que puede surgir es simple: ¿Por qué molestarse en hablar de esto?
Porque estamos en 2018 y seguimos viendo una gran combinación de PHP, CSS, marcado y JavaScript en un solo archivo. Esto no es para tocar otras tecnologías que hacen esto de manera predeterminada (como React). Me refiero específicamente a los complementos de WordPress y a escribir código mantenible de tal manera que sea [obviamente] fácil de mantener, escribir y leer.
Un ejemplo práctico
Supongamos que está trabajando en una página de submenú para algo que aparecerá en un menú personalizado. Registras tu página usando la API de WordPress:
<?php
public function addMenuPage()
{
add_menu_page(
'Acme Menu',
'Acme Menu',
'manage_options',
'acme-custom-menu',
array($this, 'display'),
'dashicons-dashboard',
30
);
add_submenu_page(
'acme-custom-menu',
'Acme Menu',
'Acme Menu',
'Acme Menu',
'acme-custom-menu',
array($this, 'display')
);
}
Pero cuando configura una función de devolución de llamada para mostrar la página, no usa la función para mezclar todos los idiomas. En su lugar, lo usa para incluir un archivo.
<?php
public function display()
{
include_once $this->pluginPath. 'views/acme-settings.php';
}
Tenga en cuenta que en el archivo anterior, hago referencia a una propiedad $this->pluginPath. Esto se establece en el constructor de la clase para que pueda acceder fácilmente a la raíz del complemento.
De todos modos, ¿cómo podría ser este archivo?
Una plantilla y un parcial
En este caso, asumo que su plantilla es lo que proporcionará información al usuario y solicitará su entrada. El parcial será responsable de mostrar un mensaje de éxito, error o advertencia al usuario.
Una plantilla
Para simplificar, mantendré la plantilla y el parcial lo más reducidos posible. En este caso, suponga que vamos a mostrar una página, le pediremos al usuario que guarde un valor y, si el valor se guarda correctamente (y, por lo tanto, existe en la tabla wp_options ), mostraremos el mensaje de éxito.
Esto significa:
- la plantilla mostrará el título de la página, la información, la entrada y el botón Guardar,
- el parcial mostrará el mensaje de éxito cuando sea necesario.
Eche un vistazo al código de la plantilla a continuación:
<?php
/**
* Renders the settings page for the plugin.
*/
?>
<div class="wrap">
<h1 class="wp-heading-inline"><?php echo get_admin_page_title(); ?></h1>
<?php if ($this->showSuccessMessage()) { ?>
<?php include_once 'partials/settings-saved.php'; ?>
?>
<div id="acme-settings-schedule">
<form id="acme-form" method="post" action="<?php echo esc_html(admin_url('admin-post.php')); ?>"">
<!-- This is where your settings go. -->
<p>
<?php
submit_button(
'Save',
'primary',
'acme-save-settings',
false
);
wp_nonce_field(
'acme-save',
'acme-save-nonce'
);
?>
</p>
</form>
</div>
</div>
Tenga en cuenta que, sí, tiene una entrada, un botón para guardar y un nonce, todos los cuales son importantes (pero más allá del alcance de esta publicación) para guardar información.
Pero también tenga en cuenta que tiene una función de ayuda que uso para verificar la presencia de información guardada con éxito. Esta función reside en la misma clase responsable de representar la plantilla.
Parcial
Se ve algo como esto:
<?php
public function showSuccessMessage()
{
return (false !== get_option('acme_custom_setting'));
}
Y el parcial resultante es muy simple:
<?php
/**
* Renders the success message if the option has been properly saved.
*/
?>
<div class="notice-success notice is-dismissible">
<p>Your settings have been successfully saved.</p>
<button type="button" class="notice-dismiss">
<span class="screen-reader-text">Dismiss this notice.</span>
</button>
</div>
Por supuesto, su implementación de la función puede variar. El propósito no es tanto mostrar cómo implementar la función sino cómo aprovechar una función para verificar información para mostrar un parcial.
Hay más (pero no aquí)
Tal vez esto es algo que debería colocarse al principio del artículo.
Para ser honesto, creo que es una de esas cosas en las que a algunos les puede resultar más útil verlo desde el principio (pero luego les falta el contexto del código) y a otros les resulta más útil al final porque pueden ver cómo encaja todo. juntos.
De todos modos, espero que, en última instancia, brinde claridad sobre cómo encaja todo esto.
Además, hay mucho espacio en lugares para personalizar cosas como:
- comprobando para asegurarse de que el usuario tiene permiso para guardar,
- verificando el valor nonce,
- sanear y validar los datos,
- determinar qué constituye éxito, advertencias y errores.
Pero si debo cubrir todo lo anterior, estamos viendo una publicación extraordinariamente larga o una larga serie de publicaciones. No es algo contra lo que esté en contra, pero también es algo contra lo que no creo que valga la pena el esfuerzo en este momento.
Nunca dude en ofrecer comentarios. Pero mientras tanto, espero que todo esto te ayude a tener una base sobre la cual construir cuando trabajes en tu próximo proyecto.