HTML a WordPress: una guía detallada para cargar y convertir HTML

La carga y conversión de HTML a WordPress se realiza por una amplia variedad de razones. Es posible que desee convertir un sitio HTML antiguo y estático y ejecutarlo en el sistema de gestión de contenido de WordPress. También existe la posibilidad de que simplemente necesite un lugar para almacenar o compartir un archivo HTML, y WordPress proporciona una solución viable para ambos.

Cambiar de HTML a WordPress a menudo resulta intimidante o improductivo. Estamos aquí para guiarlo a través del proceso para asegurarnos de que aprenda las herramientas necesarias para convertir archivos HTML y completar una conversión por su cuenta.

HTML es un lenguaje de marcado simple y WordPress, aunque poderoso y lleno de funciones, es bastante simple e intuitivo. Por lo tanto, la conversión entre HTML y WordPress tampoco debería parecer una tarea ardua.

Siga leyendo para obtener más información sobre los conceptos básicos de HTML para las conversiones de WordPress, junto con las situaciones del mundo real en las que puede considerar tal movimiento.

Razones principales para cargar o convertir HTML a WordPress

Si se pregunta por qué puede convertir o cargar HTML en WordPress en primer lugar, eche un vistazo a los siguientes ejemplos para comprender las razones para completar una tarea como esta.

• Convierta un sitio web HTML antiguo para que se ejecute en el sistema WordPress. Tal vez el diseño antiguo sea uno de sus favoritos o simplemente no quiera pasar por el trabajo de rediseño. Esto también es importante para conservar la imagen de su marca.
• Convierta una sola página web HTML o publicación de blog y publíquela en su sitio actual de WordPress. Esto es particularmente útil si su tema actual no tiene un diseño de página personalizado que desea.
• Cambie una plantilla de sitio web HTML a un formato de tema que se pueda instalar en WordPress.
• Cargue un archivo de verificación HTML que demuestre la propiedad de su sitio web en un motor de búsqueda u otro servicio.
• Almacene un archivo HTML en su sitio web para usarlo más tarde.
• Genere un enlace a ese archivo para que pueda compartirlo o hacer que los usuarios descarguen el archivo en sus propias computadoras.
• Genere un componente de diseño HTML en una página o publicación de WordPress, como un cuadro de autor personalizado o un formulario de suscripción por correo electrónico.
• Haga coincidir su tema de WordPress con un diseño de sitio web HTML que encontró en línea pero al que no tiene acceso.

Como puede ver, las razones para agregar un archivo HTML a WordPress varían según sus objetivos. A veces, el proceso es bastante simple, como cargar un archivo HTML en una publicación o página de blog de WordPress. Otras veces hay un largo proceso de conversión de un sitio web HTML completo con docenas de archivos y trabajos secundarios que deben completarse, como transferir el contenido del sitio web junto con el HTML.

Para esta guía sobre la conversión y carga de HTML a WordPress, comenzaremos con lo básico (cómo cargar un archivo HTML en WordPress), luego pasaremos a los requisitos más detallados para duplicar o convertir sitios web HTML completos para que funcionen. en el sistema de WordPress.

Finalmente, hablaremos sobre los pros y contras de los convertidores HTML automatizados y qué herramientas están disponibles en el mercado.

¡Siga leyendo para comenzar con su primera conversión o carga de HTML a WordPress!

¿Listo para pasar de HTML ➡️ WordPress? El proceso de conversión no tiene por qué parecer una tarea ardua con esta guía 🧹Haz clic para tuitear

Cómo subir un archivo HTML a WordPress

El primer paso para aprender a convertir un archivo HTML en una página de WordPress o un sitio web completo es ver cómo funciona el proceso de carga del archivo HTML.

Vaya a esta guía para ver en profundidad cómo cargar un archivo HTML en WordPress.

Le daremos un resumen rápido de ese proceso a continuación para asegurarnos de que está en el camino correcto a medida que avanzamos hacia otros pasos más adelante en este artículo.

Hay tres métodos para cargar un archivo HTML en WordPress:

1. A través del panel de WordPress.
2. Con un cliente FTP.
3. Usando cPanel.

La carga de un archivo HTML al panel de WordPress se realiza en la Biblioteca de medios. Cubriremos algunas de las rutas a seguir en los tutoriales a continuación, pero tenga en cuenta que cargar un archivo a través del panel de WordPress se puede hacer en una página, publicación o directamente a través de la Biblioteca de medios.

Un cliente FTP (como FileZilla) se vincula a los archivos en vivo para su sitio de WordPress, junto con los archivos en su computadora. Esto le permite transferir archivos locales a los archivos del sitio alojado siempre que inicie sesión en el Cliente FTP con sus credenciales de alojamiento SFTP.

Finalmente, un cPanel de alojamiento ofrece acceso a un administrador de archivos en línea. Funciona de forma muy similar a un cliente FTP, lo que le permite controlar todos los mismos archivos. La principal diferencia es que cPanel es una aplicación web en línea, que requiere que cargue sus archivos en cPanel en lugar de transferirlos instantáneamente desde un entorno local a un sitio en vivo en un cliente FTP.

Cada método tiene sus pros y sus contras. Kinsta Hosting no ofrece una experiencia de cPanel, por lo que es mejor cargar archivos HTML más pequeños que desea almacenar o compartir a través del panel de WordPress.

Un cliente FTP / SFTP es el método elegido para crear un sitio web completamente nuevo a partir de un sitio web HTML estático. La razón de esto es que un cliente FTP / SFTP proporciona una cantidad increíble de control sobre los archivos de su sitio y puede transferir cualquier cosa, desde archivos multimedia a carpetas HTML directamente desde su computadora.

Cómo agregar código HTML a una página o publicación de WordPress

Existen algunos métodos para cargar un archivo HTML directamente en una publicación o página de WordPress. El primero es el proceso de cargar un archivo zip HTML o TXT como elemento multimedia. Este método funciona de manera similar a cargar una imagen en el administrador de medios, excepto que lo hace a través de una página o publicación, y es un archivo HTML en lugar de una foto.

Es posible que desee completar este método para tener un enlace para que las personas descarguen el archivo HTML o accedan al archivo usted mismo en el backend de su sitio.

Otra opción es pegar un bloque HTML en una página o publicación para agregar algunos elementos de diseño. Por ejemplo, puede tener un formulario de registro personalizado hecho solo para esta página que le gustaría insertar con un poco de HTML.

Ambos métodos tienen diferentes propósitos y procesos para lograr los resultados finales.

Para cargar un archivo HTML en una publicación o página, siga estos pasos.

Ir Páginas> Todas las páginas en el panel de WordPress. Si desea comenzar con una página en blanco, vaya a Páginas> Agregar nuevo.

Elija la página donde le gustaría cargar el archivo HTML. También puede hacer clic en el Agregar nuevo botón si está creando una página nueva.

Estos pasos son prácticamente los mismos para agregar archivos HTML a publicaciones de WordPress. Simplemente estamos explicando cómo hacerlo con una página de WordPress. Si desea utilizar una publicación en su lugar, vaya a Publicaciones> Todas las publicaciones o publicaciones> Agregar nuevo.

Esta parte depende de si está utilizando el editor de bloques Gutenberg o el editor clásico de WordPress.

En Gutenberg, puedes encontrar el + firmar y haga clic en él para buscar un nuevo bloque de construcción visual. Busque el Archivo bloque, que puede escribir en el campo de búsqueda o desplazarse por la lista de bloques para localizar.

Seleccione el bloque Archivo para colocarlo en su página o publicación.

Nota: Si está utilizando el editor clásico de WordPress, simplemente haga clic en el Agregar medios y cargue su archivo HTML con eso. Crea un enlace a su archivo para que las personas lo descarguen en la interfaz de su sitio.

Para el bloque de Gutenberg, el Archivo el módulo debe mostrar un Subir botón. Haga clic en el Subir y localice el archivo HTML deseado en su computadora. Por lo general, se almacenan como archivos TXT, colecciones de archivos TXT en una carpeta o en archivos ZIP.

