Crear un tema personalizado en WordPress

20 de marzo de 2015, Roque Arnás, wordpress , 1 comentario , 4749 visitas , 5 , 24 minutos 26 segundos

WordPress es uno de los sistemas de gestor de contenidos mas usado en la actualidad, existen miles de plantillas tanto gratuitas como de pago con las que podemos trabajar en WordPress, el problema de usar plantillas es que a veces no tenemos un control 100% sobre los archivos de nuestro proyecto y usamos innecesariamente funciones que vienen predefinidas en el tema.

La mejor forma de crear un proyecto con WordPress es creando nuestro propio tema personalizado, de esta forma controlamos todo el proyecto desde cero y podemos mejorar la seguridad del proyecto y el diseño.

Comenzamos

Creamos una carpeta con el nombre de nuestro tema y la insertamos en la carpeta “themes” que se encuentra dentro de la carpeta “wp-content”.

Los archivos

En principio basta con insertar un “index.php” y un “style.css” para que nuestro tema sea reconocido por WordPress, por supuesto no basta con ser reconocido, asi que vamos a repasar una lista de los archivos y carpetas que incluiremos en la plantilla, que son y como trabajan con el sistema de WordPress.

Carpetas

images
js

En estas carpetas inluiremos las imagenes y las funciones de nuestro tema respectivamente

Archivos

- index.php

La página principal

- style.css

La hoja de estilos

- header.php

La cabecera

- sidebar.php

La barra lateral

- footer.php

El pié de página

Estos archivos son practicamente el inicio de cualquier proyecto en PHP, en WordPress diponemos de caracteristicas para implementar ciertos métodos en la plantilla, todo está escrito en PHP, por lo que si conocemos bien este lenguaje, no nos costará mucho familiarizarnos con los archivos del proyecto.

Secciones

- category.php

La sección categorias

- search.php

Resultados de la búsqueda

- single.php

Las entradas

Estos archivos son partes o secciones de nuestra plantilla que se mostrarán en la página, como las búsquedas o la vista de una entrada.

Otros archivos

- screenshot.png

Imagen en miniatura de la plantilla

- favicon.ico

Icono de la plantilla

- functions.php

Las funciones de nuestra plantilla

De momento utilizaremos estos recursos para comenzar a crear la plantilla, vamos a definir uno por uno los archivos que darán vida a nuestro template.

header.php

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="utf-8">
    <title><?php bloginfo('name'); ?></title>
    <meta name="viewport" content="width=device-width, minimum-scale=1">
    <link rel="shortcut icon" href="<?php echo get_stylesheet_directory_uri(); ?>/favicon.ico" />
    <link rel="stylesheet" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
    <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
    <?php wp_head(); ?>
</head>
<body>
    <div class="wrapper">
        <header id="header">
            <h1><a href="<?php echo get_option('home'); ?>"><?php bloginfo('name'); ?></a></h1>
        </header>

Veamos una lista de las funciones mas importantes que hemos usado, algunos de los valores devueltos por las funciones son establecidos en el panel de administración de WordPress, en “Opciones Generales”.

- bloginfo(‘name’)

Devuelve una cadena con el nombre de la página

- get_stylesheet_directory_uri()

Esta función devuelve un string con el valor de una ruta http hacia la carpeta raiz de la plantilla

- bloginfo( ‘stylesheet_url’ )

Devuelve una cadena con el nombre de la hoja de estilos del tema

- bloginfo( ‘pingback_url’ )

Devuelve la dirección URL del archivo XML-RPC Pingback (xmlrpc.php).

- get_option(‘home’)

Devuelve una ruta de la dirección de la página principal

index.php

<?php get_header(); ?>
<section id="main">
</section>
<?php  get_sidebar()?>
<?php get_footer(); ?>

Con la función get_XXX () estamos haciendo lo que seria un “include” en PHP para incluir los archivos header, sidebar y footer en el documento.

sidebar.php

<aside id="sidebar">
</aside>

En la sidebar de momento colocaremos unicamente codigo html.

footer.php

<footer id="footer">
<p><?php bloginfo('name'); ?>, <?=date('Y');?>. Todos los derechos reservados.</p>
</footer>
</div>
<?php wp_footer(); ?>
</body>
</html>

En el footer volvemos a hacer uso de la función “bloginfo()” que ya vimos en el archivo “header.php”

style.css

* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#header {
display:block;
width: 100%;
padding:2%;
border:1px solid #000;
}
#sidebar  {
float:left;
width:20%;
padding:2%;
border:1px solid #000;
}
#main {
float:left;
width:80%;
padding:2%;
border:1px solid #000;
}
#footer {
clear:both;
display:block;
width: 100%;
text-align:center;
border:1px solid #000;
}
@media only screen and (max-width: 992px){ 
#sidebar  {
display:block;
width:100%;
}
#main {
display:block;
width:100%;
}
}

En la hoja de estilos debemos indicar en las primeras lineas los datos de la plantilla como el nombre del tema, url, autor, descripción del proyecto y la versión de WordPress.

/*
Theme Name: Didesweb
Theme URI: https://www.didesweb.com
Description: Didesweb, diseño y desarrollo web. Todos los derechos reservados.
Author: Roque Arnás Izquierdo
Author URI: https://www.didesweb.com
Version: 4.0
*/

Cambia los datos para adecuarlos a tu proyecto.

Instalar el tema

Para instalar el tema solo tienes que ir al panel de administración de WordPress / Apariencia/ Temas y elegir el tema que acabamos de crear.

Como reconocer el tema

Reconoceras cual es tu tema principalmente por dos caracteristicas:

Nombre del tema

Esto lo hemos definido en la hoja de estilos, en “Theme Name:”.

screenshot

El tema tendrá la imagen que hemos incluido en el archivo screenshot.png

En WordPress disponemos de funciones para mostrar ciertas partes de la página como pueden ser: La barra de navegación, funciones asociadas a la sidebar, entradas, comentarios y muchas otras caracteristicas que vienen predefinidas en este sistema gestor de contenidos.

Para mostrar estas partes o secciones en nuestro proyecto debemos llamarlas con las funciones asociadas a cada una de ellas.

La barra de navegación

La barra de navegación muestra una lista de las páginas que hemos creado en WordPress (no confundir con las entradas), generalmente usamos esta parte para incluir parte de una web como un apartado de contacto, quienes somos, donde estamos …

Para incluir la barra de navegación es wordpress debemos insertar el siguiente código en la parte da la plantilla donde queremos insertarla

<?php wp_nav_menu(); ?>

Siguiendo los ejemplos de los archivos que hemos creado hasta ahora, vamos a integrar la barra de navegación en el archivo “header.php”, de esta forma tendremos la barra disponible en todas las partes de la página. Dentro del archivo “header.php”, pegamos el codigo debajo de la etiqueta de cierre </header>

El resultado que mostrará el codigo Html si vemos el codigo fuente de la página será un elemento “div” con una clase “menu” que contentdrá una lista desordenada con sus elementos “li” que tendrán a su vez una clase “page_item”

Como ya sabemos el resultado del codigo generado en el Html, podemos aplicar los estilos para la barra de navegación en la hoja de estilos, crearemos estilos para adaptar la plantilla a los distintos tamaños de pantalla.

.menu {
display:block;
width: 100%;
}
.page_item {
display:inline-block;
list-style: none;
margin: 0 5px;
}

@media only screen and (max-width: 992px)

.menu {
display:block;
width: 100%;
}
.page_item {
display:block;
width:100%;
text-align:center;
margin:5px 0;
}

Hemos creado una pagina nueva desde el panel de administración de WordPress, como el sistema trae una página de ejemplo ya podemos ver el resultado de la barra de navegación con los dos enlaces de las páginas existentes.

Las entradas

Para comenzar a trabajar en las entradas es preciso que hayamos creado entradas para poder visualizar el contenido, por lo tanto vamos a crear tres entradas desde el panel de administración de WordPress, incluiremos contenido en las mismas, en total publicaremos 3 entradas.

No es el objetivo de este articulo explicar el funcionamiento del panel de administración de WordPress, de lo contrario seria interminable, entendemos que si estás siguiendo el articulo, ya sabes usar este sistema a nivel usuario. Una vez creadas las entradas, configuramos en “Ajustes > Lectura > Número máximo de entradas a mostrar en el sitio” que muestre solo 2 entradas y guardamos los cambios, esto se puede cambiar mas adelante cuando personalicemos la plantilla a nuestro gusto.

Mostrar las entradas en la página principal

Para mostrar las entradas tenemos que incluir el “loop de WordPress” en los archivos de nuestro tema, abrimos el archivo “index.php” y pegamos el siguiente contenido dentro del elemento “section” con identificador “main”.

