Desarrollar tu propio Tema de Wordpress desde cero

Fundamentos para el desarrollo de un Tema de Wordpress desde cero; los conocimientos requeridos en programación, los archivos de plantillas y su respectiva ubicación

Conocimentos Requeridos para Desarrllar Temas en Wordpress

En este artículo se asume que el lector tiene conocimentos en los siguientes temas:

  • Diseño Web Responsivo
    • HTML5
    • CSS3
    • JavaScript
  • Desarrollo Web:
    • PHP 7 o superior
  • Worpress
    • Los Temas en Worpress (Plantillas)
    • Programación de PHP en Wordpress (funciones, etiquetas y ganchos)

Entendiendo el desarrollo de programación PHP en Wordpress

Dado que Wordpress es una aplicación web escrita en PHP, cuenta con funciones y estructuras de control en este lenguaje de programación y que estas tienen una ideologia, taxonomia y estructura de acuerdo a los programadores encargados de desarrollar la aplicación.

En este sentido Wordpress cuenta con funciones en PHP disponibles para recuperar información para en nuestro caso mostrarla en nuestra Tema de Wordpress; como son las etiquetas de plantilla y los ganchos de acción.

Ubicación de las Carpetas y Archivos de Plantilla de los Temas en Wordpress

Los temas de WordPress se almacenan en su propia carpeta en la siguiente ubicación:

wp-content/themes/

En esta carpeta, es en donde se debe crear una nueva carpeta denominada my-theme o cualquier otro que refleje tu Tema.

Nombre único para la carpeta de tu Tema

La carpeta que creó necesita un nombre único, descriptivo y breve para identificarlo fácilmente.

Los nombres de carpeta de temas no deben contener números ni espacios. Tu tema no debe tener el mismo nombre de carpeta que otro tema. Si piensas compartir el tema, debe comprobar que otro tema con ese nombre no se ha subido al Directorio Temático de WordPress.org.

Los Archivos de Plantillas

Cada sección de un sitio web con Wordpress se da en su propio archivo para contener código HTML y PHP que sólo se aplica a esa sección – cada archivo se le llama como una «plantilla».

Si utilizas publicaciones personalizadas, puedes crear plantillas que sólo se apliquen a publicaciones de ese tipo. Si desea que los mensajes de una categoría específica se diseñen de forma diferente, puede hacerlo utilizando las instrucciones if … then … dentro del loop.

Cada archivo de la plantilla debe utilizar el nombre correcto definido por la documentación de WordPress.

Algunos de los archivos de plantilla:

  • header.php – contiene cualquier HTML que vaya en la parte superior de sus páginas, a partir de <!DOCTYPE html>
  • style.css – se utiliza para definir los estilos CSS del Sitio Web.
  • index.php – se utiliza para mostrar la página de inicio y como plantilla predetrminada.
  • single.php – se utiliza para mostrar una solo Entrada de tu blog
  • page.php – se utiliza para mostrar una sola Página de tu blog
  • comments.php – define cómo se muestran los comentarios y el cuadro de texto del comentario
  • footer.php – contiene cualquier HTML que vaya al final de sus páginas, incluyendo </html>

Para obtener una lista completa de plantillas, visite el manual de desarrollo de temas de WordPress.

Ahora que tienes una carpeta para almacenar el tema, necesita crear algunos archivos básicos de la plantilla.

Los Archivos de Plantillas Fundamentales para iniciar tu Tema

Los temas de WordPress se pueden crear con sólo dos archivos que WordPress los utilizara para publicar cada página de tu sitio web:

  • index.php
  • style.css

El archivo style.css

El primer paso después de crear estos dos archivos es agregar información del tema en el archivo style.css en formato de comentarios CSS con varias líneas como se muestra a continucación:

/*
Theme Name: My Theme
Theme URI: https://www.exasoluciones.com
Author: Webmaster ExaSoluciones
Author URI: https://www.exasoluciones.com
Description: Mi Primer Tema Wordpress
Version: 1.0
License: GNU General Public License v3 or later
License URI: http://www.gnu.org/licenses/gpl-3.0.html
*/