Una vez que se carga en su sitio web, el archivo se revela como un enlace. Cualquier usuario puede ahora ir a su sitio web y hacer clic en el enlace de esa página o publicación para ver el archivo HTML e incluso descargarlo en su propia computadora.

Además, ese archivo se almacena en su biblioteca de medios, por lo que puede ir a la biblioteca para obtener la URL del archivo en cualquier momento y colocarlo en cualquier otro lugar que desee. También puede usar WordPress como almacenamiento para el archivo.

Si solo desea almacenar el archivo en WordPress y no tiene un enlace descargable para que todos sus usuarios hagan clic, simplemente elimine el enlace creado en la página o publicación.

Es posible que vea un error que le indique que el tipo de archivo no está permitido por razones de seguridad. Esto es bastante común, así que eche un vistazo a esta guía para eliminar ese error y permitir la mayoría de los tipos de archivos en su biblioteca de medios de WordPress. En general, el proceso implica editar su wp-config.php archivo o usando un complemento para eliminar el error.

Agregue código HTML al diseño de su página o publicación

Como se mencionó anteriormente, una de las razones por las que puede considerar agregar un archivo HTML a una página o publicación es para representar un diseño simple en esa página o publicación.

El método anterior es más para almacenar archivos HTML en WordPress y agregar un enlace para que las personas los descarguen.

Esta es una solución más funcional, ya que tiene la oportunidad de copiar y pegar o hacer su propio código HTML para cosas como formularios, cuadros de autor, pancartas y más.

Vaya a la página o publicación de su elección y elija la sección en la que le gustaría colocar el fragmento de código HTML.

Haga clic en el + Firmar para ver la selección de bloques. Busque el bloque HTML personalizado escribiéndolo en el campo de búsqueda o desplazándose por la lista de bloques.

Elija el bloque HTML personalizado para insertarlo en la página o publicación.

Ese bloque proporciona un campo de código simple y en blanco para que lo pegue o escriba, cualquier código HTML que tenga disponible.

Pegaré un formulario de contacto sencillo con un campo de correo electrónico y un botón Enviar para este tutorial en particular.

Una vez que tenga el código HTML en el bloque, haga clic en el botón Actualizar o Publicar para que se muestre en la interfaz de su página o publicación.

Si va a la interfaz de la página o publicación, el HTML debería hacer su trabajo y revelar cualquier diseño o funcionalidad que intentaba agregar al diseño.

En este caso, puede ver el formulario donde pido un correo electrónico y también tiene un botón Enviar.

El proceso y el resultado no son muy diferentes en el editor clásico de WordPress, excepto que no usará un bloque Gutenberg de arrastrar y soltar. En su lugar, navegue hasta la pestaña Texto en su editor (en lugar de la pestaña Visual) y pegue el código HTML donde desee que aparezca en la página.

Cómo subir un archivo de verificación HTML a WordPress

Otra razón por la que puede querer cargar HTML en WordPress es por los requisitos de optimización de búsqueda. Google y algunos otros motores de búsqueda ofrecen consolas y herramientas para webmasters para ver el rendimiento de su sitio y optimizar su contenido con la ayuda de análisis e informes que controlan los problemas y solucionan esos problemas.

Sin embargo, Google no puede asumir que eres el propietario de un sitio web aleatorio simplemente porque afirmas que lo eres. Ahí es donde entra en juego un archivo de verificación HTML.

En pocas palabras, Google proporciona un archivo HTML que debe cargar en su sitio web. Solo el propietario del sitio debe tener acceso a los archivos del sitio web, por lo que Google usa esto como una forma de asegurarse de que no esté tratando de controlar las herramientas para webmasters de otra persona.

El archivo de verificación HTML cargado envía un mensaje a Google que indica que el archivo se agregó a ese dominio y que, de hecho, usted es el propietario.

Es prudente aprender a cargar un archivo de verificación HTML, ya que Google y los motores de búsqueda no son los únicos servicios que le piden que verifique su identidad o propiedad con archivos como estos. Algunos complementos, directorios y complementos de terceros también quieren asegurarse de que usted no sea un intruso.

Razones para cargar un archivo de verificación HTML

• Para verificar que posee un sitio web para herramientas de optimización de motores de búsqueda.
• Al demostrar la propiedad de ciertos directorios en línea.
• Si necesita vincular a una integración o complemento de terceros, debe averiguar si realmente mantiene la propiedad de su sitio.

Como puede ver, este archivo HTML puede provenir de diferentes fuentes. Por lo general, no tiene que saber nada sobre el contenido del archivo HTML, solo que se utiliza para enviar ese pingback al servicio para indicar que tiene control sobre los archivos del sitio.

Dicho esto, nuestra demostración de cómo cargar un archivo de verificación HTML en WordPress involucrará a la Consola de búsqueda de Google, ya que esa es una de las razones más comunes para usar un archivo de verificación.

Para comenzar, registre su sitio web en Google. Esto se hace yendo a la herramienta Google Search Console. Haga clic en el botón Comenzar ahora e inicie sesión en su cuenta de Google o registre una cuenta en Google.

Una vez que haya iniciado sesión en la Consola de búsqueda de Google, es posible que vea una lista de propiedades que ha administrado o probado en el pasado. Por otro lado, es posible que vea una lista vacía.

Independientemente, vaya a la pestaña Propiedades de búsqueda en la esquina superior izquierda del tablero.

En el menú desplegable, seleccione la opción Agregar propiedad para avanzar. Esto le permite agregar su sitio web como una propiedad administrada en Google Search Console.

La siguiente ventana emergente le pide que seleccione un tipo de propiedad. La opción Dominio le permite verificar todas las URL en todos los subdominios. A menudo, esta es la forma más fácil de verificar una página, pero requiere verificación de DNS, que se encuentra en su cuenta de alojamiento.

Sin embargo, actualmente estamos hablando de cargas de archivos HTML, por lo que analizaremos la opción de prefijo de URL, que es un método más antiguo, pero aún confiable, para verificar que posee un sitio web. Además, este método ayuda a identificar URL específicas bajo la dirección que ingresa.

Por lo tanto, tome la URL de su sitio web y péguela en el Prefijo de URL campo.

Haga clic en el Continuar botón.

Ahora, Google Search Console solicita que verifique la propiedad del sitio web.

Hay varios otros métodos de verificación, pero este es el que usa la carga de un archivo HTML.

Haga clic en el botón que le pide que descargue el archivo.

Guarde ese archivo HTML en su computadora en una carpeta que recordará.

El siguiente paso es cargar el archivo en el sitio web de WordPress que pegó en Google Search Console desde antes.

Como se mencionó anteriormente, hay tres opciones para cargar un archivo HTML en WordPress.

El primer método, cargar a través del panel de control, es definitivamente una opción viable. Muchas personas todavía se desvían cuando surge un error común al cargar un archivo HTML en la Biblioteca de medios. Debido a esto, a menudo es más rápido realizar sus cargas con un cliente FTP. Sin embargo, si planeas realizar la carga en el panel de WordPress y ves el error «Lo sentimos, este tipo de archivo no está permitido», usa esta guía para solucionar el problema.

Ahora tiene las otras dos soluciones: usar un cliente FTP / SFTP o cargar al cPanel desde su cuenta de alojamiento.

El cPanel no es una mala elección para algunos hosts, pero nuevamente, Kinsta no ofrece un cPanel. Por lo tanto, nos centraremos principalmente en cargar el archivo HTML a través de un cliente FTP / SFTP. Los pasos detallados se describen en el artículo vinculado anterior, pero aquí hay un resumen rápido para guiarlo en su camino.

Para comenzar, descargue FileZilla en su computadora. También puede probar con otros clientes FTP / SFTP.

Nota: Le recomendamos que haga una copia de seguridad de su sitio web antes de este proceso. Es poco común causar problemas con un sitio al transferir archivos a través de FTP / SFTP, pero es absolutamente posible. No desea bloquear su sitio o perder datos, así que cree un archivo de sitio de respaldo.