<?php if (have_posts()) :  while (have_posts()) : the_post(); ?>
<h3>
<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
</h3>
<?php the_excerpt(); ?>
<?php endwhile; else: ?>
<p><?php _e('Lo sentimos, no se han encontrado entradas en este apartado.'); ?></p>
<?php endif; ?>

Ya podemos visualizar el resultado y vemos que se muestran solamente dos entradas, en las entradas podemos mostrar información como la fecha de publicación o el autor de la misma, pegamos el siguiente codigo justo debajo de la linea “<?php the_excerpt(); ?>”

<cite>Publicado el <?php the_time('j/m/Y') ?> por <?php the_author() ?> </cite>

Paginación

El motivo de porque hemos dejado el numero de entradas a mostrar a 2, ha sido simplemente para ver el sistema de paginación en marcha con el minimo tiempo posible, vamos a pegar el código que hará que se visualice este elemento en el archivo “index.php”, justo antes de la etiqueta de cierre “</section>”

<?php 
global $wp_query;
$num_pags = $wp_query->max_num_pages;
if ( $num_pags > 1 )  {
if ( !$pag_actual = get_query_var('paged') )
$pag_actual = 1;
$formato_pag = empty( get_option('permalink_structure') ) ? '&page=%#%' : 'page/%#%/';
echo paginate_links(array(
'base' => get_pagenum_link(1) . '%_%',
'formato_pag' => $formato_pag,
'current' => $pag_actual,
'prev_next' => True,
'prev_text' => __('Anterior'),
'next_text' => __('Siguiente'),
'num_pags' => $num_pags,
'mid_size' => 4,
'type' => 'list'
));
}
?>

Añadimos un poco de css a la hoja de estilos para visualizar mejor el nuevo elemento, de nuevo visualizamos la página para ver su codigo fuente y saber que elementos se han creado, sus clases o identificadores, esta es la mejor forma de controlar los elementos del proyecto. Vemos que se ha creado una nueva lista desordenada con la clase “page-numbers” y sus elementos “li” que contienen elementos “span” con la clase “current” para mostrar la página actual, elementos “li” que contienen enlaces con la clase “page-numbers”, (fijaros en que estos elemento tienen la misma clase que la lista), por ultimo tendremos dos elementos “li” con sus respectivos enlaces y con las clases “prev” y “next”, sabiendo todo esto, podemos aplicar los estilos en el archivo “style.css”.

ul.page-numbers {
list-style: none;
}
ul.page-numbers li{
display:inline-block;
border:1px solid #000;
padding: 5px 10px;
border-radius: 3px;
}
ul.page-numbers a{
text-decoration:none;
color: #0099CC
}
ul.page-numbers a:hover{
color: #000000
}
.current{
color: #CCCCCC;
}

El código CSS está muy lejos de ser un código correcto, ten en cuenta que de momento ya hemos repetido varias lineas y hemos utilizado atributos y valores repetidos que podriamos haber simplificado para distintos elementos, pero no es el objetivo del articulo, por lo que no vamos a pararnos a detallar nada sobre el principio “DRY”, que claro está, es un principio fundamental a la hora de comenzar un proyecto.

single.php

De momento ya podemos ver las entradas y la paginación de las mismas, continuamos ahora creando el archivo “single.php”, este archivo será el encargado de mostrar el contenido de las entradas.

<?php get_header(); ?>
<section id="main">
<article>
<?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?>
<h2><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2>
<div>
<?php the_content(); ?>
</div>
<?php endwhile; ?>
<?php endif; ?>
</article>
</section>
<?php  get_sidebar()?>
<?php get_footer(); ?>

page.php

Vamos a crear ahora el archivo “page.php”, este archivo será el encargado de mostrar las páginas que hayamos creado.

<?php get_header(); ?>
<div id="main" role="main">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<article id="post-<?php the_ID(); ?>" <?php post_class( 'cf' ); ?> role="article">
<header>
	<h1><?php the_title(); ?></h1>
	<cite>Publicado el <?php the_time('j/m/Y') ?> por <?php the_author() ?></cite>
</header>
<section>
	<?php
		the_content();
		wp_link_pages( array(
			'before'      => '<div class="page-links"><span class="page-links-title">'.'</span>',
			'after'       => '</div>',
			'link_before' => '<span>',
			'link_after'  => '</span>',
		) );
	?>