* {
box-sizing: border-box;
}
body {
background-color: #f9f9f9;
font-family: Helvetica;
}

Worpress leera esta información para dar fe del tema y la utilizarla en el panel de control de administración. Hay varias palabras clave de encabezado disponibles para definir información como el autor (su nombre), sitio web del autor, una descripción del tema, el nombre del tema, la versión del tema, licencias, etc.

El formato para escribir encabezados es Palabra clave: Information, todo acotado como comentario.

Nota: Las últimas líneas de encabezado de licencias sólo son necesarias si planeas compartir tu tema en WordPress.org. Si va a utilizar el tema en su propio sitio web, puede omitir esas dos líneas y cerrar la sección de comentarios.

Nota: Despues de los encabezados se agregaran todas las reglas CSS requeridas del Tema; como cualquier archivo de estilos CSS.

Visualización del Tema en el Panel de Administración

En este punto, su tema ya está visible en la sección del tema del panel de control de administración. Verá una imagen de cuadro blanco y gris con My Theme escrito debajo de él. Podemos ver una captura de pantalla a continuación para mostrar el resultado:

 

Si activa el tema en este momento, obtendrá una página principal en blanco, ya que su index.php está vacío y no existen los archivos de plantillas.

El archivo index.php

El archivo index.php define la página de inicio y también se utilizará como el diseño predeterminado si no se encuentran archivos de plantillas específicas (por ejemplo, single.php, page.php que veremos más adelante).

<?php get_header(); ?>
<div class="principal">
<main class="contenido">
    <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
      <article class="article-loop">
        <header>
         <h2>
           <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a>
          </h2>
         By: <?php the_author(); ?>
        </header>
     <?php the_excerpt(); ?>
    </article>
    <?php endwhile; else : ?>
      <article>
       <p>Error, No se encontró ninguna publicación!</p>
      </article>
    <?php endif; ?>
  </main>
  <?php get_sidebar(); ?>   
</div>
<?php get_footer(); ?>

Usaremos etiquetas de plantilla para asegurarnos de que el código de encabezado (get_header), barra lateral (get_sidebar) y pie de página (get_footer) esté incluido en nuestra página principal.

También utilizaremos los elementos semánticos HTML5 <main>, <header> y <article>. Algunos de nuestros elementos tendrán clases asignadas a ellos, y las clases se escribirán cuando lleguemos al archivo style.css.

El ciclo comienza en <?php if (have_posts ()): while (have_posts ()): the_post (); ?> y termina en <? php endif; ?>. Dentro del bucle, se utilizan las siguientes etiquetas de plantilla:

  • <?php the_permalink (); ?> – genera la URL correcta de la publicación real
  • <?php the_title_attribute (); ?> – emite el título de la publicación en un formato seguro para el atributo title del enlace
  • <?php the_title (); ?> – emite el título de la publicación
  • <?php the_author (); ?> – emite el nombre del autor
  • <?php the_excerpt (); ?> – emite el extracto de la publicación, que se genera automáticamente si no escribe su propio

Guarda el archivo index.php y cargarlo en el directorio de su tema. Si visita su sitio ahora, verá una página muy simple.

Completar el diseño de la plantilla con el Encabezado y el Pié de Página

En este punto Worpress tomó el archivo index.php para mostrar los contenidos, ya sea una página, una entrada, todas las entradas, etc. Pero en el sentido estricto del documento HTML, no se ha definido la estructura general del documento HTML; que son la declaración <!Doctype html>, el marcado de las etiquetas <html>, <head>, <body> y sus respectivos cierres. Así como las respectivas etiquetas informativas anidadadas en <head> como son <title> o <meta> entre otras más. Tampoco se agregó la etiqueta <header> para el encabezado ni la etiqeta <footer> para el pie de página del Sitio.

Pero wordpress al no encontrar los archivos header.php ni footer.php en el Tema que estamos desarrollando: Wordpress agregó las etiquetas html faltantes, de acuerdo a los archivos predeterminados de la aplicación. En donde tambien se agregarón las etiquetas de plantilla y los ganchos de acción también requeridos para el funcionamiento del Tema de Wordpress.

