Tutorial: Cómo hacer un tema para wordpress

WordPress, nos ofrece una variedad de temas (gratuitos o pagados) para comenzar un sitio de blogging. Sin embargo, muchos de estos sitios, no nos brindan la estructura o el diseño acorde con nuestras necesidades y preferencias. En esta entrada vamos a ver cómo hacer un tema para wordpress a partir de un diseño propio.

Para ilustrar este tutorial, voy a utilizar el siguiente diseño. Lo puedes encontrar desde el sitio de W3Schools.

Anatomía de un tema de WordPress

Según el estandar para el desarrollo de temas de WordPress, la estructura de archivos se construye de la siguiente manera:

assets (directorio)
      - css (directorio)
      - images (directorio)
      - js (directorio)
inc (directorio)
template-parts (directorio)
      - footer (directorio)
      - header (directorio)
      - navigation (directorio)
      - page (directorio)
      - post (directorio)
404.php
archive.php
comments.php
footer.php
front-page.php
functions.php
header.php
index.php
page.php
README.txt
rtl.css
screenshot.png
search.php
searchform.php
sidebar.php
single.php
style.css

Así que, vamos a comenzar construyendo nuestro directorio para el tema.

Nota: Para este punto, ya debes tener listo tu entorno de servidor web local. Si no quieres preocuparte por las configuraciones, puedes usar XAMPP, WampServer o MAMP(Mac).

Dentro del directorio raíz de tu servidor local (htdocs, www, etc.) instalaremos una instancia de la versión más reciente de WordPress. Una vez instalada y configurada, vamos a acceder al directorio de temas dentro de la carpeta de instalación de WordPress (WordPress -> wp-content -> Themes). Ahí, crearemos un folder para nuestro proyecto, para esta práctica le llamaré WordPressUnProgramador.

Enseguida, crearemos los archivos básicos para configurar nuestro tema. Omitiré el resto de archivos porque no vamos a implementarlos en este tutorial.

Estructura del código del tema de wordpress

styles.css

Comenzaremos editando el archivo styles.css y agregaremos las siguientes líneas:

/*
Theme Name: WordPressUnProgramador
Theme URI: https://wordpress.org/themes/wordpressunprogramador/
Author: Un Programador Team
Author URI: https://unprogramador.com/
Description: Un tema creado para la comunidad de UnProgramador.com
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: wordpressunprogramador
Tags: four-columns, simple-blog
Este tema, así como WordPress, está bajo la licencia de GPL.
Utilízalo para algo genial y comparte lo aprendido con otros.
*/

Lo que se indique con (*) es información requerida para un tema del repositorio de WordPress.

Theme Name (*): Nombre del tema.
Theme URI: La URL de una página pública donde los usuarios puden encontrar más información del tema (si está registrado en el repositorio de WordPress).
Author (*): El nombre de quien ha desarrollado el tema. Se recomienda utilizar el nombre del autor registrado en WordPress.org
Author URI: La URL del autor que ha desarrollado el tema.
Description (*): Breve descripción del tema.
Version (*): La versión, escrita en X.X ó en el formato X.X.X .
License (*): La licencia del tema.
License URI (*): La URL de la licencia del tema.
Text Domain (*): Una palabra utilizada para la traducción del dominio.
Tags: Palabras clave o frases cortas que permitan a los usuarios encontrar el tema usando el filtro de temas. WordPress recomienda la siguiente lista de palabras clave.
Domain Path: WordPress lo utilizará para conseguir la traducción del sitio. Por default a /languages.

La mayoría de esta información se despliega en los detalles de la plantilla en el catálogo del administrador de WordPress.

Después de esta sección de cabecera, style.css puede contener los estilos CSS que el archivo permite.

index.php

Este archivo contiene código -html y php- para desplegar la información de la página principal. Por default, contiene el loop para mostrar los posts más recientes.

Loop de WordPress

El loop de WordPress es una estructura importante para mostrar los posts y metadatos de estos, dentro de nuestra plantilla.

<?php 
if ( have_posts() ) {
  while ( have_posts() ) {
    the_post(); 
    //
    // Contenido del post
    //
  } // fin del ciclo while
} // fin del ciclo if
?>

El código anterior es la forma en que se expresa la sintaxis del loop. Primero, estamos diciendo que, de existir posts publicados, vamos a pintarlos en nuestro tema. Luego, cómo queremos que se vea cada post (cómo los vamos a pintar), qué datos se van a mostrar de ellos, y finalmente, cerramos ciclos.