Abra el cliente FTP / SFTP y escriba sus credenciales FTP / SFTP para conectarse al servidor web.

Las credenciales requeridas incluyen lo siguiente:

• Anfitrión
• Nombre de usuario
• Contraseña
• Puerto

¿Dónde encuentra las credenciales para su sitio de WordPress?

Por lo general, se encuentran en su panel de control de alojamiento, por lo que puede comunicarse con su host o buscarlos usted mismo.

Kinsta tiene una ruta fácil para localizar las credenciales FTP / SFTP yendo a la pestaña Sitios en su panel de alojamiento de Kinsta y seleccionando el sitio web que desee.

En la pestaña Información, busque el área SFTP / SSH. Copie las credenciales correspondientes en el cliente FTP / SFTP.

Por ejemplo, puede ver los elementos de Host, Nombre de usuario, Contraseña y Puerto, todos bien organizados en Kinsta.

Pegue esos elementos en el cliente FTP / SFTP y haga clic en el botón Conexión rápida.

Si ve un error, lo más probable es que FileZilla utilice de forma predeterminada el protocolo FTP y no el protocolo SFTP. Para arreglar eso, ve a Archivo> Administrador del sitio. Agregue un nuevo sitio en FileZilla y seleccione SFTP. Pegue las credenciales de alojamiento en esa área e intente conectarse nuevamente.

Después de conectarse a su host, todos los archivos del sitio de WordPress aparecen para su modificación.

Busque el archivo raíz de su sitio, que contiene carpetas como contenido de wp y wp-admin.

Busque el archivo de verificación HTML (en este caso, lo renombré para encontrarlo más fácilmente) debajo del área que muestra los archivos de su computadora. Por ejemplo, puede verlo debajo Descargas si es ahí a donde van sus descargas de Internet.

Arrastre ese archivo al archivo raíz de su sitio web. Todo esto se hace en el cliente FTP / SFTP.

La carga solo debería tomar unos segundos.

Una vez que esté en los archivos de su sitio, puede volver a la página de Verificación de Google y verificar si está registrando que es el propietario del sitio. Debería aparecer un mensaje de éxito en la Consola de búsqueda de Google y se abrirán varias funciones para optimizar y analizar el estado de su sitio web.

Conversión manual de un sitio HTML completo a WordPress

Para convertir un sitio HTML a WordPress, puede usar un complemento / aplicación, convertir manualmente sus archivos o utilizar un tema secundario y transferir los archivos HTML a ese tema secundario.

El primero es convertir manualmente ese HTML para crear un tema de WordPress.

Algunos dicen que es el método más abrumador, pero otros lo prefieren, ya que usted obtiene el control total sobre el proceso y no tiene que depender de aplicaciones o complementos que a veces pueden no ser confiables. Siga los pasos a continuación para completar una conversión de sitio HTML a WordPress de forma manual.

Cree una carpeta para su tema y agregue los archivos de tema estándar

En su computadora, cree una carpeta para guardar todos los archivos básicos de su tema. Llame a la carpeta como desee, preferiblemente dándole un nombre que pueda recordar.

Cree los siguientes archivos de temas básicos:

• style.css
• index.php
• header.php
• sidebar.php
• footer.php

No dude en abrirlos en su editor de código o texto, ya que los editará en el futuro. A partir de ahora, no es necesario agregar ningún código a los archivos. Simplemente déjelos en la carpeta.

Nota: Puede comenzar por crearlos como archivos TXT. Si luego cambia la extensión del archivo, como de .TXT a .php o .TXT a .css–su computadora lo ajusta automáticamente al formato de archivo correcto. Por ejemplo, agregar un .css extensión convierte el archivo en una hoja de estilo en cascada.

Transfiera el CSS actual de su sitio de WordPress a la nueva carpeta

Ya debería tener un tema instalado en su sitio actual de WordPress. Si no es así, instale un tema para ayudar con esta parte.

Utilizará el CSS del tema actual como base, basándose en eso en el style.css archivo con los archivos de su sitio HTML.

Por lo tanto, copie el encabezado de la hoja de estilo de su sitio de WordPress en el nuevo style.css expediente.

Debería verse algo como esto:

