Crear diferentes plantillas para las páginas en WordPress

En este artículo vamos a ver como crear múltiples o diferentes plantillas para las páginas de un blog WordPress. Crear páginas Web con WordPress es muy sencillo y podemos crear tantas plantillas como deseemos.

En el ejemplo que vamos a ilustrar vamos a crear una página Web que tendrá la opción de poder elegir  distintos formatos o estructura para su visualización. Vamos a tener las siguientes posibilidades:

• Contenido sin columnas.
• Columna izquierda + contenido + columna derecha.
• Columna izquierda + contenido.
• Contenido + columna derecha.

Lo primero que tendremos que hacer es crear los 4 archivos de plantilla dentro de la raiz del tema utilizado. Nos tendremos que fijar precisamente en el archivo page.php que ya viene por defecto en cualquier plantilla de WordPress, para crear 3 archivos extra que representarán las nuevas plantillas.

Crearemos 3 archivos con los siguientes nombres:

page-left-sidebar.php
page-right-sidebar.php
page-two-sidebars.php

Veremos el código que depositaremos en el archivo page-left-sidebar.php, que tendrá una columna a la izquierda del contenido:

<?php
/*
Template Name: Left sidebar
*/
?>
<?php get_header(); ?>
<?php get_sidebar();?>
 <div id="content_sidebar_left">
 <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
 <h2><a href="<?php the_permalink() ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h2>
 <?php the_content(); ?>
 <?php the_time('F jS, Y') ?> | <?php the_author() ?>
 <?php endwhile; else: ?>
 <h2>No encontrado</h2>
 <p>Lo sentimos, intente utilizar nuestro formulario de b&uacute;squedas.</p>
 <?php endif; ?>
</div>
<?php get_footer(); ?>

Veremos el código que depositaremos en el archivo page-right-sidebar.php, que será la plantilla que tendrá una columna a la derecha del contenido:

<?php
/*
Template Name: Sidebar right
*/
?>
<?php get_header(); ?>
 <div id="content_sidebar_right">
 <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
 <h2><a href="<?php the_permalink() ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h2>
 <?php the_content(); ?>
 <?php the_time('F jS, Y') ?> | <?php the_author() ?>
 <?php endwhile; else: ?>
 <h2>No encontrado</h2>
 <p>Lo sentimos, intente utilizar nuestro formulario de b&uacute;squedas.</p>
 <?php endif; ?>
</div>
<?php get_sidebar();?>
<?php get_footer(); ?>

Veremos el código que depositaremos en el archivo page-two-sidebars.php, que será la plantilla que tendrá una columna a la izquerda y otra a la derecha del contenido:

<?php
/*
Template Name: Two sidebars
*/
?>
<?php get_header(); ?>
<?php get_sidebar('left');?>
 <div id="content_two_sidebars">
 <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
 <h2><a href="<?php the_permalink() ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h2>
 <?php the_content(); ?>
 <?php the_time('F jS, Y') ?> | <?php the_author() ?>
 <?php endwhile; else: ?>
 <h2>No encontrado</h2>
 <p>Lo sentimos, intente utilizar nuestro formulario de b&uacute;squedas.</p>
 <?php endif; ?>
</div>
<?php get_sidebar('right');?>
<?php get_footer(); ?>

Y ahora solo nos faltará editar el page.php que será nuestra plantilla por defecto que solo tendrá contenido:

<?php
/*
Template Name: No sidebars
*/
?>
<?php get_header(); ?>
 <div id="content">
 <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
 <h2><a href="<?php the_permalink() ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h2>
 <?php the_content(); ?>
 <?php the_time('F jS, Y') ?>
 <?php endwhile; else: ?>
 <h2>No encontrado</h2>
 <p>Lo sentimos, intente utilizar nuestro formulario de b&uacute;squedas.</p>
 <?php endif; ?>
</div>
<?php get_footer(); ?>

Con su correspondiente maquetación:

#content {
    float:left;
    width:1004px;
    min-height:500px;
    background:#CCCCCC;
    padding:10px;
    border-radius:4px;
    margin-bottom:10px;
}

#content_sidebar_left {
    float:left;
    width:794px;
    min-height:500px;
    background:#CCCCCC;
    padding:10px;
    border-radius:4px;
    margin-bottom:10px;
    margin-left:10px;
}

#content_sidebar_right {
    float:left;
    width:794px;
    min-height:500px;
    background:#CCCCCC;
    padding:10px;
    border-radius:4px;
    margin-bottom:10px;
    margin-right:10px;
}

#content_two_sidebars {
    background:#CCCCCC;
    border-radius:4px;
    float: left;
    margin-bottom: 10px;
    margin-left: 10px;
    margin-right: 10px;
    min-height: 500px;
    padding: 10px;
    width: 584px;
}

#sidebar_left {
    background:#CCCCCC;
    float: left;
    padding: 5px;
    width: 190px;
    border-radius:4px;
    min-height:500px;
}

#sidebar_right {
    background:#CCCCCC;
    float: left;
    border-radius:4px;
    padding: 5px;
    width: 190px;
    min-height:500px;
}

Como puedes observar, en todos los archivos creados o modificados hemos añadido un comentario al inicio que es vital para que estas plantillas puedan ser seleccionadas desde la administración en la edición o creación de páginas.

El archivo sidebar.php de la plantilla deberá tener algo como lo siguiente:

<div id="sidebar_left">
    <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Sidebar Left') ) : endif; ?>
</div>

Una vez tengamos todas las distintas plantillas creadas ya podremos editar o crear páginas para asignarles una plantilla u otra. Te darás cuenta que en la columna derecha del editor de páginas de WordPress aparecerá un bloque como el siguiente: