WordPress es arrastrar y soltar, PERO... por eso sigo jugando con HTML

¿Se ha preguntado alguna vez cómo funcionan realmente los sitios web?

Puede parecer magia, pero hay un lenguaje detrás de cada página web que ves. Ese lenguaje se llama HTML.

Piense en HTML como los componentes básicos de Internet.

Incluso unos pocos conocimientos de HTML pueden ayudarte a mejorar tu WordPress. He visto de primera mano cómo ayuda a la gente a mejorar sus sitios web de WordPress.

En esta entrada, explicaré qué es HTML, por qué es importante y cómo puedes añadir código HTML personalizado a tu sitio WordPress.

Te sorprenderá lo fácil y útil que puede resultar para un diseño web eficaz.

Índice

¿Qué es HTML?

HTML son las siglas de HyperText Markup Language (lenguaje de marcado de hipertexto). Básicamente, HTML es el lenguaje que estructura el contenido web. Piense en él como el esqueleto de una página web.

HTML utiliza algo llamado "etiquetas". Las etiquetas indican al navegador qué es cada parte del contenido.

Por ejemplo, las etiquetas pueden indicar al navegador que algo es un título, un párrafo o una imagen. Los navegadores leen estas etiquetas para mostrar las páginas web como deben.

HTML no es un lenguaje de programación. Es más bien una forma de organizar la información para que los navegadores puedan entenderla.

¿Por qué debería preocuparse por el HTML en WordPress?

WordPress es muy fácil de usar. Puedes construir un sitio web entero sin saber nada de código. Entonces, ¿por qué molestarse con HTML?

Bueno, HTML te da más control sobre tu contenido. A veces el editor normal de WordPress no es suficiente.

Digamos que quieres añadir un atributo específico a una imagen. O quizá quieras crear un estilo de lista realmente único. HTML te permite hacer cosas así.

HTML también es un salvavidas para la resolución de problemas.

¿Alguna vez has tenido un problema de formato extraño en WordPress? Mirar el HTML puede ayudarte a encontrar y solucionar el problema rápidamente. Es mucho más rápido que adivinar con el editor visual.

Además, HTML te da flexibilidad. ¿Quieres añadir personalizaciones avanzadas? ¿Como clases personalizadas de estilo o diseños más complejos? HTML te ofrece todas esas posibilidades.

Y aquí hay una muy importante: a prueba de futuro.

WordPress siempre está cambiando. ¿Pero HTML? Es una habilidad web fundamental que siempre será útil.

Lo he visto una y otra vez: entender HTML te hace mucho más adaptable en el mundo web.

HTML 101: Conceptos básicos

Hablemos de los componentes básicos de HTML. Se llaman etiquetas.

Las etiquetas son instrucciones que indican al navegador qué hacer con el contenido. La mayoría de las etiquetas vienen en pares: una de apertura y otra de cierre.

Por ejemplo, si desea crear un párrafo, utilice la tecla <p> para iniciarlo y </p> para ponerle fin.

¿Ves la barra en la etiqueta de cierre? Así sabrás que es el final.

Veamos algunas etiquetas HTML comunes que utilizarás a menudo:

Los encabezamientos son para los títulos y los subtítulos. Tienes <h1>, <h2>, <h3>, <h4>, <h5>y <h6>.

<h1> es el título más importante (normalmente el título principal), y <h6> es la menos importante.

Los enlaces son los que hacen que la web sea, bueno, ¡una web! En <a> crea enlaces. <a> significa ancla.

¿Quiere mostrar imágenes? En <img> tag es tu amigo. <img> es la abreviatura de imagen.

¿Necesitas hacer una lista de cosas? HTML es la solución. Existen dos tipos principales:

• <ul> para listas desordenadas (viñetas). "ul" significa "lista desordenada".
• <ol> para listas ordenadas (listas numeradas). "ol" significa "lista ordenada".

Y dentro de ambos <ul> y <ol>se utiliza <li> para cada elemento de la lista. "li" significa "elemento de la lista".