/*
Theme Name: Twenty Seventeen
Theme URI: https://wordpress.org/themes/twentyseventeen/
Author: the WordPress team
Author URI: https://wordpress.org/
Description: Twenty Seventeen brings your site to life with header video and immersive featured images. With a focus on business sites, it features multiple sections on the front page as well as widgets, navigation and social menus, a logo, and more. Personalize its asymmetrical grid with a custom color scheme and showcase your multimedia content with post formats. Our default theme for 2017 works great in many languages, for any abilities, and on any device.
Version: 2.4
Requires at least: 4.7
Requires PHP: 5.2.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentyseventeen
Tags: one-column, two-columns, right-sidebar, flexible-header, accessibility-ready, custom-colors, custom-header, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, post-formats, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/

En este caso, el sitio que se está utilizando tiene el tema Twenty Seventeen. Si está utilizando un tema diferente, verá algunas variaciones en el encabezado de la hoja de estilo.

Ahora es el momento de reemplazar los elementos del tema antiguo con información sobre su nuevo tema.

Para hacerlo, cambie lo siguiente:

• Nombre del tema: siéntase libre de llamar a su tema de cualquier manera, pero no es una mala idea nombrarlo de la misma manera que su carpeta de temas.
• URI del tema: puede usar la URL principal de su sitio para esto.
• Autor: escriba aquí su nombre o el nombre que desee utilizar.
• URI del autor: conviértalo en un enlace a su página de inicio.
• Descripción: puede hacer una descripción de su tema para que aparezca en el backend de su sitio de WordPress.

Deje todo lo demás como está. La mayoría de los otros elementos, como la licencia y las etiquetas, son solo para si planea publicar el nuevo tema en el directorio de temas de WordPress.

Recuerde, lo que acaba de pegar y editar es el encabezado de su tema.

Busque el CSS existente en su sitio web HTML. Copie y pegue este CSS después del encabezado en el nuevo style.css expediente.

Guarde y cierre el style.css expediente.

Tome su HTML actual y divídalo en pedazos

WordPress generalmente usa PHP para extraer elementos como archivos y código, y medios de su base de datos. Por lo tanto, un sitio web HTML debe dividirse en archivos PHP separados para combinar con la infraestructura de WordPress.

Esto puede parecer intimidante, pero todo lo que se requiere es dividir su documento HTML en varias partes, convirtiendo cada una de esas partes en archivos PHP.

Cada archivo HTML se verá diferente, pero es útil tener un ejemplo visual. Por lo tanto, mostraremos algunas plantillas de sitios web HTML para demostrar.

El siguiente código es una excelente opción para realizar referencias cruzadas con su propio archivo HTML. Es una página web HTML simple con un encabezado, elementos de menú, subtítulos, una barra lateral y un pie de página. Puede encontrar un código similar en el suyo index.html expediente.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Test Site</title>
<meta name="description" content="Website description">
<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="https://kinsta.com/blog/html-to-wordpress/style.css">
</head>

<body>
<div class="header-container">
<header class="wrapper clearfix">
<h1 class="title">Website Title</h1>
<nav>
<ul>
<li><a href="#">menu item #1</a></li>
<li><a href="#">menu item #2</a></li>
<li><a href="#">menu item #3</a></li>
</ul>
</nav>
</header>
</div>

<div class="main-container">
<main class="main wrapper clearfix">
<article>
<header class="entry-header">
<h2 class="entry-title">Article</h2>
</header>
<p>Test text right here..</p>
<h2>Subheading</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
<h2>A Sub</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
</article>
<aside>
<h3>Sidebar here</h3>
<p>Etiam ullamcorper lorem dapibus velit suscipit ultrices. </p>
</aside>
</main> <!-- #main -->
</div> <!-- #main-container -->

<div class="footer-container">
<footer class="wrapper">
<p class="footer-credits">© 2019 My Test Site</p>
</footer>
</div>
</body>
</html>

La siguiente plantilla es otro ejemplo para basar sus propias estrategias.

Como puede ver, este es index.html El archivo es un poco más complicado pero aún familiar en la forma en que está estructurado.

Ambos ejemplos incluyen encabezados, áreas de contenido, barras laterales y pies de página.

Lo más probable es que tenga un diseño diferente. Debido a esto, tendrá que modificar los pasos que se describen a continuación.

Cada paso adelante implica editar y agregar a cada uno de los nuevos archivos de WordPress que creó antes. Habiendo dicho eso, mantén el index.html archivo de su sitio HTML abierto. Usarás esto en el futuro.

El archivo header.php

En su archivo HTML abierto, busque todo al principio del archivo y terminando con el área de contenido principal. El área de contenido principal generalmente se representa con un <div class="main"> o <main> etiqueta.

Copie y pegue esta sección del archivo HTML en su nuevo header.php expediente.

Después de eso, encuentra donde dice </head>.

Justo antes de eso, pega lo siguiente:

<?php wp_head();?>

Este fragmento de código es importante para que funcionen la mayoría de los complementos de WordPress.

El archivo sidebar.php

Busca el <aside> sección en tu index.html expediente.

Todo dentro del <aside> y </aside> Las etiquetas, incluidas las etiquetas a un lado, deben copiarse en la nueva sidebar.php expediente.

De nuestro archivo de ejemplo, se parece a esto:

<aside>
<h3>Sidebar here</h3>
<p>Etiam ullam corper lorem dapibus velit suscipit ultrices. </p>
</aside>

El archivo footer.php

Si tiene un sitio web HTML simple, es posible que solo le quede la información del pie de página para transferir. Otros sitios son un poco más complicados. Independientemente, no es una mala idea terminar con la modificación del pie de página, ya que es uno de los componentes básicos que componen los archivos del sitio de WordPress.

En el index.html archivo, busque y copie todo el código después del </aside> (la barra lateral) etiqueta.

Nuevamente, es posible que tenga más contenido después de la sección de la barra lateral, pero es posible que los sitios HTML más simples solo tengan que lidiar con el pie de página.

En nuestro ejemplo, el pie de página se parece a esto:

</main> <!-- #main -->
</div> <!-- #main-container -->

<div class="footer-container">
<footer class="wrapper">
<p class="footer-credits">© 2020 My Test Site</p>
</footer>
</div>
</body>
</html>

Pero no tan rápido. Después de pegar ese código de pie de página en el nuevo footer.php archivo, agregue el <?php wp_footer();?> fragmento justo antes del </body> soporte. Esto ayuda a que el pie de página funcione correctamente con WordPress.

Puedes ver un ejemplo del <?php wp_footer();?> código pegado en el archivo de pie de página a continuación.

</main> <!-- #main -->
</div> <!-- #main-container -->
<div class="footer-container">
<footer class="wrapper">
<p class="footer-credits">© 2020 My Test Site</p>
</footer>
</div>
<?php wp_footer();?>
</body>
</html>

Asegúrese de guardar todos estos archivos nuevos en su carpeta de temas. Por ejemplo, después pegando este código de pie de página en el footer.php archivo, debe hacer clic en el botón Guardar en su editor y cerrarlo.

Ahora que los archivos básicos están listos, cierre el original. index.html archivo de su sitio web HTML.

Vincula tus archivos header.php e index.php a WordPress

Ya lo ha agregado al header.php archivo, pero aún debe realizar acciones adicionales. Esencialmente, desea modificar la llamada en la hoja de estilo desde el HTML que está allí en este momento al formato PHP estándar de WordPress.

Regreso en el header.php archivo, busque el <head> sección.

Estamos buscando la convocatoria de la hoja de estilo. Se parece a esto:

<link rel="stylesheet" href="https://kinsta.com/blog/html-to-wordpress/style.css">

Elimine esta llamada y reemplácela con lo siguiente:

<link rel="stylesheet" href="https://kinsta.com/blog/html-to-wordpress/<?php echo get_template_directory_uri(); ?>/style.css" type="text/css" media="all" />

Eso es todo lo que tienes que hacer con el header.php expediente. La convocatoria de la hoja de estilo ahora funciona con el formato de WordPress, no con HTML.

Adelante, guarde y cierre el header.php expediente.

A continuación, abra el index.php archivo (no el index.html archivo que estaba usando antes, pero el nuevo index.php expediente).

En este momento, el index.php el archivo está vacío.

Tome el siguiente código y cópielo y péguelo en el nuevo index.php expediente. Deje el espacio entre las dos primeras líneas. Eso está ahí por una razón, que verá pronto.

Estas líneas actúan como llamadas a sus otros archivos del sitio, incluidos header.php, sidebar.php, y footer.php.

<?php get_header(); ?>

<?php get_sidebar(); ?>
<?php get_footer(); ?>

El espacio abierto en la segunda línea está reservado para lo que llamamos The Loop, o un proceso dinámico en WordPress que se ejecuta en segundo plano para agregar nuevas publicaciones a su sitio. Esencialmente, le está haciendo saber a WordPress que aún hay más contenido por venir y que debería usar The Loop para agregar ese contenido. Obtenga más información sobre The Loop aquí.

Para agregar The Loop, pegue el siguiente código en el espacio que dejó en el index.php archivo antes (justo debajo ).

<?php while ( have_posts() ) : the_post(); ?>
<article class="<?php post_class(); ?>" id="post-<?php the_ID(); ?>">
<h2 class="entry-title"><?php the_title(); ?></h2>
<?php if ( !is_page() ):?>
<section class="entry-meta">
<p>Posted on <?php the_date();?> by <?php the_author();?></p>
</section>
<?php endif; ?>
<section class="entry-content">
<?php the_content(); ?>
</section>
<section class="entry-meta"><?php if ( count( get_the_category() ) ) : ?>
<span class="category-links">
Posted under: <?php echo get_the_category_list( ', ' ); ?>
</span>
<?php endif; ?></section>
</article>
<?php endwhile; ?>

El resultado debería verse así:

<?php get_header(); ?>
<?php while ( have_posts() ) : the_post(); ?>
<article class="<?php post_class(); ?>" id="post-<?php the_ID(); ?>">
<h2 class="entry-title"><?php the_title(); ?></h2>
<?php if ( !is_page() ):?>
<section class="entry-meta">
<p>Posted on <?php the_date();?> by <?php the_author();?></p>
</section>
<?php endif; ?>
<section class="entry-content">
<?php the_content(); ?>
</section>
<section class="entry-meta"><?php if ( count( get_the_category() ) ) : ?>
<span class="category-links">
Posted under: <?php echo get_the_category_list( ', ' ); ?>
</span>
<?php endif; ?></section>
</article>
<?php endwhile; ?>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

Adelante, guarda el index.php expediente. También puede cerrar el archivo ahora.

Una vez hecho esto, un tema de WordPress basado en su sitio web HTML original está listo para cargarse en WordPress.

Sube el nuevo tema a WordPress

El último paso es cargar el tema en su sitio de WordPress. Una opción es simplemente comprimir la carpeta del sitio y cargarla en la sección Tema de WordPress sin agregar una captura de pantalla de su sitio como referencia.

Aunque su tema aún funciona de la misma manera sin una captura de pantalla de referencia, le recomendamos que cree una captura de pantalla para que le sea más fácil organizar sus temas y comprender cuál está realmente activo en su sitio web.

Por captura de pantalla, nos referimos a la pequeña vista previa que aparece para todos los temas instalados en su panel de WordPress. Incluso los que no están activos tienen capturas de pantalla. Es un requisito tener una captura de pantalla si planea cargar su tema en la Biblioteca de temas de WordPress.

Es posible que no esté subiendo públicamente su tema, pero una captura de pantalla le ayuda con su propia administración de temas. Como puede ver, es bastante difícil saber cómo se ve el tema si no hay una vista previa de captura de pantalla disponible. El tema Twenty Seventeen Child no tiene captura de pantalla, por lo que es solo una imagen en blanco. Podría confundir a muchos en el futuro.

Para agregar una captura de pantalla, abra el antiguo sitio HTML en un navegador y tome una captura de pantalla de la página de inicio con cualquier herramienta de recorte o software de captura de pantalla que tenga disponible.

Abra su software de edición de imágenes favorito y recorte la captura de pantalla a 880 × 660 píxeles. Esto asegurará que la captura de pantalla no se estire o sea desproporcionada cuando se agregue a WordPress.

Guarde la versión editada de la captura de pantalla en su nueva carpeta de temas. No tiene que ir a ninguna carpeta especial, simplemente colóquelo en la carpeta del tema junto a los otros archivos como header.php y footer.php.

Ahora, tiene dos opciones para cargar el nuevo tema de WordPress en WordPress.

La primera es arrastrando esos archivos a la carpeta wp-content / themes a través de FTP. Si sigue esta ruta, no es necesario comprimir el archivo. Simplemente use un cliente FTP como FileZilla y arrastre la carpeta normal a la carpeta wp-content / themes.

La otra opción es cargar una versión comprimida en el panel de WordPress.

Para comenzar, comprima toda la carpeta del tema en un archivo zip.

A continuación, en el panel de WordPress, vaya a Apariencia> Temas.

Haga clic en el botón Agregar nuevo.

Seleccione el botón Cargar tema.

Haga clic en Elija el archivo y busque el archivo comprimido en su computadora. Seleccione el archivo para que aparezca en el panel de WordPress.

Haga clic en Instalar ahora para procesar el archivo en WordPress.

WordPress debería decirle que el paquete se está instalando y que se instala correctamente.

Haga clic en el botón Activar para finalizar el trabajo.

Ahora el tema, con su captura de pantalla, aparece en la lista Temas como tema Activo. Puede ir a la interfaz de su sitio de WordPress para ver ahora una versión de WordPress de su sitio web HTML original.

Tenga en cuenta que ninguna conversión de HTML a WordPress es igual. Puede encontrar que el suyo es un poco más complejo de lo que acabamos de explicar. En general, es necesario realizar varias otras acciones para obtener un duplicado exacto de su sitio web HTML.

Por ejemplo, tendrá que agregar áreas de widgets y comentarios e incluso ajustar el título y la descripción de su blog para que sean modificables en WordPress.

Se necesita mucho trabajo manual para cambiar un sitio HTML a un sitio de WordPress, y es posible que algunos cambios solo sean posibles con un poco de marcado CSS.

Además, este tutorial no tiene nada que ver con agregar contenido como publicaciones e imágenes. Esto se puede hacer manualmente cargando imágenes en la Biblioteca de medios y ajustando elementos como las estructuras de URL.

Existen algunos complementos para automatizar la importación de contenido, pero la mayoría de ellos no están actualizados con las nuevas versiones de WordPress. Por lo tanto, le sugerimos que los pruebe para ver si funcionan para usted, pero no debe esperar mucho.

Conversión de HTML a WordPress a través de un tema secundario

Este es sin duda uno de los métodos más fáciles para convertir un sitio web HTML completo en un sitio de WordPress. Funciona mediante el uso de cualquiera de los temas de WordPress gratuitos que ya existen en línea, por lo que puede elegir su favorito y combinarlo con el diseño de su sitio HTML.

En general, está utilizando el tema de WordPress ya creado como tema principal. Luego, el sitio web HTML se convierte para funcionar con WordPress y se vincula al tema principal como un tema secundario. Si tiene preguntas sobre temas para padres e hijos, lea nuestra guía sobre el tema aquí.

Como explicación rápida, el tema principal administra la funcionalidad de su sitio, mientras que el tema secundario se crea sobre el tema principal. El tema padre técnicamente podría sostenerse por sí solo, pero el tema hijo no. Por lo tanto, usamos el tema secundario para modificar el diseño del tema principal y, al mismo tiempo, conservar la poderosa funcionalidad que ya se proporciona en el tema principal.

Aquí se explica cómo convertir de HTML a WordPress a través de un tema hijo.

Elija un tema principal

El primer curso de acción es seleccionar un tema que te guste. El tema que decida funcionará como su tema principal y lo usará como la base del diseño de su sitio web.

Idealmente, encontrará un tema que ya tenga un diseño parecido al de su antiguo sitio HTML. Otra opción es utilizar un marco de WordPress o tema de inicio, viendo cómo ambos tipos de temas ya se utilizan para las bases de diseño.

Por ejemplo, un tema de inicio de calidad es el tema Twenty Twenty o cualquiera de los temas de inicio de WordPress predeterminados con el nombre del año en que se crearon. Recomendamos retroceder en los años (Twenty Nineteen, Twenty Seventeen, etc.) para ver si alguno de ellos coincide mejor con el diseño de su sitio HTML.

Usaremos el tema Twenty Seventeen para este tutorial debido a su limpieza y capacidad para combinar muchos diseños web HTML simples.

Independientemente, todos estos temas sirven como maravillosos puntos de partida.

Para comenzar, instale el tema en su sitio web de WordPress.

Puede activar el tema si lo desea, pero activará un nuevo tema hijo más adelante y solo usará el tema de inicio como base para el diseño.

Crear una carpeta nueva

Todos los temas de WordPress requieren carpetas para almacenar los archivos de su sitio. Por lo tanto, debe crear una nueva carpeta para el tema hijo que se está creando desde el sitio HTML.

Recomendamos nombrar la carpeta después de su tema principal y agregar «-child» al final del nombre de la carpeta.

Por ejemplo, llamaremos a la carpeta «veintisiete-niños» en este caso.

En general, cualquier nombre servirá, siempre que recuerde el nombre de la carpeta y no le agregue espacios.

Configure su hoja de estilo

Todos los temas secundarios requieren hojas de estilo que van a la carpeta del tema.

Por lo tanto, cree un documento de texto y asígnele un nombre. style.css. Guárdelo en la carpeta del tema e incluya el siguiente código en ese archivo de texto:

/*
 Theme Name:   Twenty Seventeen Child
 Theme URI:    http://examplesite.com/twenty-seventeen-child/
 Description:  Twenty Seventeen Child Theme
 Author:       Jane Doe
 Author URI:   http://examplesite.com
 Template:     twentyseventeen
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
 Text Domain:  twenty-seventeen-child
*/