Header.php

Aquí se muestran las cabeceras de nuestro tema, menú de navegación y logotipo.

Footer.php

Contiene las instrucciones para el footer global así como las etiquetas de cierre de HTML.

Sí, bueno… ¿Quién tiene hambre?

Para comprender los conceptos anteriores, mejor vamos a ponerlos en práctica.

Del código que tenemos para el diseño de la plantilla, vamos a estructurarlo en los archivos style.css, header.php, index.php y footer.php para comenzar a ver “la magia” de WordPress.

Si estás usando, como yo, el código del diseño de W3Schools, tomaremos los estilos que vienen en la cabecera y los colocaremos en el archivo style.css

Eliminaremos este código

<style>
body,h1,h2,h3,h4,h5,h6 {font-family: "Karma", sans-serif}
.w3-bar-block .w3-bar-item {padding:20px}
</style>

y pasaremos los estilos a style.css quedando así

/*
Theme Name: WordPressUnProgramador
Theme URI: https://wordpress.org/themes/wordpressunprogramador/
Author: Un Programador Team
Author URI: https://unprogramador.com/
Description: Un tema creado para la comunidad de UnProgramador.com
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: wordpressunprogramador
Tags: four-columns, simple-blog
Este tema, así como WordPress, está bajo la licencia de GPL.
Utilízalo para algo genial y comparte lo aprendido con otros.
*/

body,h1,h2,h3,h4,h5,h6 {
  font-family: "Karma", sans-serif
}

.w3-bar-block .w3-bar-item {
  padding:20px
}

Ahora, tomaremos el código del head, el header, navegación y apertura de la etiqueta <body>, hacia el archivo header.php

De esta forma, pasamos este código a header.php

<!DOCTYPE html>
<html>
<title>W3.CSS Template</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Karma">

<body>

<!-- Sidebar (hidden by default) -->
<nav class="w3-sidebar w3-bar-block w3-card w3-top w3-xlarge w3-animate-left" style="display:none;z-index:2;width:40%;min-width:300px" id="mySidebar">
  <a href="javascript:void(0)" onclick="w3_close()"
  class="w3-bar-item w3-button">Close Menu</a>
  <a href="#food" onclick="w3_close()" class="w3-bar-item w3-button">Food</a>
  <a href="#about" onclick="w3_close()" class="w3-bar-item w3-button">About</a>
</nav>

<!-- Top menu -->
<div class="w3-top">
  <div class="w3-white w3-xlarge" style="max-width:1200px;margin:auto">
    <div class="w3-button w3-padding-16 w3-left" onclick="w3_open()">☰</div>
    <div class="w3-right w3-padding-16">Mail</div>
    <div class="w3-center w3-padding-16">My Food</div>
  </div>
</div>

**Antes del cierre de la etiqueta <head>, escribiremos la funcion <?php wp_head(); ?>

El código del contenido de la página lo colocaremos en index.php sin tomar en cuenta el footer y cierre del documento de HTML

