Hosting WordPress Webempresa

Cómo editar HTML en WordPress

por | Dic 3, 2022 | Aprender WordPress

Cómo editar HTML en WordPress

En ocasiones nos hemos sentido en la necesidad de modificar o insertar un HTML en WordPress. ¿Qué pasa con esto?

WordPress actualmente y con el paso del tiempo se va volviendo cada vez más popular y fácil de utilizar, ya que los usuarios se van acostumbrando a este sistema y los nuevos comienzan con una forma más atractiva de trabajar sus webs en WordPress gracias a una interfaz limpia que es mejorada por los desarrolladores con cada actualización.

WordPress está pensado como una herramienta con la cual no necesitas saber en totalidad de códigos para poder trabajar a gusto con este método de creación. Igualmente, dada la flexibilidad que ofrece WordPress, si necesitamos algún tipo de cambio o insertar un código HTML podemos hacerlo de varias formas, algunas sencillas y otras más complejas pero igualmente posibles.

Es por esto que en esta guía vamos a poder ver varias formas de modificar y crear un HTML en WordPress.

  Cuando modificar o crear un HTML en WordPress


Como hemos mencionado WordPress, es un sistema que nos ofrece todo a la mano sin necesidad de modificar su código, pero en algunas circunstancias, dado que existen numerosos plugins y temas que ofrecen ciertas modificaciones, nos encontramos en la necesidad de crear un sitio más a nuestro estilo, con cambios en textos e imágenes que algunas veces no podemos realizar por métodos sencillos de edición. Por lo tanto, el realizar un ajuste manual por medio de código HTML nos proporciona mejor control y flexibilidad de cómo se vería nuestro sitio, cómo funcionaría o también podría identificar y corregir posibles errores que ocurran respecto al diseño que queremos.

Por ejemplo, en algunos casos necesitamos personalizar algún botón o margen de una imagen del tema de una forma más concreta o bien el agregar efectos personalizados a imágenes o textos con HTML en las publicaciones o algún contenido que esté en nuestro sitio como serían textos, encabezados, información importante, ya sea cambiar la tipográfica de WordPress, agregar un CSS personalizado a alguna sección o destacar alguna información resaltada que pueda generar más gusto a nuestros usuarios que ven y navegan por el sitio.

  ¿Es seguro editar en HTML de WordPress?


Editar código HTML en WordPress, ya sea directamente del que posee nuestro sitio o bien crear uno nuevo no es una tarea que se debe tomar a la ligera, lo ideal es siempre tener un backup de WordPress bajo cualquier método, recomendamos utilizar superbackup para realizar una copia de seguridad de WordPress, ya que un error puede ser fatal para la visualización de nuestro sitio.

Para la editar el HTML en WordPress es recomendable siempre utilizar algún gestor de texto HTML, de esta forma no trabajamos de manera directa el código en nuestro sitio, para conocer, aprender o bien trabajar de una manera adecuada es mejor hacerlo de esta forma y esto implica el tener a la mano algún editor o gestor de código HTML. Algunos de los mejores editores de HTML son los siguientes:

Notepad++: Este es un editor de código fuente gratuito y un reemplazo de Notepad (aplicación nativa de muchos sistemas operativos) el cual nos permite ejecutarse en varios idiomas. Adicional no es únicamente para trabajo en HTML, también pueden trabajarse otros lenguajes de programación en este

Visual Studio Code: Es un editor de código fuente que es desarrollado por Microsoft, que está 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, igualmente nos da la posibilidad de editar en varios lenguajes de programación, no solamente HTML.

atom.io: A diferencia de los anteriores, este es bastante visual y nos ofrece una gran variedad de indicadores para comprender que archivo es el que estamos 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, donde podemos trabajar no solo el código HTML sino también otros.

Una vez tenemos claro el código y la intención en resumen podemos decir que siempre y cuando tengamos un respaldo de nuestro sitio y nos centremos en la edición del HTML de WordPress o inserción de un código en particular y 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?


Como comprendemos, WordPress actualmente trabaja con el constructor Gutenberg; sin embargo, hay casos donde el propio tema o algún complemento nos habilita el editor tradicional, por lo que dependiendo de cuál de los dos tengamos activos, vamos a seguir un método u otro, ambos similares pero con algunas diferencias en como llegar a ver el HTML.

  Edición de código HTML en Gutenberg


En este caso, al ser el editor más reciente por parte de WordPress, han incorporado dos métodos de hacer este cambio de visibilidad y poder trabajar con HTML, podemos bien sea hacer clic en el botón de configuración identificado con tres puntos en cada bloque o bien hacer clic en el menú general identificado de la misma forma, con tres puntos en la parte superior izquierda.

selección de ajustes

Una vez hacemos clic a cualquiera de los dos botones vamos a ver las opciones de la sección, en esta debemos seleccionar la pertinente a edición de código del sitio:

activación de codigo

De la misma forma, en WordPress tenemos a disposición con Gutenberg un módulo que nos ayuda a insertar en una sección un HTML personalizado en WordPress, para ello agregamos necesitamos agregar un nuevo módulo en la página, para ello ingresamos al panel que se muestra al hacer clic en el botón (+) ubicado en el contenido, una vez abierto buscamos HTML. Con este podemos escribir únicamente en HTML, también es útil para insertar shortcodes en nuestro sitio.

