Cómo agregar y editar código en WordPress (HTML, CSS, PHP)

Uno de los principales atractivos de usar WordPress es que puede crear sitios web sin tocar una línea de código, pero aún tiene total libertad para editar el código fuente si lo desea.

Si sabe cómo agregar código a WordPress de manera segura, puede cambiar el diseño y la funcionalidad de su sitio web para que su trabajo sea mucho más fácil. El tipo de código que decidas insertar depende de ti. En WordPress, normalmente trabajará con HTML, CSS y PHP.

En este artículo, le diremos qué hacer antes de comenzar a agregar y editar código en WordPress. Luego, le mostraremos cómo insertar HTML, CSS y PHP en su sitio web. Cubriremos múltiples enfoques para agregar y editar código para cada idioma.

Qué hacer antes de editar código en WordPress

Editar el código existente dentro de los archivos principales de su sitio o agregarlos siempre conlleva un riesgo. Si hay errores o rompe las funciones existentes, su sitio web podría dejar de funcionar.

Es posible arreglar un sitio web con errores en su código. Pero a menos que tenga experiencia en desarrollo, reducir el código exacto que está causando problemas puede ser un desafío.

Con eso en mente, le recomendamos que siga varios pasos para proteger su sitio web antes de comenzar a agregar o editar código. Piense en este proceso como la creación de un entorno seguro para evitar problemas en el futuro.

1. Haz una copia de seguridad de tu sitio web

No importa el tipo de sitio que tenga, las copias de seguridad son absolutamente críticas. ¿Por qué? Porque si algo sale mal (una piratería, un conflicto de complementos o un error de código), simplemente puede restaurar una copia de seguridad reciente para que su sitio vuelva a funcionar.

En otras palabras, hacer una copia de seguridad de su sitio es la mejor manera de proteger su sitio web si algo sale mal.

Para facilitar este proceso, es mejor usar un complemento para encargarse automáticamente de todo o generar copias de su sitio web a pedido.

Por supuesto, recomendamos Jetpack Backup, una solución completa que funciona en tiempo real.

Con Jetpack, las copias de seguridad se almacenan de forma segura fuera del sitio en la nube, por lo que no hay carga en su servidor. Y dado que se realiza una copia de seguridad cada vez que algo cambia en su sitio, puede restaurar rápidamente uno justo antes de que ocurriera un error, incluso si su sitio está completamente fuera de línea.

Sin embargo, si elige usar otro complemento de copia de seguridad, le recomendamos que realice una copia de seguridad manual completa antes de continuar con los pasos a continuación.

2. Usa un tema hijo de WordPress

Esta medida solo aplica si planeas editar tu tema. WordPress le permite realizar los cambios que desee en el código de cualquier tema, pero cuando actualice a una nueva versión de un tema, se perderán las personalizaciones.

Para evitar esto, deberá usar un tema secundario. Un tema secundario es un tema secundario que extrae características, funciones y estilos de su tema principal, pero eso no cambia cuando actualiza el tema principal. Esto significa que el código que agregue al tema secundario no se borrará cuando actualice el tema principal.

Si bien puede crear temas secundarios manualmente, le recomendamos que use un complemento en su lugar. Una de las mejores herramientas para el trabajo es Child Theme Configurator.

Active el complemento y vaya a Herramientas → Temas secundarios . Seleccione la opción para crear un nuevo tema secundario y seleccione su tema actual como principal.

Haga clic en Analizar y el complemento verificará si puede crear un tema secundario para su selección. En Seleccione dónde guardar nuevos estilos, elija la opción Hoja de estilo principal .

Para la opción de manejo de la hoja de estilo Seleccionar tema principal , haga clic en Usar la cola de estilos de WordPress .

También puede personalizar los atributos del tema secundario. Estos incluyen el nombre, el autor y la descripción que aparecerán cuando navegue a Apariencia → Temas .

Los atributos que elija son solo para uso interno. Una vez que esté satisfecho con la configuración, haga clic en Crear nuevo tema secundario.

Si navega a Temas → Apariencia , el nuevo tema secundario debería aparecer entre los temas disponibles.

Una vez que el tema secundario está configurado, puede comenzar a agregarle un código personalizado. Si no está seguro de cómo funciona ese proceso, siga leyendo. Le mostraremos cómo editar CSS y HTML en WordPress en las siguientes secciones.

3. Usa un sitio web provisional

El propósito completo de un sitio web provisional es ayudarlo a probar el nuevo código y los cambios en su sitio en un entorno seguro. Con un sitio de prueba de WordPress, puede agregar código sin tener que preocuparse por errores críticos o tiempo de inactividad en su sitio web en vivo.