</section>
</article>
<?php endwhile; else : ?>
	<article id="post-not-found">
		<header>
			<h1><?php _e( 'Lo sentimos, no se han encontrado entradas en este apartado.' ); ?></h1>
		</header>
	</article>
<?php endif; ?>
</div>
<?php get_sidebar(); ?>			
<?php get_footer(); ?>

Todo va como la seda, ya podemos ver las entradas y las páginas creadas, se muestra la paginación, ¿que nos falta?, bueno, de momento no hemos profundizado en las entradas lo suficiente, cuando creamos una entrada, podemos asignarle una categoría o etiqueta, con ello se crea un enlace en cada entrada que nos muestra todas las entradas con la etiqueta a la que hace referencia.

Para mostrar las “categorias de cada entrada usamos la función “the_category()”, un buen lugar para colocar este elemento sería en el mismo lugar donde tenemos las funciones “the_author()” y “the_time()”, por lo tanto modificamos esta linea del archivo “index.php” de esta forma:

<cite>Publicado el <?php the_time(‘j/m/Y’) ?> por <?php the_author() ?></cite>
<cite>Publicado el <?php the_time(‘j/m/Y’) ?> por <?php the_author() ?> en: <?php the_category();?></cite>

Insertaremos además un código para mostrar una imagen en miniatura de las entradas, el código es el siguiente:

<div class="thumbnail">
<?php
if ( has_post_thumbnail() ) { 
the_post_thumbnail();
}
?>
</div>

Lo ponemos en el “loop”, por ejemplo, debajo del encabezado, pero no vamos a poder insertar ninguna imagen todavía, para ello vamos a editar el archivo “functions.php” de la siguiente forma:

<?php
add_theme_support('post-thumbnails');
set_post_thumbnail_size(180, 180, true);
?>

Si editamos una entrada o creamos una nueva, veremos un nuevo elemento en el panel de administración de WordPress

Si añadimos una “Imagen destacada”, esta se mostrará ahora junto a la entrada.

Continuaremos editando el archivo “category.php” para mostrar las entradas por categorias, el archivo “sidebar.php” y daremos mas forma y mas vida al ejemplo que estamos preparando.

El tema va tomando forma y adaptandose a nuestras necesidades a modo de blog, en la segunda parte de este articulo editamos el código para mostras las categorias en las entradas, pero nos dejamos en el tintero, ¿que pasa cuando pulsamos en una categoria?, el sistema nos debe de mostrar todas las entradas con la categoria seleccionada, esto lo hacemos editando el archivo “category.php” de la siguiente forma:

category.php

<?php get_header(); ?>
<section id="main">
<div>
<?php 
if ( have_posts() ) : ?>
<header>
<h1 class="archive-title">Categorias</h1>
</header>
<?php if (have_posts()) :  while (have_posts()) : the_post(); ?>
<h3>
<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
</h3>
<div class="thumbnail">
<?php
	if ( has_post_thumbnail() ) { 
		the_post_thumbnail();
	}
?>
</div>		
<?php the_excerpt(); ?>
<cite>Publicado el <?php the_time('j/m/Y') ?> por <?php the_author() ?> en: <?php the_category();?></cite>
<?php endwhile; else: ?>
<p><?php _e('Lo sentimos, no se han encontrado entradas en este apartado.'); ?></p>
<?php endif; 
else: ?>
<p>Lo sentimos, no se han encontrado entradas en este apartado.</p>
<?php endif; ?>
</div>
</section>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

Despues de esto, vamos a crear la sidebar, para que el sistema de WordPress nos muestre la sidebar y sus respectivas funciones, tenemos que editar de nuevo el archivo “functions.php” para añadir una función que lo haga posible.

functions.php

<?php
if(function_exists('register_sidebar'))
register_sidebar(array(
'name' => 'Main Sidebar',
'before_widget' => '<hr>',
'after_widget' => '',
'before_title' => '<h3>',
'after_title' => '</h3>',
));
?>

Ahora editamos el archivo “sidebar.php”, en la barra lateral podemos mostrar ciertos metodos predefinidos en el sistema como una lista de las categorías, un archivo del blog, un enlace para acceder al panel de administración o un enlace para suscribirse a RSS entre otros.

Para este ejemplo mostraremos una lista para ver el “Archivo del blog” y otra para ver las categorías.

sidebar.php