módulo de HTML personalizado

  Edición de código HTML en editor clásico


Sí, por el contrario, se está utilizando el editor clásico en nuestra web en WordPress, debemos ingresar a la página o entrada que estamos queriendo trabajar y simplemente hacemos clic en la pestaña HTML del editor clásico para comenzar a hacer cambios en el código, de igual forma podemos volver a la versión anterior haciendo clic en el botón de Visual ubicado a un lado del botón de código.

editor clásico de HTML

Como podemos ver hay una diferencia bastante grande y es que en el editor clásico tenemos todo el texto que hemos agregado, 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 de nuestro contenido, a diferencia de como se tiene en la versión actualizada del editor.

  Edición de código HTML en widgets


De la misma forma que las páginas, los widgets han recibido una actualización, permitiéndonos una mejor visualización manteniendo los ajustes que podíamos hacer anteriormente, entre estos crear en estos widgets códigos HTML o editar el código de algunos elementos que tengamos agregados.

El uso de los widgets y la edición de HTML en ellos son por si tenemos algún tema o estamos trabajando haciendo llamados en nuestras páginas a un sidebar que tengamos algún código especial poder aplicarlo de forma correcta. Para poder agregar o modificar un sidebar en HTML podemos hacerlo mediante las mismas formas que se hace en el editor de páginas de Gutenberg.

edición de widgets

Como podemos ver los módulos son iguales a los que tenemos en el editor de Gutenberg, esto gracias a WordPress busca que todos los elementos editables sean iguales para que no nos compliquemos 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 tengamos en nuestro sitio un panel viejo o un widget que sea de la versión clásica, y tengamos que actualizar WordPress, no está del todo perdido, ya que se puede modificar este también de la misma forma.

Edición HTML de widget heredado

Igualmente, tenemos una opción para convertir estos bloques en su versión actualizada, directamente en el botón ubicado en la parte superior tendremos separado por párrafo cada línea de texto que tengamos creada.

Convertir heredados en párrafos

  Edición de código HTML en widgets clásicos


Para modificar el código HTML dentro de WordPress en el widget clásico, es bastante sencillo y solo debemos hacer algo similar a lo que se hace en las páginas, simplemente debemos hacer clic en el botón que hace referencia a la edición en HTML para que este se muestre el contenido en el mismo, similar a lo que tenemos de los paneles heredados en la versión actualizada de widgets.

Edición HTML en widget clásico

Como podemos ver es bastante sencillo e intuitivo el proceso de edición de un widget a HTML, incluso si lo deseamos también tenemos el módulo de HTML personalizado que utilizamos previamente en la versión más actualizada de este sistema de widgets en WordPress.

módulo HTML en widgets clásico

  ¿Editar HTML en WordPress con plugins?


Más allá de los métodos tradicionales que posee WordPress, podemos realizar este proceso de edición e inserción de códigos HTML por medio de algín plugin de WordPress que nos harán el trabajo más sencillo, Esto sin importar que temas en WordPress o que Page Builder de WordPress estemos utilizando para nuestro sitio va a poder ser utilizado y funcionara de forma adecuada para mostrar ese código HTML que estamos escribiendo o desarrollando.

  Plugin Shortcoder


Este plugin es de bastante utilidad más allá de si queremos trabajar con HTML en WordPress, es un plugin que nos permite realmente el codificar en cualquier idioma que necesitemos y aplicar esté mismo por medio de un shortcode en WordPress que podemos agregar en nuestros sitios de cualquier manera, ya sea por medio de los atajos de constructores o directamente los métodos de inserción tradicionales de shortcode.

Crear código shortcoder

Como podemos ver, una vez que tenemos el shortcode creado con nuestro contenido de HTML podemos insertarlo en cualquier espacio que nos permita hacerlo por medio de un shortcode, simplemente para esto necesitamos el shortcode de la sección que acabamos de crear y el sitio donde queremos que se visualice. Esto podemos implementarlo en todo nuestro sitio siempre y cuanto nuestro tema nos lo permita.

Así mismo como 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 dentro de todos los WordPress disponible para esto, Apariencias > Personalizar > Css adicional. Así mismo podemos crear un archivo de estilos personalizados, esto lo podemos indagar más en nuestro curso de css y en nuestra guía de como editar el css en WordPress.

  Conclusión


Si bien es cierto que WordPress trabaja en su código interno con codificación PHP, lo que se entrega al usuario final y a nosotros mismos es un código HTML. Es por esto que al momento de inspeccionar nuestro sitio vamos 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 nuestra modificación va más allá de lo que podemos hacer por medio de edición de elementos o agregar nuevos códigos y necesitamos modificar el código interno de nuestro sitio, siempre debemos recordar tener a la mano nuestro superbackup o cualquier otro medio de respaldo, ya que no sabemos si este tipo de ajuste va a provocar algún problema que luego se nos dificulte revertir.

¿Te ha resultado útil este artículo?

Hosting Divi - Wp Fácil - Webempresa