93 163 53 53
info@espai.es

Síguenos en las redes

Crear un tema de WordPress desde cero (sin saber PHP)

Crear un tema de Wordpress
Diseño Web Programación

Crear un tema de WordPress desde cero (sin saber PHP)

por
Compartir:

Introducción

Este artículo es una actualización de mis artículos anteriores sobre este mismo tema, crear un tema para WordPress desde cero y sin saber PHP, que podéis encontrar aquí. Dichos artículos están explicados más al detalle, en este artículo de actualización, me voy a centrar en otros aspectos para que su lectura os resulte más interesante.

Lo primero que hay que tener en cuenta es que vamos a crear un tema de WordPress a partir de lo que se conoce como un starter theme, lo que viene a ser un «tema en blanco». Estos temas ya tienen la parte complicada hecha (la programación en PHP), y aunque tienen sus limitaciones, para la más habitual de nuestras necesidades (crearle un tema personalizado a un cliente), van a servir perfectamente. Si lo que pretendes es crear un tema genérico e intentar venderlo a cientos o miles de clientes, probablemente no sea la opción más adecuada.

En esta ocasión voy a usar el starter theme de underscores.me

Crear un tema personalizado a partir del Starter Theme

El primer paso es entrar en underscores.me y «crear»/descargar un tema con el nombre que nos interese. En mi caso se llamará «espai».

Hay que tener en cuenta que este tema tiene licencia GNU GPL v2 (o posterior) y por lo tanto nuestro tema obligatoriamente tendrá una licencia idéntica o similar, pero esto no nos va a impedir venderlo al cliente que le vayamos a hacer el tema personalizado.

Después debemos de instalar y activar el tema en nuestro WordPress.

Nuestro tema se ha instalado en wp-content/themes y la carpeta con el nombre del tema que hemos indicado en underscores.me

Lo primero sería, si no lo vamos a usar, borrar el archivo styles-rtl.css ya que es la versión RTL (de derecha a izquierda) para idiomas que lo requieran.

Veremos también que el tema tiene una imagen en blanco (screenshot.png) que podemos reemplazar con nuestro logo corporativo o por una captura del tema cuando lo finalicemos.

Después abriremos el archivo styles.css con nuestro editor favorito y al inicio del archivo CSS tenemos un comentario que contiene información que WordPress va a usar para mostrar la información de nuestro tema. Por lo que deberíamos de cambiar / quitar aquellas cosas que consideremos necesarias. Aquí os dejo el mio:

/*
Theme Name: Escola Espai
Theme URI: http://www.espai.es/
Author: Abel Camarena Bernabéu
Description: Tema de ejemplo de la Escola Espai
Version: 1.0.0
Text Domain: espai
*/

Familiarizándose con el Starter Theme

Obviamente, antes de modificar el tema, debemos de analizarlo un poco. Si inspeccionamos el código HTML generado en nuestro WordPress, veremos lo siguiente:

  • El tema no es full-width (ni tiene responsive)
  • La barra lateral no sale al lado, sino que sale abajo.
  • La estructura es:
    • header
    • main
    • aside
    • footer

Por otra parte, en «Apariencia > Editor de temas» podemos ver mejor la organización de los archivos:

    • La página principal es index.php
    • Una entrada normal es single.php
    • Una página normal es page.php
    • La cabecera está en el archivo header.php
    • El pie de página en el archivo footer.php
    • etc.

Finalmente, en «Aparencia > Menús» y «Aparenciar > Widgets» podemos ver que este tema solo tiene una zona para widgets (el aside/sidebar) y una zona para menú (el menú principal [primary])

Funcionamiento básico de PHP

Como habréis empezado a comprender a estas alturas, el tema está formado por fragmentos de página (header, footer, sidebar…) en diferentes archivos PHP que se combinan para acabar generando el archivo HTML que sea necesario enviar al visitante de nuestra página. Por lo que cuando hacemos cambios en uno de estos archivos PHP, debemos de tener en cuenta que puede tener consecuencias en el resto de archivos.

Antes de modificar cualquier archivo PHP, puesto que se supone que no sabemos PHP, es importante sacar copia de dicho archivo por si lo rompemos.

Lo único que necesitamos saber sí o sí, es que los archivos PHP son una combinación de código HTML normal y código PHP. La clave es que cualquier cosa entre <?php y ?> es código PHP que no deberíamos de modificar si no lo comprendemos. El resto del código es HTML normal, y por lo tanto, si vamos con cuidado podemos añadir, modificar o quitar código HTML sin problemas, y esto nos va a permitir cambios estructurales.

Modificar la estructura del tema

Vamos a empezar con un ejemplo sencillo, modificando el archivo footer.php. En este caso, tenemos un div de la clase site-info con «publicidad» del starter theme. Ese código PHP que en principio no entendemos sirve simplemente para generar el contenido que hay dentro de dicho div del footer. Como no nos interesa dicho contenido, podemos borrar alegremente todo el contenido del div y poner un texto con nuestro copyright.

<div class="site-info">
  <p>
    Copyright &copy; 2022 Escola Espai
  </p>
</div><!-- .site-info -->

