Crear un tema WordPress desde cero – Página principal

En el capítulo anterior Tema 05 – Creación de zonas para Widgets ya editamos nuestro archivo index.php añadiendo un nuevo hook para poder añadir plugins desde la administración. También destacamos la posibilidad de crear una página que represente la homepage e indicarlo en Ajustes  – Lectura.

Usemos la opción que usemos siempre vamos a tener que crear un index.php ya que es el archivo más crucial del template debido a que WordPress tiene que usarlo si te falta alguno de sus archivos adjacentes o hermanos (como archive.php o tag.php).  Podrá ver un esquema de la jerarquía en el Tema 02 – La estructura de archivos de una plantilla. Además si pruebas de eliminar el archivo index.php y ejecutas la ruta de tu Web observarás que la pantalla se queda en blanco.

Cada tema lo usará como mejor le convenga. En nuestro caso, a parte de añadir una zona para añadir Widgets, vamos a querer incorporar un bxSlider en el tema directamente sin utilizar plugins.

Lo primero que haremos es habilitar o registrar en la administración de WordPress un nuevo tipo de posts que representarán los sliders. Creamos un nuevo tipo porque los que ya dispone Wodpress (entradas y páginas) los queremos utilizar para guardar otro tipo de información.

Crearemos un nuevo archivo que guardaremos en mytheme/includes/metaboxes.php con la siguiente función:

Source code

<?php
function ts_post_type_slider() {
    register_post_type( 'slider',
                array( 
                'label' => __('Slider', 'mytheme'), 
                'public' => true, 
                'show_ui' => true,
                'show_in_nav_menus' => true,
                'rewrite' => true,
                'hierarchical' => true,
                'menu_position' => 5,
                'exclude_from_search' =>true,
                'supports' => array(
                                     'title',
                                     'editor',
                                     'thumbnail',
                                     'excerpt',
                                     'revisions')
                    ) 
                );
    register_taxonomy('category_slider', __('slider', 'mytheme'),array('hierarchical' => true, 'label' =>  __('Slider Categories', 'mytheme'), 'slidercat' => __('Category', 'mytheme'))
    );
}
add_action('init', 'ts_post_type_slider');
?>

Este trozo de código lo que hace es registrar el nuevo tipo de posts para los sliders con la función register_post_type() que dispone WordPress con titular, descripción, extracto, imagen destacada y revisiones.

También estamos registrando una taxonomía (categoría para los posts tipo slider) con la función register_taxanomy() que dispone WordPress.

No olvides incluir este archivo en el functions.php de la plantilla.

Source code

include(TEMPLATEPATH . '/includes/metaboxes.php');

A partir de este momento, en la administración aparecerá un nuevo tipo de posts para los sliders.

Para que las imágenes que se suban para el slider se guarden con el tamaño correcto o óptimo debemos saber que anchura tiene nuestro contenedor centrar descontando los paddings sabemos que disponemos de una anchura de 555px.

Entonces, lo ideal es registrar un nuevo tamaño para las imágenes. Lo que haremos es crear un nuevo archivo mytheme/includes/thumbnails.php donde registraremos todos los tipos de imágenes que vayamos a utilizar en nuestro tema. Empezaremos registrando las imágenes tipo «homeslider». En este archivo incluiremos:

Source code

<?php
add_theme_support( 'post-thumbnails' );
add_image_size('homeslider', 555, 300, true);
?>

La función add_theme_support() permite a un tema o plugin registrar una característica específica.

Y la función add_image_size() registra un nuevo tamaño de imagen. Esto significa que WordPress creará una copia de la imagen con las dimensiones especificadas, en nuestro caso, 555x300px que es el tamaño que queremos para nuestro slider.

No te olvides de incluir este archivo que acabamos de crear en el archivo functions.php.

Source code

include(TEMPLATEPATH . '/includes/thumbnails.php');

Ahora nos falta trabajar sobre el front office de nuestro tema. Añadiremos en el index.php lo siguiente:

Source code

<div id="slider" class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
    <ul class="bxslider">
        <?php query_posts('post_type=slider&category_slider=Home');
         while (have_posts()): the_post(); ?>
            <li>
                <?php the_post_thumbnail('homeslider'); ?>
                <div class="info">
                    <div class="html-caption">
                        <span class="heading"><?php the_title(); ?></span>
                        <span class="line">&nbsp;</span>
                        <span class="description"><?php the_content(); ?></span>
                    </div>
                </div>
            </li>
        <?php endwhile; wp_reset_query(); ?>
    </ul>
</div>

No es más que el código que contiene el listado de imágenes para nuestro slider.  La clave del asunto está en la función query_posts() que nos facilita WordPress, que en este caso lo utilizamos para recorrer los posts de tipo «slider» de la categoría «Home».

La función the_post_thumbnail() muestra la imagen destacada del post actual en el bucle. Fíjate que le estamos pasando como parámetro el tipo de imagen que hemos creado previamente «homeslider».

La función the_title() muestra el título del post.

La función the_content() muestra la descripción del post.

Ahora solo nos queda editar el archivo mytheme/js/scripts.js para añadir la llamada al plugin bxslider:

Source code

jQuery('.bxslider').bxSlider({
    responsive: true
});

Si añadimos imágenes a nuestro slider desde la administración veremos algo similar a esto:

Indice de contenido