Tutorial ¿Cómo crear tu propio Tema Wordpress?

Hola, esta vez os traemos un Tutorial donde podéis empezar a trastear para crear vuestro propio tema Wordpress. Teniendo en cuanta que hay muchos aspectos he intentado resumir lo mejor posible los pasos a seguir para tener una buena plantilla de Wordpress con sus respectivos Sidebar, Footer, Menús etc... . Lo primero que hay que entender es que para crearlo, necesitáis tener un poco de conocimientos de CSS, HTML y PHP ya que si queréis cambiar el aspecto de la plantilla a gusto de vuestros clientes, es necesario saber "donde tocamos" para no estropear los estilos, además del PHP.

Aún así con este tutorial podréis disponer de una plantilla simple. ¡Dicho esto comencemos!

Lo primero os voy a ayudar a crear los archivos más importantes de un Tema, lo llamaremos Starter theme.

• Entramos en https://underscores.me/ y ponemos el nombre del tema que queramos, en este caso yo puse mi nombre "Cosmin Theme"

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.

• Comprimimos el tema y lo subimos a Wordpress.

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: Comsmin Theme
Theme URI: http://www.cosmin.es/
Author: Cosmin Chiorean
Description: Tema de ejemplo de Cosmin
Version: 1.0.0
Text Domain: Cosmin
*/

Si entramos a investigar el tema veremos que 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])

AVISO: 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.

​

Modificar la estructura del tema​

• En el proceso de personalización, se inicia con la modificación del archivo footer.php. Se elimina el contenido del div con la clase site-info, asociado a publicidad en el starter theme, y se reemplaza con un texto de copyright personalizado. Este cambio simplifica el footer según las preferencias del usuario.

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

• 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 NO ES OBLIGATORIO, ES SIMPLEMENTE VISUAL)

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.

Añadimos este código:

<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 -->

Para el footer.php vamos a hacer lo mismo:

<div class="site-info wrapper">

También 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 -->

Modificar el aspecto del tema​

Llega la hora del CSS, añadimos 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;
}

Este CSS de ejemplo no tiene responsive. Aquí debemos añadir código CSS según las necesidades de cada uno.

Crear una plantilla de página​

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, cambiando los nombres por los vuestros.

/**
  * Template Name: Ancho Completo
  * Description: Sin barra lateral
  * @cosmin theme
  */

y eliminamos esta fila:

get_sidebar();

y en la parte de código HTML cambiaremos el id=»primary» por id=»primary-full»

Se sugiere crear dos páginas: una denominada "Inicio" y otra "Blog". En el editor de WordPress, se debe especificar que la página "Inicio" utilizará la plantilla "Ancho Completo", mientras que la página "Blog" usará la plantilla por defecto. Este paso es esencial para personalizar la apariencia y estructura de las páginas de acuerdo con las preferencias del usuario.

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

Busca una función en el archivo functions.php, como por ejemplo "noseque_scripts()" (o algo similar según el nombre de tu tema). En esa función, se añaden los estilos chulos de tu tema y un script llamado navigation.js. Además, te explican cómo agregar el fantástico Font Awesome para darle más estilo a tu tema.

Añade el siguiente código:

/**
* 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' );

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

Por último veremos cómo añadir mas menús y zonas de widgets.

Para crear un WIDGET

Entramo en el archivo functions.php del tema antes del simbolo ?> y añadimos lo siguiente:
En este caso es un widget en el pie de página:

add_action( 'widgets_init', 'register_new_sidebars' );
function register_new_sidebars() {
 register_sidebar(array(
 'name' => __('Pie de página'),
 'id' => 'sidebar-footer',
 'before_widget' => '<div class="widget-footer">',
 'after_widget' => '</div>',
 'before_title' => '<h4>',
 'after_title' => '</h4>'
 ));
}

Una vez registrada la nueva zona, hemos de determinar donde la vamos a colocar en nuestro tema. Este paso puede resultar un poco difícil y requiere tener claro como esta organizado un tema en WordPress. En el caso que nos ocupa, es bastante fácil, ya que tal y como hemos dicho, vamos a añadir una zona en el pie de página.

En este caso añadimos este código en functions.php:

<?php if ( is_active_sidebar( 'sidebar-footer' ) ) : ?>
 <div id="sidebar-footer">
 <?php dynamic_sidebar( 'sidebar-footer' ); ?>
 </div>
<?php endif; ?>

Para crear un MENÚ

Al final del archivo functions.php, antes del simbolo ?>, añadimos:

add_action( 'after_setup_theme', 'register_new_menus' );
function register_new_menus() {
  register_nav_menu( 'menu-footer', __('Menú pie de página'));
}

Una vez registrada la posición del menú debemos indicar el lugar donde va a ir en mi caso en el archivos footer.php, añadimos:

<?php
wp_nav_menu(
  array(
    'theme_location' => 'menu-footer',
    'menu_class' => 'menu_footer_class'
  )
);
?>

Una vez creado todo esto ya podemos ir a Wordpress y le damos "añadir menú" y ya nos aparecerán las dos opciones.

¡Y YA ESTARÍA!​

Ya con esto tendremos un tema, eso si, muy simple creado, para poder hacer un tema mas desarrollado necesitamos conocimientos CSS y PHP ara poder darlela forma y el estilo deseado para cualquier cliente. Pero con esto os puede servir para empezar. Lo demás es cuestión de experimentar y preguntar en el Forowebmasters o entrando en la sección de CÓDIGO de la que disponemos.

Espero que nos haya ayudado mucho, lo he resumido mucho para que sea lo más simple posible ya que es una cosa bastante extensa.

¡NO OLVIDÉS EN COMENTAR, AÑADIR. CUALQUIER COSA O SUGERENCIA!

ME HA COSTADO, ASÍ QUE A DARLE CAÑA A LOS LIKES 😂😂😂👌🏻👌🏻

 

[Lalotowerz]

¡Gracias por compartir tu tutorial sobre cómo hacer un tema en WordPress! Es genial que estés contribuyendo al conocimiento de la comunidad. Los tutoriales son valiosos recursos para aquellos que buscan aprender y mejorar sus habilidades.