Por lo general, su proveedor de alojamiento web ofrecerá la funcionalidad de puesta en escena. Hay varias opciones para los complementos de preparación de WordPress, pero pueden ser un poco incómodos de usar. Si puede acceder a la funcionalidad de preparación a través de su panel de control de hospedaje, será mucho más fácil crear copias de su sitio e impulsar los cambios desde la preparación hasta la producción.

Cómo editar código HTML, CSS y PHP en WordPress (10 métodos)

Aprender a agregar HTML a WordPress es mucho más fácil de lo que piensas. Aún así, el proceso cambiará según el tipo de código que desee utilizar. Comencemos hablando de agregar HTML usando los editores de bloques y clásico.

1. Cómo editar HTML en el Editor de bloques

Este método le permite editar cualquier página o publicación existente usando HTML dentro del Editor de bloques. Es un método sencillo que no debería plantear ningún problema si está familiarizado con el Editor de bloques.

Para comenzar, abra el editor. Una vez que pueda ver el cuerpo de la página o publicación, haga clic en el ícono de tres puntos en la esquina superior derecha de la pantalla.

Ahora pulsa sobre la opción que dice Editor de código .

La vista en el cuerpo del editor cambiará de bloques a código. Para cada bloque, verá una sección diferente de código HTML.

Tenga 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. Deberá leer detenidamente si desea cambiarlo o agregarlo.

Puede alternar entre las interfaces visual y de código en el Editor de bloques. Cuando esté satisfecho con los resultados, guarde los cambios en su publicación o página.

2. Cómo editar HTML en el Editor Clásico

La edición de código HTML con el Editor clásico es sencilla. Abra la página o publicación en la que desea trabajar y busque la pestaña Texto sobre el cuerpo del documento.

Haga clic en la pestaña Texto y verá que el contenido de la pestaña Visual aparece en formato de texto sin formato. De forma predeterminada, cualquier texto que agregue sin formatear no incluirá ningún código HTML.

Puede agregar rápidamente formato y código HTML usando los botones en 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 existe la opción de agregar código HTML manualmente. Si está familiarizado con HTML, puede insertarlo o editarlo dentro de la pestaña Texto como desee. El editor le permite alternar entre las pestañas Visual y Texto para ver los resultados.

3. Cómo editar HTML usando el Editor de Temas

WordPress le permite acceder y editar archivos de temas directamente desde su tablero. Pero si planea editar archivos de temas, le recomendamos configurar un tema secundario de antemano.

Para acceder al editor de temas, vaya a Apariencia → Editor de archivos de temas . En la página siguiente, verá 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 elija en el menú desplegable superior derecho.

De manera predeterminada, el editor de temas se abrirá con el archivo Style.css para el tema en el que está trabajando. La mayoría de los archivos de temas a los que puede acceder usando el editor involucran CSS o PHP. Pero puede editar varios componentes del tema usando HTML.

Sin embargo, en la mayoría de los casos, los temas secundarios solo extraen los archivos style.css y functions.php de forma predeterminada. Por lo tanto, si desea editar un archivo HTML, como footer.html , deberá copiarlo en el tema secundario antes de realizar cualquier cambio mediante una herramienta de protocolo de transferencia de archivos (FTP) o el panel de control de su proveedor de alojamiento.

Usando la herramienta de su elección, vaya a public_html → wp-content → themes → su tema principal. Busque el archivo HTML que desea editar y cópielo en la carpeta del tema de su hijo. Luego, ese archivo será visible en el Editor de temas de WordPress.

Puede encontrar sus archivos HTML en el Editor de temas seleccionando su tema secundario del menú desplegable en la parte superior derecha de la página y luego haciendo clic en el archivo de la lista que aparece.

Recomendamos no realizar ningún cambio cuando esté editando archivos de temas a menos que comprenda con precisión lo que hace su código. De lo contrario, corre el riesgo de romper características críticas dentro del tema y su 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 de temas . Verá una lista de los archivos que puede editar para su tema activo en la siguiente pantalla. A la izquierda, verá una pestaña de editor que muestra el contenido del archivo que seleccione.

De forma predeterminada, el editor de temas se abrirá en una hoja de estilo. El archivo style.css contendrá todos los estilos CSS para el tema. Estos incluyen clases, ID, estilos de botones y mucho más.

Puede realizar los cambios que desee en el archivo style.css . Cuando haya terminado, haga clic en Actualizar archivo para guardar los cambios.

