Skip to content

Todo para WordPress, el desarrollo web — y mucho más

📝 Cómo añadir código personalizado a un sitio WordPress

📝 Cómo añadir código personalizado a un sitio WordPress

Un sitio en WordPress funciona bien, pero usted quiere un poco más: eliminar la fecha de un bloque específico, cambiar la fuente en los encabezados, añadir microdatos que su tema no soporta. ¿Le suena familiar? Todo propietario de un sitio WP tarde o temprano se topa con los límites de los temas y los plugins. A continuación, presentamos cinco maneras seguras de añadir su propio código, desde instalar un plugin en un minuto hasta escribir su propio mini-plugin.

La web está llena de fragmentos de PHP y CSS listos para usar para cualquier tarea. El problema no es encontrar el código, el problema es dónde colocarlo para no dejar su sitio inutilizable en la próxima actualización del tema. Hemos reunido todos los métodos que funcionan en un solo lugar, con puntos de ejecución concretos, advertencias y ejemplos.

💡 Resumen rápido:

  • Instale WPCode o Code Snippets, el método más seguro para principiantes: el código no se pierde al cambiar de tema y cada fragmento se puede activar o desactivar individualmente.
  • Si va a editar CSS, empiece por el Personalizador (Apariencia → Personalizar → CSS adicional), está integrado en WordPress y no requiere plugins.
  • Para ediciones de functions.php y plantillas, cree un tema hijo: esto conserva sus cambios cuando el tema padre se actualiza.
  • Cuando los fragmentos se acumulan o modifican la lógica del sitio de forma global, empaquételos en su propio plugin.

Método 1: plugins de inserción de fragmentos

Interfaz del plugin Code Snippets para WordPress

El método más seguro para un principiante: un plugin gestor de fragmentos dedicado. Usted inserta PHP, CSS o JavaScript en el panel de administración a través de un campo de texto normal, y el plugin ejecuta el código donde se necesita. Si el código tiene un error, dicho plugin captura el error fatal y desactiva el fragmento automáticamente; el sitio no se cae y usted no pierde el acceso al panel de administración.

Dos candidatos principales en 2026:

WPCode (anteriormente Insert Headers and Footers), el más popular, más de 2 millones de instalaciones activas y una valoración de 4,9 en WordPress.org. La versión gratuita puede insertar código en el encabezado, el pie de página, antes y después del contenido. El nivel Pro añade lógica condicional (mostrar un fragmento solo en ciertas páginas), un generador de fragmentos por descripción y una biblioteca de recetas listas para usar.

Code Snippets, más de 700 000 instalaciones, valoración de 4,8. Completamente gratuito, con un editor gráfico y resaltado de sintaxis. Los fragmentos se almacenan en la base de datos y no dependen del tema. Puede exportar un conjunto de fragmentos a JSON y trasladarlos a otro sitio.

Ambos plugins funcionan bajo el mismo principio: usted crea un nuevo fragmento, elige el tipo de código (PHP / CSS / JS), pega el código y pulsa «Activar». Si el fragmento provoca un error fatal, WordPress lo desactiva automáticamente en la siguiente solicitud; la pantalla blanca de la muerte no le amenazará.

Antes de insertar cualquier código, haga una copia de seguridad completa. En la práctica, la versión gratuita de WPCode cubre la mayoría de las tareas típicas: píxeles de analítica adicionales, microdatos, ocultación de elementos mediante CSS.

Método 2: editor de CSS integrado de WordPress

Editando código CSS en el Personalizador de WordPress

Compruebe que el tema no anula sus estilos: abra el sitio en modo incógnito después de añadir el CSS.

Si la tarea es puramente estética (color de un botón, margen de un widget, tamaño de fuente del pie de página), no necesita un plugin. WordPress desde la versión 4.7 incluye un editor de CSS adicional integrado directamente en el Personalizador:

  • Apariencia → Personalizar → CSS adicional.
  • Pegue la regla CSS en el panel izquierdo.
  • A la derecha, una vista previa en vivo: usted ve los cambios antes de publicarlos.