<aside id="sidebar">
<?php if (dynamic_sidebar('Sidebar Widgets')) : else : ?>
<div class="widget-container">    
<h2 class="widget-title">Archivo</h2>
<ul>
<?php wp_get_archives('type=monthly'); ?>
</ul>
</div>     
<div class="widget-container">    
<h2 class="widget-title">Categorias</h2>
<ul>
<?php wp_list_categories('show_count=1&title_li='); ?>
</ul>
</div>
<?php endif; ?>
</aside>

Ahora insertaremos una barra de busqueda en la sidebar, la barra de busqueda debemos colocarla antes de llamar a la función “dynamic_sidebar()”

<form method="get" id="searchform" action="<?php bloginfo('url'); ?>/">
<input type="text" value="<?php the_search_query(); ?>" name="s" id="s" />
<button type="submit" class="icon-only"  id="searchsubmit">Buscar</button>
</form>

Si hacemos una busqueda, no obtendremos ningún resultado, para obtener un resultado debemos editar el archivo “search.php”, el codigo para este archivo es el siguiente:

search.php

<?php get_header(); ?>
<section id="main">
<h2>Resultados de la búsqueda</h2>	
<?php if (have_posts()) :  while (have_posts()) : the_post(); ?>
<h3>
<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
</h3>
<div class="thumbnail">
<?php
if ( has_post_thumbnail() ) { 
the_post_thumbnail();
}
?>
</div>		
<?php the_excerpt(); ?>
<cite>Publicado el <?php the_time('j/m/Y') ?> por <?php the_author() ?> en: <?php the_category();?></cite>
<?php endwhile; ?>
<?php  else: ?>
<?php _e('Lo sentimos, no se han encontrado resultados.'); ?>
<?php endif; ?>
</section>
<?php  get_sidebar()?>
<?php get_footer(); ?>

Es el momento de añadir un poco de css para visualizar mejor la página, ¿recuerdas que hablamos del principio DRY? Para aquellos que no conozcan este principio significa “Don’t Repeat Yourself”, ¡No te repitas!, no vamos a profundizar demasiado en el tema, pero si debemos arreglar un poco el css para no hacer el archivo demasiado largo, hacemos unos cambios en el css antes de continuar, el archivo tiene 75 lineas, este es el código nuevo del archivo “style.css”.

/*
Theme Name: Didesweb
Theme URI: https://www.didesweb.com
Description: Didesweb, diseño y desarrollo web. Todos los derechos reservados.
Author: Roque Arnás Izquierdo
Author URI: https://www.didesweb.com
Version: 4.0
*/
* {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
ul, ol {list-style: none;}
a {text-decoration:none;}
a:link, a:visited{color:#FFFFFF;}
a:hover, a:active {color:#000000}
html {background: yellow;color:#CCCCCC;}
.wrapper {background: gray;}
#header, #footer  {
display:block;
width: 100%;
padding:2%;
}
#header {background: red;}
#footer {
clear:both;
text-align:center;
background: violet;	
}
#sidebar , #main {
float:left;
padding:2%;
background: orange;
}
#sidebar  {
width:20%;
background: orange;
}
#main {
width:80%;
background: green;
}
.menu {
display:block;
width: 100%;
background: blue;
}
.page_item {
display:inline-block;
margin: 8px;
}
ul.page-numbers li{
display:inline-block;
border:1px solid #000;
padding: 5px 10px;
border-radius: 3px;
}
.post-categories {
display:inline-block;
margin:0;
padding:0;
}
.post-categories  li{
display:inline;
}
@media only screen and (max-width: 992px){ 
#sidebar, #main, .menu, .page_item {
display:block;
width:100%;
}
.page_item {
text-align:center;
margin:5px 0;
}
#sidebar, #header, #main {
text-align:center;
}
}

El resultado del css no es muy agradable, tan solo hemos coloreado las secciones para destacar cada elemento y diferenciarlo rápidamente en la página, a partir de aquí el css es todo vuestro.

Perfecto, ya tenemos nuestra primera plantilla personalizada y podemos usarla como “framework” para comenzar nuestros proyectos.

Espero que os haya servido de ayuda para comenzar a crear vuestros propios temas de WordPress.

Crear un tema personalizado en WordPress

Comenzamos

Los archivos

Carpetas

Archivos

Secciones

Otros archivos

header.php

index.php

sidebar.php

footer.php

style.css

Instalar el tema

Como reconocer el tema

La barra de navegación

Las entradas

Mostrar las entradas en la página principal

Paginación

single.php

page.php

category.php

functions.php

sidebar.php

search.php

Cancelar la respuesta

Quizás te interese