Crear tema desde cero – Parte 1

Publicado 31-12-2017

Tema desde cero parte 1

Con este artículo iniciamos una serie de entradas enfocadas a desarrollar un tema de Wordpress desde cero. Explicaremos paso a paso como construir la estructura y código base de un tema.

Importancia de conocer el código detrás de un tema de WordPress

Aunque una de las ventajas principales de WordPress es la facilidad de crear un sitio, siempre se presentará la necesidad de realizar ajustes en la apariencia que no siempre pueden realizarse con las opciones presentes en el área de administración.

Según se profundice más en la administración de un sitio y se realicen trabajos de diseño y desarrollo web basados en WordPress, es recomendable un mayor conocimiento de la estructura de los archivos y el código que estos contienen.

Configuración inicial

En este artículo elaboraremos un tema desde cero, para lo cual utilizaremos una instalación de wordpress reciente. En este caso hemos instalado WordPress en un servidor local en nuestro equipo tal como se muestra en la imagen a continuación:

Servidor Local

Servidor Local

Ubicación de los archivos del tema.

Para crear un nuevo tema y que éste sea visible en la sección de temas del administrador de WordPress debemos crear un nuevo folder en la carpeta themes de nuestra instalación.

En este caso hemos instalado nuestro servidor LAMP (Linux – Apache – MySql – PHP) en una version de Linux Mint. El directorio es el siguiente:

/var/www/html/wordpress/wp-content/themes.

En la imagen siguiente se puede visualizar el contenido del folder, en el cual hay tres carpetas que corresponden a los tres temas incluidos en una nueva instalación (twentyfourteen, twentythirteen y twentytwelve).

Folder de Temas

Folder de Temas

Creamos un nuevo folder con un nombre que nos permita identificar nuestro nuevo tema. En la imagen siguiente se muestra un folder con el nombre constelacionwebtheme.

Folder del Tema

Folder del Tema

A continuación crearemos dos archivos que son la base para iniciar el desarrollo del tema:

  • index.php
  • style.css

El archivo style.css define la información que se visualizará en las opciones de temas de WordPress. Adicionamos la información siguiente.

/*
Theme Name: Desarollo de Tema Desde Cero
Author: ConstelacionWeb
Author URI: http://www.constelacionweb.com
Version: 1.0
*/

Explicamos a continuación cada una de las lineas de este comentario

  • Theme Name: El nombre con el que se indetificará nuestro tema
  • Author: El nombre del autor
  • Author URI: Dirección del sitio web del autor.
  • Version: Version actual del tema.

En el archivo index.php adicionaremos el codigo siguiente, el cual muestra un título con la frase “Este es nuestro nuevo tema.”

<h1>
Este es nuestro nuevo tema!
</h1>

Visualizar el tema en el Panel de Control

Para verificar que WordPress identifica el tema que estamos desarrollando por medio del código adicionado en el archivo style.css, accedemos a la opción Apariencia>Temas. Como se puede observar en la imagen siguiente, nuestro nuevo tema ya esta incluido en la lista.

Temas en Panel de Control

Temas en Panel de Control

Nos posicionamos sobre el recuadro de nuestro tema y damos un clic en el boton Activar.

Activar Nuevo Tema

Activar Nuevo Tema

Ahora recargamos nuestra página y podremos visualizar nuestra nuevo tema con las palabras “Este es nuestro nuevo tema!”.

Nuevo Tema

Nuevo Tema

Por supuesto que este es un ejemplo básico ya que el tema no posee toda la funcionalidad necesaria. En la siguiente entrada daremos un paso adicional en la creación de nuestro tema desplegando los temas y contenidos de nuestras entradas (posts).