Este método es bueno porque el CSS se almacena en la base de datos junto con los ajustes del tema; una actualización del tema no lo borrará. La desventaja es que el editor es básico, sin resaltado de sintaxis ni comprobación de errores. Para una docena de líneas de CSS es perfecto; para un centenar, recurra a un plugin como Simple Custom CSS and JS (más de 200 000 instalaciones), que ofrece un editor con resaltado y le permite enlazar el CSS como un archivo externo para un mejor almacenamiento en caché.

Matiz importante: el CSS se aplica en cascada de arriba abajo; una regla escrita después anula una anterior. Por eso, el CSS del CSS adicional o de un plugin siempre prevalece sobre los estilos del tema. Si su regla no se aplicó, añada !important o refine el selector por uno más específico.

Método 3: tema hijo para ediciones de PHP y plantillas

Ejemplo de estructura de archivos de un tema hijo de WordPress

Un tema hijo hereda todo del tema padre, pero le permite sobrescribir cualquier archivo de plantilla o función. Esta es la forma clásica de hacer cambios en la lógica del sitio sin temor a perderlos al actualizar.

Cuándo necesita un tema hijo:

  • Cuando modifica el marcado de las páginas (header.php, single.php, footer.php).
  • Cuando añade código al functions.php del tema padre; no puede hacerlo directamente porque una actualización sobrescribirá el archivo.
  • Cuando sobrescribe las plantillas de WooCommerce para su tienda.

Creación, 5 minutos:

Cree una carpeta en /wp-content/themes/, por ejemplo twentytwentyfive-child. Dentro, dos archivos:

1/*
2 Theme Name: Twenty Twenty-Five Child
3 Template: twentytwentyfive
4*/
5@import url("../twentytwentyfive/style.css");

El archivo functions.php:

1<?php
2add_action('wp_enqueue_scripts', function () {
3 wp_enqueue_style(
4 'child-style',
5 get_stylesheet_directory_uri() . '/style.css',
6 ['parent-style'],
7 wp_get_theme()->get('Version')
8 );
9});

Comprima la carpeta como ZIP, súbala desde Apariencia → Temas → Añadir nuevo y actívela. Para más detalles, consulte nuestra guía de temas hijo de WordPress.

La única desventaja de un tema hijo es que necesita estudiar la estructura del padre para no romper dependencias. Si solo edita CSS y añade un par de hooks PHP, un plugin de fragmentos del método 1 es suficiente; no necesita un tema hijo.

Método 4: su propio plugin para código permanente

Si ha acumulado más de diez fragmentos y algunos son críticos para el funcionamiento del sitio (tipos de contenido personalizados, sobrescrituras de endpoints de la API REST, su propia taxonomía), empaquételos en su propio plugin. No se desactivará al cambiar de tema y no se perderá al actualizar.

Plugin mínimo, un archivo PHP:

Cree una carpeta my-site-core en /wp-content/plugins/. Dentro, my-site-core.php:

1<?php
2/**
3 * Plugin Name: My Site Core
4 * Description: Custom site code: CPT, hooks, shortcodes
5 * Version: 1.0.0
6 * Requires at least: 6.0
7 * Requires PHP: 8.0
8 */

Escriba todo el PHP personalizado debajo de esta cabecera. El plugin aparecerá en la lista de Plugins; puede activarlo y desactivarlo como uno normal.

Para código que debe ejecutarse siempre (por ejemplo, registrar un tipo de contenido personalizado crítico para el contenido), use plugins obligatorios (must-use). Cree una carpeta /wp-content/mu-plugins/ y coloque allí un archivo PHP. Los plugins MU se ejecutan automáticamente y no tienen interruptor en el panel de administración; no puede desactivarlos accidentalmente.

Nota: si simplemente coloca archivos PHP en mu-plugins sin un cargador, WordPress no los detectará desde subcarpetas. Coloque el archivo en la raíz de mu-plugins o añada un cargador, un archivo PHP de una línea que incluya los archivos de las subcarpetas mediante require_once.

Método 5: mostrar código en una entrada sin ejecutarlo

Ejemplo de visualización de código HTML en el editor de WordPress

Una tarea distinta no es añadir código al sitio, sino mostrárselo a los lectores en un artículo. WordPress, por defecto, ejecuta el HTML y PHP insertados en el editor visual, lo que puede romper la maquetación de la entrada. La solución depende del editor que esté usando:

