¿Cómo insertar html en WorPress de forma segura?

Resulta altamente posible que al introducir algún código HTLM en un texto de una entrada u otra fuente, dicho código no se refleje adecuadamente. Y es que la plataforma de WordPress es capaz de erradicar parte de este, y no operar adecuadamente; lo cual es así por razones de seguridad, para que no se inyecten fuentes maliciosas en ellas. Y en este portal, podrás conocer cómo insertar HTML en WordPress de forma segura. No corras riesgos, sigue leyendo para que domines todos las métodos disponibles.

¿Cómo insertar HTML en WordPress?, 3 métodos efectivos

Para dar inicio al tema sobre insertar HTML en WordPress, se debe decir que ciertamente, existen formas predeterminadas, capaces de crear páginas y contenidos en el interior de WordPress sin que necesariamente, deban insertarse archivos HTML personales. Ello debido a que el núcleo central de  la plataforma de WordPress está diseñado con ciertos tipos de contenidos ya incorporados.

Adicional a lo anterior, el tópico de WordPress que se use, con seguridad contendrá su propia gama de formatos de páginas prediseñadas, y que son aprovechables para generar una página web inédita, pero que satisfaga sus demandas.

Asimismo, existe cualquier cantidad de plugin para insertar HTML en WordPress, como de sitios de aterrizaje de la misma, que bien se pueden usar para crear plantillas de páginas personalizadas, con el propósito de que los usuarios del sitio puedan arribar a partir de los resultados de búsqueda, las campañas de correos electrónicos, y hasta algunos medios de comunicación social.

De tal forma, que en realidad hay muy poca necesidad de insertar HTML en WordPress, pues generalmente todo lo que se requiere  para formatear un sitio web ya se encuentra allí. No obstante, ciertamente, existen algunas motivaciones para querer conocer la forma de subir archivo HTML a WordPress, muchas de las cuales van más allá de la carga de una plantilla con fines de diseño.

Por todo ello, conviene saber la mejor forma de proceder al momento de requerir insertar código HTML en WorPress, a través de los convenientes plugins, que a su vez, pueden ser los siguientes:

  • EmbedIt.
  • Simple Embed Code.

En el caso del segundo, este es posible instalarlo por medio de la página de instalación de plugins de WordPress, por lo que de preferencia debe usarse es esa opción. Ya que con Simple Embed Code, se debe crear un campo personal denominad CODEx, donde x equivale la serie del 1 a 20. Pero esta configuración se puede modificar, y llevarla a más de 20, en la opción de Ajustes -> Simple Embed Code. Una vez en el campo, se inserta el código HTML. Después, en la entrada denominada campo personalizado con %CODEx% y el pluging, se inserta el código sustituto.

Ahora, en la versión de WordPress 3.1, la página de entrada se ha limpiado; con la intencionalidad de observar las áreas personalizadas, debiendo desplegar las opciones de pantalla para ello, y activar las citadas áreas personales. Por todos estos detalles, es que en este post nos dimos a la tarea de compilar la información de interés, para enseñarte la mejor manera de insertar HTML en WordPress. Además de abordar detalladamente, las razones de contar con esta habilidad.

¿Qué es un archivo HTML?

Para ahondar en caso que nos ocupa sobre cómo insertar HTML en WordPress, primeramente debe dominarse bien la terminología respectiva, porque es un área bastante técnica y específica. Y aunque generalmente a diario se vean miles de sitios web, no todo el mundo saben cómo identificarlas o saber lo qué es un archivo HTML, su uso o cómo funciona, entre otras posibles dudas que puedan suscitarse cuando se intenta manipularlas.

En este sentido, es común que al buscar en google, se defina un archivo HTML como un lenguaje de marcado usado en el desarrollo de sitios en Internet. Comencemos por el principio, sus siglas en inglés quiere decir HyperText Markup Language, de allí su definición como un lenguaje de Marcas de Hipertexto.

Pese a ello, las personas sin conocimientos técnicos, tal definición realmente no aclara el panorama, por ser un concepto muy técnico. Esto lleva a que muchas personas al toparse con ella, no tengan mucha claridad conceptual, y asocian HTML a un tipo de diseño gráfico de las páginas web, no obstante, tal afirmación no es cierta, pues en realidad HTML se usa para señalar el orden de algún contenido de un sitio web. Lo cual lo lleva a cabo a través de las marcas de hipertexto, que se etiquetan bajo un nombre en inglés que significa tags.

El archivo HTML se desarrolló por vez primera en los años de 1990, a cargo de Tim Berners-Lee, quien lo asoció a un código para usarse en la creación de documentos y registros electrónicos en Internet, mejor conocidos como páginas web. Inclusive, cada una de las páginas web que localizan en Internet, se concibió bajo el código HTML. De este modo, ya se tienen algunas luces, hacia dónde va el tema de insertar HTML en WordPress.

Vale agregar, que dicho código HTML inmersos en los sitios webs es el responsable de garantizar, que cualquier texto o imágenes existentes en un contenido, estén formateados de forma adecuada. Por lo que sin ese código HTML, los navegadores web no descifrarían el modo de exhibir al ojo humano, la estructura de su sitio web a los usuarios.

De tal forma, que a través del código HTML indicado generado en la base para los sitios webs, adicional a un código CSS crea ciertos componentes de diseño, cuyo objeto es mostrarse perfectamente a los visitantes del sitio. Vamos captando, ¿Cierto?

¿Qué es una plantilla HTML?

Bien, ya con el panorama más claro sobre el código de HTML, cómo elemento clave para dar forma al cuerpo de las páginas webs individuales en Internet, es momento de dar a conocer la plantilla HTML. Aclarando conceptos, se debe agregar que esta representa un grupo de archivos prediseñados de HTML, los cuales pueden incluir textos, imágenes y otros archivos de soporte, para los tipos de fuente y Javascript.

Lo anterior, en forma más simple, quiere decir que una plantilla HTML, corresponde a un paquete prefabricado bajo el código HTML, y que puede usarse y colgarse con facilidad a cualquier sitio web. Así, si una plantilla HTML en un sitio web de WordPress, se anexa un archivo y se  vincula con algún texto y/o imágenes que se desea que la plantilla lo cargue y lo enseñe delante de un sitio, este es el método. Conviene recordar al respecto, que las plantillas HTML difieren de los temas de WordPress, como sigue:

  • Temas de WordPress: pese a ser posible conectar texto e imágenes a los temas de WordPress, los mismos son responsables de la apariencia del sitio web. Mientras que algunas de los modificaciones de componentes dentro del tema de un sitio son globales, por lo que permite aplicarse a todo un sitio web.
  • Plantillas HTML: en este caso, son archivos comprimidos y autónomos responsables de cargar una página web individualmente. Estos sólo impactan la apariencia de un solo sitio web. Es decir, los cambios que se lleven a cabo en una plantilla HTML cargada, afectarán nada más a dicha página web.

De allí la confusión que aun en nuestros días permanece, y son numerosas las personas que todavía no comprenden bien la terminología, para diferenciar los términos entre archivos HTML, temas y plantillas HTML, y hacen uso de forma indistinta estos vocablos, lo que eventualmente conlleva a errores al intentar insertar HTML en WordPress.

Las etiquetas de HTML

Ahora bien, ya posees una idea panorámica sobre lo que puede ser capaz de llevar a cabo con HTML, pero quizás, no sepas cómo operan las llamadas etiquetas. Para conocer de primera mano este tema, solo imagina que debes presentar un ensayo acerca de cierto tema, en esta ilustración, el ensayo será la página web y la mejor forma para ordenar un ensayo, sin duda es su título, seguida de la introducción, el desarrollo y su conclusión, este sería el formato de dicho trabajo.