<!-- !PAGE CONTENT! -->
<div class="w3-main w3-content w3-padding" style="max-width:1200px;margin-top:100px">

  <!-- First Photo Grid-->
  <div class="w3-row-padding w3-padding-16 w3-center" id="food">
    <div class="w3-quarter">
      <img src="https://www.w3schools.com//w3images/sandwich.jpg" alt="Sandwich" style="width:100%">
      <h3>The Perfect Sandwich, A Real NYC Classic</h3>
      <p>Just some random text, lorem ipsum text praesent tincidunt ipsum lipsum.</p>
    </div>
    <div class="w3-quarter">
      <img src="https://www.w3schools.com//w3images/steak.jpg" alt="Steak" style="width:100%">
      <h3>Let Me Tell You About This Steak</h3>
      <p>Once again, some random text to lorem lorem lorem lorem ipsum text praesent tincidunt ipsum lipsum.</p>
    </div>
    <div class="w3-quarter">
      <img src="https://www.w3schools.com//w3images/cherries.jpg" alt="Cherries" style="width:100%">
      <h3>Cherries, interrupted</h3>
      <p>Lorem ipsum text praesent tincidunt ipsum lipsum.</p>
      <p>What else?</p>
    </div>
    <div class="w3-quarter">
      <img src="https://www.w3schools.com//w3images/wine.jpg" alt="Pasta and Wine" style="width:100%">
      <h3>Once Again, Robust Wine and Vegetable Pasta</h3>
      <p>Lorem ipsum text praesent tincidunt ipsum lipsum.</p>
    </div>
  </div>

  <!-- Second Photo Grid-->
  <div class="w3-row-padding w3-padding-16 w3-center">
    <div class="w3-quarter">
      <img src="https://www.w3schools.com//w3images/popsicle.jpg" alt="Popsicle" style="width:100%">
      <h3>All I Need Is a Popsicle</h3>
      <p>Lorem ipsum text praesent tincidunt ipsum lipsum.</p>
    </div>
    <div class="w3-quarter">
      <img src="https://www.w3schools.com//w3images/salmon.jpg" alt="Salmon" style="width:100%">
      <h3>Salmon For Your Skin</h3>
      <p>Once again, some random text to lorem lorem lorem lorem ipsum text praesent tincidunt ipsum lipsum.</p>
    </div>
    <div class="w3-quarter">
      <img src="https://www.w3schools.com//w3images/sandwich.jpg" alt="Sandwich" style="width:100%">
      <h3>The Perfect Sandwich, A Real Classic</h3>
      <p>Just some random text, lorem ipsum text praesent tincidunt ipsum lipsum.</p>
    </div>
    <div class="w3-quarter">
      <img src="https://www.w3schools.com//w3images/croissant.jpg" alt="Croissant" style="width:100%">
      <h3>Le French</h3>
      <p>Lorem lorem lorem lorem ipsum text praesent tincidunt ipsum lipsum.</p>
    </div>
  </div>

  <!-- Pagination -->
  <div class="w3-center w3-padding-32">
    <div class="w3-bar">
      <a href="#" class="w3-bar-item w3-button w3-hover-black">«</a>
      <a href="#" class="w3-bar-item w3-black w3-button">1</a>
      <a href="#" class="w3-bar-item w3-button w3-hover-black">2</a>
      <a href="#" class="w3-bar-item w3-button w3-hover-black">3</a>
      <a href="#" class="w3-bar-item w3-button w3-hover-black">4</a>
      <a href="#" class="w3-bar-item w3-button w3-hover-black">»</a>
    </div>
  </div>

  <hr id="about">

  <!-- About Section -->
  <div class="w3-container w3-padding-32 w3-center">
    <h3>About Me, The Food Man</h3><br>
    <img src="https://www.w3schools.com//w3images/chef.jpg" alt="Me" class="w3-image" style="display:block;margin:auto" width="800" height="533">
    <div class="w3-padding-32">
      <h4><b>I am Who I Am!</b></h4>
      <h6><i>With Passion For Real, Good Food</i></h6>
      <p>Just me, myself and I, exploring the universe of unknownment. I have a heart of love and an interest of lorem ipsum and mauris neque quam blog. I want to share my world with you. Praesent tincidunt sed tellus ut rutrum. Sed vitae justo condimentum, porta lectus vitae, ultricies congue gravida diam non fringilla. Praesent tincidunt sed tellus ut rutrum. Sed vitae justo condimentum, porta lectus vitae, ultricies congue gravida diam non fringilla.</p>
    </div>
  </div>
  <hr>

Finalmente, colocamos el contenido del footer y cierre del documento en el archivo footer.php

**Antes del cierre de la etiqueta <body>, escribiremos la funcion <?php wp_footer(); ?>

