Modifica el core tu WordPress sin programar

¿Sabías que puedes modificar todo tu WordPress aunque no sepas programar?

Y no, no me refiero a la simple utilización de un Builder, sino a precisamente aquellas modificaciones que necesitas hacer en tu web que la interfaz de tu back-end no te permite modificar.

Teniendo claros unos sencillos conceptos, te vas a dar cuenta de que puedes modificar casi lo que necesites. Evidentemente, si tienes un background de programación o conocimientos técnicos vas a tener mucha más agilidad y ventaja que el que no los tenga. Pero con estos sencillos trucos, siempre que pruebes las soluciones en un entorno Stagin vas a poder realizar casi cualquier modificación.

En este post, exploraremos cómo realizar modificaciones en tu sitio de WordPress, incluso si no tienes experiencia en programación. A través de un vídeo y una explicación detallada, aprenderás los conceptos básicos sobre la estructura y funcionamiento de una página web, y cómo puedes aplicar estos conocimientos para optimizar y personalizar tu sitio.

Verás como utilizar herramientas como la Consola de Chrome y selectores en CSS y JavaScript para realizar ajustes específicos en el diseño y funcionalidad. Incluso como actualizar y personalizar tu sitio de manera segura sin perder las modificaciones al actualizar el tema principal.

El objetivo de este post es proporcionarte las habilidades necesarias para entender y mejorar tu sitio web por tu cuenta, asegurando que puedas gestionar y mantener tu presencia online de manera efectiva.

Te enseño lo necesario en el vídeo para que puedas ejecutarlo. Pero vamos en este artículo con los conocimientos necesarios además de tu cuenta en chat.gpt.

Funcionamiento de una web

Solo si sabemos cómo funciona una web, sabremos como optimizarla y mejorarla.

Por mucho que se utilice inteligencia artificial, para obtener las respuestas adecuadas hay que hacer las preguntas correctas. Y para esto tienes que entender y tener muy clara la diferencia entre programación de cara al servidor y de cara al usuario. Que no es lo mismo que front-office y back-office.

La programación de cara al usuario, es el lenguaje de programación que actúa en el navegador. A día de hoy, el único que lo hace de forma nativa es JavaScript. Si bien es cierto que hay otros lenguajes como TypeScript, estos en última instancia se convierten en JavaScript para que el navegador sea capaz de ejecutarlo y actuar en consecuencia.

¿Qué significa toda esa parrafada? Pues básicamente que los cambios solo se producen una vez en el navegador, haciendo que la carga y renderización sea trabajo del dispositivo del usuario, cuestión que desde SEO debemos tener en cuenta por como lo procesa Googlebot desde su headless chromium y como procesa el JavaScript en el renderizado.

Por otro lado tenemos la programación de cara al Servidor, que son los lenguajes que se procesan en el Servidor antes de enviarle los archivos al usuario. Esto puede ser mucho más variado, pero para un WordPress lo reduciríamos a PHP y el lenguaje del Software de Servidor que se esté utilizando (Apache, Nginx, LiteSpeed...)

La explicación del front y el back, simplemente para aclarar conceptos es mucho más simple, es lo que ve el usuario final y el panel de control con interfaz gráfica. En ambos hay lenguaje del servidor y lenguaje del usuario. Por lo que me parece bien aclararlo para evitar la confusión de términos.

Una vez tenemos claro esto, no solo nos servirá para el propósito de este propio artículo, sino que nos permitirá entender mucho mejor como funcionan otras cuestiones importantes para cualquier persona que trabaje con webs, como el funcionamiento del caché y sus tipos.

Consola de Chrome, elementos y selectores

Es importante que aprendamos el uso de la Consola de Chrome para aprender a detectar los elementos y poder identificar aquellos elementos que queremos eliminar, cambiar o añadir.

Dije que podíamos hacerlo todo sin programar, no que fuera fácil.

Selectores

Los selectores como su propio nombre indica son patrones que se utilizan para seleccionar los elementos de un documento HTML, sobre los cuales podemos aplicar estilos de CSS o modificaciones con JS afectando a esa parte del código.

En el caso de no saber seleccionar los selectores de una forma adecuada, entendiendo los elementos de una etiqueta de HTML, podemos ayudarnos de la consola de chrome.

Copiar Selector

Puedes copiar las características que necesites del selector, e incluso te añadirá el document QuerySelector para JS si se le da a copiar ruta de JS para algo en específico.

