Uno de los principales atractivos de usar WordPress es que puedes crear sitios web sin tocar una sola línea de código, pero sigues teniendo total libertad para editar el código fuente si lo deseas.
Si sabes cómo añadir código a WordPress de forma segura, puedes cambiar el diseño y la funcionalidad de tu sitio web para facilitar mucho tu trabajo. El tipo de código que decidas insertar depende de ti. En WordPress, normalmente trabajarás con HTML, CSS y PHP.
En esta guía, te explicaremos qué hacer antes de empezar a añadir y editar código en WordPress. Después, te mostraremos cómo insertar HTML, CSS y PHP en tu sitio web. Abordaremos varios métodos para añadir y editar código en cada lenguaje.
Qué hacer antes de editar código en WordPress
Editar código existente en los archivos principales de tu sitio o hacerles añadidos siempre conlleva un riesgo. Si hay errores o rompes funciones existentes, tu sitio web podría dejar de funcionar.
Es posible arreglar un sitio web con errores en su código. Pero, a menos que tengas experiencia en desarrollo, encontrar el código exacto que está causando problemas puede ser complicado.
Por eso, te recomendamos que sigas varios pasos para proteger tu sitio web antes de empezar a añadir o editar código. Piensa en este proceso como la creación de un entorno seguro para evitar problemas más adelante.
1. Haz una copia de seguridad de tu sitio web
No importa qué tipo de sitio tengas: las copias de seguridad son absolutamente fundamentales. ¿Por qué? Porque si algo sale mal — un ataque informático, un conflicto entre plugins o un error de código— puedes restaurar una copia de seguridad reciente para que tu sitio vuelva a funcionar.
En otras palabras, hacer una copia de seguridad de tu sitio es la mejor manera de proteger tu sitio web si algo sale mal.
Para facilitar este proceso, lo mejor es usar un plugin que se encargue automáticamente de todo o que genere copias de tu sitio web cuando lo necesites.
Por supuesto, recomendamos Jetpack Backup — una solución completa que funciona en tiempo real.
Con Jetpack, las copias de seguridad se almacenan fuera del sitio en la nube, por lo que no se carga tu servidor. Y como se hace una copia de seguridad cada vez que cambia algo en tu sitio, puedes restaurar rápidamente una copia justo anterior a que se produjera un error, incluso si tu sitio está completamente inaccesible.
Sin embargo, si eliges usar otro plugin de copias de seguridad, te recomendamos hacer una copia de seguridad manual completa antes de continuar con los pasos que se indican a continuación.
2. Usa un tema hijo de WordPress
Esta medida solo se aplica si tienes previsto editar tu tema. WordPress te permite hacer los cambios que quieras en el código de cualquier tema, pero cuando actualices a una nueva versión de un tema, perderás todas las personalizaciones.
Para evitarlo, tendrás que usar un tema hijo. Un tema hijo es un tema secundario que incorpora características, funcionalidades y estilos de su tema principal, pero que no cambia cuando actualizas el principal. Esto significa que el código que añadas al tema hijo no se borrará cuando actualices el tema principal.
Aunque puedes crear temas hijo manualmente, te recomendamos usar un plugin. Una de las mejores herramientas para esta tarea es Child Theme Configurator.
Activa el plugin y ve a Herramientas → Temas hijo. Selecciona la opción para crear un tema hijo nuevo y selecciona tu tema actual como tema principal.
Haz clic en Analizar, y el plugin comprobará si puede crear un tema hijo para tu selección. En Selecciona dónde guardar los estilos nuevos, elige Hoja de estilos principal como opción.
En el apartado Selecciona cómo gestionar la hoja de estilos del tema principal de las opciones, haz clic en Usar la cola de estilos de WordPress.
También puedes personalizar los atributos del tema hijo. Estos incluyen el nombre, el autor y la descripción que aparecerán al ir a Apariencia → Temas.
Los atributos que elijas son solo para uso interno. Cuando estés satisfecho con la configuración, haz clic en Crear un tema hijo nuevo.
Si vas a Temas → Apariencia, el nuevo tema hijo debería aparecer entre los temas disponibles.
Una vez configurado el tema hijo, puedes empezar a añadirle código personalizado. Si no estás seguro de cómo funciona ese proceso, sigue leyendo. En las siguientes secciones te mostraremos cómo editar CSS y HTML en WordPress.
3. Usa un sitio web de pruebas
El objetivo de un sitio web de pruebas es ayudarte a probar código nuevo y cambios en tu sitio en un entorno seguro. Con un sitio de pruebas de WordPress, puedes añadir código sin tener que preocuparte por errores críticos o por el tiempo de inactividad de tu sitio web activo.
Normalmente, tu proveedor de alojamiento web ofrecerá funciones de entorno de pruebas. Hay varios plugins para crear sitios de pruebas en WordPress, pero pueden resultar un poco complicados de usar. Si puedes acceder a estas funciones a través del panel de control de tu alojamiento, será mucho más fácil crear copias de tu sitio y pasar los cambios del entorno de pruebas a producción.
Cómo editar código HTML, CSS y PHP en WordPress (10 métodos)
Aprender a editar código en WordPress es mucho más fácil de lo que podrías pensar. Aun así, el proceso cambiará según el tipo de código que quieras usar. Empecemos hablando de cómo añadir HTML mediante los editores de bloques y clásico.
1. Cómo editar HTML en el editor de bloques de WordPress
Este método te permite editar cualquier página o entrada existente usando HTML dentro del editor de bloques. Es un método sencillo que no debería plantearte ningún problema si estás familiarizado con el editor de bloques.
Para empezar, abre el editor. Cuando puedas ver el contenido de la página o entrada, haz clic en el icono de tres puntos situado en la esquina superior derecha de la pantalla.
Ahora haz clic en la opción Editor de código.
La vista del contenido del editor cambiará de bloques a código. Para cada bloque, verás una sección diferente de código HTML.
Ten en cuenta que los editores de código de WordPress no incluyen ninguna función de resaltado. Eso significa que todo el código aparecerá como texto sin formato. Tendrás que leerlo detenidamente si quieres modificarlo o añadirle contenido.
Puedes alternar entre las interfaces visual y de código en el editor de bloques. Cuando estés satisfecho con el resultado, guarda los cambios en tu entrada o página.
2. Cómo editar HTML en el editor clásico
Editar código HTML usando el editor clásico es sencillo. Abre la página o entrada en la que quieras trabajar y localiza la pestaña Texto sobre el contenido del documento.
Haz clic en la pestaña Texto y verás que el contenido de la pestaña Visual aparece como texto sin formato. De forma predeterminada, cualquier texto que añadas sin formato no incluirá código HTML.
Puedes añadir rápidamente formato y código HTML utilizando los botones de la parte superior del editor. El editor clásico incluye opciones para texto en negrita o cursiva, enlaces, imágenes, listas y otros tipos de código.
También tienes la opción de añadir código HTML manualmente. Si estás familiarizado con HTML, puedes insertarlo o editarlo en la pestaña Texto como quieras. El editor te permite alternar entre las pestañas Visual y Texto para ver los resultados.
3. Cómo editar HTML con el editor de temas
WordPress te permite acceder a los archivos del tema y editarlos directamente desde tu escritorio. Sin embargo, si tienes pensado editar archivos del tema, te recomendamos configurar un tema hijo de antemano.
Para acceder al editor de temas, ve a Apariencia → Editor de archivos del tema. En la página siguiente, verás un editor de texto sin formato a la izquierda y una lista de archivos a la derecha. Esa lista de archivos corresponde al tema que elijas en el menú desplegable de la esquina superior derecha.
De forma predeterminada, el editor de temas se abrirá con el archivo Style.css del tema en el que estás trabajando. La mayoría de los archivos del tema a los que puedes acceder mediante el editor están relacionados con CSS o PHP. Sin embargo, puedes editar varios componentes del tema utilizando HTML.
Sin embargo, en la mayoría de los casos, los temas hijo solo incorporan los archivos style.css y functions.php de forma predeterminada. Por lo tanto, si quieres editar un archivo HTML, como footer.html, tendrás que copiarlo al tema hijo antes de realizar cambios utilizando una herramienta de protocolo de transferencia de archivos (FTP) o el panel de control de tu proveedor de alojamiento.
Con la herramienta que prefieras, ve a public_html → wp-content → temas → tu tema principal. Busca el archivo HTML que quieras editar y cópialo en la carpeta de tu tema hijo. Después, ese archivo estará visible en el Editor de temas de WordPress.
Puedes encontrar tus archivos HTML en el editor de temas seleccionando tu tema hijo en el menú desplegable de la parte superior derecha de la página y haciendo clic en el archivo de la lista que aparece.
Te recomendamos no realizar ningún cambio mientras editas archivos del tema a menos que entiendas con precisión lo que hace tu código. De lo contrario, corres el riesgo de dañar funciones críticas del tema y de tu sitio web.
4. Cómo editar CSS y PHP en el editor de temas
Para acceder al editor de temas de WordPress, ve a Apariencia → Editor de archivos del tema. En la siguiente pantalla, verás una lista de los archivos que puedes editar de tu tema activo. A la izquierda, verás una pestaña del editor que muestra el contenido del archivo que selecciones.
De forma predeterminada, el editor de temas se abrirá en una hoja de estilos. El archivo style.css contendrá todos los estilos CSS del tema. Estos incluyen clases, IDs, estilos de botones y mucho más.
Puedes editar style.css como quieras. Cuando hayas terminado, haz clic en Actualizar archivo para guardar los cambios.
El mismo proceso se aplica a los archivos PHP. Selecciona el archivo .php que quieras editar utilizando el menú de la derecha. En este ejemplo, hemos elegido functions.php para editarlo.
Editar código PHP puede ser más delicado que trabajar con HTML o CSS. Con estos últimos, si cometes un error, puede verse afectado el estilo de tu sitio web. En cambio, un código PHP que no funcione puede provocar que algunas funciones dejen de funcionar.
5. Editar HTML en un widget de WordPress
Como quizá sepas, las versiones recientes de WordPress te permiten editar los widgets mediante bloques. Esto significa que, en lugar de usar widgets clásicos, puedes utilizar el conjunto completo de elementos del Editor de bloques en tus áreas con widgets.
Para editar las áreas de widgets, ve a Apariencia → Widgets. Aquí podrás editar las secciones de widgets disponibles para tu tema.
Algunos bloques pueden añadir HTML personalizado a tus áreas de widgets. Haz clic en el botón con el signo más junto al encabezado Widgets y selecciona HTML personalizado como bloque.
Añade el código que quieras dentro del bloque y muévelo para cambiar su posición. Cuando hayas terminado, haz clic en el botón Actualizar en la esquina superior derecha de la pantalla.
6. Editar HTML mediante cPanel
Si tu proveedor de alojamiento web ofrece una instalación de cPanel para tu cuenta, puedes utilizarla para gestionar y editar los archivos de tu sitio web.
Para comenzar, inicia sesión en tu cuenta de cPanel y busca la opción Administrador de archivos en ARCHIVOS.
El Administrador de archivos te permite navegar por los archivos de tu cuenta de alojamiento. Según la estructura de tu servidor, es posible que encuentres varias carpetas.
Busca la opción llamada public_html o www. Esos directorios deberían contener los archivos de tu sitio de WordPress.
En WordPress, esto se denomina directorio raíz del sitio. Cuando lo abras, encontrarás varios subdirectorios y archivos correspondientes a tu sitio web de WordPress. Si haces clic con el botón derecho en cualquiera de estos archivos, verás la opción Editar disponible.
Al hacer clic en esa opción, se abrirá el editor de texto de cPanel. Este editor es muy básico en comparación con cualquier software instalado localmente. Solo recomendamos utilizarlo para hacer pequeñas modificaciones de HTML.
Para actualizaciones de código más complejas, querrás utilizar el protocolo de transferencia de archivos (FTP) y un editor de texto local. Te mostraremos cómo hacerlo en la siguiente sección.
7. Editar HTML, CSS y PHP mediante FTP
FTP te permite conectarte al servidor de tu sitio web para que puedas editar y cargar archivos. Con FTP, puedes cargar fácilmente grandes cantidades de archivos. Este proceso sería lento y difícil si intentaras hacerlo directamente desde el escritorio de WordPress.
Y lo que es más importante, FTP puede editar archivos de WordPress y añadir código HTML, CSS o PHP mediante cualquier editor de texto local que elijas.
Para conectarte a tu sitio web mediante FTP, necesitarás un cliente (como FileZilla) y un conjunto de credenciales. La mayoría de los proveedores de alojamiento web te proporcionan las credenciales FTP al registrarte. Si no es así, deberías poder crear una cuenta FTP nueva mediante el panel de control del alojamiento.
Introduce tus credenciales FTP en el cliente FTP que prefieras y conéctate al servidor. Una vez establecida la conexión, verás una lista de carpetas y archivos.
Con una conexión FTP, obtienes acceso completo a todos los archivos y carpetas de tu cuenta. Para encontrar tus archivos de WordPress, busca el directorio llamado public, public_html, o www. En WordPress, esos son los nombres más comunes del directorio raíz del sitio.
Abre el directorio y localiza el archivo que quieres editar. Haz clic derecho en él y selecciona la opción Editar. En estos ejemplos, usamos FileZilla, por lo que el menú muestra Ver/Editar.
La opción Ver/Editar abrirá el archivo con el editor de texto local predeterminado. A diferencia de cPanel o WordPress, los editores dedicados facilitan mucho añadir código y trabajar con él.
En este ejemplo, estamos editando wp-config.php, que es un archivo del núcleo de WordPress.
Puedes añadir o editar cualquier tipo de código que quieras usando un editor de texto. Esto incluye HTML, CSS y PHP. La única limitación es tu conocimiento de cada lenguaje específico.
Cuando termines de añadir o editar código de WordPress, guarda los cambios en el archivo y ciérralo. Tu cliente FTP te preguntará si quieres sobrescribir la versión existente de ese archivo en el servidor. Selecciona Sí, y eso es todo.
8. Añadir clases CSS usando el Editor de bloques
Si quieres usar CSS para personalizar la apariencia de los bloques, el Editor de bloques te permite añadir clases a cualquier elemento. Este proceso también es muy sencillo.
Para añadir clases CSS a un bloque, haz clic en él y abre la pestaña Ajustes del bloque. Después, busca la pestaña Avanzado en la parte inferior de los ajustes del bloque.
Puedes usar el campo Clases CSS adicionales para añadir una o más clases CSS a cualquier bloque específico. El efecto que tendrán esas clases depende del CSS personalizado de WordPress que añadas.
9. Cómo editar CSS en el Personalizador de WordPress
El Personalizador de WordPress puede cambiar el estilo y el diseño de todo tu sitio mediante una interfaz visual.
Para acceder al Personalizador, ve a Apariencia → Personalizar. En la siguiente pantalla, verás un menú a la izquierda y una vista previa de tu sitio a la derecha.
La pestaña CSS adicional te dará acceso a un editor básico para añadir CSS personalizado a tu web.
Añadir CSS mediante el Personalizador de WordPress te permite previsualizar los cambios al instante.
10. Editar CSS usando un plugin de WordPress
Algunos plugins de WordPress ofrecen métodos alternativos para añadir código personalizado a WordPress. En la mayoría de los casos, estos plugins se centran en ayudarte a añadir CSS personalizado o JavaScript de WordPress.
Un ejemplo es Simple Custom CSS and JS. Este plugin en particular puede añadir código CSS, JS y HTML personalizado a WordPress desde un menú sencillo.
Al seleccionar la opción Añadir código CSS se abrirá un editor. Puedes usar ese editor para insertar CSS personalizado y elegir dónde se colocará el código dentro de tus archivos.
Aunque añadir CSS personalizado con plugins es sencillo, no recomendamos este método. WordPress te ofrece muchas opciones integradas para añadir y editar código CSS. Si quieres un enfoque más práctico, siempre puedes usar FTP.
Si dependes de un plugin para añadir CSS personalizado, el código podría desaparecer si desinstalas el plugin. Además, los distintos plugins añadirán el código mediante métodos únicos, por lo que los resultados variarán según la herramienta que utilices.
¿Puedes añadir código JavaScript a WordPress?
WordPress no ofrece ninguna funcionalidad integrada para añadir código JavaScript a tu sitio web. A diferencia de lo que ocurre con HTML y CSS, tus únicas opciones con JavaScript son usar plugins o añadir el código manualmente mediante el editor de temas o FTP.
Por lo general, la forma más sencilla de añadir código JavaScript es usar un plugin. Si eliges el enfoque manual, puedes usar JavaScript con WordPress mediante la función de «encolado» de PHP.
Para obtener más información, consulta nuestra guía sobre cómo añadir JavaScript a WordPress.
¿Deberías optimizar tu código de WordPress para mejorar el rendimiento?
La optimización del código es un término amplio que engloba varias prácticas. Estas garantizan que el código se ejecute de la forma más fluida posible y no ocupe mucho espacio del servidor.
Por lo general, los fragmentos de código no deberían ocupar demasiado almacenamiento. Aun así, puedes reducir el espacio que ocupan mediante la «minificación».
La minificación toma tu HTML y CSS personalizados y elimina los espacios en blanco o los caracteres innecesarios. Como ejemplo, este es un fragmento sencillo de CSS personalizado:
p {
text-align: center;
color: red;
} Si tomas ese código y lo minificas, tendrá un aspecto parecido a este:
p{text-align:center;color:red}El resultado del código sigue siendo el mismo, pero el tamaño del archivo resultante puede ser menor. En la práctica, minificar código HTML y CSS a menudo no te proporcionará resultados significativos.
La excepción se da cuando trabajas con bibliotecas de código enormes. Cualquier reducción de tamaño se traducirá en tiempos de carga más cortos para los visitantes.
Además, elige con cuidado la fuente del código de terceros. Confiar en sitios web reconocidos y foros de desarrolladores expertos puede garantizar que tu código sea eficaz, seguro y funcional. En cambio, los fragmentos aleatorios de blogs desconocidos tienen más probabilidades de causar problemas, ralentizar tu sitio y posiblemente dejarlo inutilizable.
Preguntas frecuentes
¿Puedo añadir código PHP o JavaScript a la sección «CSS adicional» del Personalizador de WordPress?
No, no puedes añadir código PHP ni JS ahí. La sección «CSS adicional» está diseñada únicamente para código CSS. Si colocas código PHP o JavaScript en ese cuadro, no funcionará. El código simplemente aparecerá como texto sin formato en tu sitio. Para añadir funciones PHP, debes usar un plugin específico para fragmentos de código. También puedes añadir el código al archivo functions.php de tu tema hijo.
¿Es seguro usar el Editor de archivos de temas si solo copio y pego un fragmento de código?
Aunque tengas cuidado, es muy arriesgado. Un pequeño error, como la falta de un símbolo, puede provocar un error grave. Este error, conocido como la «pantalla blanca de la muerte», puede impedirte acceder a todo tu sitio web. El editor del escritorio es una herramienta que solo debe usarse en emergencias. Los desarrolladores profesionales no lo utilizan para el trabajo habitual porque no es seguro.
¿En qué se diferencia editar theme.json de usar CSS normal?
El archivo theme.json es un archivo de configuración central para los temas de bloques modernos de WordPress. Establece las reglas de diseño principales para todo el sitio. Esto incluye los colores, las fuentes y el espaciado. CSS se utiliza para añadir estilos sobre estas reglas o para cambiar elementos específicos. Usar theme.json es la forma correcta y más eficiente de controlar el diseño básico de un tema de bloques. CSS sirve para cambios de estilo más pequeños y específicos.
¿Qué es un tema hijo y por qué lo necesito realmente?
Un tema hijo es un tema secundario que funciona con tu tema principal, llamado tema padre. Necesitas un tema hijo para realizar cambios en el código de tu tema de forma segura. Cuando colocas tu código CSS o PHP personalizado en un tema hijo, este se mantiene separado de los archivos del tema padre. Así, cuando el tema padre recibe una actualización, tu código personalizado no se elimina. Sin un tema hijo, cualquier actualización de tu tema principal borrará todas tus modificaciones.
¿Cuándo debería usar un plugin de fragmentos de código en lugar de editar el archivo functions.php de mi tema?
Deberías usar un plugin de fragmentos de código para la mayoría de las pequeñas adiciones de código. Un plugin es más seguro y fácil de gestionar.
Te permite añadir fragmentos de PHP, activarlos o desactivarlos y organizarlos sin tocar los archivos del tema. Esto ayuda a evitar errores en el sitio. Solo deberías editar directamente el archivo functions.php si eres desarrollador. Este método sirve para realizar cambios que son una parte fundamental de las características únicas de tu tema.
¿Añadir código personalizado ralentizará mi sitio web de WordPress?
Sí, el código personalizado puede ralentizar tu sitio si no está bien escrito. El código mal escrito, especialmente el código que realiza muchas solicitudes a la base de datos o carga archivos externos grandes, puede perjudicar el rendimiento de tu sitio.
Para evitarlo, usa siempre código limpio y eficiente de fuentes fiables. Comprueba la velocidad de tu sitio antes y después de añadir un nuevo fragmento. Además, elimina los fragmentos de código que ya no uses para que tu sitio siga funcionando rápidamente.
¿Cuál es el mejor lugar para añadir un código de seguimiento de Google Analytics o Facebook Pixel?
El mejor lugar para añadir códigos de seguimiento es un plugin de fragmentos de código o un plugin de integración específico. No añadas estos scripts directamente en el archivo header.php de tu tema.
Usar un plugin mantiene el código de seguimiento separado de tu tema. Esto significa que no se eliminará cuando actualices el tema. También facilita la gestión de tus scripts desde un solo lugar, sin el riesgo de romper el diseño de tu sitio.
¿Puedo usar el bloque HTML personalizado para añadir CSS o JavaScript?
Sí, puedes usar el bloque HTML personalizado para añadir CSS o JavaScript a una página o entrada específica. Para CSS, debes colocar el código dentro de
Personaliza WordPress usando HTML, CSS y PHP
Aprender a añadir y editar código en WordPress es más fácil de lo que imaginas. Incluso si no eres desarrollador, a menudo puedes encontrar código que se adapte a tus necesidades con una búsqueda rápida en Google. Saber cómo insertar ese código de forma segura puede permitirte personalizar tu sitio web de maneras que quizá no sean posibles usando solo plugins.
Antes de empezar a realizar cambios en el código de tu sitio, te recomendamos crear una copia de seguridad completa. Si vas a editar el CSS o PHP de tu tema, también conviene que uses un tema hijo. Dependiendo del proveedor de alojamiento web que utilices, es posible que también tengas acceso a un entorno de pruebas. Te recomendamos usar un sitio web de pruebas al editar código por motivos de seguridad.
Jetpack 