A veces te encuentras en la situación de querer modificar o insertar código HTML en WordPress. Pero, ¿qué opciones tienes?
En esta guía, te ayudo a explorar varias formas en las que tú puedes editar HTML en WordPress de forma sencilla.
WordPress se ha vuelto cada vez más popular y fácil de usar con el tiempo. Los usuarios se adaptan a este sistema y los nuevos usuarios comienzan a trabajar en sus sitios web en WordPress de forma más atractiva, gracias a una interfaz limpia que los desarrolladores mejoran con cada actualización.
WordPress se ha diseñado como una herramienta que te permite trabajar en la creación de sitios web sin la necesidad de conocer completamente los códigos. No obstante, gracias a la flexibilidad que ofrece WordPress, si necesitas realizar algún cambio o insertar código HTML, puedes hacerlo de varias formas, algunas más simples y otras más complejas, pero igualmente viables.
Tabla de contenidos
Cuando modificar o crear un HTML en WordPress
Como mencioné anteriormente, WordPress es un sistema que te aporta muchas opciones sin necesidad de modificar su código. Sin embargo, en ciertos casos, debido a la variedad de plugins y temas que ofrecen modificaciones específicas, es posible que desees personalizar tu sitio de acuerdo a tu estilo.
A veces, cambios en textos e imágenes no se pueden realizar fácilmente mediante métodos convencionales de edición. Es en estas circunstancias cuando realizar ajustes manuales a través de código HTML te da un mayor control y flexibilidad sobre cómo se ve y funciona tu sitio. Además, te permite identificar y corregir posibles errores de diseño.
Por ejemplo, podrías necesitar personalizar un botón o el margen de una imagen en el tema de manera más precisa. También puedes añadir efectos personalizados a imágenes o textos utilizando HTML en las publicaciones o en cualquier contenido de tu sitio, como textos, encabezados e información importante.
Esto incluye cambiar la tipografía de WordPress, aplicar un CSS personalizado a una sección o resaltar información relevante que pueda atraer a tus usuarios mientras navegan por el sitio.
¿Es seguro editar en HTML de WordPress?
Editar código HTML en WordPress, ya sea directamente del que haya en tu sitio o bien crear uno nuevo, no es una tarea que deba tomarse a la ligera. Lo ideal es siempre tener un backup de WordPress bajo cualquier método.
Te recomiendo utilizar All In One WP Migration para realizar una copia de seguridad de WordPress, ya que un error puede ser fatal para la visualización de tu sitio.
Para editar el HTML en WordPress, es recomendable siempre utilizar algún gestor de texto HTML. De esta forma, no trabajas de manera directa en el código en tu sitio. Para conocer, aprender o bien trabajar de una manera adecuada, es mejor hacerlo de esta forma. Esto implica tener a la mano algún editor o gestor de código HTML.
Algunos de los mejores editores de HTML son los siguientes:
- Notepad++: Es un editor de código fuente, gratuito, y reemplazo de Notepad (aplicación nativa de muchos sistemas operativos). Permite ejecutarse en varios idiomas. Además de trabajar en HTML, también te permite trabajar con otros lenguajes de programación en este editor.
- Visual Studio Code: Es un editor de código fuente desarrollado por Microsoft, disponible tanto para Windows como para GNU/Linux y macOS. Contiene integraciones con GitHub, cuenta con soporte para depuración de código y dispone de varias extensiones para ayudar al programador. Te da la posibilidad de editar en varios lenguajes de programación, no solo HTML.
- atom.io: A diferencia de los anteriores, este es bastante visual y te ofrece una gran variedad de indicadores para comprender qué archivo es el que estás trabajando. Al igual que los anteriores, es de libre uso y está disponible en Windows, Linux y macOS. Goza de las mismas características que los anteriores, permitiendo trabajar no solo con el código HTML, sino también con otros.
Una vez tienes claro el código y la intención, en resumen, se puede decir que siempre y cuando tengas un respaldo de tu sitio y te centres en la edición del HTML de WordPress o la inserción de un código en particular (no la edición de todo el sitio), es seguro trabajar con esto en una instalación de WordPress.
Editar HTML en WordPress sin plugins
Desde la versión de WordPress 5.0 el editor de bloques Gutenberg se ha ido convirtiendo en un estándar, y desde la versión 6.0 de este CMS ya es nativo y se incluye siempre que se instala por primera vez WordPress en un Hosting o en local (el ordenador).
Esto quiere decir que todo el trabajo de edición de contenidos que realices será con el editor de bloques a menos que utilices algún page builder para WordPress que sustituya la edición de contenidos.
Si utilizas WordPress desde mucho antes de la inserción obligada de Gutenberg en el núcleo, es posible que tu editor por defecto fuese el editor clásico de WordPress, en cuyo caso podrás seguir utilizándolo, al menos de momento, para editar contenidos con el editor HTML, sin ningún tipo de problema.
Para que entiendas mejor a lo que me refiero, te lo detallo para cada editor habitual.
Edición de código HTML con Gutenberg
En este caso, al ser el editor nativo oficial desde la versión 6.0 del CMS, incorpora dos métodos de hacer este cambio de visibilidad y poder trabajar con HTML.
Se puede hacer clic en el botón de configuración identificado con tres puntos verticales en cada bloque o bien hacer clic en el menú general identificado de la misma forma, con tres puntos en la parte superior izquierda.
Una vez haces clic en cualquiera de los dos botones verás las opciones de la sección: Aquí tienes que seleccionar la pertinente a edición de código del sitio:
De la misma forma, en WordPress tienes a disposición con Gutenberg un módulo que te ayuda a insertar en una sección un HTML personalizado en WordPress.
Para utilizarlo, añade un nuevo módulo en la página, en el panel que se muestra, al hacer clic en el botón (+) localizado en el contenido, una vez abierto buscas HTML.
Con este puedes escribir únicamente en HTML. También es útil para insertar shortcodes de WordPress en tu sitio.
Edición de código HTML con editor clásico de WordPress
Si, por el contrario, utilizas el editor clásico en tu web en WordPress, debes editar la página o entrada, hacer clic en la pestaña HTML, del editor clásico, para comenzar a hacer cambios en el código.
De igual forma puedes volver a la versión anterior haciendo clic en el botónVisual localizado a un lado del botón de código.
Como puedes ver, hay una diferencia bastante grande y es que en el editor clásico tienes todo el texto que hayas añadido, así como módulos en forma de código solo con hacer clic en el botón de HTML, no hay una opción para solo trabajar el código en una parte del contenido, a diferencia de como se tiene en la versión actualizada del editor.
Edición de código HTML en widgets
Igual que las páginas, los widgets han recibido una actualización, permitiendo una mejor visualización, manteniendo los ajustes que se podían hacer anteriormente, entre estos crear en estos widgets códigos HTML o editar el código de algunos elementos que tengas añadidos.
El uso de los widgets y la edición de HTML en ellos son por si tienes algún tema o estás trabajando haciendo llamadas en tus páginas a un sidebar en el que tengas algún código especial, para poder aplicarlo de forma correcta.
Para poder añadir o modificar un sidebar en HTML puedes hacerlo mediante las mismas formas que se hace en el editor de páginas de Gutenberg.
Los módulos son iguales a los que tiene en el editor de Gutenberg, esto gracias a que WordPress busca el que todos los elementos editables sean iguales para que no te compliques tanto, es por esto que tanto el elemento HTML personalizado en WordPress como el editor de un párrafo están disponible para edición de HTML en WordPress, así mismo si se llega a dar el caso de que tengas en tu sitio un panel viejo o un widget que sea de la versión clásica, y tengas que actualizar WordPress, no está del todo perdido, ya que se puede modificar este también de la misma forma.
Igualmente, tienes una opción para convertir estos bloques en su versión actualizada, directamente en el botón ubicado en la parte superior, teniendo separado por párrafo cada línea de texto que exista.
Edición de código HTML en widgets clásicos
Para modificar el código HTML dentro de WordPress utilizando el widget clásico, es bastante sencillo y solo tienes hacer algo similar a lo que se hace en las páginas.
Haz clic en el botón que hace referencia a la edición en HTML para que este muestre el contenido en el mismo, similar a lo que tienes en los paneles heredados en la versión actualizada de widgets.
Como puedes observar, es bastante sencillo e intuitivo el proceso de edición de un widget a HTML, incluso si lo deseas también tienes el módulo de HTML personalizado que utilizamos previamente en la versión más actualizada de este sistema de widgets en WordPress.
Editar HTML en WordPress con plugins
Más allá de los métodos tradicionales que incluye WordPress, puedes realizar este proceso de edición e inserción de códigos HTML por medio de algún plugin de WordPress que te hará el trabajo más sencillo.
Esto sin importar que temas en WordPress o que Page Builder de WordPress estés utilizando para tu sitio, podrás usarlo y funcionara de forma adecuada para mostrar ese código HTML que estés escribiendo o desarrollando.
Plugin Shortcoder
Este plugin es de bastante utilidad más allá de si quieres trabajar con HTML en WordPress. Permite crear códigos cortos personalizados para HTML, JavaScript, CSS y otros fragmentos de código. Estos códigos cortos se pueden usar en publicaciones/páginas y el fragmento de código se reemplazará en su lugar.
Se trata de un plugin que permite codificar en cualquier idioma que necesites y aplicar esté mismo por medio de un shortcode en WordPress que puedes añadir en tus sitios de cualquier manera, ya sea por medio de los atajos de constructores o directamente los métodos de inserción tradicionales de shortcode.
Una vez que tienes el shortcode creado con el contenido de HTML, lo añades en cualquier espacio que te permita hacerlo por medio de un código corto.
Para ello necesitas el shortcode de la sección que acabas de crear y el sitio donde quieres que se visualice. Esto puedes implementarlo en todo el sitio siempre y cuanto tu tema lo permita.
Del mismo modo que es posible modificar los códigos HTML de WordPress, también es posible personalizar el código CSS del mismo, esto mediante el uso de la propia aplicación, en Apariencia ➜ Personalizar ➜ CSS adicional.
Puedes crear un archivo de estilos personalizados, algo que te explicamos en el Curso de CSS de Webempresa University y en nuestra guía de como editar el CSS en WordPress.
Vídeo sobre editar HTML en WordPress
En el siguiente vídeo te explico cómo editar HTML en WordPress.
Conclusiones
WordPress trabaja en su código interno con codificación PHP, lo que se entrega al usuario final y a ti desde el navegador es un código HTML.
Es por esto que al inspeccionar tu sitio vas a poder ver una página con código HTML, no una página con código PHP, que a su vez incluye CSS y diversos códigos más para que funcione de forma correcta a la vista de todos.
La edición del código HTML de WordPress dentro del editor clásico o el editor de Gutenberg es una buena opción para modificar HTML de los elementos específicos en una página, como serían títulos, imágenes, encabezados, entre otros.
Si resulta que la modificación va más allá de lo que puedes hacer por medio de edición de elementos o añadir nuevos códigos y necesitas modificar el código interno del sitio, siempre debes recordar tener a mano una copia de seguridad, realizada por alguno de los métodos habituales que explicamos en este blog, ya que no sabes si este tipo de ajuste va a provocar algún problema que luego te dé trabajo revertir.
¿Te ha resultado útil este artículo?
Equipo de soporte WordPress y WooCommerce en Webempresa.