Ejemplos:

#intro > div > h1

document.querySelector("#intro > div > h1")

El selector que nos da no quiere decir que sea único y podría afectar en más puntos de la web, así que puede ser que necesitemos ser más específicos, pero para eso puedes preguntar en mi Discord (enlace en el footer).

Qué es un tema Child en WordPress

A mi me suele gustar crear un tema desde 0. Pero si la web ya está hecha o no quieres recurrir como digo a una programación avanzada, puedes tirar de poder editar tu tema y tener la capacidad de recibir actualizaciones.

Un tema "child" o tema hijo en WordPress es un tema que hereda la funcionalidad y el estilo de otro tema, conocido como tema "parent" o tema padre. Los temas child son una forma segura de modificar un tema existente sin alterar los archivos originales del tema padre. Esto facilita la actualización del tema padre sin perder las personalizaciones hechas en el tema hijo.

Los códigos que se muestran a continuación son simples ejemplos. Mi objetivo en este post no es que programes, sino que sepas pedirle a la IA esos códigos que vas a copiar y pegar.

Pasos para crear y utilizar un tema child en WordPress:

1. Crear la carpeta del tema child:
   • En el directorio de temas de tu instalación de WordPress (wp-content/themes/), crea una nueva carpeta para tu tema child. Por ejemplo, si tu tema padre se llama "twentytwenty", podrías llamar a tu tema child "twentytwenty-child".
2. Crear el archivo style.css:
   • Dentro de la carpeta del tema child, crea un archivo llamado style.css. Este archivo debe contener la información del tema child, incluyendo el nombre del tema padre. Por ejemplo:
     css

     /*
Theme Name: Twenty Twenty Child
Template: twentytwenty
Version: 1.0
*/

   • El atributo "Template" debe ser el nombre de la carpeta del tema padre.
3. Crear el archivo functions.php:
   • No es obligatorio para un Tema Child, pero para añadir las modificaciones que queremos hacer sí
   • Para cargar los estilos del tema padre correctamente, utiliza el siguiente código en tu functions.php:
     <?php
add_action('wp_enqueue_scripts', 'enqueue_parent_styles');
function enqueue_parent_styles() {
wp_enqueue_style('parent-style', get_template_directory_uri() . '/style.css');
}

4. Activar el tema child:
   • Ve a tu administrador de WordPress y ve a la sección de Apariencia > Temas.
   • Encuentra tu tema child y actívalo.
5. Personalizar el tema child:
   • Ahora puedes hacer modificaciones directamente en los archivos del tema child, como style.css para cambios de estilo o functions.php para funcionalidades adicionales.

Utilizar un tema child te permite personalizar tu sitio de manera segura, asegurando que las personalizaciones no se pierdan con las actualizaciones del tema padre.

Functions.php

El archivo functions.php es un componente esencial de cualquier tema de WordPress, incluyendo los temas child. Funciona como un archivo de configuración que permite a los desarrolladores de temas añadir funcionalidades específicas o modificar comportamientos predeterminados de WordPress a través de código PHP.

De esta forma, si editamos el functions, podemos personalizar y editar el comportamiento de nuestra web de WordPress sin temer que haya problemas de sobreescritura en futuras actualizaciones. Es el "sitio correcto" donde editarlo.

Funcionalidades clave del archivo functions.php:

1. Agregar nuevas funciones: Puedes escribir tus propias funciones en functions.php para añadir o modificar características del sitio. Esto incluye definir nuevas áreas de widgets, personalizar encabezados, y más.
2. Sobrescribir o extender funciones: Si WordPress o tu tema padre ofrece ciertas funciones, puedes modificarlas o ampliarlas. Por ejemplo, puedes cambiar el tamaño predeterminado de los resúmenes de los posts o añadir soporte para características del tema como imágenes destacadas.
3. Enganchar funciones a ganchos de WordPress (hooks): WordPress proporciona "hooks", que son puntos en el flujo de ejecución de WordPress donde puedes "enganchar" tus funciones para modificar la funcionalidad del CMS. Los hooks pueden ser de acción o de filtro:
   • Hooks de acción: Permiten que añadas o cambies la funcionalidad en ciertos puntos del ciclo de vida de WordPress.
   • Hooks de filtro: Te permiten modificar datos antes de que sean enviados al navegador o guardados en la base de datos.
