¿Cómo crear un tema de WordPress?


Comprender el complejo funcionamiento de la estructura/jerarquía de una plantilla o tema de WordPress es imprescindible para el proceso de creación de un sitio web.

Por ello, parece increíble que únicamente sean necesarios 2 archivos para crear un tema en este framework: el archivo style.css, que contiene el nombre del tema, autor, descripción, etc., y el archivo index.php, siendo este el archivo principal que se ejecuta el entrar a un sitio web basado en WordPress.

Analizando la estructura de WordPress

Como se puede notar en la imagen, debemos crear dentro de la carpeta wp-content/themes una nueva carpeta llamada blog. Es muy importante seguir este paso, pues trabajaremos en ella en este curso.

Empecemos con el archivo principal style.css, que contiene lo siguiente:

/*
Theme Name: Blog
Theme URI: https://herelodin.com/
Author: Herel odin
Author URI: https://herelodin.com/
Description: Mi primer tema de wordpress
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: blog
Tags: awesome theme
*/

body{
    margin :0px;
    padding :0px;
}

Notarás que en las primeras líneas de este archivo se encuentran algunas etiquetas que WordPress leerá para mostrar en el administrador.

  • Theme Name: aquí se añade el nombre del blog. En nuestro caso este se llama literalmente blog, pero puede ser cualquier otro.
  • Theme URI: es el URL del tema. Puedes colocar el de tu sitio web.
  • Author: nombre del autor. Puedes poner tu nombre o el de la empresa que está desarrollando el tema.
  • Description: es la descripción del tema. Por ejemplo, si es una tienda en línea o el producto del que se trate.
  • Version: indica el número de versión. Normalmente empieza en 0.1
  • License: muestra el tipo de licencia, ya sea gratuita o versión de pago. Más información aquí.
  • Text Domain: este apartada es de gran importancia, ya que nos puede ayudar a desarrollar temas hijos o añadir traducciones en varios idiomas a nuestro sitio. Te recomendamos usar un concepto corto que identifique tu tema, en este caso lo dejaremos como blog.
  • Tags: son las etiquetas. Estas sirven en caso de subir tu tema a la tienda de WordPress, ayudaran a identificar tu tema a la hora de buscarlo.

¿Qué función tiene el archivo index.php en WordPress?

¿Recuerdas el tema anterior dónde configuramos nuestro localhost con ayuda de XAMPP? Ahí creamos el URL http://localhost/blog, que ahora nos será útil. Entramos al administrador (desde el navegador) donde activaremos el tema que creamos, en este caso blog. Esta ejecución nos da como resultado mandar a llamar los siguientes archivos:

  • Core de wordpress
  • functions.php
  • index.php que a su vez puede mandar a llamar el header y footer de nuestro tema.

En el siguiente ejemplo puedes ver el contenido del archivo index.php

<?php get_header(); ?>
    <div class="container">
        <div class="row">
            <div class="col-12">
                Mi primer blog en wordpress
            </div>
        </div>
    </div>
<?php get_footer();?>

Como te habrás dado cuenta, usamos las funciones get_header y get_footer para mandar a llamar al header y footer, este será un tema en el que profundizaremos más adelante.

¡Gracias por comentar y compartir este curso! En el siguiente tema abordaremos como añadir estilos css.