Gutenberg (editor de bloques): use el bloque Código o HTML personalizado. El bloque Código muestra el código con fuente monoespaciada en un marco sin ejecutarlo. Para resaltar la sintaxis de PHP y CSS, instale el plugin Syntax-highlighting Code Block, que colorea el código dentro del bloque Código según el lenguaje.

Editor clásico: en la pestaña visual, insertar el código como texto normal funciona para mostrarlo (pero no da formato monoespaciado). En la pestaña HTML, el código se interpreta como real; WordPress ejecutará las etiquetas y romperá la página. Para evitarlo, sustituya los caracteres activos por entidades HTML:

Carácter

Sustitución

<

<

>

>

"

"

&

&amp;

Para una sola etiqueta, la sustitución manual funciona. Para un bloque de 20 líneas, utilice un codificador en línea o un complemento. Una lista completa de entidades de caracteres se encuentra en la referencia de WordPress.

⁉️🤔 Preguntas frecuentes

¿Puedo insertar código PHP directamente en una entrada de WordPress?

No, WordPress no ejecuta PHP dentro del contenido de las entradas por razones de seguridad. Si necesita ejecutar PHP en una página específica, utilice un shortcode registrado en el functions.php del tema hijo o en un plugin de fragmentos. Una alternativa son plugins como Insert PHP Code Snippet, que le permiten crear un fragmento e insertarlo mediante shortcode en cualquier entrada.

¿Qué es más seguro para un principiante: un plugin de fragmentos o un tema hijo?

El plugin WPCode o Code Snippets. Aísla cada fragmento de código: un error en un fragmento no afecta a los demás, y WordPress captura los errores fatales y desactiva el fragmento problemático automáticamente. Un tema hijo no ofrece ese mecanismo: un error tipográfico en functions.php bloquea todo el sitio. Además, el plugin no está vinculado al tema: si cambia de tema, el código permanece.

¿Cómo pruebo el código antes de ejecutarlo en un sitio en producción?

Cree una copia de staging del sitio. La mayoría de los proveedores de hosting (SiteGround, Cloudways, Kinsta) ofrecen un botón «Create Staging» en el panel de control. En local, despliegue una copia con Local o XAMPP. Pruebe en la copia y luego traslade los cambios al sitio en producción. Para reglas CSS rápidas, basta con abrir DevTools en Chrome (F12), localizar el elemento y aplicar el estilo directamente en el navegador: es temporal y solo visible para usted.

¿Tengo que crear un tema hijo si solo edito CSS?

No. Empiece con el CSS adicional integrado en el Personalizador (Apariencia → Personalizar). Es suficiente para la mayoría de los ajustes visuales, no se borra al actualizar el tema y no requiere ni un plugin ni un tema hijo. Un tema hijo es necesario cuando sobrescribe archivos de plantilla PHP (header.php, single.php, funciones del tema).

¿Qué método debo elegir para código crítico que no puede perderse?

Un plugin must-use (/wp-content/mu-plugins/). El código en plugins MU siempre se ejecuta, es imposible desactivarlo desde el panel de administración y sobrevive a cambios de tema y actualizaciones de plugins normales. Es adecuado para registrar tipos de contenido personalizados (CPT), taxonomías y sobrescrituras críticas de la API REST. No es adecuado para ajustes cosméticos: para eso bastan el CSS adicional o un plugin de fragmentos.

Qué elegir según su tarea

Si necesita corregir el color de un botón una sola vez, abra Apariencia → Personalizar → CSS adicional, pegue la regla y olvídese. Si está reuniendo fragmentos PHP útiles para el sitio, instale WPCode: es gratuito, seguro y no depende del tema. Si está editando plantillas de página o conectando sus propios scripts mediante wp_enqueue_scripts, cree un tema hijo. Y cuando los fragmentos superen la decena y la mitad sean críticos para el funcionamiento del sitio, empaquételos en su propio plugin.

Empiece por algo pequeño: abra el Personalizador y añada su primera regla CSS ahora mismo. Escriba en los comentarios qué método utiliza y qué fragmento resultó ser el más útil en su sitio.