Saltar al contenido

CM Blog

Blog sobre Programación y Datos

Menú
  • Inteligencia Artificial
  • Tutoriales
  • Programación
  • Herramientas
  • Acerca de mi
Menú

Cómo personalizar cualquier tema de WordPress

Publicada el 8 de diciembre de 20228 de diciembre de 2022 por Cesar

n este tutorial vamos a aprender a hacer modificaciones a cualquier tema sin necesidad de plugins. Para el ejemplo voy a trabajar con uno de los temas que viene por defecto en WordPress, pero sirve para trabajar con cualquier otro tema.

Hice un video también explicando todo esto en vivo.

Tabla de Contenidos

  • Un poco de teoría, ¿qué es un tema hijo?
  • Ahora si a la práctica, cómo crear un child theme
    • Crear la carpeta contenedora
    • Crear la hoja de estilos
    • Crear el archivo PHP
  • Modificar el texto del footer en un tema WordPress
  • Código fuente listo para trabajar

Un poco de teoría, ¿qué es un tema hijo?

Antes de ir a la práctica, es necesario algo de teoría, pero prometo que va a ser rápido. Este tipo de modificaciones se realizan con lo que se llama tema hijo o child theme.

Un tema hijo es un tema creado por nosotros, que hereda todas las características de su tema padre y en el caso de que se sobreescriba algo, tendrá prioridad lo del tema hijo.

Lo interesante de un tema hijo creado por nosotros, es que si se actualiza algo del tema padre, nuestras modificaciones seguirán intactas. Quizá tendremos que hacer algún ajuste, pero no perderemos todo como pasaría en el caso de modifiquemos directamente el tema padre del cual no tenemos control.

Ahora si a la práctica, cómo crear un child theme

Se requiere una carpeta, un archivo de hoja de estilos y un archivo php.

Crear la carpeta contenedora

La carpeta contendrá a todos nuestros archivos, por convención y para evitar confusiones, yo le suelo poner el nombre de la carpeta del tema padre + guión medio + la palaba «child». En el ejemplo quedaría twentynineteen-child.

Crear la hoja de estilos

Dentro de la carpeta creamos un archivo llamado style.css, el cual de forma obligatoria deberá tener un bloque de comentarios con algo de data, siendo lo más importante la línea “Template:” la que debe tener por valor el nombre de la carpeta del tema padre. Así WordPress sabe que nuestro tema hijo tiene relación con dicho tema.

/*
Theme Name: Twenty Nineteen Child
Theme URI: 
Author: Cesar Mansilla
Author URI: https://www.cesarmansilla.online/
Description: Twenty Nineteen tema hijo personalizado
Version: 1.0
License: GNU General Public License v2 or later
Template: twentynineteen
*/

Crear el archivo PHP

Este es el último paso estrictamente necesario. Podríamos activar nuestro tema hijo pero veríamos que el sitio pierde todos los estilos, por ello es necesario indicarle a WordPress dónde están los estilos del tema padre.

Si todo está armado de forma estandar, las rutas del siguiente bloque de código les servirían, sino deberán ver adonde tienen almacenadas ustedes sus css.

<?php
function twentynineteen_enqueue_styles() {
  // Tema padre
  $parent_style = 'twentynineteen-style';
  wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
  // Tema hijo
  wp_enqueue_style( 'child-style',
      get_stylesheet_directory_uri() . '/style.css',  // Ruta
      array( $parent_style ),                         // Dependencias (tema padre)
      wp_get_theme()->get('Version')                  // Versión, la capturamos de forma dinámica
  );
}
add_action( 'wp_enqueue_scripts', 'twentynineteen_enqueue_styles' );
?>

Ahora si activamos nuestro tema hijo veremos que todo ha vuelto a la normalidad. ¿Todo esto para estar igual que al principio? Noo, es sólo la base necesaria para todo lo que se viene.

Modificar el texto del footer en un tema WordPress

Vamos a ver cómo cambiar el texto del footer de WordPress desde nuestro child theme. En mi caso dice “Orgullosamente impulsado por WordPress“.

Lo primero es detectar qué archivo contiene lo que queremos modificar, esto dependerá de cada caso, en el mio es el archivo footer.php, entonces copio el archivo tal cual a mi tema hijo respetando la ruta, en mi caso está en la carpeta principal, pero si en el tema padre se hubiera encontrado dentro de otra llamada “template-parts”, tengo que crear dicha carpeta también en la carpeta del tema hijo.

Una vez que tenemos el archivo en nuestro poder, modificamos lo que necesitemos, en nuestro caso es la línea:

<a href="<?php echo esc_url( __( 'https://wordpress.org/', 'twentynineteen' ) ); ?>" class="imprint">
  <?php
  /* translators: %s: WordPress. */
  printf( __( 'Proudly powered by %s.', 'twentynineteen' ), 'WordPress' );
  ?>
</a>

Lo cambio por:

<a href="<?php echo esc_url( __( 'https://wordpress.org/', 'twentynineteen' ) ); ?>" class="imprint">
  <?php
  /* translators: %s: WordPress. */
  printf( __( 'Hecho con <3 por %s.', 'Cesar Mansilla' ), 'WordPress' );
  ?>
</a>

Se que fué demasiado trabajo para un simple cambio de texto, pero la idea es que este artículo les sirva para tener las herramientas para modificar cualquier cosa de cualquier tema.

Código fuente listo para trabajar

https://gitlab.com/cesar-mansilla/wordpress/child-theme-base

Compartir:

  • Haz clic para compartir en Twitter (Se abre en una ventana nueva)
  • Haz clic para compartir en Facebook (Se abre en una ventana nueva)
  • Haz clic para compartir en LinkedIn (Se abre en una ventana nueva)
  • Haz clic para compartir en WhatsApp (Se abre en una ventana nueva)

Relacionado

Deja una respuesta Cancelar la respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Entradas recientes

  • Construye modelos de IA más eficientes y precisos
  • Migrar sitio WordPress sin plugins
  • Cómo personalizar cualquier tema de WordPress
  • 4 Razones para aprender a programar
  • Ejemplos de cosas que se pueden hacer con programación

Categorías

  • Herramientas
  • Hosting
  • IA
  • Inteligencia Artificial
  • Programación
  • Tutorial
  • Wordpress
  • LinkedIn
  • Twitter
  • Link
  • Instagram
© 2023 CM Blog | Funciona con Minimalist Blog Tema para WordPress