Esto no nos sirve de mucho porque seguramente vamos a querer que nuestro Tema tenga una visualización más Profesional; mostrando por ejemplo en el Encabezado: un Logotipo en sintonia con el Título del Sitio y talvez también la descripción del Sitio, y un menú de Navegación Horizontalmente. Así como también quisieramos mostrar un Pié de Página con: enlaces y/o notas importantes del Sitio Web.

Con estas necesidades vamos a agregar los archivos header.php y footer.php en la carpeta del Tema que estamos desarrolando.

El archivo header.php

header.php definirá la parte superior de nuestro documento, comenzando con la declaración DOCTYPE.

Todos los documentos HTML deben comenzar con una declaración DOCTYPE, que te indican a tu navegador web cómo interpretar el documento de acuerdo a la versión del HTML.

La etiqueta <html> de apertura necesita un atributo de idioma y WordPress proporciona una función para introducir el código de idioma correcto para el idioma que escogió durante la instalación y que es: language_attributes().

En el campo de título, utiliza una línea de código que muestra el nombre de tu sitio, seguido de una instrucción abreviada if… then… para mostrar el lema de tu sitio web O el título de la página o publicación actual que estás viendo.

Los ? character es un operador condicional de PHP llamado operador ternario. En esta línea de código, is_front_page() es una función de WordPress que devuelve TRUE si se visualiza la portada, o FALSE si se está viendo cualquier post o página. La función antes de los dos puntos se utiliza si TRUE se devolvió, y la función después de los dos puntos se utiliza si se devuelve FALSE.

Como veremos a continuación, la función bloginfo() se utiliza repetidamente con diferentes parámetros para obtener diferentes partes de información de la base de datos de WordPress. Antes de que la etiqueta <head> se cierre con </head>, debe incluir el gancho de acción wp_head() para asegurarse de que se ejecutan las funciones asociadas a él.

La función body_class() le da a su cuerpo las clases CSS predeterminadas establecidas por WordPress. La última línea permite visualizar el menú de navegación si se ha creado uno en el panel de control del administrador. El header.php final se parece a esto:

<!DOCTYPE html>
<html <?php language_attributes(); ?>
 <head>
   <title><?php bloginfo('name'); ?> &raquo; <?php is_front_page() ? bloginfo('description') : wp_title(''); ?></title>
   <meta charset="<?php bloginfo( 'charset' ); ?>">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">
   <?php wp_head(); ?>
 </head>
 <body <?php body_class(); ?>>
   <header class="my-logo">
   <h1><a href="<?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo('name'); ?></a></h1>
 </header>
 <?php wp_nav_menu( array( 'header-menu' => 'header-menu' ) ); ?>

Si deseas utilizar un logotipo como encabezado, reemplaza <?php bloginfo (‘name’); ?> con su código de imagen dentro de las etiqueta <header>.

Guarda header.php y subelo a la carpeta de tu tema.

El archivo footer.php

footer.php define el pie de cada página y debe cerrar cualquier etiqueta HTML abierta en otros archivos de plantilla. En este caso, <body> y <html> siguen abiertos desde header.php.

También debe incluir el gancho de acción wp_footer() para garantizar que cualquier código final de WordPress y JavaScript se añada a la página. Si ha iniciado sesión como administrador cuando visitó su página principal, publicaciones o páginas, notará que falta la barra de administración. El código que muestra la barra de administración se engancha al gancho de acción wp_footer().

También agregaremos el elemento semántico HTML5 <footer> </ footer> para definir explícitamente nuestro pie de página.

    <footer>
      <p>Copyright &copy; 2022</p>
    </footer>
    <?php wp_footer(); ?>
  </body>
</html>

Agregar las funcionalidades a nuestro Tema de Wordpress