Asegúrese de reemplazar los elementos personalizados para su sitio. Potencialmente, necesitará modificar cosas como el nombre del tema, el URI del tema, el autor, la plantilla y algunos otros elementos para asegurarse de que coincida con sus propios nombres de archivo. Es similar a algunos de los pasos de la sección anterior denominada «Conversión manual de un sitio HTML completo a WordPress», que explica lo que significa cada fila.

La más importante es la etiqueta Plantilla. Esto debe llevar el nombre del tema principal para que el tema secundario funcione correctamente.

Hacer un archivo functions.php

Si solo usara la hoja de estilo para el sitio y activara el tema hijo, estaría disponible un sitio HTML sin ningún estilo. Sin embargo, también queremos agregar estilo al tema hijo para que se vea como queremos.

Todo el estilo se extraerá del tema principal.

Por lo tanto, un functions.php Se necesita el archivo para heredar los estilos del tema principal al tema secundario.

Crea un archivo llamado functions.php en su carpeta de temas.

Para activar el archivo, agregue una etiqueta PHP de apertura, junto con el código que le pide a WordPress que use el estilo del tema principal:

<?php
function child_theme_enqueue_styles() {

    $parent_style="parent-style";

    wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array( $parent_style ),
        wp_get_theme()->get('Version')
    );
}
add_action( 'wp_enqueue_scripts', 'child_theme_enqueue_styles' );

Otro beneficio de este fragmento de código es que le permite ajustar el diseño del sitio web con el tema de su hijo.

Activar el tema de niño nuevo

Ahora es el momento de activar el tema hijo.

Una forma de activar el tema hijo es agregar la carpeta al archivo wp / content / themes en sus archivos de WordPress. Esto se haría mediante un cliente FTP / SFTP.

