Insertar HTML en WordPress puede ser un desafío si no estás familiarizado con el proceso. WordPress, por motivos de seguridad, puede eliminar algunas etiquetas HTML para prevenir la inyección de código malicioso en tu sitio. Sin embargo, hay formas seguras y eficaces de agregar HTML a tu contenido de WordPress. Te explicaremos cómo hacerlo para que puedas manejar todos los métodos disponibles sin riesgo.
Indice De Contenidos
¿Cómo insertar HTML en WordPress?, 3 métodos efectivos
Insertar HTML en WordPress puede ser útil para personalizar aún más tu sitio web. Aunque WordPress tiene su propio editor de bloques que facilita la creación de páginas y publicaciones, a veces es posible que desees agregar un código HTML personalizado.
WordPress está construido de tal manera que puedes agregar contenido sin necesidad de codificar HTML manualmente. El tema de WordPress que elijas, seguramente contendrá una variedad de formatos de página predefinidos que puedes usar para crear un sitio web único que cumpla con tus necesidades.
También hay una gran cantidad de plugins disponibles para insertar HTML en WordPress, como también constructores de páginas que se pueden usar para crear plantillas de páginas personalizadas. Estas plantillas personalizadas pueden ayudar a los usuarios de tu sitio a llegar a través de los resultados de búsqueda, las campañas de email marketing y las plataformas de redes sociales.
Si bien la mayoría de las veces no necesitarás insertar HTML en WordPress, hay ocasiones en las que podrías querer hacerlo, más allá de simplemente cargar una plantilla de diseño. Por eso es útil conocer las mejores formas de insertar código HTML en WordPress.
Existen varios plugins que pueden facilitar esta tarea, entre ellos se encuentran:
- HTML Widget.
- Code Embed.
Para utilizar el plugin Code Embed, primero debes instalarlo a través de la página de instalación de plugins de WordPress. Una vez instalado, necesitas crear un campo personalizado llamado CODEn, donde n es un número entre 1 y 20. Sin embargo, esta configuración se puede cambiar y ampliar a más de 20 en la sección de Ajustes -> Code Embed. En este campo, puedes insertar tu código HTML. Luego, en la publicación o página, utiliza el shortcode proporcionado por el plugin para insertar el código HTML donde quieras que aparezca.
Con la actualización de WordPress 5.0, el editor de bloques Gutenberg se convirtió en la opción predeterminada para editar contenidos. Este nuevo editor te permite agregar bloques de HTML personalizados directamente en tus publicaciones y páginas sin la necesidad de un plugin. Solo debes agregar un bloque «HTML Personalizado» y pegar tu código allí.
Insertar HTML en WordPress puede ser una habilidad valiosa, especialmente si quieres personalizar aún más tu sitio web o agregar funcionalidades que no están disponibles en los plugins o temas existentes. Sin embargo, siempre es importante recordar que debes tener cuidado al agregar código personalizado a tu sitio para evitar problemas de seguridad o de rendimiento.
¿Qué es un archivo HTML?
Un archivo HTML, cuyas siglas provienen del inglés y significan HyperText Markup Language (Lenguaje de Marcas de Hipertexto), es un tipo de archivo utilizado en el desarrollo de sitios web. A pesar de ser una terminología bastante técnica, su comprensión es esencial para entender la estructura y funcionamiento de las páginas web.
HTML es el estándar universal para crear y diseñar páginas web. No es un lenguaje de programación, sino un lenguaje de marcado que organiza el contenido en la página web mediante el uso de etiquetas, también conocidas como «tags» en inglés.
Fue desarrollado por Tim Berners-Lee en 1990 y se usa para crear documentos y registros electrónicos en Internet, conocidos comúnmente como páginas web. Cada página web que encontramos en Internet está basada en código HTML.
El código HTML dentro de una página web es responsable de garantizar que cualquier texto o imagen en la página esté correctamente formateado. Sin este código HTML, los navegadores web no sabrían cómo mostrar la estructura del sitio web a los usuarios.
Junto con CSS (Cascading Style Sheets), el HTML proporciona la estructura básica para los sitios web. Mientras que HTML se utiliza para estructurar el contenido, CSS se utiliza para definir el aspecto visual del sitio, como colores, fuentes y diseños.
Los archivos HTML se componen de etiquetas HTML que están rodeadas por corchetes angulares (<>). Estas etiquetas indican al navegador cómo procesar y mostrar el contenido dentro de ellas. Por ejemplo, la etiqueta <h1> se usa para los títulos más importantes, mientras que <p> se usa para los párrafos de texto.
Además, muchas etiquetas HTML vienen en pares que indican el comienzo y el final de un elemento. Por ejemplo, un párrafo de texto se coloca entre las etiquetas de apertura y cierre <p> y </p>. Entre estas etiquetas, se puede agregar cualquier tipo de contenido, como texto, imágenes, enlaces y más.
En resumen, entender HTML es fundamental para cualquiera que esté interesado en el diseño y desarrollo web. Proporciona las bases para estructurar y dar formato a las páginas web y es esencial para insertar HTML en WordPress de manera efectiva.
¿Qué es una plantilla HTML?
Una plantilla HTML es un conjunto predefinido de archivos HTML que puede incluir texto, imágenes, y otros archivos de soporte como CSS y JavaScript. Básicamente, es un diseño prefabricado que puede ser utilizado y aplicado fácilmente a cualquier página web.
Al utilizar una plantilla HTML en un sitio web de WordPress, se añade un archivo que está vinculado a cierto texto y/o imágenes que se desea mostrar en el sitio. Este es un método efectivo para lograr una apariencia personalizada y específica para una página web individual.
Sin embargo, es importante distinguir las plantillas HTML de los temas de WordPress:
Los temas de WordPress son responsables de la apariencia completa de un sitio web. Pueden incluir la posibilidad de vincular texto e imágenes, pero su propósito principal es establecer la estética general del sitio. Cualquier modificación dentro de un tema de WordPress se aplica a todo el sitio web.
Por otro lado, las plantillas HTML son archivos autónomos que sirven para construir una sola página web. Estas solo afectan la apariencia de la página web en la que se aplican. Los cambios realizados en una plantilla HTML solo afectarán a esa página web específica.
Por lo tanto, mientras los temas de WordPress determinan el diseño global de un sitio web, las plantillas HTML se utilizan para personalizar páginas web individuales. Esta distinción es crucial para entender correctamente cómo insertar HTML en WordPress y cómo estos elementos pueden ser utilizados de manera efectiva para personalizar un sitio web.
Las etiquetas de HTML
Las etiquetas HTML son esenciales para el lenguaje de marcado HTML, ya que indican cómo se estructura y se presenta el contenido en una página web. Para entender cómo funcionan las etiquetas, puedes imaginar que estás organizando un ensayo. El ensayo será la página web y la mejor forma de estructurar un ensayo es tener un título, una introducción, un cuerpo y una conclusión.
Del mismo modo, las etiquetas HTML indican la estructura del contenido web, marcando el inicio y el final de diferentes secciones, como párrafos, títulos, listas, enlaces, imágenes, entre otros. Además de proporcionar estructura, las etiquetas también son fundamentales para los motores de búsqueda, como Google y Bing, ya que utilizan estas etiquetas para entender y indexar la información de la página.
Para identificar una etiqueta HTML, debes buscar caracteres de menor que (<) y mayor que (>). El nombre de la etiqueta se encuentra entre estos caracteres. Por ejemplo: <p> es la etiqueta de inicio para un párrafo.
Cada etiqueta de inicio generalmente tiene una etiqueta de final correspondiente, que es la misma que la etiqueta de inicio pero con una barra diagonal (/) antes del nombre de la etiqueta. Por ejemplo: </p> es la etiqueta de final para un párrafo.
Sin embargo, existen algunas excepciones a esta regla. Algunas etiquetas, conocidas como etiquetas vacías o autocontenidas, no requieren una etiqueta de final. Estas incluyen etiquetas como <br> (salto de línea) y <img> (imagen). Estas etiquetas por sí solas pueden indicar una acción o elemento específico en la página web.
¿Por qué se necesitaría insertar HTML en WordPress?
La necesidad de insertar HTML en WordPress puede ser motivada por varias razones. Aquí te presento algunas de las más comunes:
- Reutilizar código HTML existente: Si has trabajado previamente con HTML y tienes fragmentos de código o plantillas que quieres implementar en tu nuevo sitio web de WordPress, insertar el HTML directamente puede ser una manera eficiente de hacerlo. Esto te ahorrará tiempo en lugar de tener que reconstruir todo desde cero.
- Personalización: Los temas de WordPress ofrecen un alto grado de personalización, pero hay momentos en que tal vez quieras ir más allá de lo que tu tema actual puede ofrecerte. En este caso, podrías decidir insertar tu propio HTML para tener un control más granular sobre el diseño y la funcionalidad de tu sitio.
- Verificación del sitio con Google: Para acceder a las valiosas herramientas y análisis que proporciona Google Search Console, tendrás que verificar tu sitio web con Google. Una de las formas más comunes de hacerlo es subir un archivo HTML de verificación a tu sitio web. Una vez que hayas verificado la propiedad de tu sitio, Google Search Console puede proporcionarte información útil sobre el rendimiento de tu sitio en los resultados de búsqueda y ayudarte a optimizar tus esfuerzos de SEO.
- Integración con otros servicios: Puedes necesitar insertar HTML en tu sitio de WordPress para integrarlo con otros servicios web. Por ejemplo, podrías querer insertar un formulario de contacto, un widget de redes sociales, un código de seguimiento de analíticas web o una caja de comentarios. La inserción de HTML directamente en tu sitio te permite agregar estas funciones y más.
Ahora que hemos cubierto algunas de las razones por las que podrías querer insertar HTML en WordPress, en las siguientes secciones te mostraré cómo puedes hacerlo de manera efectiva y segura.
Método 1: ¿Cómo insertar HTML en WordPress en el Dashboard de WordPress?
Como primer paso, para lograr colgar cualquier archivo HTML a WordPress, primero se debe analizar el dashboard de WordPress, lo cual representa el punto inicial del método propuesto, para insertar HTML en WordPress.
Para ello, no se requiere nada más que el backend de su sitio web, así como un formato HTML para completar dicho proceso, pues se cargará el archivo HTML directo, por medio de un mensaje, una página o una biblioteca multimedia.
En cuanto a subir un archivo HTML por medio de un post o página, se debe insertar un bloque Archivo, dispuesto en el Editor Gutenberg. Acto seguido, solo bastará pinchar en Cargar, a fin de cargar efectivamente dicho archivo HTML. Enseguida se muestra se muestra desactivado Gutenberg, si está usando el Editor clásico. Para ello, bastará pulsar en Añadir medios, y después en Cargar, y se cargará el archivo HTML.
Si si desea, se puede omitir la carga del archivo HTML a un mensaje o página en WordPress , y adjuntarle directo a la Media Library. Pulsar en Biblioteca multimedia en el panel de WordPress y, seguidamente, en Agregar nuevo, allí optar por el archivo HTML del sitio donde está guardado, que puede ser un equipo, un disco duro o un almacenamiento externo. Pero hay que tener en cuenta que posiblemente se consiga algún error al subir su archivo HTML mientras usa Gutenberg.
Método 2: ¿Cómo insertar HTML en WordPress usando un cliente FTP?
Una vez concluido el paso anterior, pasamos a la carga de archivos HTML por medio del dashboard de WordPress, cabe resaltar, que este es el método más sencillo, por lo que trae a referencia. No obstante, para aquellos formatos más grandes porque contienen numeroso archivos, será mejor usar un cliente FTP como FileZilla.
Al usar este tipo de cliente FTP, resulta muy útil en aquellos momentos cuando se desea trabajar de modo local en un sitio piloto, es decir, previo a concretar los cambios en su sitio en vivo. Todo lo cual previene cualquier tiempo de inoperatividad en caso de que algo sale mal, o como se esperaba.
Para comenzar este proceso de insertar HTML en WordPressar, primero conviene crear siempre una copia de seguridad del sitio web donde se esté trabajando, pues nunca se tiene la certeza de lo que pueda ocurrir con el archivo HTML cuando lo sube a algún sitio. De hecho existen modos de asegurar la información en copias de seguridad de forma automática.
Enseguida, proceder a abrir su cliente FTP.
Luego hay que conectarse a la cuenta de host web, agregando las credenciales FTP. Este tipo de información por lo general se encuentra disponible en la cuenta de alojamiento web. En caso de algún inconveniente para ubicarlo, se debe comunicar con el anfitrión, y solicitar el apoyo respectivo.
En caso de usar un hosting de Kinsta, primero hay que iniciar sesión en la cuenta respectiva de MyKinsta, y pulsar en Sitios en el panel de control, para después hacerlo en Información, donde se obtendrán las credenciales requeridas.
Una vez concluido el paso anterior, ya se deberían observar las credenciales en SFTP/SSH. Para lo cual se requiere del nombre de usuario, clave y puerto. A continuación se muestra toda la información necesaria para ingresar a FileZilla:
- Host: obedece al nombre de dominio del sitio web precedido de «sftp://». A modo de ejemplo, se debe escribir algo así como: sftp://www.mysite.com.
- Identificación de usuario: este se logra a partir del panel de control de MyKinsta.
- Contraseña: se obtiene a partir del panel de control de MyKinsta.
- Puerto: a él se accede desde el panel de control de MyKinsta.
- Concluida esta fase, se mostrará un mensaje en la parte superior de la pantalla de FileZilla
Ya cumplido el precedimento anterior, y se hayan colocado las respectivas credenciales, solo bastará pulsar en Quickconnect. Es el momento de colgar el archivo HTML desde la computadora a WordPress. Ya desde entonces, se podrá iniciar la navegación a través de la carpeta raíz del sitio web, que a su vez, porta la carpeta wp-content, el archivo wp-config.php, entre otros, que se halla al borde derecho.
Enseguida, se puede ir al borde izquierdo, y conseguir el archivo HTML que ha guardado. Una vez se ubique dicho archivo, pinchar con el botón derecho, y seleccionar en Cargar para adicionarlo al sitio web deseado. En ese momento, se evidenciará si el archivo se cargó de forma correcta en la plataforma de WordPress. A fin de constatar que es visible en el sitio web, se debe escribir la URL del sitio web en el navegador, al tiempo de agregar el nombre del archivo HTML al final.
A modo ilustrativo, se mostrará algo similar a este modelo: www.mywebsite.com/html-file. Al hacer esto, el archivo se redirigirá a la nueva página web de destino, que se creado con el archivo HTML.
Método 3: ¿Cómo insertar HTML en WordPress usando cPanel?
Ya en este punto está casi concluido el proceso para insertar HTML en WordPress, pues estamos abordando el último modelo, el cual consiste en hacer uso de cPanel, así como el gestionador de Archivos, como medios para adjuntar un archivo HTML a WordPress.
Para comenzar, debe iniciar sesión en el cPanel existente en la cuenta de alojamiento, e ingresar al Administrador de Archivos. Ya en el interior del Administrador de Archivos, se presentan 2 opciones que debe saber:
- Generar una carpeta nueva: esta se crea en la carpeta raíz del sitio, ideada para adjuntar su archivo HTML.
- Adjuntar el archivo a la carpeta raíz de forma directa: esto sucede cuando en vez de crear una nueva carpeta, se sube el HTML directo a WordPress.
De optar por la segunda opción, debe primero descomprimir el archivo HTML del lugar donde está guardado, luego modificar la carpeta index.html a algo nuevo, después volver a descomprimir el archivo, a fin de proseguir con la carga a WordPress. De mno hacer este paso, entonces el formato HTML anulará la página de inicio del sitio.
A fin de graficar este paso, se sugiere crear una nueva carpeta, pues existen algunos pasos adicionales que se debe cumplir para poder hacer esto, veamos como sigue:
Crear una nueva carpeta y subir un rrchivo HTML a WordPress
- Lo primero, es dirigirse a la carpeta raíz del sitio web respectivo, donde debe estar la carpeta wp-content, el archivo wp-config.php, u otros archivos. Una vez dentro, pulsar en Nueva carpeta.
- Allí, colocar un nombre a esa nueva carpeta, y pinchar en Crear nueva carpeta.
- Enseguida hacer un doble clic en esta carpeta recién creada, para luego pulsar en Cargar a fin de seleccionar el archivo HTML.
- Cumplido el paso anterior, se evidenciará el archivo HTML, pero de forma comprimida en el interior de la carpeta.
- Luego, se debe descomprimir el archivo HTML, pulsando con el botón derecho, y pulsar en Extraer.
- Una vez se muestre la ventana modal, pulsar en Extraer archivos para culminar el proceso de descompresión. Con el archivo HTML descomprimido, se observarán todos los distintos archivos inmersos en la plantilla. Debiendo recordar al respecto, que esto conlleva a visualizar algunos aspectos, como son el CSS, los archivos de estilo de fuente, imágenes y JavaScript.
- A esta altura del proceso, todo lo que hay que hacer para garantizar que la plantilla HTML y que los archivos se cargaron correctamente, es escribir la URL del sitio en el navegador, y agregar el nombre de la nueva carpeta al final.
En caso de mostrarse un error referido como 404, no hay que alarmarse; pues este es un error frecuente en WordPress, el cual por demás, se puede resolver fácilmente. De igual forma, en el supuesto de que su servidor no admita la redirección, y el archivo index.php no se redirige al cargar la URL en su navegador, también se mostrará este error 404 luego de cargar sus archivos HTML.
Con el propósito de solucionar este inconveniente, hay que mantenerse en el Administrador de archivos, y desde allí ingresar al archivo .htaccess, con solo pinchar dos veces en él. Después, adicionar el siguiente código, para luego guardar estos cambios: RewriteRule ^(.*)index\.(php|html?)$ /$1 [R=301,NC,L]. Esta codificación tiene como función redirigir el archivo index.php, para cargarlo en el navegador.
Resumen
Para aquellos usuarios de las diversas plataformas de trabajo disponibles, ya no hay duda de que WordPress representa hasta hoy día, el sistema de administración de contenidos con mayor demanda y de mayor uso, puesto que el mismo ofrece a propietarios de sitios web la versatilidad y maniobrabilidad requerida que tener sus sitios web inéditos, eficientes y personales, que los distancian de la competencia.
Por ello, tener la capacidad para insertar HTML en WordPress, es fundamental, pues ofrece la capacidad de usar todo tipo de formas, incluyendo claro está, los métodos objetos de este post, lo cual es otra muestra de la comodidad que ofrece WordPress, para satisfacer las demandas de los numeroso propietarios de sitios, además, con la libertad de personalizar sus sitios según lo requieran.
Adicionalmente, el poder ser capaces de manejar un archivo HTML a WordPress representa per se una muy buena habilidad para saber detectar y resolver eventuales problemas, o frente a alguna necesidad en particular. Y es que nunca se sabe el momento que pueda surgir alguna plantilla HTML atractiva o que requiera algún tipo de diseño de página que el tema no autorice, y es entonces cuando observarás congratulado las ventajas de saber insertar HTML en WordPress.
Si te gustó este tema, quizá te pueda interesar: