6 formas de subir un archivo HTML a WordPress sin errores

Publicado: 2022-12-12

Subir un archivo HTML a WordPress no es una tarea rutinaria para la mayoría de los usuarios de WordPress. Dado que WordPress le permite crear contenido sin modificar el código, no necesita cargar ningún archivo HTML personalizado.

Sin embargo, mientras crea y hace crecer su sitio de WordPress, a veces necesitará contenido personalizado. Ahí es donde los archivos y páginas HTML resultan útiles. Importarlos a su sitio le ahorrará mucho tiempo creando elementos personalizados y configurando ajustes desde cero.

Este artículo discutirá el problema y cómo cargar archivos HTML a WordPress en detalle. ¡No te lo pierdas!

  • ¿Qué es un archivo HTML?
  • ¿Qué es una plantilla HTML?
  • ¿Por qué debería subir archivos HTML a WordPress?
  • #1 Importar archivos HTML usando el panel de administración de WordPress
  • #2 Cargar archivos HTML con un cliente FTP
  • #3 Conecte archivos HTML a WordPress a través de cPanel
  • #4 Aplique un complemento convertidor de HTML a WordPress
  • #5 Use la herramienta gratuita en línea para convertir HTML a WordPress
  • #6 Sube un archivo HTML a WordPress para la verificación de Google
  • Proteger archivos y páginas HTML

¿Qué es un archivo HTML?

HTML significa Hypertext Markup Language, que es un lenguaje utilizado para crear y estructurar documentos electrónicos o páginas web. De hecho, la mayoría de las páginas web que navegas en Internet hoy en día están escritas con código HTML.

Los archivos HTML son documentos de solo texto. Contienen el código responsable de asegurarse de que el contenido y las imágenes de su sitio tengan el formato y se muestren correctamente. En otras palabras, HTML ayuda a los navegadores web a comprender cómo visualizar la estructura de su sitio para los visitantes.

pda-upload-html-files-to-wordpress-example

HTML crea la base para sus páginas web. Puede generar archivos HTML usted mismo o tomar archivos existentes, como Google Docs, y convertirlos a HTML. Es posible insertar un pequeño código CSS para agregar algunos elementos de diseño personalizados a la base. De esta manera, su sitio web aparecerá perfecto para los visitantes del sitio.

¿Qué es una plantilla HTML?

Una plantilla HTML se refiere a un archivo HTML prediseñado que puede cargar fácilmente en su sitio y utilizar. Incluye texto, imágenes, estilos de fuente y JavaScript.

Para aquellos que no tienen una base de codificación, es mejor cargar una plantilla HTML ya creada en WordPress. Gracias a las plantillas HTML, puedes desarrollar páginas web atractivas sin preocuparte por arruinar la estructura de tu sitio.

Hay varias diferencias entre las plantillas HTML y los temas de WordPress que debes conocer antes de usarlas.

Plantillas HTML Temas de WordPress
Formato Archivos zip independientes. Archivos zip independientes.
Impacto en La apariencia de una sola página web en su sitio web. La apariencia de todo su sitio web.

¿Por qué debería subir archivos HTML a WordPress?

Como se mencionó anteriormente, WordPress le permite crear páginas web sin codificación. Sin embargo, hay varias razones por las que a veces necesita usar archivos HTML.

Método de ahorro de tiempo: ya ha escrito una excelente plantilla HTML para su antiguo sitio web. Le costará tiempo y esfuerzo reconstruirlo desde cero para su nuevo sitio web. Por lo tanto, se recomienda reutilizar la plantilla existente para ahorrar tiempo y garantizar que todo se vea perfecto.

Además, esto también elimina el riesgo de errores humanos, ya que puede cargar todo el contenido a través de archivos HTML.

Diseño personalizado: otra ventaja de cargar un archivo HTML en WordPress es el diseño altamente personalizable. Le permite personalizar su contenido a su gusto fuera del soporte de su tema. Puede usar un archivo HTML listo para usar o escribirlo usted mismo y simplemente subirlo a su sitio.

Verificación del sitio: por último, pero no menos importante, cargar archivos HTML en WordPress puede ayudarlo con la verificación del sitio web. Por ejemplo, debe cargar un archivo de verificación HTML en su sitio para usar la herramienta Google Search Console. Esto le da a Google la capacidad de acceder e indexar su sitio correctamente.

Cómo subir archivos HTML a WordPress

Has aprendido todo sobre los archivos HTML. Ahora, echemos un vistazo a cómo subir archivos HTML a WordPress.

¡Sigue leyendo!

#1 Importar archivos HTML usando el panel de administración de WordPress

El tablero de WordPress incorporado le permite cargar archivos HTML directamente a través de sus publicaciones, páginas o la biblioteca de medios. En caso de que esté utilizando el editor de Gutenberg, primero debe insertar un bloque de archivo . Luego, seleccione Cargar para agregar los archivos HTML a WordPress.

pda-gutenberg-archivo-bloque