También puede comprimir la carpeta y cargar el tema en Apariencia> Temas> Agregar nuevo.

Selecciona el Subir tema botón.

Hacer clic Elija el archivo y localice el archivo zip para el tema secundario en su computadora.

Una vez cargado, haga clic en el Instalar ahora botón.

Haga clic en el Activar botón.

Ahora debería ver el tema Twenty Seventeen Child (o cualquier tema que haya utilizado) activado como su tema principal.

Independientemente del método que utilice para activar el tema secundario, su sitio web de WordPress debe reflejar su tema principal. En otras palabras, es un duplicado exacto del tema principal.

Nota: Es posible agregar una captura de pantalla a su nuevo tema en lugar de no tener ninguna vista previa. Cubrimos cómo agregar una captura de pantalla al tema en una de las secciones anteriores llamada «Conversión manual de un sitio HTML completo a WordPress».

Agregar archivos HTML

El objetivo es crear un sitio que se parezca a su sitio web HTML original, no al tema principal.

Por lo tanto, el paso final implica que copie el contenido de su sitio web HTML en su nuevo sitio web de WordPress. La mayoría de las veces, tendrá que seguir estos pasos manualmente. Hemos mencionado esto antes, pero hay algunos complementos que automatizan el proceso de transferencia de contenido. Sin embargo, esos complementos no están actualizados con las versiones más recientes de WordPress, así que utilícelos bajo su propio riesgo.

¿Qué es un conversor de HTML a WordPress? (¿Y cuáles son las opciones?)

Un convertidor de HTML a WordPress toma los pasos descritos anteriormente y los simplifica o completa la tarea por completo. Puede considerar una herramienta de conversión de HTML a WordPress si no tiene el tiempo o la experiencia para realizar la conversión manualmente.

Los convertidores vienen en muchos estilos diferentes, pero es importante recordar que no todos son alternativas razonables para recorrer manualmente el proceso de conversión de HTML a WordPress.

Los convertidores se ofrecen en las siguientes formas:

• Convertidores de software de terceros, tanto en línea como localmente.
• Complementos de WordPress.
• Desarrolladores humanos reales.

Al observar las opciones de conversión, las aplicaciones / software de terceros parecen razonables para trabajos simples. Puede tomar un archivo zip de los archivos HTML de su sitio web y cargarlos en el convertidor. La mayoría de las herramientas de terceros disponibles funcionan como aplicaciones en línea, por lo que simplemente ábrelas en tu navegador y haz clic en el botón Cargar.

Nos gustan estas aplicaciones para conversiones menos complicadas. Si tiene un sitio web HTML básico y desea ejecutarlo en WordPress, esto puede ser el truco, pero no se garantiza una transición sin problemas.

En cuanto a los complementos de WordPress que convierten HTML para WordPress, tendrá dificultades para localizar complementos que tomen un sitio web HTML completo y conviertan los archivos para WordPress. Había algunos complementos disponibles, pero ninguno de ellos está actualizado para funcionar con las versiones más recientes de WordPress, y no desea utilizar un complemento desactualizado.

Sin embargo, algunos complementos brindan las características necesarias para la carga básica de archivos que pueden hacer que sea más fácil que una transferencia FTP o jugar con el backend de su cuenta de alojamiento. En general, muchos de los complementos solo permiten la carga de archivos individuales, por lo que no es la mejor ruta para la conversión masiva de sitios web.

Consideramos que el último método (desarrolladores humanos reales) es una forma de convertidor de HTML a WordPress porque definitivamente automatiza el proceso pidiendo ayuda a un experto y haciendo que una persona complete el trabajo. En general, contratar a un desarrollador humano para convertir su sitio web HTML ofrece la menor posibilidad de que encuentre problemas, y tiene a alguien con quien hablar si algo sale mal.

Las mejores opciones de complementos de conversión de HTML a WordPress y otras herramientas

Como se mencionó, los convertidores de HTML a WordPress vienen en muchas configuraciones diferentes. No encontrará muchos complementos designados de WordPress que no estén desactualizados o que ya no funcionen. Sin embargo, tenemos algunos complementos de conversión favoritos que completan tareas de conversión más pequeñas, junto con aplicaciones web y opciones de desarrollo manual que son útiles para trabajos de conversión de HTML a WordPress más avanzados.

Ventajas y desventajas de utilizar un complemento o una aplicación de conversión de HTML a WordPress automatizado

Un convertidor automático de HTML a WordPress suena como una bendición para algunos, pero no siempre es la mejor solución. Eche un vistazo a los pros y los contras a continuación antes de comprometerse con una aplicación o complemento creado para duplicar o convertir HTML.

Pros

• Elimina la necesidad de crear sus propios archivos de sitios web nuevos y, a menudo, los genera por usted.
• Muchos de los convertidores le brindan opciones para dividir elementos HTML y elegir cuáles irán a los archivos correctos para WordPress.
• Puede crear un tema a partir de HTML antiguo y usarlo en varios sitios web.
• Algunas herramientas solo requieren una URL para crear un nuevo sitio web o tema.
• Otras herramientas ofrecen opciones para duplicar un sitio web que no es de su propiedad, proporcionando un punto de partida para un diseño que disfruta.

Contras

• A menudo, todavía le queda trabajo manual para transferir contenido como publicaciones de blog y fotos.
• Lo más probable es que tenga que averiguar cómo transferir enlaces desde el sitio anterior manualmente.
• Estos convertidores no siempre se mantienen actualizados. Uno de los mejores convertidores fue un complemento de WordPress, pero no lo sugerimos en este artículo ya que el desarrollador ya no lo mantiene.
• Es posible que algunos de los convertidores de aplicaciones web no puedan manejar trabajos con archivos más grandes.

Ahora que comprende los beneficios y las desventajas de los convertidores HTML automatizados, echemos un vistazo a nuestras aplicaciones y complementos de convertidores automatizados favoritos a continuación.

Importador de sitios de WP

Aunque la herramienta WP Site Importer extrae e importa todo tipo de contenido y archivos de sitios web más antiguos o de terceros, puede apostar a que uno de esos elementos implica HTML. En resumen, WP Site Importer le permite convertir cualquier sitio en uno de WordPress, extrayendo contenido como imágenes, menús y páginas del sitio HTML y los archivos del sitio. WP Site Importer corrige los enlaces rotos para que no tenga que ajustarlos o agregar nuevos manualmente. Incluso conserva la información de SEO creada en el sitio anterior, incluidas las meta descripciones y las palabras clave.

El importador le ahorra tiempo y dinero al reducir los costos de un desarrollador y hacer que esta conversión de contenido y HTML sea más un proceso de un clic. Además, limpia su HTML, limpiando y formateando el HTML de origen. Esto hace que sus archivos HTML sean más compatibles con WordPress y le muestra a Google que está trabajando con código limpio, lo que a su vez impulsa su SEO.

La herramienta WP Site Importer funciona como un complemento directo de WordPress, por lo que puede descargar el complemento y activar sus funciones directamente desde el panel de control.

Importación de WP All

El complemento WP All Import es una de las herramientas más rápidas y fáciles disponibles para cargar archivos XML que contienen datos HTML. En general, el complemento le permite migrar contenido de un sitio web anterior o un sitio web de demostración potencial creado con HTML simple o algunos archivos HTML que le gustaría duplicar y llevar al nuevo sitio web WordPress.

La conversión ocurre en cuestión de cuatro pasos y usted obtiene acceso a una hermosa interfaz de arrastrar y soltar para administrar sus conversiones e importaciones. Lo que también es interesante sobre el complemento WP All Import es que maneja las importaciones de URL de sitios web externos. Por lo tanto, ni siquiera tiene que tener una contraseña o control sobre un sitio para transferir esos pocos archivos y potencialmente representar elementos en WordPress desde ese sitio.

