Desarrollo de themes WordPress: Maquetación

Inicio » Tecnología » Diseño Web » Desarrollo de themes WordPress: Maquetación

Diseñar una web puede parecer complicado pero la verdad es que no lo es, cualquiera que tiene conocimientos básicos de html podría diseñar una web, una de las trabas que nos ponemos para no hacerlo es “no puedo”, “y si lo hago mal”, como les indiqué al inicio lo que quiero brindar en esta pequeña guía es un paso a paso de como hacer un theme para WordPress con todos sus efectos y con la calidad necesaria para poder competir con otros themes.

Si bien es cierto en la red podemos encontrar muchos themes algunos de pago y otros gratis, pero el adquirirlo no es igual a tener la satisfacción de utilizar un diseño o plantilla que hayas desarrollado por tus propios medios.

Luego de la instalación de WordPress

Una vez que hemos instalado nuetro servidor WordPress en local, lo siguiente que tenemos que hacer es crear la carpeta que será la de nuestro theme, a la cual para el ejemplo y trabajo la llamaré “mqimport”, la ruta a la carpeta del theme sería la siguiente:

Estructura de un theme

Antes de empezar tenemos que conocer primero cuál es la estructura básica de un theme de WordPress, digo básica porque un theme puede contener muchos ficheros sin embargo los básicos serían lo siguiente:

A mi parecer estos serían los archivos principales del theme, en el caso de los resultados de búsqueda si no se encuentra el archivo search.php los resultados serán mostrados en el fichero archives.php y si este no se encuentra se mostrarían en el index.php igual sucedería en el caso de archivo de entradas.

Definiendo nuestro theme

Aunque hayamos creado la carpeta para nuestro theme, éste aún no estará disponible para activarlo desde la administración de WordPress, no obstante se mostrará dentro de los themes dañados, esto es debido a que aún no ha sido declarado.

Para ello debemos crear un archivo CSS dentro de la carpeta del theme el cuál deberá ser llamado: style.css, en cual viene a ser la hoja de estilos de nuestro theme y donde se irán agregando todos los formatos del mismo.

Abrimos el archivo style.css y le agregamos lo siguiente:

Con el código anterior lo que hacemos es definir nuestro theme:

Theme Name, nombre del theme o template.

Theme URI, URL donde se puede encontrar información del theme.

Author, quien desarrolla el theme.

Author URI, URL donde se puede encontrar información del autor, puede ser el mismo que el de información del theme o la página personal del autor.

Description, describimos el theme para que sirve, que contiene, etc…

Version, la versión del theme 1.0, 1.x, 2.x, etc.

License, tipo de licencia del theme.

License URI, URL donde se puede encontrar información sobre la licencia.

Tags, son las etiquetas que definen las características del theme, esto no significa que podamos utilizar cualquier etiqueta, si no que tenemos que elegir las etiquetas que definen nuestro theme de las sugeridas por WordPress; para saber cuáles son las permitidas tenemos que acceder al Listado de etiquetas permitidas de WordPress y pulsar el botón “Feature Filter”.

Text Domain, será el nombre representativo del theme, el cual utilizaremos en algunas funciones para definirlas.

Una vez hayamos guardado los cambios, en el listado de theme nuestro theme ya aparecerá con el nombre que le dimos, pero aún nos mostrará un error ya que faltan los archivos que componen el theme, para solucionar este problema y poder activar nuestro theme seguiremos con el siguiente paso.

Index.php

Dentro de la carpeta del theme creamos el archivo index.php, lo abrimos y le agregamos valores como si de un archivo html normal se tratara:

Guardamos los cambios, y al revisar el listado de themes en la administración podremos apreciar que ya aparece nuestro theme para ser activado.

En el siguiente artículo vamos a empezar a desarrollar nuestro theme e ir creando las diferentes plantillas del theme.

Puedes descargar el archivo del ejemplo.

Comparte el artículo para descargar el archivo adjunto:

Avance de theme MQImport:

Avance de theme MQImport

Probando si se muestra seleccin de Google Adsense

Una respuesta a “Desarrollo de themes WordPress: Maquetación”

  1. Información Bitacoras.com

    Valora en Bitacoras.com: Diseñar una web puede parecer complicado pero la verdad es que no lo es, cualquiera que tiene conocimientos básicos de html podría diseñar una web, una de las trabas que nos ponemos para no hacerlo es “no puedo”, “y…

Deja un comentario