De esta forma tan sencilla hemos modificado el footer. Obviamente, esta modificación tiene sus pegas, puesto que el texto que hemos introducido no se puede modificar por el usuario desde el backend de WordPress. Así que la mayoría de cambios que vamos a realizar afectarán a la estructura, añadiendo/eliminando elementos HTML, o bien añadiendo/modificando/eliminando algunos atributos id o clases para después darle el aspecto deseado por CSS. Hay que evitar añadir contenido de esta forma ya que es algo que solo se podrá modificar modificando el tema.

En el siguiente ejemplo, vamos a añadir algunos elementos div de la clase wrapper para darle un ancho máximo al contenido y mostrarlo centrado. Esto, obviamente, no es obligatorio hacerlo y es una decisión «artística» de cara a ajustar la estructura del tema a un código CSS que añadiremos posteriormente, pero nos sirve como ejemplo de cómo modificar la estructura.

Lo primero es abrir el archivo header.php y crear un div de la clase wrapper, que será el primer hijo del elemento header, y que tenga dentro el logo y el menu (nav) del sitio web. La estructura simplificada debería de ser tal que así:

<header id="masthead" class="site-header">
  <div class="wrapper"> <!-- añadimos un div wrapper -->
    <div class="site-branding">
      <!-- lo de aquí no lo tocamos, es el logo del sitio web -->
    </div><!-- .site-branding -->
    <nav id="site-navigation" class="main-navigation">
      <!-- lo de aquí no lo tocamos, es el menú del sitio web -->
    </nav><!-- #site-navigation -->
  </div> <!-- cerramos nuestro div.wrapper --> 
</header> <!-- #masthead -->

De este modo, centraremos el contenido del div que hemos creado, que en este caso es el logo y el menú.

Para el footer.php vamos a hacer lo mismo, pero en este caso no seria necesario crear el div, con ponerle la clase wrapper al div.site-info que hemos visto antes seria suficiente.

<div class="site-info wrapper">

Finalmente, habría que añadir otro div de la misma clase para tener el main y el aside con un ancho máximo, el uno al lado del otro y centrados. Aquí es donde la cosa se complica un poco.

Puesto que en PHP se usan varios archivos para generar el HTML que se envía al usuario, para añadir el div.wrapper que necesitamos, vamos a añadir la etiqueta de apertura en un archivo y la de cierre en otro archivo diferente. Concretamente, vamos a añadir al final del header.php lo siguiente:

<div class="wrapper">

y al principio del footer.php (justo después del código PHP y justo antes del elemento HTML footer) vamos a añadir lo siguiente:

</div> <!-- .wrapper -->

De ese modo, lograremos que el main y el aside se encuentren dentro de un elemento div de la clase wrapper.

Tened cuidado al añadir la etiqueta de apertura que el editor de WordPress nos puede añadir la de cierre automáticamente sin que nos demos cuenta. Así que hay que revisar bien el código.

Modificar el aspecto del tema

Ahora ya podemos meter un poquito de código CSS. Para ello vamos a añadir al final del archivo styles.css nuestro código debidamente separado del resto.

/* 
----------------------------------------------------------------------------------
----------------------------------------------------------------------------------
----------------------------------------------------------------------------------
MI CODIGO CSS
----------------------------------------------------------------------------------
----------------------------------------------------------------------------------
----------------------------------------------------------------------------------
*/

.post, .page {
  margin: 0;
}

a {
  text-decoration: none;
}

a, a:visited, a:active {
  color: #456789;
}

.wrapper {
  max-width: 78rem; 
  margin: 0 auto;
}

/* cabecera */

.main-navigation { 
  width: auto;
}

.site-title {
  font-size: 2rem;
  margin: 0.5rem 0;
}

.site-description {
  margin: 0.5rem 0;
}

#masthead { 
  background-color: #ABCDEF;
}

#masthead .wrapper { 
  display: flex; 
  justify-content: space-between;
  padding: 0.5rem; 
  align-items: center;
}

/* menú principal */

#primary-menu>li>a {
  padding: 0.5rem 1rem;
  background-color: #456789;
  color: white;
  margin: 0 0.25rem;
  transition: all 250ms;
}

#primary-menu>li>a:hover {
  background-color: #56789A;
}

#primary-menu .sub-menu {
  flex-direction: column;
  background-color: #789ABC;
}

#primary-menu .sub-menu a {
  color: white;
  padding: 0.5rem 1rem;
  transition: all 250ms;
}

#primary-menu .sub-menu a:hover {
  background-color: #89ABCD;
}

/* contenido */

#page>.wrapper { 
  display: flex;
  padding: 0.5rem;
}

#primary {
  width: 70%;
  padding-right: 1rem;
}

/* sidebar */

#secondary {
  width: 30%;
  padding: 1rem;
  background-color: #ABCDEF;
}

#secondary ul {
  list-style: square;
  padding-left: 0;
}

/* pie de página */

#colophon {
  background-color: #ABCDEF;
}

#colophon .wrapper {
  padding: 0.5rem; 
}