La conversión completa de un sitio web puede resultar desalentadora con este complemento, pero vale la pena intentarlo, especialmente si se trata de un simple archivo HTML. Además, el complemento admite conversiones HTML para elementos como productos WooCommerce y páginas de WordPress. Hay una versión premium disponible para funciones más avanzadas, sobre todo la atención al cliente premium que le permite pedir ayuda al realizar estas conversiones.

HTMLtoWordPress.io

La aplicación en línea HTMLtoWordPress.io es una de las soluciones más populares para convertir un archivo HTML a WordPress. Lo emocionante de la herramienta HTMLtoWordPress.io es que ofrece principalmente conversiones para sitios web completos, sitios web creados con HTML.

Todo lo que tiene que hacer es abrir la página de inicio y cargar su archivo zip HTML para una conversión rápida. La aplicación web automatiza completamente la conversión de HTML a WordPress, por lo que no se requieren habilidades de codificación ni ninguna razón para meterse con un cliente FTP.

También puede ver una vista previa completa de su nuevo sitio de WordPress antes de completar el proceso y publicarlo en Internet. El contenido y las imágenes de su sitio también se conservan para el nuevo sitio web de WordPress. Se pueden editar a través de la aplicación Simple Live Editor, y se supone que hace referencia a esas imágenes, junto con JavaScript y CSS, sin problemas. En general, parece una solución sólida si tiene uno o varios sitios web HTML que necesitan conversión. Como beneficio adicional, puede agregar clases a su HTML para utilizar funciones avanzadas de WordPress.

Convertidor de temas Pinegrow para WordPress

Pinegrow Theme Converter es una herramienta de diseño web única para tomar una carpeta de un sitio web HTML y convertirla instantáneamente en un tema completo de WordPress. El conversor de temas carga sus archivos y presenta una vista previa del sitio de WordPress en una interfaz visual. Después de la carga, puede hacer clic en diferentes elementos de las páginas y asignar acciones inteligentes a cada elemento. Estos se integran con WordPress, por lo que mientras asigna acciones, agrega las funciones correctas de WordPress a su estructura y estilo HTML personalizados.

Una vez que haya decidido las acciones deseadas y haya guardado los archivos, Pinegrow tiene una opción para exportar el proyecto a archivos PHP estándar de WordPress, que se pueden cargar en una instalación regular de WordPress para probarlo en la vida real. Además, el sistema de importación de contenido asegura que transfiera con éxito los elementos multimedia como imágenes y videos.

Disfrutamos especialmente de las funciones que le permiten volver a Pinegrow y realizar ediciones. Todo lo que tiene que hacer es hacer clic en el botón Actualizar y enviar la nueva versión a su tema de WordPress sin ningún cambio de codificación avanzado o sin ajustar el sitio web en WordPress.

Este no es un complemento. De hecho, no se utilizan complementos de WordPress para convertir el archivo HTML en un tema de WordPress. Pinegrow viene como software descargable en versiones para Mac, Windows y Linux. Desde el hermoso editor visual hasta la función de actualización inmediata, el software Pinegro parece una de las mejores opciones para convertir un sitio web HTML completo en un tema de WordPress.

Jekyll

Jekyll es un conversor gratuito de HTML a WordPress que funciona cambiando archivos de texto sin formato en sitios web reales. El proyecto está alojado en GitHub como descarga gratuita. Presenta la oportunidad de eliminar la necesidad de bases de datos y moderación de comentarios en lugar de centrarse en transferir su contenido y transferir / convertir archivos con HTML, CSS y Markdown.

Una parte interesante de Jekyll es que se adapta a diseños HTML orientados a blogs, compilando la configuración de contenido para páginas, publicaciones y enlaces permanentes para migrar su blog y retener, o crear, diseños y categorías personalizados y muchos otros elementos.

Puede instalar el convertidor Jekyll en macOS, Ubuntu, Windows e incluso en otros sistemas operativos Linux. En general, Jekyll es un proyecto voluntario con varios recursos como temas, complementos y guías para poner a prueba sus conocimientos y ayudarlo a convertir un diseño HTML en algo especial.

Nos gustan especialmente las integraciones con herramientas de comercio electrónico como MemberSpace y aplicaciones de formularios como Getform. La lista de integraciones es larga, pero es un verdadero testimonio de cuánto potencial tiene su sitio web después de realizar la conversión de HTML a WordPress.

Coincidencia de temas

Theme Matcher no es tanto un conversor de archivos HTML sino un extractor de archivos HTML de sitios web de terceros. Genera temas de WordPress completos después de pegar una URL de su sitio personal o de un sitio HTML que no es de su propiedad.

La idea detrás de este tipo de convertidor y generador de temas es tomar uno de sus propios sitios HTML y convertirlo en un sitio web completo de WordPress o crear un tema que se base en un diseño que haya notado en otro lugar en línea.

Por ejemplo, puede navegar a su tienda en línea favorita y decidir que le gustaría comenzar su diseño con ese formato y estructura. Theme Matcher genera un tema completamente nuevo para su sitio, que obviamente debe cambiar debido a problemas de derechos de autor, pero sirve como un lugar maravilloso para comenzar.

El proceso funciona copiando y pegando la URL de un sitio en el campo Theme Matcher. Pídale que cree un tema para usted y seleccione el diseño del sitio web para convertirlo en contenido de WordPress. Gran parte de la conversión de HTML a WordPress se realiza en segundo plano aquí, y es importante identificar esas áreas de contenido de WordPress para que sea lo más parecido posible a un tema de WordPress real. Finalmente, puede descargar el tema y subirlo a su CMS de WordPress.

Si su sitio HTML no está activo actualmente y no puede pegar una URL, Theme Matcher proporciona una forma de cargar un archivo zip de su página HTML para luego seguir el mismo proceso.

Importar al blog

El sitio web Import Into Blog es una aplicación en línea que captura el HTML y otros archivos de su sitio web en vivo para convertirlo en un sitio de WordPress. Hay varias opciones disponibles, como crear un Archivo XML descargable para importar a su sitio de WordPress. También puede considerar descargar el resultado final como un tema de WordPress para cargarlo en WordPress y ver el sitio web completo.

La recuperación automática del sitio está disponible con la herramienta ImportIntoBlog. Sin mencionar que todos los enlaces internos se reescriben para que vayan a las páginas correctas de su nuevo sitio web. La gran mayoría del contenido del sitio se descubre automáticamente y puede personalizar el aspecto y el estilo del tema antes de exportarlo. En general, la herramienta funciona mejor con archivos HTML estáticos o una URL. Administra archivos CSS y Javascript y le permite descubrir la historia completa detrás de su sitio web y hacer que funcione correctamente.

Convertidor de HTML a WordPress

El convertidor de HTML a WordPress es otra solución que toma un sitio web HTML y lo transforma en un tema de WordPress.

Hay un campo para pegar en la URL de un sitio web y hacer clic en un botón Generar tema. Usted elige el contenido y las áreas de la barra lateral de WordPress para que sus páginas y publicaciones terminen en las ubicaciones correctas y obtenga los datos exactos necesarios del sitio web HTML anterior. Parece que todo su contenido debería realizar la transferencia. Sin embargo, es posible que deba verificar sus fotos y otros elementos multimedia y completar la carga ocasional a través de WordPress.

Esto produce un tema y no un sitio web completo. Debe activar su propio sitio de WordPress y alojarlo en otro lugar. Descarga el tema de esta herramienta, un tema que se ve exactamente como el sitio web HTML de antes. Tenga en cuenta que algunos elementos no funcionarán como los tenía originalmente, pero hace un trabajo maravilloso al mantener la estructura y el formato de su sitio a partir de nuestras pruebas.

Aparentemente, los desarrolladores de la herramienta Conversor de HTML a WordPress también brindan ajustes de CSS gratuitos si algo no sale como lo deseaba.

Analizador de DOM HTML simple PHP

PHP Simple HTML DOM Parser completa un proceso necesario al cargar un archivo HTML en WordPress. El analizador interviene como una forma de localizar, extraer y cambiar cualquier elemento HTML en su sitio web o en un archivo HTML. De esta manera, puede identificar errores, corregirlos antes de convertirlos a un sitio de WordPress o incluso utilizar la herramienta para modificar los elementos HTML que existen en su sitio web actual de WordPress.