Alternativamente, el editor de Gutenberg también le proporciona un bloque HTML personalizado . Puede copiar y pegar el código HTML manualmente en este bloque. Sin embargo, para cargas de archivos grandes, sería más fácil y efectivo usar la opción Archivo .

pda-personalizado-html-bloque

Si está utilizando el editor clásico, presione el botón Agregar medios en sus publicaciones, páginas o la biblioteca de medios. Después de eso, haga clic en Cargar para cargar sus archivos HTML.

pda-wordpress-agregar-botón de medios

Pequeño aviso: a veces puede encontrar un error al cargar archivos HTML en WordPress usando el panel de administración. El problema más común es "Lo siento, este tipo de archivo no está permitido por razones de seguridad".

Este problema ocurre porque su sitio de WordPress actualmente no admite el tipo de archivo .html. Para permitir cargas sin filtrar en WordPress, consulte nuestra guía para obtener más detalles.

#2 Cargar archivos HTML con un cliente FTP

El uso de un cliente FTP para cargar archivos HTML es útil cuando desea trabajar localmente en un sitio de prueba. Le ayuda a probar cualquier cambio que realice antes de que su sitio web se active. Además, esto evita el tiempo de inactividad innecesario si algo falla.

En esta sección, lo guiaremos a través de cómo cargar archivos HTML a WordPress usando FileZilla. Para comenzar, siga las instrucciones a continuación:

  1. Haz una copia de seguridad de tu sitio.
  2. Abra FileZilla y seleccione Quickconnect después de haber ingresado sus credenciales.

pda-upload-html-files-to-wordpress-using-filezilla

3. Navegue a la carpeta raíz de su sitio web.

4. Busque y haga clic con el botón derecho en el archivo HTML que desea cargar desde su computadora. Luego presione Cargar para agregarlo a su sitio web.

Una vez que haya subido correctamente el archivo, compruebe si aparece correctamente en su sitio web. Para hacer eso, escriba la URL de su sitio web con el nombre del archivo HTML al final en su navegador. Por ejemplo, www.pdagold.com/html-file . Si funciona, será redirigido a la nueva página web que creó con el archivo HTML.

#3 Conecte archivos HTML a WordPress a través de cPanel

El último método que vamos a compartir contigo es usar cPanel. Primero, inicie sesión en el cPanel de su cuenta de alojamiento y elija la herramienta Administrador de archivos .

pda-cpanel-file-manager-upload-html-files-to-wordpress

Ahora, tienes 2 opciones:

  • Cargue el archivo HTML directamente en su carpeta raíz.
  • Cree una nueva carpeta y cargue el archivo HTML en ella.

Con la primera técnica, tienes que descomprimir el archivo HTML donde lo tienes guardado. Luego cambie la carpeta index.html a algo nuevo. Finalmente, vuelve a comprimir el archivo para continuar subiéndolo a WordPress. La plantilla HTML anulará la página de inicio de su sitio si no sigue estrictamente estos pasos.

Recomendamos encarecidamente la segunda técnica para asegurarse de no arruinar su sitio web:

  1. Dirígete a la carpeta public_html de tu sitio.

pda-upload-html-files-wordpress-public-html-carpeta

2. Seleccione Nueva carpeta .

pda-create-new-folder-upload-html-file-to-wordpress-cpanel

3. Asigne un nombre a su nueva carpeta y haga clic en Crear nueva carpeta .

4. Haga doble clic en la carpeta que acaba de crear y seleccione Cargar para elegir su archivo HTML.

pda-subir-archivos-html-a-wordpress-cpanel

5. Su archivo HTML comprimido aparecerá en la carpeta. Simplemente descomprima el archivo HTML haciendo clic derecho y seleccionando Extraer .

pda-extract-html-archivo-cpanel

6. Seleccione Extraer archivos para completar el proceso de descompresión de archivos.

7. Compruebe si el archivo se ha cargado correctamente como se indica en el método n.º 2.

Si te encuentras con un error 404, lo más probable es que tu servidor no admita la redirección de index.php . En este caso, vuelva al Administrador de archivos y acceda a su archivo .htaccess . Luego, inserte el siguiente código y guarde sus cambios:

 Regla de reescritura ^(.*)índice\.(php|html?)$ /$1 [R=301,NC,L]

Este código ayuda a redirigir su archivo index.php y cargarlo en el navegador. Como resultado, el error 404 desaparecerá.

#4 Aplique un complemento convertidor de HTML a WordPress

Este método es adecuado para principiantes, ya que no requiere ninguna habilidad de codificación. Su trabajo es activar el complemento elegido, y se encargará del resto por usted.

Numerosos complementos disponibles le permiten cargar y convertir HTML a contenido de WordPress sin tocar una pieza de código. No te preocupes más por la codificación. Para su comodidad, hemos reducido la lista a los 7 mejores complementos.

¡Echemos un vistazo a ellos!

Recomendaciones de complementos

Inserte un fragmento de código HTML: convierta códigos HTML, CSS y JavaScript en códigos abreviados e integre sus fragmentos en páginas y widgets de WordPress.