<!-- Footer -->
<footer class="w3-row-padding w3-padding-32">
  <div class="w3-third">
    <h3>FOOTER</h3>
    <p>Praesent tincidunt sed tellus ut rutrum. Sed vitae justo condimentum, porta lectus vitae, ultricies congue gravida diam non fringilla.</p>
    <p>Powered by <a href="https://www.w3schools.com/w3css/default.asp" target="_blank">w3.css</a></p>
  </div>

  <div class="w3-third">
    <h3>BLOG POSTS</h3>
    <ul class="w3-ul w3-hoverable">
      <li class="w3-padding-16">
        <img src="https://www.w3schools.com//w3images/workshop.jpg" class="w3-left w3-margin-right" style="width:50px">
        <span class="w3-large">Lorem</span><br>
        <span>Sed mattis nunc</span>
      </li>
      <li class="w3-padding-16">
        <img src="https://www.w3schools.com//w3images/gondol.jpg" class="w3-left w3-margin-right" style="width:50px">
        <span class="w3-large">Ipsum</span><br>
        <span>Praes tinci sed</span>
      </li>
    </ul>
  </div>

  <div class="w3-third w3-serif">
    <h3>POPULAR TAGS</h3>
    <p>
      <span class="w3-tag w3-black w3-margin-bottom">Travel</span> <span class="w3-tag w3-dark-grey w3-small w3-margin-bottom">New York</span> <span class="w3-tag w3-dark-grey w3-small w3-margin-bottom">Dinner</span>
      <span class="w3-tag w3-dark-grey w3-small w3-margin-bottom">Salmon</span> <span class="w3-tag w3-dark-grey w3-small w3-margin-bottom">France</span> <span class="w3-tag w3-dark-grey w3-small w3-margin-bottom">Drinks</span>
      <span class="w3-tag w3-dark-grey w3-small w3-margin-bottom">Ideas</span> <span class="w3-tag w3-dark-grey w3-small w3-margin-bottom">Flavors</span> <span class="w3-tag w3-dark-grey w3-small w3-margin-bottom">Cuisine</span>
      <span class="w3-tag w3-dark-grey w3-small w3-margin-bottom">Chicken</span> <span class="w3-tag w3-dark-grey w3-small w3-margin-bottom">Dressing</span> <span class="w3-tag w3-dark-grey w3-small w3-margin-bottom">Fried</span>
      <span class="w3-tag w3-dark-grey w3-small w3-margin-bottom">Fish</span> <span class="w3-tag w3-dark-grey w3-small w3-margin-bottom">Duck</span>
    </p>
  </div>
</footer>

<!-- End page content -->
</div>

<script>
// Script to open and close sidebar
function w3_open() {
  document.getElementById("mySidebar").style.display = "block";
}

function w3_close() {
  document.getElementById("mySidebar").style.display = "none";
}
</script>

</body>
</html>

Ahora, para colocar la cereza del pastel, vamos a añadir un archivo .jpg con la imagen de nuestro diseño, en el directorio raíz, a la par de donde están nuestros otros archivos .php de la plantilla. WordPress recomienda una medida de 1200 px de ancho por 900 pixeles de alto.

Pero… con esto todavía no podremos ver nuestro tema en acción. Para eso, necesitamos vincular cada parte.

Colocamos dentro de index.php la llamada de nuestro header y footer, al inicio y final respectivamente.