Las etiquetas también pueden tener atributos. Los atributos proporcionan información adicional sobre una etiqueta.

Por ejemplo, el <a> necesita una etiqueta href para indicarle dónde enlazar. Así: <a href="https://example.com">Link text</a>. En href contiene la dirección del sitio web.

Y el <img> necesita una etiqueta src para indicarle dónde encontrar el archivo de imagen. También debe tener un atributo alt para el "texto alternativo", que es importante si la imagen no se puede cargar o para la accesibilidad.

Así: <img src="image.jpg" alt="Descriptive text">.

He aquí un ejemplo muy sencillo de HTML en acción:

<h1>Welcome to My Blog</h1>

<p>This is my first paragraph of content. It's going to be awesome!</p>

<a href="https://duplicator.com">Check out Duplicator!</a>

Ese código crearía un encabezado principal, un párrafo y un enlace en una página web.

Cuando empecé a aprender HTML, estas etiquetas básicas fueron mi punto de partida. ¿Y sinceramente? Siguen siendo la base de casi todo lo que hago en Internet. Estas sencillas etiquetas son poderosas.

Poner en práctica HTML: Ejemplos prácticos

Entonces, ¿cómo se puede utilizar HTML en WordPress? Veamos algunos ejemplos.

¿Quieres poner un texto en negrita o cursiva? HTML puede hacerlo.

Utilice <strong> y </strong> para poner el texto en negrita. O utilice <b> y </b> también ponen el texto en negrita.

Así: <strong>This text is bold</strong>.

Para la cursiva, utilice <em> o <i>. Así: <em>This text is italic</em>.

Estas etiquetas le ayudan a destacar palabras y frases en su contenido.

Hablamos de la <a> etiqueta. Puede utilizarla para enlazar con otras páginas de su sitio o con otros sitios web.

Puedes enlazar texto, imágenes o incluso botones. Se trata de utilizar ese <a> con la etiqueta href atributo.

¿Quieres añadir un vídeo de YouTube o Vimeo a tu sitio de WordPress? La mayoría de las plataformas de vídeo ofrecen códigos de incrustación. Estos códigos suelen ser HTML, a menudo utilizando <iframe> tags.

Sólo tienes que copiar el código de inserción de YouTube (o de donde esté alojado tu vídeo) y pegarlo en WordPress. WordPress sabe qué hacer con él.

¿Necesitas una lista con viñetas? Utilice <ul> etiquetas. Para una lista numerada, utilice <ol> y <li> tags.

¿Quieres añadir una línea para separar secciones de tu contenido? En <hr> crea una regla horizontal. Es una forma sencilla de separar visualmente el texto.

Estos son sólo algunos ejemplos, pero puedes ver cómo HTML puede ser realmente útil en WordPress. Se trata de añadir un poco de estructura y funcionalidad extra al contenido de tu sitio web.

Cómo aprender HTML en WordPress

Así que estarás pensando: "Vale, HTML suena útil, pero ¿cómo lo aprendo?". Buena pregunta. Por suerte, hay montones de recursos estupendos.

Aquí tienes algunos sitios donde puedes empezar a aprender HTML ahora mismo.

MDN Web Docs es como la enciclopedia del desarrollo web. Está hecha por Mozilla (los creadores de Firefox) y es muy completa y fiable.

Si te gusta el aprendizaje interactivo, Codecademy es increíble. Tienen cursos en los que puedes escribir código directamente en tu navegador.

W3schools es un popular sitio web de tutoriales de desarrollo web. Tienen toneladas de ejemplos y referencias HTML.

¿Quieres ver cómo se utiliza HTML específicamente en WordPress? Consulta la documentación oficial para desarrolladores de WordPress. Es un poco más técnica, pero es un gran recurso a medida que te vas sintiendo más cómodo.

Independientemente del recurso que elijas, lo más importante es la práctica. En serio. No aprenderás HTML simplemente leyendo sobre él. Tienes que escribir código y ver qué pasa.