Ese mismo proceso se aplica a los archivos PHP. Seleccione el archivo .php que desea editar utilizando el menú de la derecha. En este ejemplo, estamos editando el archivo functions.php .

Editar código PHP puede ser más delicado que trabajar con HTML o CSS. Con este último, si comete un error, puede afectar el estilo de su sitio web. Por el contrario, el código PHP que no funciona puede dar lugar a una funcionalidad rota.

5. Edición de HTML en un widget de WordPress

Como sabrá, las versiones recientes de WordPress le permiten editar widgets usando bloques. Eso significa que en lugar de los widgets clásicos, puede usar el conjunto completo de elementos del Editor de bloques en sus áreas de widgets.

Para editar sus áreas de widgets, vaya a Apariencia → Widgets . Aquí podrá editar las secciones de widgets disponibles para su tema.

Algunos bloques pueden agregar HTML personalizado a sus áreas de widgets. Haga clic en el botón de signo más junto al encabezado Widgets y seleccione el bloque HTML personalizado .

Agregue el código que desee dentro del bloque y muévalo para cambiar su ubicación. Cuando haya terminado, haga clic en el botón Actualizar en la esquina superior derecha de la pantalla.

6. Edición de HTML a través de cPanel

Si su servidor web ofrece una instalación de cPanel para su cuenta, puede usarla para administrar y editar los archivos de su sitio web.

Para comenzar, inicie sesión en su cuenta de cPanel y busque la opción Administrador de archivos en ARCHIVOS.

El Administrador de archivos le permite navegar por los archivos de su cuenta de hosting. Dependiendo de la estructura de su servidor, es posible que se encuentre frente a varias carpetas.

Busque la opción que dice public_html o www . Esos directorios deben contener los archivos de su sitio de WordPress.

Esto se llama la raíz de WordPress directorio. Una vez que lo abra, encontrará varios subdirectorios y archivos correspondientes a su sitio web de WordPress. Si hace clic derecho en cualquiera de estos archivos, verá una opción Editar .

Al hacer clic en esa opción, se iniciará el editor de texto de cPanel. Este editor es muy básico en comparación con cualquier software instalado localmente. Solo recomendamos que lo use para hacer ediciones menores de HTML.

Para actualizaciones de código más complejas, querrá usar el Protocolo de transferencia de archivos (FTP) y un editor de texto local. Le mostraremos cómo hacerlo en la siguiente sección.

7. Edición de HTML, CSS y PHP usando FTP

FTP le permite conectarse al servidor de su sitio web para que pueda editar y cargar archivos. Con FTP, puede cargar fácilmente una gran cantidad de archivos. Este proceso llevaría mucho tiempo y sería difícil si intentara hacerlo directamente a través del panel de control de WordPress.

Más importante aún, FTP puede editar archivos de WordPress y agregar código HTML, CSS o PHP utilizando cualquier editor de texto local de su elección.

Para conectarse a su sitio web a través de FTP, necesitará un cliente (como FileZilla) y un conjunto de credenciales. La mayoría de los servidores web le proporcionan credenciales de FTP al registrarse. De lo contrario, debería poder crear una nueva cuenta FTP a través del panel de control de alojamiento.

Ingrese sus credenciales FTP en su cliente FTP preferido y conéctese al servidor. Una vez que establezca una conexión, verá una lista de carpetas y archivos.

Con una conexión FTP, obtiene acceso completo a todos los archivos y carpetas dentro de su cuenta. Para encontrar sus archivos de WordPress, busque el directorio llamado public , public_html o www . Esos son los nombres más comunes para la raíz de WordPress directorio.

Abra el directorio y localice el archivo que desea editar. Haz clic derecho sobre él y selecciona la opción que dice Editar . En estos ejemplos, estamos usando FileZilla, por lo que el menú dice Ver/Editar .

La opción Ver/Editar abrirá el archivo usando su editor de texto predeterminado local. A diferencia de cPanel o WordPress, los editores dedicados hacen que agregar e interactuar con el código sea mucho más fácil.

En este ejemplo, estamos editando wp-config.php , que es un archivo central de WordPress.

Puede agregar o editar cualquier tipo de código que desee utilizando un editor de texto. Eso incluye HTML, CSS y PHP. La única limitación es su conocimiento de cada idioma en particular.

Una vez que termine de agregar o editar el código de WordPress, guarde los cambios en el archivo y ciérrelo. Su cliente FTP le preguntará si desea anular la versión existente de ese archivo en el servidor. Seleccione Sí, y eso es todo.

8. Agregar clases CSS usando el Editor de bloques

Si desea utilizar CSS para personalizar la apariencia de los bloques, el Editor de bloques le permite agregar clases a cualquier elemento. Este proceso también es muy sencillo.

