Enralados

Guia de WordPress

Modificar un tema de WordPress no es una tarea complicada. Requiere conocimientos de CSS y, como todo en diseño web, alguna imaginación. Ciertas actitudes artísticas no estarían nada mal. Para ello hay que realizar algunas modificaciones en el archivo style.css entre otros.

Pero antes de meternos a cambiar la apariencia visual de nuestro tema debemos conocer como gestiona WordPress los distintos archivos que componen una plantilla o tema. Entender la filosofía de WordPress es importante si queremos realizar transformaciones de nuestra plantilla más profundas.

Es deseable tener algún conocimiento de PHP o por lo menos saber identificar claramente lo que es PHP y lo que no lo es. Si se le presta cuidado y atención al código no deben surgir mayores problemas. Pasemos a ver como "crea" WordPress nuestro Blog.

Cuando un usuario accede a través de su navegador web, WordPress busca en la carpeta de nuestro tema el archivo index.php. Este a su vez le indica a WordPress que otros archivos necesita para formar la página completa del Blog.

Por ejemplo, index.php llama al archivo header.php que es el encargado de generar la cabecera de nuestro Blog. Llama también a los archivos sidebar.php, searchform.php y footer.php que son los encargados de generar la barra lateral, el formulario de búsquedas y el pie del Blog respectivamente. Además index.php se encargará de mostrarnos en pantalla los post que existan.

Básicamente tomando como ejemplo el Tema Default este sería el esquema:

Se puede observar que index.php se forma uniendo los otros archivos php. También se puede observar que header.php contiene el inicio de la cadena HTML que cualquier página web necesita. De la misma forma footer.php es el cierre. Estos dos archivos siempre deben ser llamados por los demás cuando se quiera formar correctamente una página.

El Tema Default nos quedaría como sigue:

Este tema sólo viene con una columna en el sidebar. En el siguiente ejemplo se muestra un tema a dos columnas dentro del sidebar, como por ejemplo Statement. En este caso el archivo sidebar.php llama a otros dos, lsidebar.php y rsidebar.php, o sea, columna izquierda y columna derecha. La ventaja de separar las dos columnas es que las podemos situar juntas o separadas a ambos lados de la página tal como se muestra en las imagenes.

Además un tema puede contener algunos de los siguientes archivos:
- single.php - Muestra un único post.
- comments.php - Es llamado por single.php para mostrar y permitir comentarios
- page.php - Muestra una página. Las que se sitúan en el menú superior.
- search.php - Muestra los resultados de una búsqueda.
- image.php - Muestra una imagen de un Post.
- archive.php - Muestra el contenido de un Post cuando se selecciona desde archivos.
- category.php - Es usado para mostrar las categorías.
- 404.php - Muestra error de página no encontrada en nuestro dominio.
- author.php - Se usa cuando queremos mostrar información del autor.
- date.php - Muestra las búsquedas realizadas por fechas,
y la hoja de estilos CSS style.css. Este archivo es muy importante para WordPress. En la cabecera figuran los datos de nuestro tema que aparecen en el Panel de Control al cargar el tema, sin ella no será válido y WordPress lo rechazará. style.css nos permite modificar la apariencia de nuestro tema, colores de textos, ubicaciones de textos e imagenes, links, situación de sidebars, logos, formulario de búsqueda, RSS, etc. Se puede decir que style.css es quien da color y ubica en su correcta posición los distintos elementos de los que está compuesta nuestra página o Blog.

Junto con los archivos anteriores tenemos que incluir las distintas imágenes que deben aparecer en el blog. Logos, iconos, fondos, etc

Aunque las plantillas de WordPress no sean exactamente iguales la filosofía es siempre la misma. Tampoco todos los temas tienen los mismos archivos php pero lo explicado se puede aplicar a la gran mayoría. Además puedes personalizar tu propio tema agregando tus propios archivos php.

Incluso es posible realizar un tema a partir de un diseño en HTML, bastaría sustituir el código HTML por el correspondiente en PHP. Pero eso lo veremos en otro momento...

NOTA: Para mayor comprensión y claridad en las imágenes no se ha mostrado nada de código PHP. Se ha sustituido por puntos suspensivos