4. Cargar scripts y estilos: Puedes usar functions.php para controlar qué archivos JavaScript y CSS se cargan y en qué momento. Esto es útil para mejorar el rendimiento de la carga de páginas y para personalizar el aspecto de tu sitio.
5. Modificar el área de administración de WordPress: Con functions.php, puedes hacer cambios en el área de administración, como personalizar el dashboard, añadir o eliminar elementos de los menús, y cambiar las capacidades de los usuarios.

Hooks

Los hooks en WordPress son puntos de interacción dentro del código que permiten a los desarrolladores alterar, personalizar o extender la funcionalidad estándar de WordPress. Los hooks se dividen en dos tipos principales: acciones y filtros.

Es importante aquí saber la combinación que podemos hacer o realizar entre JavaScript y PHP para aquello que necesitemos realizar.

Hooks de Acción

Los hooks de acción permiten ejecutar código en momentos específicos durante la ejecución de WordPress. Por ejemplo, puedes usar un hook de acción para añadir un bloque de código cuando se carga una página, o para modificar lo que sucede justo después de que un usuario se registre en tu sitio.

Aunque en el vídeo pongo ejemplos prácticos para SEO, aquí te expongo unos ejemplos básicos:

• Personalizar el pie de página: Puedes usar wp_footer para añadir scripts o información adicional justo antes de cerrar la etiqueta </body>.
  function add_custom_footer_content() {
echo '<p>Este es un mensaje personalizado en el footer!</p>';
}
add_action('wp_footer', 'add_custom_footer_content');


• Agregar un mensaje después de la publicación de un post: Utiliza el hook publish_post para enviar una notificación o realizar una acción tras publicar un post.
  function post_published_notification($post_id) {
$post = get_post($post_id);
$author = get_userdata($post->post_author);
// Envía un email al autor
wp_mail($author->user_email, "Post publicado", "Tu post ha sido publicado.");
}
add_action('publish_post', 'post_published_notification');


Hooks de Filtro

Los hooks de filtro se utilizan para modificar datos antes de que se guarden en la base de datos o antes de que se envíen al navegador. Esto permite alterar textos, imágenes, y cualquier otro dato dinámico.

Aunque en el vídeo pongo ejemplos prácticos para SEO, aquí te expongo unos ejemplos básicos:

• Modificar el contenido de los posts: Puedes usar the_content para añadir o modificar el contenido de los posts antes de que se muestre.
  function modify_post_content($content) {
if (is_single()) {
$content .= '<p>¡Gracias por leer este post!</p>';
}
return $content;
}
add_filter('the_content', 'modify_post_content');


• Cambiar el título del post: Utiliza el filtro the_title para modificar los títulos de los posts antes de que se muestren en la página.
  function change_post_title($title) {
return 'Prefix: ' . $title;
}
add_filter('the_title', 'change_post_title');


Potencial de los Hooks

El potencial de los hooks radica en su capacidad para personalizar casi cualquier aspecto de un sitio WordPress sin necesidad de modificar los archivos del núcleo, lo que facilita la actualización del sistema sin perder las personalizaciones. Saber cómo y cuándo usar hooks te permite:

• Automatizar procesos como enviar correos electrónicos o actualizar metadatos.
• Integrar servicios externos, como redes sociales o plataformas de análisis.
• Personalizar la experiencia del usuario ajustando la interfaz y la interacción según el comportamiento del usuario.
• Desarrollar funcionalidades específicas para necesidades particulares de un sitio web, como formularios personalizados, conexiones con APIs, o adaptaciones a dispositivos móviles.

Entender cómo funcionan los hooks y qué pueden hacer es esencial para cualquier desarrollador que busque extender o personalizar WordPress de manera eficiente y segura. Con este conocimiento, puedes dirigirte a ChatGPT para codificar funciones específicas que necesites, simplemente explicando lo que quieres lograr y en qué parte del flujo de tu sitio deseas que ocurra.

Head y Footer

En el contexto de una página web, el "head" y el "footer" son secciones específicas que cumplen roles particulares tanto en la estructura como en la funcionalidad del sitio.

Head

El <head> de un documento HTML es la sección que contiene metadatos, enlaces a hojas de estilo, scripts y otras instrucciones que el navegador debe leer antes de renderizar la página. No es visible directamente en la interfaz del usuario. Elementos comunes en el <head> incluyen:

