Atrévete a crear el negocio de tus sueños

WordPress: Crea tu Propio Tema con Thematic

wordpress

Cuando queremos crear un nuevo tema con WordPress tenemos tres opciones:

  1. Modificar el código de una plantilla ya existente.
  2. Crear nuestro propio tema desde cero.
  3. Utilizar un framework.

En este artículo hablaremos de como crear nuestro propio tema utilizando el framework Thematic.

Por qué utilizar un framework

Los frameworks nos ofrecen una base muy sólida sobre la que construir nuestros propios temas, ya que tienen todas las funciones definidas, así como un código por defecto de CSS y HTML. Usando los llamados hooks y filters, podemos sobreescribir y modificar las funciones preestablecidas, adaptándolas a nuestras necesidades. Un framework es ideal para aquellos que justo empiezan a desarrollar sus propios temas en WordPress, ya que ahorran el escribir todo el código. Además, es una manera muy buena de comprender como funciona WordPress antes de meternos de lleno en el desarrollo de plantillas desde cero, ya que nos permite ver como funciona el sistema de módulos de WordPress.

Parent Theme versus Child Theme

Los frameworks se basan en el sistema de utilzar child themes. El parent theme sería el framework que utilizamos, en este caso Thematic, y el Child Theme nuestro tema, que se construye sobre el parent theme. Así, todos los ficheros que escribamos en nuestro child theme sobreescribirán los comandos de los ficheros del mismo nombre ubicados en la carpeta del parent theme. Así, si en el parent theme hay una hoja de estilos llamada style.css y en ella establece el body de color azul y en el child theme aparece también una hoja de estilos llamada style.css en la que el body color es negro, en nuestro tema aparecerá el body negro. Por este motivo, se aconseja nunca, nunca modificar los archivos del parent theme, sino sobreescribir aquello que nos interese en el child theme.

Thematic

El framework Thematic ha sido desarrollado por Ian Stewart y es uno de los frameworks más populares que existen. Lo utilizan miles de usuarios, se han comprobado cientos de plugins que funcionan perfectamente y además existe una comunidad de apoyo muy importante. Así, la mayoría de dudas se solucionan en el foro de ThemeShaper. Este es el aspecto que tiene el parent theme Thematic:

 

Para que os hagáis una idea del aspecto que pueden tener los child themes de Thematic, aquí una muestra:

 

Instalación de Thematic

Lo primero que tenemos que hacer es descargar Thematic. Una vez descargado, vamos a nuestra carpeta themes de nuestra instalación de WordPress:

../instalacion_de_wordpress/wp-content/themes

y descomprimimos aquí el archivo. Dentro de la carpeta thematic, veremos una carpeta llamada thematicsamplechildtheme, que moveremos a la carpeta themes y la renombraremos con el nombre de nuestro tema.

Dentro de esta carpeta hay dos ficheros, uno es la hoja de estilos style.css y otra functions.php. Veamos el contenido de style.css:

/*
Theme Name: A Thematic Child Theme
Theme URI:
Description: Use this theme to start your Thematic Child Theme development.
Author: Ian Stewart
Author URI: http://themeshaper.com/
Template: thematic
Version: 1.0
Tags: Thematic
.
Thematic is © Ian Stewart http://themeshaper.com/
.
*/

/* Reset browser defaults */
@import url('../thematic/library/styles/reset.css');

/* Apply basic typography styles */
@import url('../thematic/library/styles/typography.css');

/* Apply a basic layout */
@import url('../thematic/library/layouts/2c-r-fixed.css');

/* Apply basic image styles */
@import url('../thematic/library/styles/images.css');

/* Apply default theme styles and colors */
/* It's better to actually copy over default.css into this file (or link to a copy in your child theme) if you're going to do anything outrageous */
@import url('../thematic/library/styles/default.css');

/* Prepare theme for plugins */
@import url('../thematic/library/styles/plugins.css');

Aquí hemos de sobreescribir algunas cosas. En “Theme Name:” escribimos a continuación el nombre de nuestro tema, en “Author:” nuestro nombre, etc. Importante: no modificar “Template: thematic”, porque esto es lo que indica que nuestro tema es un child theme de Thematic y si cambiamos esta línea, nuestro tema dejará de funcionar.

A continuación vemos que importa las hojas de estilo base de Thematic. Lo que haremos es modificar las URL y ofrecer un link a nuestras propias hojas de estilo. Por ejemplo, si queremos utilizar nuestro propio CSS reset, en lugar de:

@import url('../thematic/library/styles/reset.css');

escribiremos

@importurl(../nuestro_tema/nuestro_reset.css');

Es muy importante que si queremos hacer cambios sustanciales en el tema, copiemos la hoja de estilos default.css a la URL de nuestro tema. Así, cambiaremos este código:


@import url('../thematic/library/styles/default.css');

por este otro:


@import url('../nuestro_tema/default.css');

Para cualquier duda, poneros en contacto conmigo. De mi propia experiencia puedo decir que estoy encantada de utilizar Thematic, no sólo por todas las posibilidades que ofrece, sino también por todos los recursos online disponibles.

mi firma
Sandra Guerrero Sanmarti
¡Atrévete a crear el negocio de tus sueños! Porque hay que #emprender hoy para tener resultados mañana:-) + ¿te apuntas?
Sandra Guerrero Sanmarti
Sandra Guerrero Sanmarti
Sandra Guerrero Sanmarti

Comentarios

  • Enfant Terrible
    Responder

    ¡Hola!

    Muy buen post! Actualmente estoy trabajando con el thematic y va fino fino…pero tengo una duda a ver si me la podéis solucionar. ¿Como puedo quitar la fecha y la publicación de los posts que hago?

    Muchas gracias.

  • Benji
    Responder

    este framework es buenisimo pero siempre he batallado con algo, no se si puedas ayudarme, quiero usar una seleccion de paginas para redireccionar a alguna pagina, y en el output me pone el ID en lugar del nombre has probado esa funcion?, saludos.

    • Sandra

      hola Benji, no sé muy bien a lo que te refieres, igualmente en el foro de Thematic hay respuesta a casi todas las dudas que puedan surgir..

  • Charlie
    Responder

    Interesante post. Estoy probando el tema y va muy bien. Da mucho juego. Muchas gracias!!

  • Pepe
    Responder

    Tienes un tutorial de como adaptar mi plantilla web de html a wordpress? Gracias.


¿Y tú qué opinas? Deja un comentario...