Icono del sitio Imacreste

Estructura clave de WordPress para crear un tema

En un artículo anterior comente que para crear un tema solo se necesita 1 fichero: style.css, siendo esto cierto (puedes probarlo y veras que sale en el gestor de temas del administrador y te deja activarlo) no tiene sentido ya que saldrá una pantalla en blanco, ya que no hemos configurado ninguna visualización. Para lo que necesitamos crear los ficheros clave de nuestro tema.

index.php

Es el fichero principal dentro de la lógica, este fichero es el que consulta WordPress en último lugar si no entiende que mostrar. Si, es el principal aunque sea el último porque si no encuentra un fichero que mostrar que cumpla su lógica (WordPress se basa en las URLs para identificar que contenido mostrar) muestra el contenido de index.php.

header.php

El header.php es un fichero que incluye todo aquel código fuente de la cabecera que se comparte entre todas las páginas del tema. La cabecera de un tema es siempre el contenido que va entre las etiquetas <head></head> de HTML y luego dependiendo del tema es diferente, siendo bastante habitual la zona del logotipo, menús, etc.  Hay que tener en cuenta que el código fuente puede ser siempre el mismo pero el contenido no, como: En el código fuente llamamos a un Widget que es el que se encarga de gestionar esa zona, o tenemos una función que modifica ese contenido, en el header.php tendremos la llamada, y siempre será igual.

Es importante dentro de este fichero, y dentro de las etiquetas <head> incluir la función: wp_head(), esta función se encarga de cargar los css y otros ficheros que en un plugin se indica que se carguen en la cabecera. Si al instalar un plugin no nos carga sus estilos, comprueba que el tema tenga esta función en su fichero header.php.

Para introducir el header php en otra plantilla se usa la función de WordPress get_header(). Que es lo que en php sería un include.

footer.php

Su funcionamiento es igual que el header.php pero para la parte final de la web.

Es importante dentro de este fichero, y justo antes del </body> incluir la función: wp_footer(), esta función se encarga de cargar los js y otros ficheros que en un plugin se indica que se carguen en el footer. Si al instalar un plugin no nos carga sus scripts, comprueba que el tema tenga esta función en su fichero footer.php.

Para introducir el footer.php en otra plantilla se usa la función de WordPress get_footer(). Que es lo que en php sería un include.

sidebar.php

Este fichero siendo importante es el menos habitual en los ficheros, el header.php y el footer.php son necesarios, pero el sidebar se suele usar en determinadas páginas, aquellas en las que se necesita dividir una página en 2, siendo una de ellas el lateral y que habitualmente es donde se ponen los widgets.

Para introducir el sidebar.php en otra plantilla se usa la función de WordPress get_sidebar(). Que es lo que en php sería un include.

En ocasiones es necesario tener varios sidebar por ejemplo porque tengo 2 laterales uno en la izquierda y otro en la derecha. Podemos crear sidebar adicionales en functions.php:

add_action( 'widgets_init', 'crear_sidebar' );
function crear_sidebar() {
register_sidebar( array(
'name' => __( 'Nombre Sidebar', 'theme-slug' ),
'id' => 'sidebar-1',
'description' => __( 'Explicación sidebar', 'theme-slug' ),
'before_widget' => '<li id="%1$s" class="widget %2$s">',
'after_widget' => '</li>',
'before_title' => '<h2 class="widgettitle">',
'after_title' => '</h2>',
) );
}

Lo que hacemos es registrar el sidebar con el identificador exclusivo (hay que evitar el conflicto con otros plugins y temas) y desde este momento aparecerá en la sección Widgets del adminsitrador.

Y ya solo queda indicar que se visualice en las plantillas que queramos usarlo:

<?php dynamic_sidebar('sidebar-1');?>

Ejemplo index.php

<?php get_header(); ?>
<div>Contenido principal</div>
<?php get_sidebar(); ?>
<?php get_footer(); ?>
Salir de la versión móvil