Plantillas de WordPress para principiantes: cómo es

Cuando comencé a pensar en plantillas en WordPress, pensé en dos aspectos:

1. contenido específico para miembros ,
2. contenido que podría desglosarse en una sola publicación.

Pero cuanto más lo pensaba, más me daba cuenta de que podía (y posiblemente debería) explicarse en el transcurso de algunas publicaciones.

Así que voy a desglosar el estado actual de las plantillas de WordPress y luego las formas prácticas en que podemos organizar, digamos, nuestros complementos para que usemos PHP estándar.

Después de eso, en una serie futura, veré lo que significa usar otros motores de plantillas (tanto PHP como JavaScript en el trabajo que hacemos).

Sin embargo, para empezar, quiero echar un vistazo a cómo a menudo vemos plantillas escritas en el contexto de los temas y complementos de WordPress.

Plantillas de WordPress para principiantes

Dependiendo de su experiencia con WordPress y otros sistemas basados ​​en PHP, su definición de plantilla será diferente a la de otra persona.

Entonces, para tratar de crear una definición común que usaré a lo largo de esta serie de publicaciones, se usará del Codex de WordPress:

Las plantillas son los archivos que controlan cómo se mostrará su sitio de WordPress en la Web.

La página continúa hablando sobre cómo funciona junto con la base de datos y otros activos, y recomiendo leer sobre esto si no está familiarizado con él.

Sin embargo, la definición anterior funciona bien para la forma en que planeo avanzar pensando en ello.

1 Cómo es (ahora mismo)

Cuando se trata de pensar en plantillas de WordPress, creo que ayuda considerar una sola plantilla con un código que se parece a 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
  $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 -->

El punto del código anterior es que se ve que mezcla PHP y HTML.

Además, es importante tener en cuenta que cada uno de estos archivos está diseñado con CSS y puede tener un comportamiento adicional controlado a través de JavaScript. Con ese fin, puede conceptualizarlo así:

Esto representa una sola plantilla que combina HTML y PHP en una sola plantilla. Y esa plantilla luego se diseña con CSS y se controla con JavaScript.

Todos estos trabajan en conjunto para proporcionar lo que ve el usuario.

2 ¿La organización de desarrolladores genera rendimiento?

Pero la forma en que esto funciona es un poco complicada, y aunque puede parecer bueno para el usuario, plantea algunas preguntas:

• ¿Es tan eficaz como podría ser?
• ¿Qué tan fácil es para un desarrollador mantener?
• ¿Cuál es el proceso de construcción?
• ¿Cómo se mantienen y organizan los activos?

Claro, la mayor parte de lo que está leyendo arriba está muy centrado en el desarrollador, pero encuentro que cuando un código está organizado de tal manera que es fácil para los desarrolladores trabajar con él, a menudo puede ser incluso más fácil para el usuario.

¿Pero, qué significa eso?

• ¿Presentamos a Sass?
• ¿Minimizamos JavaScript?
• ¿Cómo combinamos estos activos y los importamos?
• ¿Qué pasa con las consultas PHP personalizadas que ocurren dentro del contexto de cada plantilla?

Y aunque las primeras cosas son importantes y valen la pena (y puede que las cubra en una serie después de esto), separar la lógica dentro de una plantilla, incluso sin un motor de plantillas, puede ayudar a que el código esté más centrado en el desarrollador.

¿Hace las cosas más rápidas para el usuario? No necesariamente. Pero sí nos ayuda a dar el primer paso para hacer precisamente eso.

Vamos a reorganizarnos

En la próxima publicación de esta serie, desglosaré el contenido que estamos acostumbrados a ver en las plantillas de WordPress a través de un ejemplo y comenzaré a reorganizarlo para que esté mejor organizado de tal manera que las técnicas se puedan usar en diferentes proyectos.

Esto significa mover las cosas a sus funciones (o incluso dentro de sus clases y, por lo tanto, sus funciones) y cómo podemos llamarlas desde el contexto de nuestras plantillas.

En última instancia, esto conducirá a un código que es más fácil de leer, una mejor separación de las preocupaciones y nos llevará hacia formas de cambiar la forma en que se inyectan los datos en una plantilla.