Experimenta. No tengas miedo de romper cosas. Así se aprende.

Cómo utilizar WordPress HTML

Hay un montón de maneras de utilizar HTML en WordPress. Vamos a repasarlas una a una.

1. Añadir un bloque HTML personalizado en el editor de bloques

Si estás usando el Editor de Bloques (Gutenberg) en WordPress, puedes usar un bloque especial solo para HTML. Se llama bloque HTML personalizado.

Para utilizarlo, sólo tienes que añadir un nuevo bloque a tu página o entrada de WordPress. Busca "HTML" en la barra de búsqueda de bloques. Verás que aparece el bloque HTML personalizado.

Haz clic en él para añadirlo a tu contenido. Es como añadir cualquier otro bloque. Incluso puedes arrastrarlo y soltarlo donde quieras.

Una vez que añadas el bloque, verás un cuadro donde puedes escribir o pegar tu código HTML de WordPress. Simplemente pon tu HTML justo ahí.

Haga clic en Vista previa para ver cómo queda su código HTML en la página sin llegar a publicarlo.

Es muy útil para comprobar el código.

2. Editar un bloque en HTML

¿Sabías que puedes editar cualquier bloque de WordPress como HTML? Sí, incluso los bloques de párrafo normales.

Esto resulta útil si desea realizar pequeños ajustes HTML en un bloque que ya está ahí.

En primer lugar, haga clic en el bloque que desee editar. A continuación, busque los tres puntos en la barra de herramientas del bloque. Haga clic en ellos.

Aparecerá un menú. En ese menú, pulsa el botón Editar como HTML.

De repente, ¡el bloque se transformará! En lugar del editor visual habitual, verás el código HTML personalizado para ese bloque. Ahora puedes editar directamente el HTML.

Esto es ideal para pequeños ajustes. Tal vez quieras añadir una clase específica a un párrafo para darle estilo más tarde. O tal vez necesites arreglar un pequeño problema de formato que es más fácil de manejar en HTML.

Una vez que haya terminado de editar HTML, puede hacer clic en Editar visualmente en la barra de herramientas de bloques para volver a la vista normal del editor visual.

3. Utilizar el editor de código en Gutenberg

Para aquellos que se sienten cómodos con el código, el editor de bloques de WordPress tiene una vista completa del Editor de código. Esta vista muestra el código HTML de toda la entrada o página.

Para cambiar al Editor de código, mira en la parte superior derecha de tu pantalla del editor de Gutenberg. Allí también verás tres puntos: el menú principal de opciones de todo el editor. Haz clic en esos puntos.

En ese menú, verás una opción llamada Editor de código. Haz clic en ella.

Verá las etiquetas y la estructura de toda la página en código.

Este editor HTML de WordPress es realmente para usuarios avanzados que prefieren trabajar directamente en código. Si te gusta codificar y quieres ver la estructura HTML general de tu página, el Editor de código es para ti.

Pero ¡ten cuidado! Si cometes errores en el HTML, podrías estropear el diseño de tu página. Es importante entender HTML si vas a utilizar el Editor de código de forma extensiva.

Si quieres volver al editor visual normal, vuelve al menú superior derecho y haz clic en Editor visual.

4. Añadir HTML con el editor clásico

El editor clásico de WordPress tiene dos pestañas: Visual y Texto. La pestaña Texto es donde puedes entrar en el código.

Cuando hagas clic en Texto, verás todo el código HTML de tu entrada. Aquí es donde puedes escribir o pegar directamente el código HTML.

Después de añadir o editar tu HTML, puedes volver a la pestaña Visual para ver cómo queda. Te mostrará la versión renderizada de tu HTML.

5. Utilice un plugin de WordPress Code Snippets

A veces quieres añadir pequeños fragmentos de HTML, CSS o JavaScript a tu sitio WordPress. Quizá quieras añadir un código de seguimiento personalizado o un estilo especial para una parte concreta de tu sitio.

Puedes editar los archivos de tu tema para hacer esto, pero puede ser arriesgado. Y si el tema se actualiza, los cambios podrían sobrescribirse.

Ahí es donde entran en juego los plugins de fragmentos de código. Estos plugins permiten añadir fragmentos de código directamente desde el panel de control de WordPress.

Mantienen tu código organizado y separado de los archivos de tu tema. Esto es mucho más seguro y fácil de gestionar, especialmente si no eres un experto en código.

Antes de añadir cualquier fragmento de código, siempre es una buena idea hacer una copia de seguridad de tu sitio web. Si algo va mal con su código, usted quiere ser capaz de restaurar fácilmente su sitio.

Duplicator es un plugin que hace que sea muy fácil crear copias de seguridad completas de su sitio de WordPress. Siempre recomiendo hacer copias de seguridad antes de hacer cambios en el código.

Mi plugin de fragmentos de código favorito es WPCode (antes "Insertar encabezados y pies de página"). Esta herramienta te permite añadir HTML, CSS y JavaScript a tu sitio web.

Además, hay montones de fragmentos preconfeccionados que puedes utilizar si no estás acostumbrado a programar.

Usar un plugin de fragmentos de código es mucho más seguro que editar directamente los archivos del tema. También es más fácil hacer un seguimiento de tu código personalizado.

6. Añadir HTML en los widgets de WordPress

WordPress viene con un widget incorporado llamado para HTML personalizado. Para encontrarlo, ve a tu panel de WordPress y haz clic en Apariencia y luego en Widgets.

Verás diferentes áreas de widgets, como Sidebar o Footer. Estos dependen de su tema de WordPress.

Añade el widget HTML personalizado en el área de widgets donde quieras añadir tu HTML.

Escriba o pegue su HTML en ese cuadro.

Puedes añadir todo tipo de cosas con HTML en los widgets. Texto personalizado, imágenes, enlaces, incluso códigos de incrustación: ¡todo funciona!

Cuando hayas añadido el código HTML, haz clic en el botón Actualizar de la configuración del widget.

Ya está. Su HTML estará ahora en vivo en esa área de widget en su sitio web.

7. Editar HTML en temas de WordPress

Puedes ir directamente a los archivos de tu tema de WordPress y editar el HTML allí. Esto te da mucho control sobre la estructura de tu sitio, pero también conlleva grandes riesgos.

Editar directamente los archivos del tema puede romper tu sitio web si no tienes cuidado. Un pequeño error en el código puede causar grandes problemas.

Si vas a editar los archivos del tema, te recomiendo que utilices siempre un tema hijo. Un tema hijo es como una copia segura de tu tema principal donde puedes hacer cambios de forma segura. De esta forma, si tu tema principal se actualiza, tus cambios no se sobrescribirán.

Bien, advertencias aparte, así es como se pueden editar los archivos de tema. En tu panel de WordPress, ve a Apariencia y luego a Editor de archivos de tema (a veces llamado simplemente Editor de temas).

A la derecha, verás una lista de los archivos de tu tema. Estos archivos controlan la estructura y el diseño de tu sitio web.

Algunos archivos comunes que contienen HTML son:

• header.php: Este archivo normalmente controla la parte superior de su sitio web - el área de cabecera.
• footer.php: Este archivo controla la parte inferior - el área de pie de página.
• sidebar.php: Si tu tema tiene una barra lateral, este archivo la controla.
• index.php: Suele ser la página principal de su sitio web, en la que se muestran las entradas de su blog.
• single.php: Esto controla cómo se muestran las entradas individuales del blog.
• page.php: Controla cómo se muestran las páginas normales (como "Quiénes somos" o "Contacto").
• Archivos de plantilla: Tu tema puede tener otros archivos de plantilla para diferentes tipos de páginas.