Esta es una descarga gratuita del sitio web de SourceForge, por lo que puede consultar las reseñas y solicitar asistencia si es necesario.

Contratación de un desarrollador

WP Geeks, WP Online Support y Acclaim brindan servicios de conversión de HTML a WordPress a un precio razonable para aquellos que no quieren meterse en completar una conversión ellos mismos o una de las herramientas automatizadas de arriba no produce resultados sólidos. La razón por la que contratar a un desarrollador tiene tanto sentido a veces es que podría terminar ahorrando tiempo y dinero en el proceso, especialmente si es un trabajo fácil que simplemente no tiene el conocimiento para completar.

Asociarse con un desarrollador real significa que no tiene que utilizar ninguna de sus propias habilidades técnicas, o la falta de habilidades técnicas, para representar un nuevo sitio web a partir de los archivos HTML. El trabajo se delega a personas que saben lo que están haciendo, y es mucho más probable que pueda encontrar la ayuda adecuada y hacer preguntas y solicitudes en comparación con una aplicación web que podría tener algunos desarrolladores que podrían ayudar. usted.

Sin mencionar que esto le permite solicitar qué función le gustaría mantener en el nuevo sitio web. Y es casi una garantía de que las acciones del sitio web realmente se transferirán y funcionarán como deberían.

Entendemos que contratar a un desarrollador de HTML para WordPress no siempre está dentro del presupuesto, pero vale la pena pensarlo si tiene problemas y tiene un poco de dinero para gastar.

Cómo convertir HTML a WordPress con una aplicación o complemento automatizado

Si tiene preguntas sobre el uso de uno de los convertidores automatizados de HTML a WordPress enumerados anteriormente, aquí hay un ejemplo con WP Site Importer. Esta es una de las soluciones de mayor reputación, y es un complemento de WordPress de terceros que reúne muchas de las características de otros convertidores automatizados de HTML a WordPress.

Para comenzar, descargue, instale y active el complemento WP Site Importer en su panel de WordPress. Debe descargar el archivo zip del sitio web del desarrollador y registrarse para la prueba gratuita. También hay planes premium a considerar. Haga clic aquí si tiene alguna pregunta sobre la instalación de un complemento de WordPress.

El complemento WP Site Importer ofrece una colección de herramientas de importación para páginas individuales y publicaciones, junto con sitios web completos y los elementos adicionales necesarios para completar el trabajo, como la localización de imágenes y la modificación de enlaces internos.

Para este ejemplo, analizaremos la mayoría de las funciones, comenzando con una sola página HTML. En el panel de WordPress, vaya a Importador de sitios> Importar una sola página.

La gran mayoría de las configuraciones predeterminadas en el complemento están listas para funcionar, lo que significa que normalmente no tiene que cambiar nada. A menos, por supuesto, que desee modificar cosas como importar una página como una publicación o eliminar imágenes destacadas. Siéntase libre de desplazarse por todas las configuraciones de complementos para asegurarse de que se ajusten a sus necesidades.

Todo lo que tiene que hacer para las importaciones de una sola página es pegar la URL para que el complemento escanee.

Nota: Las cargas de archivos solo están disponibles para conversiones de varias páginas.

Haga clic en el Importar página para continuar.

El complemento le dice qué fue exitoso y proporciona varios enlaces para obtener una vista previa de las nuevas páginas de WordPress y editarlas si es necesario.

También querrá transferir cualquier menú en el sitio web HTML estático.

Ir Importador del sitio> Importar menús para eso.

Importar un menú es similar a la conversión de archivos, ya que solicita la URL. También puede configurar elementos como la densidad del menú y el tamaño mínimo del menú.

Haga clic en Menú de identificación para proceder.

Cada elemento del menú aparece ahora en una lista. También debería ver varios menús si tenía más de uno en su sitio HTML.

Marque los menús que le gustaría importar y asigne un nombre a cada uno de ellos. Haga clic en el Menú Importar botón.

Con las importaciones del menú de WordPress, aún debe configurar la ubicación del menú.

En el panel, navegue hasta Apariencia> Menús.

Nombra y crea un menú y guárdalo en WordPress. Ya debería ver el menú importado si todo funcionó según lo planeado.

Haga clic en el Administrar ubicaciones pestaña y busque el menú importado en el menú desplegable. Debe colocar ese nuevo menú en la ubicación del menú que elija.

Asegúrate de Guardar cambios cuando termines.

Otra parte de la importación de un sitio HTML a WordPress es la localización de imágenes. Para completar este proceso, vaya a Importador del sitio> Localizar imágenes.

Todas las configuraciones predeterminadas para la localización de imágenes suelen estar bien para usar.

Haga clic en el próximo botón.

Verá una lista de las imágenes que se transfieren desde el sitio web anterior.

Seleccione los que desea localizar y haga clic en el próximo botón.

En segundos, el complemento agrega cada imagen a su biblioteca de medios de WordPress, dándoles todas las URL en el nuevo sitio web. Puede ir a la Biblioteca de medios para asegurarse de que se haya producido esta transición.

Otra parte de una conversión HTML implica la actualización de sus enlaces internos. Todas las transferencias de sitios web suelen dar como resultado enlaces rotos y problemas con el Estructuras de URL.

Necesitamos arreglar esto, así que ve a Importador del sitio> Actualizar enlaces internos Para empezar.

La siguiente página explica cómo los enlaces más antiguos serán reemplazados por versiones del nuevo dominio del sitio web, agregando subdirectorios para una experiencia de usuario fluida que reside en la URL del sitio de WordPress.

Todo lo que tiene que hacer es hacer clic en el botón Actualizar enlaces. El complemento hace todas las conversiones por ti.

Si planea convertir un sitio web HTML completo (en lugar de una página), navegue a la Importar varias páginas pestaña debajo de la Importador del sitio menú.

Esta también es una opción maravillosa para aquellos interesados ​​en cargar archivos de sitios locales en lugar de copiarlos en una URL en vivo.

La Asistente para varias páginas tiene campos para pegar en una URL y cargar archivos HTML del sitio web.

Elija lo que sea mejor para su trabajo.

A medida que el sitio HTML se convierte e importa, verá una lista de URL extraídas de su sitio web de WordPress. Puede eliminar algunas de las páginas de la importación si no las necesita. También tiene opciones para importar a publicaciones, configurarlas como no publicadas e incluir la imagen destacada.

El paso final revela la lista completa de páginas web convertidas desde el sitio HTML a su sistema WordPress. Ahora puede hacer clic en el Editar o Avance botón de cada página para seguir personalizando su sitio web.

Recuerde, una conversión como esta no significa que verá inmediatamente el diseño exacto de su sitio web HTML. Puede que tenga que importar una hoja de estilo o incluso un código personalizado del sitio web o de las páginas usted mismo.

Ya sea que tenga un sitio HTML antiguo y lo ejecute en un CMS de WordPress ✅ o necesite un lugar para almacenar o compartir un archivo HTML y WordPress es la solución perfecta ✅, esta guía le enseñará cómo realizar fácilmente la transición desde HTML 👉 WordPressHaz clic para tuitear

Resumen

Pasar de HTML a WordPress requiere un poco de trabajo. Pero vale la pena el desafío. Una carga de HTML a WordPress también puede ayudar a tareas menos complicadas, como verificar la propiedad de su sitio o implementar un módulo HTML simple.

Las posibilidades son abundantes cuando se trata de conversiones y cargas de archivos HTML. Solo recuerde que normalmente puede completar gran parte del trabajo con un convertidor HTML automático. Después de eso, lo más probable es que haya trabajo manual involucrado, pero con la combinación de las herramientas y el conocimiento adecuados, ¡puede duplicar casi cualquier sitio web HTML que desee!

Si tiene alguna pregunta sobre la carga de archivos HTML en WordPress o la conversión de HTML a sitios web de WordPress, háganoslo saber en la sección de comentarios a continuación.