<?php get_header(); ?>
<!-- !PAGE CONTENT! -->
<div class="w3-main w3-content w3-padding" style="max-width:1200px;margin-top:100px">

  <!-- First Photo Grid-->
  <div class="w3-row-padding w3-padding-16 w3-center" id="food">
    <div class="w3-quarter">
      <img src="https://www.w3schools.com//w3images/sandwich.jpg" alt="Sandwich" style="width:100%">
      <h3>The Perfect Sandwich, A Real NYC Classic</h3>
      <p>Just some random text, lorem ipsum text praesent tincidunt ipsum lipsum.</p>
    </div>
    <div class="w3-quarter">
      <img src="https://www.w3schools.com//w3images/steak.jpg" alt="Steak" style="width:100%">
      <h3>Let Me Tell You About This Steak</h3>
      <p>Once again, some random text to lorem lorem lorem lorem ipsum text praesent tincidunt ipsum lipsum.</p>
    </div>
    <div class="w3-quarter">
      <img src="https://www.w3schools.com//w3images/cherries.jpg" alt="Cherries" style="width:100%">
      <h3>Cherries, interrupted</h3>
      <p>Lorem ipsum text praesent tincidunt ipsum lipsum.</p>
      <p>What else?</p>
    </div>
    <div class="w3-quarter">
      <img src="https://www.w3schools.com//w3images/wine.jpg" alt="Pasta and Wine" style="width:100%">
      <h3>Once Again, Robust Wine and Vegetable Pasta</h3>
      <p>Lorem ipsum text praesent tincidunt ipsum lipsum.</p>
    </div>
  </div>

  <!-- Second Photo Grid-->
  <div class="w3-row-padding w3-padding-16 w3-center">
    <div class="w3-quarter">
      <img src="https://www.w3schools.com//w3images/popsicle.jpg" alt="Popsicle" style="width:100%">
      <h3>All I Need Is a Popsicle</h3>
      <p>Lorem ipsum text praesent tincidunt ipsum lipsum.</p>
    </div>
    <div class="w3-quarter">
      <img src="https://www.w3schools.com//w3images/salmon.jpg" alt="Salmon" style="width:100%">
      <h3>Salmon For Your Skin</h3>
      <p>Once again, some random text to lorem lorem lorem lorem ipsum text praesent tincidunt ipsum lipsum.</p>
    </div>
    <div class="w3-quarter">
      <img src="https://www.w3schools.com//w3images/sandwich.jpg" alt="Sandwich" style="width:100%">
      <h3>The Perfect Sandwich, A Real Classic</h3>
      <p>Just some random text, lorem ipsum text praesent tincidunt ipsum lipsum.</p>
    </div>
    <div class="w3-quarter">
      <img src="https://www.w3schools.com//w3images/croissant.jpg" alt="Croissant" style="width:100%">
      <h3>Le French</h3>
      <p>Lorem lorem lorem lorem ipsum text praesent tincidunt ipsum lipsum.</p>
    </div>
  </div>

  <!-- Pagination -->
  <div class="w3-center w3-padding-32">
    <div class="w3-bar">
      <a href="#" class="w3-bar-item w3-button w3-hover-black">«</a>
      <a href="#" class="w3-bar-item w3-black w3-button">1</a>
      <a href="#" class="w3-bar-item w3-button w3-hover-black">2</a>
      <a href="#" class="w3-bar-item w3-button w3-hover-black">3</a>
      <a href="#" class="w3-bar-item w3-button w3-hover-black">4</a>
      <a href="#" class="w3-bar-item w3-button w3-hover-black">»</a>
    </div>
  </div>

  <hr id="about">

  <!-- About Section -->
  <div class="w3-container w3-padding-32 w3-center">
    <h3>About Me, The Food Man</h3><br>
    <img src="https://www.w3schools.com//w3images/chef.jpg" alt="Me" class="w3-image" style="display:block;margin:auto" width="800" height="533">
    <div class="w3-padding-32">
      <h4><b>I am Who I Am!</b></h4>
      <h6><i>With Passion For Real, Good Food</i></h6>
      <p>Just me, myself and I, exploring the universe of unknownment. I have a heart of love and an interest of lorem ipsum and mauris neque quam blog. I want to share my world with you. Praesent tincidunt sed tellus ut rutrum. Sed vitae justo condimentum, porta lectus vitae, ultricies congue gravida diam non fringilla. Praesent tincidunt sed tellus ut rutrum. Sed vitae justo condimentum, porta lectus vitae, ultricies congue gravida diam non fringilla.</p>
    </div>
  </div>
  <hr>
<?php get_footer(); ?>

y ¡Voila!, ya podemos activarlo en WordPress.
Ve a tu administrador de WordPress en el menú lateral Apariencias -> Temas y actívalo.

Con esto, podrás ver que WordPress ya reconoce la estructura de tu tema. En el siguiente tutorial, vamos a agregar el loop y funciones para el paginador. También mejoraremos nuestra estructura para los archivos css y js.

Esto te podría interesar

Un comentario en «Tutorial: Cómo hacer un tema para wordpress | Parte 1»

Jorge camacho dice:

16/07/2018 a las 2:20 am

Ojalá pongan más tutoriales de WordPress muy buen post

Responder

Deja un comentarioCancelar respuesta

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Tutorial: Cómo hacer un tema para wordpress | Parte 1

Anatomía de un tema de WordPress

Estructura del código del tema de wordpress

styles.css

index.php

Loop de WordPress

Header.php

Footer.php

Sí, bueno… ¿Quién tiene hambre?

Me gusta esto:

Esto te podría interesar

por Nancy Toledo

Un comentario en «Tutorial: Cómo hacer un tema para wordpress | Parte 1»

Deja un comentarioCancelar respuesta

Tutorial: Cómo hacer un tema para wordpress | Parte 1

Anatomía de un tema de WordPress

Estructura del código del tema de wordpress

styles.css

index.php

Loop de WordPress

Header.php

Footer.php

Sí, bueno… ¿Quién tiene hambre?

Comparte esto:

Me gusta esto:

Esto te podría interesar

por Nancy Toledo

Entradas relacionadas

Vistas Materializadas

accesibilidad web y cómo llegar a una audiencia más amplia

Controla tus versiones de Node.js con NVM

Un comentario en «Tutorial: Cómo hacer un tema para wordpress | Parte 1»

Deja un comentarioCancelar respuesta