Blog de noticias de Inbound Marketing

¿Cómo crear un tema de WordPress desde cero?

Escrito por Javier Gutiérrez | 2 de noviembre de 2021 12:52:23 Z

Si quieres crear tu página web, una de las opciones que puedes utilizar es WordPress, es cierto que puede parecer complicado a primera vista, sobre todo el hecho de crear una plantilla desde cero. Este es un CMS que trabaja con un sistema de plantillas que tienen un uso sencillo y un desarrollo rápido. Si no quieres usar ninguna de estas plantillas, ya sea porque no encuentras la ideal o porque prefieres darle un toque personalizado, aquí te vamos a enseñar a crear una desde cero. 

Conocimientos básicos que debes tener para poder crear una plantilla en WordPress

  1. HTML

    Sería conveniente para poder crear tu plantilla de WordPress que sepas algo del lenguaje HTML, el cual es el que interpretan los navegadores, así que es la base para poder mostrar tu contenido. No es muy difícil de aprender y te permitirá que maquetes tu sitio web. 

  2. CSS
    Este es el lenguaje que le da estilo a tu página, es decir, aquello que mejora la apariencia de la web. 

  3. PHP
    Este es otro lenguaje de programación que permite que el contenido que creas sea dinámico. De este lenguaje no es necesario tener grandes conocimientos, no es necesario para crear una plantilla que programes funciones propias ya que WordPress tiene todas las que puedas necesitar.

  4. WordPress
    Si vas a crear una plantilla para WordPress, lo normal es que conozcas a la perfección el CMS, sabiendo el funcionamiento de la misma, así como las entradas, páginas, configuración y demás. 

¿Qué necesito para crear una plantilla en WordPress? 

Gracias a esta lista de herramientas que te mostramos a continuación, podrás hacer las cosas más fáciles y rápido:

  1. WordPress
    Como es lógico y no podía ser de otra forma, este es el CMS en el que vas a realizar el tema, por lo que necesitarás tener la última versión actualizada. 

  2. Servidor local
    Puedes crear perfectamente una plantilla desde cero en el hosting de WordPress, pero es mejor que instales un servidor local dentro de tu ordenador y puedas trabajar desde ahí.

  3. Editor de código
    Existen muchos editores de código, el más recomendado por su extensión y personalización es Visual Studio Code, el cual además es gratuito, otro plus para utilizarlo. 

  4. Codex
    Esto es la documentación oficial para los desarrolladores que es de utilidad para poder entender mejor WordPress y sus distintas funciones. 

¿Cómo crear una plantilla de WordPress desde cero

  1. Crea las bases

    Si quieres crear una plantilla desde cero, tendrás que empezar como con todo, desde la base, cogeremos los archivos base e iremos escalando. 

    En este momento lo único que tienes es un HTML plano que WordPress no reconoce, para que detecte tu plantilla, antes se deben cumplir ciertos requisitos. Debes tener los archivos style.css e index.php.

  2. Sistema de carpetas
    Los archivos del tema, deben estar todos dentro de la carpeta de temas que tiene WordPress. Se crea una carpeta llamada “raiola” donde podrás crear todos los ficheros del mismo. Dentro de esta debes copiar todo el contenido de la plantilla HTML base. 

  3. Style.css
    Wordpress analizará todas las carpetas leyendo la información del archivo “style.css” que hay dentro de cada una. En la carpeta “raiola” que ya has creado, debes crear el archivo style.css y escribir el código con la información del tema.  Cuando ya hayas guardado los cambios, verás que en el menú “Apariencia > temas” aparece ya tu tema. Aunque aún hay que hacer muchas cosas. 

  4. Index.php
    Este es el fichero principal del tema, en el que veremos todas las entradas. Para poder crearlo, toma el index.html y crea un archivo PHP llamado index.php con el mismo contenido. Guarda esto en la carpeta del tema. Desde este momento ya será reconocido como tema para WordPress, así que podrás activarlo. 

  5. Loop de entradas

    Esto es la consulta que hace WordPress a la base de datos en busca de posts. Para usarlo en la plantilla, debes ir a la sección de “BLOG POST” y copiar el HTML siguiente: 

    Para poder ver las entradas, tienes que especificar las propiedades de las funciones de WordPress.  Aquí se usará:

    • Título
    • Descripción corta
    • Leer más
    • Fecha
    • Autor
    • Imagen destacada

     

    Después de esto, sustituyendo el texto por su función en PHP, se generan los posts. ¡Ya podemos ver algo más claro!

  6. Funciones del tema

    Existe un lugar en el que colocar todo el código de funcionalidades: el archivo functions.php. Aquí podremos encontrar todo el código que construye una funcionalidad específica. Una vez llegados a este paso, para crear el tema en WordPress, tendrás que usar una serie de funciones. Antes de nada, crea el archivo functions.php en la carpeta del tema y escribe el código que necesites para las siguientes funciones:

    • Tamaño de imagen 

    WordPress posee de manera predeterminada cinco tamaños distintos de imagen que son: miniatura, pequeña, mediana, grande y tamaño completo. Por tanto, debes registrar el tamaño de imagen que necesites.

     

     

    • Soporte de títulos

    Debes hacerle saber a WordPress que tu tema no incluye la meta etiqueta <title> y que puede generarla. 

     

    • Registrar estilos

    Debe conocer también los elementos que va a cargar, así que deberás poner las hojas de estilo CSS que necesites “en cola”, utilizando para ellos el hook wp_enqueue_style. 

  7. Partes de la plantilla

    En WordPress puedes agrupar los elementos repetidos en la web, los que son constantes en toda la web son:

    • header.php

    Ve a la carpeta del tema y crea el archivo header.php, una vez ahí, corta el código HTML desde <!DOCTYPE> hasta </NAV> y pégalo en header.php. Ahora tienes que ir a index.php y llamar al fichero al principio del documento:



  8. Logo personalizado

    Habilita la opción de logo personalizado y colócalo en functions.php. Ahora ya podrás seleccionar un logo desde Apariencia > Personalizar > Identidad del sitio. Después, ve a header.php y borra la línea del nombre del sitio:

  9. Menú
    Debes registrarlo en functions.php y mostrarlo en header.php, así podrás modificarlo dentro de Apariencia > Menús.

  10. Paginación
    Si tienes más artículos de los que puedes mostrar en una página, deberás facilitar al usuario la forma de llegar a ellos, para esto puedes usar la función de WordPress de paginación, paginate_links(), que los crea automáticamente.

Con estos sencillos pasos conseguirás crear un tema en WordPress desde cero, ahora solo necesitas crear las plantillas y ya tendrás todo listo para tu web totalmente personalizada.