---
title: "Cómo modificar una web sin saber programar - Carlos Sánchez"
description: "Utiliza la IA para modificar el core de tu wordpress aunque no sepas programación."
author: "Carlos Sánchez"
url: https://carlossanchezdonate.com/articulo/modifica-wordpress-ia-nocode/
image: https://carlossanchezdonate.com/wp-content/uploads/tb-ai-wordpress.jpg
---
# Modifica el core tu WordPress sin programar
Aprende a modificar Wordpress sin saber programar (Incluso si sabes)
**Autor:**
: [Carlos Sánchez](https://carlossanchezdonate.com/sobre-mi/)
**Temática: **
: [IA](https://carlossanchezdonate.com/seo-avanzado/ia/)
, : [Tecnologías](https://carlossanchezdonate.com/seo-avanzado/tecnologias/)
**Fecha de publicación:**
: 2024-04-18
**Última revisión:**
: 2026-03-02
**Índice**
mostrar
1
Funcionamiento de una web
2
Consola de Chrome, elementos y selectores
2.1
Selectores
2.1.1
Copiar Selector
3
Qué es un tema Child en WordPress
3.1
Pasos para crear y utilizar un tema child en WordPress:
4
Functions.php
4.1
Funcionalidades clave del archivo functions.php:
5
Hooks
5.1
Hooks de Acción
5.2
Hooks de Filtro
5.3
Potencial de los Hooks
6
Head y Footer
6.1
Head
6.2
Footer
6.3
Modificando Head y Footer con Hooks en WordPress
6.4
Modificaciones sin necesidad de crear nuevos archivos
6.4.1
Ejemplo de script interno en el
6.4.3
Consideraciones
6.5
Impacto de JavaScript en Head y Footer
6.6
Aprender a especificar
7
Plugins
7.1
¿Qué es un plugin de WordPress?
7.2
Funcionamiento básico de un plugin
7.3
Estructura típica de un plugin
7.4
Ejemplo de uso
7.5
Ventajas de usar plugins
7.6
Cómo crear tu propio plugin (en lugar de usar el functions.php)
7.6.1
Crear un plugin de forma sencilla
7.6.2
Hacer el plugin más eficiente con includes
7.6.3
Ejemplo completo de un plugin con varias funcionalidades
7.6.4
¿Y si quiero que la IA me lo genere?
7.7
Explicación del plugin
7.8
Estructura y funcionamiento del plugin
7.9
Implicaciones y uso
7.10
Plugin vs functions.php: cuándo usar cada uno
8
Ejemplos de Scripts:
8.1
Modificar el Anchor Text
8.2
Hacer que nuestro enlace esté dentro de otra etiqueta de HTML
8.3
Cambiar la ruta del enlace
8.4
Eliminar el Target="_blank"
8.5
Modificar el nofollow por noopener
8.6
Bonus Track. Elimina los Headings h2, h3 y h4 de herramientas de banner de Cookies por medio de JavaScript
9
Conclusiones
Vídeo explicativo donde te enseño a aplicar las prácticas necesarias.
¿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 Staging](https://carlossanchezdonate.com/articulo/web-testing-seo/) 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](https://carlossanchezdonate.com/articulo/css-posicionamiento-web/) 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](https://carlossanchezdonate.com/articulo/como-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](https://carlossanchezdonate.com/articulo/renderizado-en-el-seo/) sea trabajo del dispositivo del usuario, cuestión que desde SEO debemos tener en cuenta por como lo procesa [Googlebot desde su headless chromium](https://carlossanchezdonate.com/articulo/googlebot/) y como [procesa el JavaScript en el renderizado](https://carlossanchezdonate.com/articulo/renderizacion-de-javascript-en-el-seo/).
Si quieres profundizar más, siempre puedes leer el artículo de [cómo utilizar JavaScript a modo de parche](https://carlossanchezdonate.com/articulo/js-para-mejorar-tu-contenido/).
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](https://carlossanchezdonate.com/seo-avanzado/servidores/#informacion) 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](https://carlossanchezdonate.com/articulo/cache-en-el-seo/).
## Consola de Chrome, elementos y selectores
Es importante que aprendamos el [uso de la Consola de Chrome](https://carlossanchezdonate.com/articulo/devtools-para-seo/#elementos) 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.
¿No lo estás entendiendo?
Si quieres aprender a aplicar todo esto y mucho más, accede a mi formación:
[¡Aprende SEO de verdad!](/master-seo-tecnico/)
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](https://carlossanchezdonate.com/articulo/devtools-para-seo/).
#### 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`:
`
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.
> Si quieres ampliar y saber más sobre modificar WordPress sin tocar la plantilla, siempre puedes modificar el buffer de salida con PHP.
## 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 ``.
`function add_custom_footer_content() {
echo 'Este es un mensaje personalizado en el footer!';
}
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 .= '¡Gracias por leer este post!';
}
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 `` 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 `` incluyen:
- Título de la página (``): se muestra en la pestaña del navegador.
- Enlaces a CSS (``): para estilizar el contenido de la página.
- Scripts (``): algunos scripts pueden ser incluidos en el head para que se carguen antes del contenido de la página.
- Metaetiquetas (``): 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 `` dentro del cuerpo del documento (``).
### Modificando Head y Footer con Hooks en WordPress
WordPress ofrece hooks específicos que permiten inyectar o modificar contenido en el `` y el `` de las páginas.
- `wp_head`: Este hook se activa dentro de la etiqueta `` 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 '';
}
add_action('wp_head', 'add_custom_script');
`
- `wp_footer`: Similar al `wp_head`, pero se activa justo antes de cerrar la etiqueta ``. 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 '';
}
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
Supongamos que deseas añadir un pequeño script JavaScript en el `` 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`:
`function add_internal_script_in_head() {
?>
document.addEventListener("DOMContentLoaded", function() {
// Código JavaScript aquí
console.log("El DOM está completamente cargado y analizado");
});
window.onload = function() {
// Código JavaScript aquí
console.log("Todos los elementos de la página están completamente cargados");
};
console.log('Script cargado solo en posts individuales');