• Título de la página (<title>): se muestra en la pestaña del navegador.
• Enlaces a CSS (<link>): para estilizar el contenido de la página.
• Scripts (<script>): algunos scripts pueden ser incluidos en el head para que se carguen antes del contenido de la página.
• Metaetiquetas (<meta>): pueden definir la codificación de caracteres, vista de compatibilidad, autor de la página, y otros metadatos.

Footer

El "footer" es una sección que se encuentra al final de las páginas web. Suele contener información sobre derechos de autor, enlaces a políticas de privacidad, información de contacto, y otros enlaces relevantes. Aunque es parte del contenido visible de la página, técnicamente en HTML se representa con la etiqueta <footer> dentro del cuerpo del documento (<body>).

Modificando Head y Footer con Hooks en WordPress

WordPress ofrece hooks específicos que permiten inyectar o modificar contenido en el <head> y el <footer> de las páginas.

• wp_head: Este hook se activa dentro de la etiqueta <head> en el archivo header.php de tu tema. Es útil para añadir estilos, scripts o cualquier otro elemento que necesites cargar en el head.
  function add_custom_script() {
echo '<script src="mi-script.js"></script>';
}
add_action('wp_head', 'add_custom_script');

• wp_footer: Similar al wp_head, pero se activa justo antes de cerrar la etiqueta </body>. Es ideal para scripts que deben cargarse al final de la página para no afectar el tiempo de carga perceptible.
  function add_footer_script() {
echo '<script src="mi-script-footer.js"></script>';
}
add_action('wp_footer', 'add_footer_script');

En el caso de que no sepamos añadirlo por medio de archivos externos, podemos simplificarlo y añadirlo de forma interna.

Modificaciones sin necesidad de crear nuevos archivos

Ejemplo de script interno en el <head>

Supongamos que deseas añadir un pequeño script JavaScript en el <head> de tu sitio WordPress para alterar algún aspecto del DOM antes de que la página se cargue por completo. Aquí tienes un ejemplo de cómo podrías hacerlo utilizando el hook wp_head:

Este script se ejecuta una vez que el DOM esté completamente cargado, lo que es útil para manipulaciones que dependen de la presencia de ciertos elementos en la página.

Ejemplo de script interno en el <footer>

Si quieres asegurarte de que tu script se ejecute después de que todos los elementos de la página se hayan cargado completamente, puedes usar el hook wp_footer. Esto es ideal para scripts que necesitan interactuar con todos los elementos de la página o que son pesados y podrían retrasar la carga de la página si se ejecutan demasiado pronto.

Este script se ejecuta cuando se ha cargado toda la página, incluyendo imágenes y otros recursos, lo cual es ideal para asegurarte de que todos los elementos están presentes antes de manipularlos.

Consideraciones

Al añadir scripts internos directamente a través de wp_head o wp_footer, es importante considerar la especificidad y la necesidad del script. Si el script es extenso o se utiliza en múltiples páginas, puede ser más eficiente mantenerlo en un archivo externo y enlazarlo para mejorar la caché y la organización del código. Sin embargo, para pequeños fragmentos de código que necesitan una rápida inserción sin crear un archivo externo, estos métodos son totalmente adecuados y comúnmente utilizados en el desarrollo de WordPress.

Impacto de JavaScript en Head y Footer

El lugar donde colocas tus scripts JavaScript puede tener un impacto significativo en el rendimiento y la funcionalidad de tu sitio:

• Scripts en el Head: Cargar scripts en el <head> puede ser útil cuando necesitas que el script esté disponible antes de que el contenido de la página comience a renderizarse (por ejemplo, scripts críticos que afectan a la visualización o funcionalidad inmediata). Sin embargo, esto puede retrasar la visualización del contenido de la página porque el navegador debe cargar y procesar estos scripts antes de continuar.
• Scripts en el Footer: Generalmente se recomienda cargar scripts al final de la página (antes de </body>) para mejorar el tiempo de carga perceptible. Esto permite que el contenido HTML se cargue y muestre al usuario antes de que los scripts comiencen a ejecutarse, lo cual puede mejorar la experiencia del usuario, especialmente en sitios con muchos scripts.

Si queremos modificar algún elemento de HTML con un Script a modo de parche porque no podemos hacerlo con PHP, debemos asegurarnos que el Script cargue después.

Entender cómo y dónde usar estos hooks para scripts específicos puede ayudarte a optimizar tanto la carga de la página como la experiencia del usuario en tu sitio WordPress.

Aprender a especificar

Además, si somos específicos con la IA, podemos pedir que solo carguen en un grupo de páginas.

Pongo un caso práctico. Imaginemos que tenemos una web antigua con una jerarquía mala en los posts, con muchos <h1> donde no deben haberlo. Pero que a partir de ahora si se van a trabajar correctamente.

Podemos cargar un Script que nos ahorre tener que modificar manualmente todos esos h1 por h2:

Quiero un hook internal en el footer que sea un script cambie todos los <h1> que hay por <h2> menos el primer <h1>, pero que solo cargue en los posts de wordpress que además tengan fecha anterior a 21/03/2024

De esta forma sin haber sabido programar, hemos conseguido ahorrarnos una gran cantidad de trabajo.

También se puede hacer con cualquier tipo de contenido que tenga una etiqueta concreta si no estamos usando las etiquetas, categorías o características del slug. Todo aquello que abarque nuestra propia imaginación.

Plugins

Los plugins nos sonarán de todo lo que hay a nivel comercial, no obstante, un plugin en WordPress es una extensión que se puede añadir al sistema para expandir sus funcionalidades o añadir nuevas características sin necesidad de modificar el núcleo de WordPress. Los plugins son fundamentales para personalizar y adaptar un sitio web a necesidades específicas sin alterar el código original de WordPress, lo que facilita la actualización del sistema y la gestión del contenido.

Ahora lo desarrollo, pero realmente podemos utilizar un plugin personalizado como un functions.php mucho más ordenado y que además activando y desactivando las funciones que necesitemos, moverlo y copiarlo a diferentes proyectos que trabajemos.

¿Qué es un plugin de WordPress?

Un plugin de WordPress es una pieza de software que se integra con el sistema de WordPress para añadir nuevas funcionalidades o extender las capacidades existentes sin modificar el código base de WordPress. Los plugins permiten a los usuarios y desarrolladores personalizar y optimizar sus sitios web de acuerdo con sus necesidades específicas.

Funcionamiento básico de un plugin

Un plugin funciona como un módulo independiente dentro de WordPress que puede ser activado o desactivado desde el panel de administración. Cuando se activa, el plugin puede ejecutar código, añadir nuevas funciones, o modificar el comportamiento del sitio a través de hooks y filtros que interactúan con el core de WordPress.

• Integración: Los plugins se integran mediante hooks (ganchos de acción y filtros) que permiten modificar o añadir funcionalidades al comportamiento estándar de WordPress.
• Activación y desactivación: Se pueden activar o desactivar desde el panel administrativo de WordPress, permitiendo una gestión flexible de las funcionalidades.
• Independencia: Operan de manera independiente del tema en uso, por lo que las funcionalidades no se pierden al cambiar de tema.

Estructura típica de un plugin

Un plugin puede estar compuesto por varios archivos y directorios que organizan su código y recursos. Comúnmente incluye:

• Archivo principal del plugin: Define la información básica del plugin, como el nombre, versión, autor, y describe brevemente qué hace.
• Archivos de funciones: Contienen el código que ejecuta las funcionalidades específicas del plugin.
• Archivos de configuración: Configuran aspectos específicos del plugin, como conexiones con APIs externas, opciones de usuario, etc.
• Archivos de recursos: Incluyen imágenes, hojas de estilo CSS y scripts JavaScript.

Ejemplo de uso

Podrías tener un plugin que maneje aspectos de seguridad, otro que añada tipos de posts personalizados, o uno que gestione SEO de manera más eficiente. Cada uno operará dentro de su propia 'caja', afectando solo las áreas designadas del sitio.

Ventajas de usar plugins

• Flexibilidad: Permite añadir o modificar características del sitio web sin necesidad de editar los archivos del core de WordPress.
• Facilidad de mantenimiento: Actualizaciones y mejoras en la funcionalidad del sitio se pueden hacer sin alterar otros componentes.
• Seguridad: Reduce el riesgo de romper funcionalidades principales al hacer ajustes o añadir nuevas características.

Explicación del plugin

Mejor que yo, en este caso os va a explicar ChatGPT como funciona mi plugin:

Conclusiones

La Inteligencia Artificial tiene un gran potencial que si la utilizamos correctamente como copiloto nos va a permitir llegar a donde nunca antes