Si ya seguiste nuestro tutorial para crear Child themes de wordpress hoy os traemos un tutorial para conseguir una manera de alterar completamente la forma en que las páginas de tu web se muestran, los templates de wordpress.

El problema de los templates de wordpress es que sólo pueden realizar una función concreta invariablemente de lo que haga, es decir son páginas fijas. ¿Cual es la solución? Crear templates dinámicos.

A lo largo de nuestro tutorial vamos a estar usando un child theme de Twenty Seventeen aunque vosotros podéis usar el theme que más os guste. ¿que no sabéis como crear un child theme? Pues nosotros os lo explicamos aquí.

Antes de comenzar el tutorial deberíamos entender bien cuando se utilizan los templates de un theme. Los templates se usan en las páginas de wordpres para añadir algun elemento o diseño concreto para esa pagina en particular. Los templates más comunes de los themes de wordpress son:

• Contacto
• Portfolio
• Error 404
• Sitemap
• Blog

Si quieres saber cuantos templates tiene tu theme solo tienes que crear una nueva pagina y en la barra lateral encontrarás un desplegable en el que podrás ver todas las templates que puedes añadirle a tu página, obviamente solo podras seleccionar una por página.

Creando nuestro primer template

A la hora de crear nuestros templates es indiferente si los colocamos en la carpeta raíz de ltheme o dentro de cualquier otra carpeta, no obstante, si vamos a crear muchos templates os recomendamos organizarlos todos dentro de una misma carpeta (ej. plantillas).

Lo primero que haremos será crear una página php a la que llamaremos tet-template.php (aunque vosotros podéis llamarlo como queráis), y dentro copiaremos el código de theme.php del theme original. Una vez creado debemos modificar el texto de la parte superior por:

<?php
/**
 * Template Name: Test Template
 *
 * @package WordPress
 * @subpackage Twenty_Seventeen
 * @since 1.0
 */

Con este cambio lo que le estaremos diciendo a WordPress es que reconozca este php como un template y lo añada a la lista del editor de páginas.

El template debería quedar tal que así:

<?php
/**
 * Template Name: Test Template
 *
 * @package WordPress
 * @subpackage Twenty_Seventeen
 * @since 1.0
 */
 
get_header(); ?>
 
<div class="wrap">
    <div id="primary" class="content-area">
        <main id="main" class="site-main" role="main">
 
            <?php
            while ( have_posts() ) : the_post();
 
                get_template_part( 'template-parts/page/content', 'page' );
 
                // If comments are open or we have at least one comment, load up the comment template.
                if ( comments_open() || get_comments_number() ) :
                    comments_template();
                endif;
 
            endwhile; // End of the loop.
            ?>
 
        </main><!-- #main -->
    </div><!-- #primary -->
</div><!-- .wrap -->
 
<?php get_footer();

Si ahora nos dirigimos a crear una nueva página, podemos ver en la barra lateral en el desplegable el nombre de nuestro template, lo que demuestra que nuestro código funciona correctamente:

Dado a que sólo hemos copiado el contenido del theme.php, nuestro template no está haciendo nada más que mostrar el contenido de la página actual. Dado que lo que queremos hacer es que se muestre un mensaje personalizado, cambiaremos el contenido del while por:

<?php
while ( have_posts() ) : the_post();
    echo "<p>This is our custom page template!</p>";
endwhile; // End of the loop

Si ahora añadimos nuestro template a una página se mostraría algo tal que así:

Vaaale, este template que acabamos de crear no es que sea muy interesante, pero nos da una pequeña idea de que es lo que podemos conseguir. Por ejemplo, si cambiasemos nuestro mensaje por:

<?php while ( have_posts() ) : the_post();     echo "<h2>Sitemap</h2>";     echo "<ul>" . wp_list_pages( array( 'title_li' => '' ) ) . "</ul>"; endwhile; // End of the loop.

De esta manera conseguiremos un sitemap con la lista de todas las paginas de la web, algo tal que así:

Conclusión

Ya hemos creado nuestro primer template, pero, dado que es un tema bastante complejo dejaremos para más adelante la creación de templates dinámicos mucho más flexibles y útiles para nuestras webs. Así que , ¡nos vemos en el próximo tutorial!

Visto en : tut plus