De tal modo que daca parte de este ensayo, pueden representar las etiquetas, ya que estas indican la estructura, por tanto, la forma cómo está acoplado el contenido textual del ensayo en cuestión. Vale acotar, que las etiquetas no sólo sirven para ordenar un contenido, sino que además contribuyen con los buscadores, como pueden ser Google, Yahoo search, entre otros, para hallar la información por medio de dichas etiquetas.

Una vez, entendido el concepto de etiquetas, se requiere además su identificación; donde estas se caracterizan porque van inmersas en los caracteres, denominados menor que < y mayor que > respectivamente, como en este caso: <en este interior se observa el nombre de la etiqueta>.

En este caso, lleva ambos caracteres, y dentro de ellos se halla el nombre, no obstante, hay una diferencia para el objetivo de la etiqueta, pues, antes de escribir el nombre de la etiqueta, hay que colocar una barra diagonal/. Así: <Inicio de la etiqueta> y </Fin de la etiqueta>. Aunque se debe aclarar, que existen algunas excepciones, con el fin de las etiquetas, pues muchas de ellas generalmente, se usan con el inicio de la etiqueta, como el caso de las etiquetas BR (salto de línea), IMG (etiqueta para poner una imagen), etc.

¿Por qué se necesitaría insertar HTML en WordPress?

La principal razón por las cuáles hay que saber cómo insertar HTML en WordPress, es sin duda aprovechar y optimizar las nuevas plataformas surgidas sin dejar de lado las anteriores, es decir incorporarlas a las nuevas para agregar valor, pues cada uno de los modelos existentes poseen sus bondades, y no hay que dejarlas de lado, sino más bien, acoplarlas a las innovaciones. Pero existen otras motivaciones específicas por las que se puede querer acoplar un archivo HTML a WordPress, veamos cuáles son:

  • Existen los favoritos: en caso de usar un gran formato HTML en un sitio web de mayor data, pero desea usarse en un  sitio web más nuevo, con seguridad se desee subir el formato a este sitio más novedoso, en vez de rehacerlo todo nuevamente. Además, este hecho ahorrará tiempo, además de garantizar que se muestre exactamente igual.
  • Un diseño de página personal: en el caso de que un tema actual de WordPress no permita hacer un diseño de un sitio en particular, ya es posible cargar un archivo HTML con el diseño que más se desee, además de personalizarlo según las necesidades. Y esto es posible gracias a que ya puede insertar HTML en WordPress.

De igual modo, este mecanismo es útil, cuando se requiera constatar algún sitio web WordPress en el panel de Búsqueda de Google, y desee usar el modelo sugerido para cargar un archivo de verificación HTML de Google para hacerlo. En cuyo caso, el modo cómo se muestra un sitio web, mostrará los motores de búsqueda, en especial un coloso como Google, juega un rol importante en el éxito como propietario de un sitio web.

Por ello, existen instrumentos tan valiosos como el citado panel de Búsqueda de Google, donde cualquier usuario puede garantizar que Google indexará y clasificará su sitio en los resultados de búsqueda resaltantes, todo ello con la firme esperanza de alcanzar a la primera página, como es la intencionalidad de todo emprendedor.

Además, insertar HTML en WordPress, supone otros beneficios, cuando a través del panel de Búsqueda de Google se obtiene información sobre los SERPs actuales, es decir, páginas de resultados de dinamizadores de búsqueda, a fin de optimizar los esfuerzos de SEO, y obtener mayores clics en un sitio determinado.

El asunto estriba, en que, para usar esta Consola de Búsqueda de Google, se debe constatar el sitio web de WordPress. Siendo en este caso, una de las mejores formas de hacerlo, supone subir un archivo de autenticidad HTML de Google. Para ilustrar mejor lo dicho hasta este punto, en seguida pasaremos a exponer las distintas maneras disponibles para subir un archivo HTML a WordPress, y no fallar en el intento.

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 WordPressa.

Si te gustó este tema, quizá te pueda interesar:

Deja un comentario