Los temas en wordpress incorporan funcionalidades en el archivo de plantilla functions.php, este archivo contiene tanto código PHP personalizado como código PHP proveniente de codex de Wordpress como por ejemplo: agregar archivos CSS o JavaScript, definir los áreas de Widgets y definir el Menú de Navegación. Solo por nombrar estas funcionalidades básicas de todo Tema en Wordpress y que seguramente los requeritas en el tuyo.

El archivo functions.php

Ahora vamos a agregar el archivo functions.php a nuestros otros archivos de plantilla, en nuestro Tema porsupuesto.

Como incluir archivos de hojas de estilos CSS y scripts Javascript a nuestro Tema de Wordpress

Cuando estamos creando nuestros propios Temas de Wordpress, seguranmente vamos desear agregar archivos adicionales de hojas de estilos CSS y scripts JavaScript.

Podriamos estar tentados a incluir estos archivos en el encabezado (header) como en cualquier documento HTML, pero recordemos que Wordpress no solo carga y muestra nuestro Tema, sino también carga y usa diferentes complementos (plugins) y todo debe funcionar en armonia.

Es muy importante que el Theme y los plugins cargen los scripts y las hojas de estilos usando el método estándar de Wordpress para evitar problemas de compatibilidad.

Agregar scripts y estilos a WordPress es un proceso bastante simple. Esencialmente, se creará una función en el archivo de plantilla functions.php, que pondrá en cola todos sus scripts y estilos.

Al poner en cola un script o una hoja de estilo, WordPress crea un identificador (handle) y una ruta para encontrar su archivo y cualquier dependencia que pueda tener (como jQuery) y luego usará un gancho (hook) que insertará todos los scripts y las hojas de estilo que estan en la cola.

Encolar las hojas de estilos CSS

El archivo style.css es requerido en todos los Temas Wordpress, pero en ocasiones puede ser necesario agregar otros archivos para extender la funcionalidad de los estilos

Para poner en cola los estilos se utiliza la función

wp_enqueue_style()

Sintaxis de ejemplo:

wp_enqueue_style( $handle, $src, $deps, $ver, $media );

Puedes incluir los siguientes parametros:

  • $handle que es simplemente el nombre de la hoja de estilos. (obligatorio).
  • $src que es la ubicación o ruta del archivo (obligatorio).
  • $deps indica si esta hoja de estilos CSS tiene dependencias con otras hojas de estilos en formato de un array() o false. Así, esta hoja de estilos solo se cargará después de que se haya cargada la hoja de estilos a la que es dependiente. (opcional).
  • $ver indica el número de versión. Sirve para que si aumento la versión del documento lo recargara de lo contrario mantendra el archivo cargado en cache (opcional).
  • $media se puede especificar el tipo de media CSS, como son: all, screen, print o handheld.

Como primer ejemplo, si se desea cargar una hoja de estilos CSS llamda "slider.css" que se localiza en la carpeta "css" en la carpeta del Tema, se usaría el siguiente código básico:

wp_enqueue_style( 'slider', get_template_directory_uri() . '/css/slider.css');

Explicación:

  • Solo utilizamos los dos primeros parámetros obligatorios: $handle y $src.
  • la función get_template_directory_uri() nos sirve para recuperar la ubicación de la carpeta raíz de nuestro Tema y la concatenamos con la ubicación del archivo.

Como segundo ejemplo, si se desea realizar la misma acción en su sintaxis completa, se usaría el siguiente código completo:

wp_enqueue_style( 'slider', get_template_directory_uri() . '/css/slider.css',false,'1.1','all');

Explicación:

  • $deps se establece en false dado que no va a tener depencias con otras hojas de estilos.
  • $ver se establece con un número de versión, puede ser un número entero o en formato de versión como 1.1.
  • $media se establece como all que aplica para todas las medias CSS.
Encolar los scripts JavaScript

Wordpress incluye algunos archivos JavaScript como parte de sus paquetes de software, incluyendo librerias de uso común como JQuery. Antes de agregar su propios archivos Javascript, checa si tu puedes hacer uso de las librerias incluidas.

Para poner en cola los scripts se utiliza la función wp_enqueue_script()