Mapa del sitio simple: cree un mapa del sitio HTML receptivo y obtenga una vista previa directamente dentro del editor sin códigos abreviados complicados.

HTML sin procesar: habilite HTML sin procesar o cualquier otro código en sus publicaciones y deshabilite las comillas tipográficas y el formato automático.

Código WP: inserte fragmentos de código PHP, scripts de encabezado y pie de página y códigos de píxeles de anuncios en WordPress con lógica condicional.

WP Coder: agregue CSS, HTML y JavaScript personalizados a sus páginas web.

Permitir HTML en las descripciones de categorías: le permite aplicar HTML sin filtrar en las descripciones de sus categorías al deshabilitar los filtros seleccionados de WordPress.

Incrustación de código: Proporcione una manera simple y eficiente de incrustar código como JavaScript y HTML en sus publicaciones y páginas.

Instrucciones del complemento

En este tutorial, lo guiaremos sobre cómo insertar códigos y archivos HTML personalizados utilizando el complemento WP Coder.

pda-wp-coder-subir-html-a-wordpress

Así es como funciona:

  1. Instalar y activar el complemento.
  2. En su panel de administración de WordPress, vaya a Wow PluginsWP Coder .
  3. Para agregar un nuevo código HTML, cópielo y péguelo en la sección Código HTML en la pestaña Agregar nuevo .

pda-wp-coder-html-código

O bien, puede dirigirse al menú Incluir archivos . Copie y pegue la URL del archivo HTML que cargó en la biblioteca de medios en el cuadro URL para archivo . Luego, haga clic en Agregar nuevo para finalizar.

pda-wp-coder-plugin-subir-html-archivo-a-wordpress

4. Presione el botón Guardar y copie el código abreviado generado en la sección Publicar .

pda-wp-coder-copiar-shortcode

5. Pegue el código abreviado en cualquier lugar que desee en su página y disfrute de los resultados.

#5 Use la herramienta gratuita en línea para convertir HTML a WordPress

Para convertir su HTML a WordPress usando una herramienta en línea:

  1. Vaya al sitio web de htmltowordpress.
  2. Cargue el archivo zip HTML de su sitio web en el cuadro.

pda-upload-html-file-to-wordpress-online-herramienta

3. Podrá obtener una vista previa de su sitio web de WordPress. Presione el botón Personalizar en la parte superior de la página.

pda-wordpress-tema-vista previa

4. Modifica el sitio web a tu gusto.

5. Presione Guardar y publicar para finalizar.

#6 Sube un archivo HTML a WordPress para la verificación de Google

Le mostraremos cómo cargar un archivo de verificación HTML en WordPress. Aquí está la ruta:

  1. Dirígete a Google Search Console y haz clic en Comenzar ahora .
  2. Introduzca el nombre de usuario y la contraseña de su cuenta de Gmail.
  3. Verifique su sitio web utilizando su nombre de dominio o prefijo de URL . La opción Dominio solo admite la verificación de DNS. Para cargar archivos HTML, opte por el prefijo de URL . Ingrese la URL de su sitio web y haga clic en Continuar .

pda-google-search-consola

4. En la sección de archivos HTML , seleccione el botón que le pide que descargue el archivo .

pda-google-search-console-upload-html-archivo-de-verificación

5. Una vez que haya descargado el archivo HTML en su computadora local, cargue el archivo en su sitio web de WordPress.

Proteger archivos y páginas HTML

Llega un momento en el que proteger tus archivos HTML es fundamental. Por ejemplo, cuando desea que solo los administradores o roles de usuario específicos accedan a los archivos. En tal situación, PDA Gold satisfará sus necesidades.

pda-subir-html-wordpress

El complemento le permite proteger los archivos HTML cargados en una carpeta en su directorio raíz de WordPress. Una vez protegidos, los visitantes no autorizados serán redirigidos a una página de error cuando intenten acceder a los archivos.

Lo mejor es que te permite insertar los archivos HTML protegidos en el contenido usando la etiqueta iFrame. De esta manera, sus visitantes pueden ver el HTML a través de iFrame pero al mismo tiempo no pueden acceder a los archivos directamente.

Para conocer los pasos detallados, consulte nuestra guía sobre cómo proteger los archivos HTML de WordPress que se muestran dentro de iFrame.

¡Aproveche al máximo sus archivos HTML ahora!

Eso es todo lo que debe saber sobre la carga de archivos HTML en WordPress. Para concluir, los archivos HTML son útiles cuando necesita un diseño de página personalizado. También es una gran opción en caso de migrar su antiguo sitio al nuevo.

La mejor parte es que subir y usar archivos HTML en WordPress no son tareas difíciles. Con solo unos simples pasos, puede crear hermosas páginas web. Entonces, no esperes. ¡Comience ahora con sus archivos HTML!

Para la edición de HTML en WordPress, puede consultar nuestro artículo para obtener más información.

Por último, ¡no olvide suscribirse a nuestro sitio web para obtener instrucciones más útiles!