Puede editar el HTML directamente en el Editor de archivos de temas. Sólo tiene que hacer clic en un archivo para abrirlo, encontrar el HTML que desea cambiar, y hacer sus ediciones. A continuación, haga clic en Actualizar archivo para guardar los cambios.

Recuerda: Sólo edita los archivos del tema si realmente sabes lo que estás haciendo, y utiliza siempre un tema hijo y ten una copia de seguridad.

En mi experiencia, sólo edito archivos de temas para personalizaciones muy específicas que no se pueden hacer de otra manera. E incluso entonces, soy muy cauteloso. Los temas hijo y las copias de seguridad de Duplicator siempre forman parte de mi flujo de trabajo cuando toco archivos de temas.

8. Usar FTP para editar el HTML de WordPress

FTP significa Protocolo de Transferencia de Archivos. Te da el acceso más directo para editar los archivos de tu tema de WordPress (y otros archivos también).

Para utilizar FTP, necesitarás algunas cosas:

• Un Cliente FTP: Se trata de un software que te permite conectarte a tu servidor. Los clientes FTP más populares son FileZilla, Cyberduck y Transmit.
• Credenciales FTP: Las obtendrás de tu proveedor de alojamiento web. Suelen incluir el host FTP, el nombre de usuario, la contraseña y el número de puerto.

Si no encuentra sus credenciales FTP, compruebe la configuración de su cuenta de alojamiento o póngase en contacto con el servicio de asistencia.

Una vez que las tengas, abre tu cliente FTP e introduce tus credenciales FTP para conectarte a tu servidor.

Después de conectarte, verás una vista con dos lados. Un lado muestra los archivos de tu ordenador y el otro los de tu servidor web.

Vaya a los archivos de su tema de WordPress en el servidor. La ruta suele ser /wp-content/themes/your-theme-name/.

Una vez que hayas realizado la copia de seguridad y estés en la carpeta de tu tema a través de FTP, puedes descargar los archivos HTML del tema a tu ordenador o editarlos directamente.

Sólo tienes que hacer clic con el botón derecho del ratón sobre el archivo en tu cliente FTP y elegir Descargar o Ver/Editar.

Ahora, edita el archivo descargado en tu ordenador utilizando un editor de código. Buenos editores de código para esto son VS Code, Sublime Text, Atom, o Notepad++.

Abra el archivo en su editor de código y realice los cambios HTML.

Una vez que hayas terminado de añadir HTML, guarda el archivo. Haga clic con el botón derecho en el archivo en su cliente FTP y seleccione Cargar. Esto sobrescribirá el archivo original en su servidor con su versión editada.

El FTP es una herramienta potente, pero requiere ciertos conocimientos técnicos. Y es importante ser responsable al usarla. Comprueba siempre los cambios antes de subirlos y ten siempre preparada una copia de seguridad.

Preguntas más frecuentes (FAQ)

Reflexiones finales

Aprender aunque sea un poco de HTML puede abrirte un nuevo mundo de posibilidades con WordPress. Te da más control, más flexibilidad y una comprensión más profunda de cómo funcionan realmente los sitios web.

No tengas miedo de seguir aprendiendo y experimentando. Cuanto más juegues con el código, más cómodo te sentirás.

Explora los recursos que he mencionado, prueba las distintas formas de añadir HTML en WordPress y ¡a ver qué puedes crear!

Y recuerda, ¡haz siempre una copia de seguridad de tu sitio antes de hacer grandes cambios! Herramientas como Duplicator facilitan las copias de seguridad y pueden ahorrarte muchos quebraderos de cabeza.

Ya que estás aquí, creo que te gustarán estas otras guías de WordPress:

• Olvídese de lo que sabe sobre los editores de código de WordPress - Pruebe esto en su lugar
• 15 mejores herramientas sin código para WordPress
• Código más inteligente, no más difícil: Herramientas de WordPress para desarrolladores profesionales
• Cómo usar WordPress CLI: Dominar la línea de comandos
• ¿Cuánto tiempo se tarda en aprender WordPress?