Plantillas de WordPress para principiantes: HTML llamando a PHP
Ayer, esbocé cómo conceptualizar cuántos de nosotros probablemente estamos acostumbrados a trabajar con plantillas de WordPress.
Aunque la separación de preocupaciones con CSS y JavaScript es sólida, las plantillas son problemáticas cuando hay mucho PHP mezclado con nuestro marcado.
Para ser claros, no podemos evitar incluir etiquetas de plantilla porque esa es la naturaleza de cómo funcionan WordPress y los sistemas generales de administración de contenido basados en PHP.
El problema surge cada vez que trabajamos con plantillas que contienen código que realiza llamadas más complejas a varias API. Aunque demostré esto usando WP_Query (y continuaré haciéndolo), no es solo esa consulta.
De todos modos, sin embargo, ¿qué se supone que debemos hacer con esto?
Plantillas de WordPress: cuando HTML llama a PHP
Primero, es importante pensar por qué mezclar tanto PHP y marcado es una mala idea.
Es fácil decir que hace que sea más difícil mantener el código SECO (y hay algo de verdad en eso), pero ¿qué pasa si solo vamos a usar una sola consulta o un solo bloque de código una vez? ¿Es realmente tan importante estar SECO entonces?
Para ser claros, sí, creo que es importante para mantener el código SECO, pero si solo vamos a usar una llamada una vez, sigo pensando que es importante, aunque solo sea por mantener el código de la plantilla tan limpio como sea posible. posible.
Piénselo de esta manera: siempre que queramos mostrar el título, el contenido y el autor de la publicación, todo lo que necesitamos llamar son tres funciones:
Así que imagina adaptar el siguiente código (que es lo que vimos en la publicación anterior):
<div id="content-container">
<p>
Oh! The garbage chute was a really wonderful idea. What an incredible smell you've discovered! Let's get out of here!
Get away from there... No! wait! Will you forget it? I already tried it. It's magnetically sealed! Put that
thing away! You're going to get us all killed.
</p>
<h2>List of Post Titles For Acme Post Type</h2>
<?php
$args = array(
'post_status' => 'publish',
'post_type' => 'acme',
'posts_per_page' => '10'
);
$custom_query = new WP_Query( $args );
if ($custom_query->have_posts()) {
echo '<ul>';
while ($custom_query->have_posts()) {
$custom_query->the_post();
echo '<li>'. get_the_title(). '</li>';
}
echo '</ul>';
wp_reset_postdata();
}
?>
<p>
Absolutely, Your Worship. Look, I had everything under control until you led us down here. You know, it's not
going to take them long to figure out what happened to us. It could be worst... It's worst.
There's something alive in here! That's your imagination. Something just moves past my leg!
Look! Did you see that? What? Help!
</p>
</div><!-- #content-container -->Para verse algo como esto:
<div id="content-container">
<p>
Oh! The garbage chute was a really wonderful idea. What an incredible smell you've discovered! Let's get out of here!
Get away from there... No! wait! Will you forget it? I already tried it. It's magnetically sealed! Put that
thing away! You're going to get us all killed.
</p>
<h2>List of Post Titles For Acme Post Type</h2>
<?php acme_get_titles(); ?>
<p>
Absolutely, Your Worship. Look, I had everything under control until you led us down here. You know, it's not
going to take them long to figure out what happened to us. It could be worst... It's worst.
There's something alive in here! That's your imagination. Something just moves past my leg!
Look! Did you see that? What? Help!
</p>
</div><!-- #content-container -->Mucho más limpio, ¿verdad? Pero hay más en lo que ves que esto. Específicamente, si vamos a trabajar con HTML detrás de escena, debemos asegurarnos de que lo estamos desinfectando correctamente usando algo como wp_kses :
<?php
/**
* Runs a custom query to get the most recent ten published articles of the
* acme post type and then prints a sanitized list of the the titles.
*/
function acme_get_titles()
{
$args = array(
'post_status' => 'publish',
'post_type' => 'acme',
'posts_per_page' => '10'
);
$custom_query = new WP_Query( $args );
if ($custom_query->have_posts()) {
$html = '<ul>';
while ($custom_query->have_posts()) {
$custom_query->the_post();
$html .= '<li>'. get_the_title(). '</li>';
}
$html .= '</ul>';
wp_reset_postdata();
}
echo _acme_sanitize_titles($html);
}
/**
* Uses the WordPress wp_kses() API to sanitize and echo the incoming markup.
*
* @param string $html The HTML to sanitize.
*/
function _acme_sanitize_titles($html) {
if(empty($html)) {
echo $html;
}
echo wp_kses(
$html,
array(
'ul' => array(),
'li' => array(),
);
);
}Ahora, algunos desarrolladores consideran que la idea de hacer eco de HTML de PHP en una plantilla de WordPress es un antipatrón. Y esto no carece de mérito.
Sin embargo, se debe jugar un acto de equilibrio durante el transcurso de esta serie: se trata de presentar cómo las personas a menudo presentan información y luego limpiarla un poco.
Para llevar esto un poco más lejos, es posible, y no del todo una mala idea, separar la función WP_Query aún más para usar get_template_part. Esto lleva consigo un poco de código más limpio, pero también requiere que analicemos esa función en profundidad.
Y eso es algo que no me interesa hacer en esta serie en particular.
¿Cómo debemos visualizar esto?
Cuando se trata de plantillas, podemos conceptualizar esto de un par de maneras diferentes.
- En algunos lenguajes de plantillas, es útil pensar en PHP inyectando la información en la plantilla,
- En el ejemplo anterior, es útil pensar en el archivo de plantilla que solicita la información del script PHP.
Entonces, en el ejemplo anterior, tenemos una función ubicada en, digamos, functions.php y el archivo de plantilla que la llama:
¿Tener sentido? Pero cómo se logra esto, en términos del código detrás de esa llamada de función única, es contenido para una publicación propia.
Y eso es lo que estaré viendo en el siguiente post.