Para agregar clases de CSS a un bloque, haga clic en él y abra la pestaña Configuración . Luego, busque la pestaña Avanzado en la parte inferior de la configuración del bloque.

Puede usar el campo Clases CSS adicionales para agregar 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 agregue.

9. Cómo editar CSS en el Personalizador de WordPress

El personalizador de WordPress puede realizar cambios en todo el sitio en el estilo y el diseño de su sitio web a través de una interfaz visual.

Para acceder al Personalizador, vaya a Apariencia → Personalizar . En la siguiente pantalla, verá un menú a la izquierda y una vista previa de su sitio a la derecha.

La pestaña CSS adicional le dará acceso a un editor básico para agregar CSS personalizado a su sitio web.

Agregar CSS usando el personalizador de WordPress le permite obtener una vista previa de los cambios al instante.

10. Edición de CSS usando un complemento de WordPress

Algunos complementos de WordPress ofrecen métodos alternativos para agregar código personalizado a WordPress. En la mayoría de los casos, estos complementos se enfocan en ayudarlo a agregar CSS o JavaScript personalizado de WordPress.

Un ejemplo es Simple Custom CSS y JS. Este complemento en particular puede agregar código CSS, JS y HTML personalizado a WordPress desde un menú simple.

Al seleccionar la opción Agregar código CSS, se abrirá un editor. Puede usar ese editor para insertar CSS personalizado y elegir dónde irá el código dentro de sus archivos.

Aunque agregar CSS personalizado con complementos es simple, no recomendamos este método. WordPress le brinda muchas opciones integradas para agregar y editar código CSS. Si desea un enfoque más práctico, siempre puede utilizar FTP.

Si confía en un complemento para agregar CSS personalizado, el código podría desaparecer si desinstala el complemento. Además, diferentes complementos agregarán código utilizando métodos únicos, por lo que sus resultados variarán según la herramienta que utilice.

¿Puedes agregar código JavaScript a WordPress?

WordPress no proporciona ninguna funcionalidad integrada para agregar código JavaScript a su sitio web. A diferencia de HTML y CSS, sus únicas opciones con JavaScript son usar complementos o agregar el código manualmente a través del editor de temas o FTP.

Por lo general, la forma más fácil de agregar código JavaScript es usar un complemento. Si elige el enfoque manual, puede usar JavaScript con WordPress con la función de "poner en cola" de PHP.

¿Debería optimizar su código de WordPress para un mejor rendimiento?

La optimización de código es un término amplio que abarca varias prácticas. Estos aseguran que su código se ejecute de la mejor manera posible y no ocupe mucho espacio en el servidor.

En general, los fragmentos de código no deberían ocupar demasiado espacio de almacenamiento. Aún así, puede reducir el espacio que ocupan usando "minificación".

Minification toma su HTML y CSS personalizado y elimina espacios vacíos o caracteres innecesarios. Para darle un ejemplo, aquí hay un fragmento de CSS personalizado simple:

 p { text-align: center; color: red; }

Si toma ese código y lo minimiza, se verá así:

 p{text-align:center;color:red}

La salida del código sigue siendo la misma, pero el tamaño del archivo resultante puede ser menor. En la práctica, minimizar el código HTML y CSS a menudo no le proporcionará resultados significativos.

La excepción es cuando se trata de bibliotecas de código masivas. Cualquier reducción de tamaño conducirá a tiempos de carga más cortos para los visitantes.

Además, elija con cuidado la fuente del código de terceros. Confiar en sitios web acreditados y foros de desarrolladores expertos puede garantizar que su código sea efectivo, seguro y funcional. Por el contrario, es más probable que los fragmentos aleatorios de blogs desconocidos causen problemas, ralenticen su sitio y potencialmente lo rompan.

Personaliza WordPress usando HTML, CSS y PHP

Aprender a agregar y editar código en WordPress es más fácil de lo que piensas. Incluso si no es un desarrollador, a menudo puede encontrar código que se adapte a sus necesidades con un poco de búsqueda en Google. Saber cómo insertar ese código de manera segura puede permitirle personalizar su sitio web de maneras que los complementos por sí solos no podrían.

Antes de comenzar a realizar cambios en el código de su sitio, le recomendamos que cree una copia de seguridad completa. Si va a editar el CSS o PHP de su tema, también querrá usar un tema secundario. Según el proveedor de alojamiento web que utilice, es posible que también tenga acceso a la funcionalidad de preparación. Recomendamos utilizar un sitio web provisional al editar el código por motivos de seguridad.