Ahora ya deberíamos de tener un tema con un aspecto más adecuado. Obviamente, este código CSS y las modificaciones que hemos hecho en la estructura HTML son solo ilustrativas del tipo de cosas que podemos hacer sin saber PHP. De hecho, este CSS de ejemplo no tiene ni responsive.

Crear una plantilla de página

Ahora vamos a crear lo que se conoce como una plantilla de página (también existen las plantillas de entrada). Ya que en la página principal (y puede que en alguna más) puede que no nos interese tener la barra lateral.

El archivo que se usa para generar las páginas es el archivo page.php. Vamos a hacer una copia de dicho archivo y le ponemos de nombre, por ejemplo, homepage.php

Al principio del archivo tenemos un comentario PHP que vamos a modificar por el siguiente:

/**
  * Template Name: Ancho Completo
  * Description: Sin barra lateral
  * @package espai 
  */

Obviamente, cambiando el «package espai» por el vuestro.

En la parte de código PHP eliminaremos esta línea:

get_sidebar();

Que es la encargada de generar la barra lateral/aside (y que basicamente corresponde al archivo sidebar.php)

Y en la parte de código HTML cambiaremos el id=»primary» por id=»primary-full» (esto es para que el código CSS que afecta a #primary no le afecte).

Ahora es un buen momento para crear un par de páginas, una llamada Inicio y que debemos de indicar (en el panel derecho del editor de WordPress) que usará una plantilla de «Ancho Completo» y otra llamada Blog que usará la plantilla por defecto.

Añadimos estas dos páginas a un menú que debemos crear en «Apariencia > Menú», y que debe de mostrarse en la zona «Primary» (la única que hay).

Finalmente en «Ajustes > Lectura» indicamos que vamos a usar una página de inicio «estática», de portada la que hemos creado como Inicio con la plantilla de «Ancho Completo» y para las entradas la página Blog con la plantilla por defecto.

Añadir más zonas de menú y de widgets

Como el tema tiene solo una zona de widgets y una zona de menú existe la posibilidad que quieras añadir alguna más. Para ello os invito a leer mis artículos sobre como crear una nueva zona de widgets y como crear  una nueva zona de menú en cualquier tema de WordPress.

De hecho, antes hemos modificado el footer de la página para añadir un texto con un copyright que no se puede modificar desde el backend, por lo que podría ser mucho mas interesante y versátil añadir en su lugar una zona de widgets para que se pueda añadir ese texto con el copyright o cualquier otro widget.

Añadir archivos CSS y JavaScript a nuestro tema de WordPress

Finalmente, vamos a modificar el archivo functions.php

A diferencia del resto de archivos PHP que hemos visto, este archivo solo contiene código PHP, pero es el lugar adecuado para añadir archivos CSS y archivos JS (JavaScript) a nuestro tema. En este ejemplo voy a añadir el font awesome para poder usar sus iconos en mi tema.

Debemos de buscar una función llamada noseque_scripts(), en mi caso, se llama espai_scripts(), en tu caso dependerá del nombre de tu tema. En todo caso, deberías de buscar «_scripts()» en este archivo. Lo primero que se hace en esta función es añadir los estilos CSS del tema y luego un script llamado navigation.js Después es un buen sitio para añadir el font awesome del siguiente modo:

/**
* Enqueue scripts and styles.
*/
function espai_scripts() {
  wp_enqueue_style( 'espai-style', get_stylesheet_uri(), array(), _S_VERSION );
  wp_style_add_data( 'espai-style', 'rtl', 'replace' );

  wp_enqueue_script( 'espai-navigation', get_template_directory_uri() . '/js/navigation.js', array(), _S_VERSION, true );

  /* ejemplo de como añadir un archivo CSS desde un CDN */
  wp_register_style('fontawesome', 'https://use.fontawesome.com/releases/v5.15.4/css/all.css', array(), '1.0', 'all');
  wp_enqueue_style('fontawesome');

  /* ejemplo de como añadir un script JavaScript desde un CDN */
  wp_enqueue_script('superscript', 'https://cdn-imaginarion.com/superscript.js', array(), '1.0', true);

  /* ejemplo de como añadir un script JavaScript en la carpeta JS */
  wp_enqueue_script('mi-script', get_template_directory_uri() . '/js/mi-script.js', array(), '1.0', true);

  if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
    wp_enqueue_script( 'comment-reply' );
  }
}
add_action( 'wp_enqueue_scripts', 'espai_scripts' );

En este ejemplo también tenéis cómo añadir scripts JavaScript tanto locales como desde un CDN.

Conclusión

En este artículo hemos visto cómo «crear» un tema «desde cero», cómo modificar su estructura para adaptarla a nuestras necesidades (añadiendo/eliminando elementos HTML, añadiendo/modificando atributos id y class,…), cómo añadirle nuestro código CSS, cómo crear una plantilla de página, cómo añadir archivos CSS y JS externos, etc.

Con todo lo explicado en este y otros artículos mencionados, deberíais ser capaces de realizar vuestros «propios» temas de WordPress adaptados a las necesidades y con el aspecto deseado por los clientes.

 

Compartir:
0
Etiquetas:

Escribe un comentario