La subida y conversión de HTML a WordPress se realiza por una gran variedad de razones. Es posible que quieras convertir un sitio HTML estático y antiguo, y ejecutarlo en el sistema de gestión de contenidos de WordPress. También existe la posibilidad de que simplemente necesites un lugar para almacenar o compartir un archivo HTML, y WordPress ofrece una solución viable para ambos casos.
El cambio de HTML a WordPress a menudo resulta intimidante o improductivo. Estamos aquí para guiarte a través del proceso para asegurarte de que aprendes las herramientas necesarias para convertir archivos HTML y completar una conversión por tu cuenta.
HTML es un lenguaje de marcado sencillo, y WordPress, aunque potente y repleto de características, es bastante sencillo e intuitivo. Por lo tanto, la conversión entre HTML y WordPress tampoco debería parecer una tarea difícil.
Sigue leyendo para saber más sobre las conversiones de HTML básico a WordPress, junto con situaciones reales en las que puedes considerar este cambio.
Las Razones Principales Para Subir o Convertir HTML a WordPress
Si te preguntas por qué puedes convertir o subir HTML a WordPress en primer lugar, echa un vistazo a los siguientes ejemplos para entender las razones para completar una tarea como esta.
- Convierte un viejo sitio web HTML para que funcione en el sistema WordPress. Tal vez el viejo diseño es uno de tus favoritos o simplemente no quieres pasar por el trabajo de rediseño. Esto también es importante para conservar tu imagen de marca.
- Convierte una sola página web o entrada de blog en HTML y publícala en tu sitio actual de WordPress. Esto es particularmente útil si tu tema actual no tiene un diseño de página personalizado que quieras.
- Cambia una plantilla de sitio web HTML a un formato de tema que pueda instalarse en WordPress.
- Sube un archivo de verificación HTML que demuestre las propiedades de tu sitio web a un motor de búsqueda u otro servicio.
- Guarda un archivo HTML en tu sitio web para utilizarlo más tarde.
- Genera un enlace a ese archivo para poder compartirlo o para que los usuarios lo descarguen en sus propios ordenadores.
- Genera un componente de diseño HTML en una página o entrada de WordPress, como una caja de autor personalizada o un formulario de suscripción por correo electrónico.
- Combina tu tema de WordPress con un diseño de sitio web en HTML que hayas encontrado en Internet, pero al que no tengas acceso.
Como puedes ver, las razones para añadir un archivo HTML a WordPress varían en función de tus objetivos. A veces el proceso es bastante sencillo, como subir un archivo HTML a una entrada o página del 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 ser completados, como la transferencia del 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 subir un archivo HTML a WordPress), y luego pasaremos a los requisitos más profundos para duplicar o convertir sitios web HTML completos para que funcionen en el sistema WordPress.
Por último, hablaremos de los pros y los contras de los convertidores automáticos de HTML y de las herramientas disponibles en el mercado.
Sigue leyendo para empezar a subir o convertir tu primer HTML a WordPress
Cómo Subir un Archivo HTML a WordPress
El primer paso para aprender a convertir un archivo HTML en una página o sitio web completo de WordPress es ver cómo funciona el proceso de subida de archivos HTML.
Dirígete a esta guía para ver en profundidad cómo subir un archivo HTML a WordPress.
A continuación, te ofreceremos un rápido resumen de este proceso para asegurarte de que vas por el buen camino, ya que pasamos a otros pasos más adelante en este artículo.
Existen tres métodos para subir un archivo HTML a WordPress:
- A través del panel de control de WordPress.
- Con un cliente FTP.
- Usando cPanel.
Subir un archivo HTML al panel de control de WordPress se hace en la Biblioteca de Medios. Cubriremos algunas de las rutas a seguir en los tutoriales a continuación, pero ten en cuenta que subir un archivo a través del panel de control de WordPress se puede hacer en una página, post, o directamente a través de la Biblioteca de Medios.
Un cliente FTP (como FileZilla) enlaza con los archivos vivos de tu sitio WordPress, junto con los archivos de tu ordenador. Esto te permite transferir archivos locales a los archivos del sitio alojado, siempre que inicies sesión en el cliente FTP con tus credenciales de alojamiento SFTP.
Por último, un cPanel de alojamiento ofrece acceso a un administrador de archivos en línea. Funciona de forma muy parecida a un cliente FTP, dándote el control de los mismos archivos. La principal diferencia es que el cPanel es una aplicación web en línea, que requiere que cargues tus archivos en el 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 subir los archivos HTML más pequeños que deseas almacenar o compartir a través del panel de control 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 es que un Cliente FTP/SFTP proporciona una increíble cantidad de control sobre los archivos de tu sitio y puedes transferir cualquier cosa, desde archivos multimedia hasta carpetas HTML directamente desde tu ordenador.
Cómo Añadir Código HTML a una Página o Entrada de WordPress
Existen varios métodos para subir un archivo HTML directamente a una entrada o página de WordPress. El primero es el proceso de subir un archivo HTML zip o TXT como elemento multimedia. Este método funciona de forma similar a la subida de una imagen al gestor de medios, excepto que lo haces a través de una página o entrada, y es un archivo HTML en lugar de una foto.
Puedes completar este método para tener un enlace para que la gente descargue el archivo HTML o para que tu mismo accedas al archivo en el backend de tu sitio.
Otra opción es pegar un bloque HTML en una página o entrada para añadir algunos elementos de diseño. Por ejemplo, es posible que tengas un formulario de registro personalizado hecho solo para esa página que te gustaría insertar con un poco de HTML.
Ambos métodos tienen propósitos y procesos diferentes para lograr los resultados finales.
Para subir un archivo HTML a una entrada o página, sigue estos pasos.
Dirígete a Páginas > Todas las páginas en el panel de control de WordPress. Si quieres empezar con una página en blanco, ve a Páginas > Añadir nueva.
Elige la página en la que deseas cargar el archivo HTML. También puedes hacer clic en el botón Añadir nuevo si estás haciendo una página nueva.
Estos pasos son prácticamente los mismos para añadir archivos HTML a las entradas de WordPress. Simplemente estamos explicando cómo hacerlo con una página de WordPress. Si quieres usar una entrada en su lugar, ve a Entradas > Todas las entradas o Entradas > Añadir nueva.
Esta parte depende de si utilizas el editor de bloques de Gutenberg o el editor clásico de WordPress.
En Gutenberg, puedes encontrar el botón del signo + y hacer clic en él para buscar un nuevo bloque de construcción visual. Busca el bloque Archivo, que puedes escribir en el campo de búsqueda o desplazarte por la lista de bloques para localizarlo.
Selecciona el bloque Archivo para colocarlo en tu página o publicación.
Nota: Si estás usando el Editor Clásico de WordPress, simplemente haz clic en el botón Añadir Medios y sube tu archivo HTML usando eso. Eso creará un enlace a tu archivo para que la gente lo descargue en el frontend de tu sitio.
Para el bloque de Gutenberg, el módulo Archivo debería mostrar un botón de carga. Haz clic en el botón Subir y localiza el archivo HTML deseado en tu ordenador. Normalmente se almacenan como archivos TXT, colecciones de archivos TXT en una carpeta o en archivos ZIP.
Una vez cargado en tu sitio web, el archivo se revela como un enlace. Cualquier usuario puede entrar en tu sitio web y hacer clic en el enlace de esa página o entrada para ver el archivo HTML e incluso descargarlo en su propio ordenador.
Además, ese archivo se almacena en tu biblioteca de medios, por lo que puedes ir a la biblioteca para obtener la URL del archivo en cualquier momento y colocarlo donde quieras. También puedes usar WordPress como almacén para el archivo.
Si solo deseas almacenar el archivo en WordPress y no tener un enlace descargable para que todos tus usuarios hagan clic, simplemente elimina el enlace creado en la página o la entrada.
Es posible que veas un error que te indica que el tipo de archivo no está permitido por razones de seguridad. Esto es bastante común, así que echa un vistazo a esta guía para eliminar ese error y permitir la mayoría de los tipos de archivos en tu biblioteca multimedia de WordPress. En general, el proceso implica editar tu archivo wp-config.php o utilizar un plugin para eliminar el error.
Añadir Código HTML al Diseño de Tu Página o Entrada
Como mencioné anteriormente, una de las razones por las que se puede considerar la adición de un archivo HTML a una página o post es para hacer un diseño simple en esa página o post.
El método anterior es más bien para almacenar archivos HTML en WordPress y añadir un enlace para que la gente los descargue.
Esta es una solución más funcional, ya que tienes la oportunidad de copiar y pegar o hacer tu propio código HTML para cosas como formularios, cajas de autor, banners y más.
Ve a la página o a la entrada de tu elección y elige la sección en la que quieres colocar el trozo de código HTML.
Haz clic en el signo + para ver la selección de bloques. Encuentra el bloque HTML personalizado escribiéndolo en el campo de búsqueda o desplazándose por la lista de bloques.
Elige el bloque de HTML personalizado para insertarlo en la página o la publicación.
Ese bloque proporciona un campo de código simple y en blanco para que pegues o escribas, cualquier código HTML que tengas disponible.
Voy a pegar un formulario de contacto sencillo con un campo de correo electrónico y un botón de envío para este tutorial en particular.
Una vez que tengas el código HTML en el bloque, haz clic en el botón Actualizar o Publicar para que se muestre en el frontend de tu página o post.
Si vas al frontend de la página o del post, HTML debería hacer su trabajo y revelar cualquier diseño o funcionalidad que estabas intentando añadir al diseño.
En este caso, puedes ver el formulario donde pido un correo electrónico y también tengo un botón de envío.
El proceso y el resultado no son muy diferentes en el editor clásico de WordPress, excepto que no utilizarás un bloque de Gutenberg de arrastrar y soltar. En su lugar, navega a la pestaña de Texto en tu editor (en lugar de la pestaña Visual) y pega el código HTML donde quieras que aparezca en la página.
Cómo Subir un Archivo de Verificación HTML a WordPress
Otra razón por la que puedes querer subir el HTML a WordPress es por 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 tu sitio y optimizar tu contenido con la ayuda de análisis e informes que verifican los problemas y las soluciones para esos problemas.
Sin embargo, Google no puede asumir que tú siendo el propietario de un sitio web al azar 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 debes subir a tu sitio web. Solo el propietario del sitio debe tener acceso a los archivos del sitio web, por lo que Google utiliza esto como una forma de asegurarse de que no estás tratando de controlar las herramientas para webmasters de otra persona.
A continuación, el archivo de verificación HTML subido envía un mensaje a Google indicando que el archivo se ha añadido a ese dominio y que efectivamente eres tú, el propietario.
Es prudente aprender a subir un archivo de verificación HTML, ya que Google y los motores de búsqueda no son los únicos servicios que te piden que verifiques tu identidad o propiedad con archivos de este tipo. Algunos plugins, directorios y complementos de terceros también quieren asegurarse de que no eres un intruso.
Razones para Subir un Archivo de Verificación HTML
- Para verificar que tienes un sitio web para las herramientas de optimización de motores de búsqueda.
- Demostrar la propiedad para ciertos directorios en línea.
- Si necesitas enlazar con una integración o un plugin de terceros, tienes que averiguar si realmente mantienes la propiedad de tu sitio.
Como puedes ver, este archivo HTML puede provenir de diferentes fuentes. Normalmente no tienes que saber nada sobre el contenido del archivo HTML, sino solo que se utiliza para enviar ese pingback al servicio para indicar que tienes el control sobre los archivos del sitio.
Dicho esto, nuestra demostración de cómo subir un archivo de verificación HTML a WordPress incluirá la Consola de Búsqueda de Google, ya que es una de las maneras más comunes para utilizar un archivo de verificación.
Para empezar, registra tu sitio web en Google. Para ello, dirígete a la herramienta Google Search Console. Haz clic en el botón Iniciar ahora y accede a tu cuenta de Google o registra una cuenta en Google.
Una vez que hayas accedido a Google Search Console, es posible que veas una lista de propiedades que has administrado o probado en el pasado. Por otro lado, también puede pasar que veas ver una lista vacía.
En cualquier caso, dirígete a la pestaña de búsqueda de propiedades en la esquina superior izquierda del panel de control.
En el menú desplegable, selecciona la opción Añadir propiedad para avanzar. Eso te permite añadir tu sitio web como una propiedad administrada en Google Search Console.
La siguiente ventana emergente te pide que selecciones un tipo de propiedad. La opción de Dominio te permite verificar todas las URL en todos los subdominios. Esa es a menudo la forma más fácil de verificar una página, pero requiere la verificación de DNS – que se encuentra en tu cuenta de alojamiento.
Sin embargo, en este momento estamos hablando de la carga de archivos HTML, por lo que vamos a ver la opción del prefijo de la URL, que es un método más antiguo, pero todavía fiable, para verificar que tú eres el dueño de un sitio web. Además, este método ayuda a identificar URL específicas bajo la dirección introducida.
Por lo tanto, toma la URL desde tu sitio web y pégala en el campo Prefijo de URL.
Haz clic en el botón Continuar.
Ahora Google Search Console te pide que verifiques la propiedad del sitio web.
Hay otros métodos de verificación, pero este es el que utiliza una carga de archivos HTML.
Haz clic en el botón que te pide que descargues el archivo.
Guarda ese archivo HTML en tu ordenador en una carpeta que recuerdes.
El siguiente paso es subir el archivo al sitio web de WordPress que has pegado antes en Google Search Console.
Como se ha mencionado anteriormente, hay tres opciones para subir un archivo HTML a WordPress.
El primer método, subir a través del panel de control, es definitivamente una opción viable. Mucha gente todavía se desvía cuando aparece un error común para subir un archivo HTML a la Biblioteca de Medios. Debido a esto, a menudo es más rápido hacer tus subidas con un cliente FTP. Sin embargo, si planeas subir a través del panel de control de WordPress, y ves el error «Lo sentimos, este tipo de archivo no está permitido», utiliza esta guía para solucionar el problema.
Ahora tienes las otras dos soluciones: usar un cliente FTP/SFTP o subir al cPanel desde tu cuenta de hosting.
El cPanel no es una mala opción para algunos hosts, pero de nuevo, Kinsta no ofrece un cPanel. Por lo tanto, nos centraremos principalmente en subir el archivo HTML a través de un cliente FTP/SFTP. Los pasos detallados se describen en el artículo enlazado arriba, pero aquí tienes un resumen rápido para guiarte en el camino.
Para empezar, descarga FileZilla en tu ordenador. También puedes probar otros clientes FTP/SFTP.
Nota: te recomendamos que hagas una copia de seguridad de tu sitio web antes de este proceso. Es poco común que se produzcan problemas con un sitio mientras se transfieren archivos a través de FTP/SFTP, pero es absolutamente posible. No querrás que tu sitio se caiga o pierda datos, así que crea una copia de seguridad del sitio.
Abre el cliente FTP/SFTP e introduce tus credenciales FTP/SFTP para conectarte al host web.
Las credenciales requeridas son las siguientes:
- Host
- Nombre de usuario
- Contraseña
- Puerto
¿Dónde se encuentran las credenciales de tu sitio de WordPress?
Normalmente se encuentran en el panel de control de tu alojamiento, por lo que puedes ponerte en contacto con tu host o buscarlos por ti mismo.
Kinsta tiene una ruta fácil para localizar las credenciales FTP/SFTP yendo a la pestaña Sitios en tu panel de de control Kinsta y seleccionando tu sitio web deseado.
En la pestaña Información, busca el área SFTP/SSH. Copia las credenciales correspondientes en el cliente FTP/SFTP.
Por ejemplo, puedes ver los Hosts, Nombre de Usuario, Contraseña y Puerto, todos ellos bien organizados en Kinsta.
Pega esos elementos en el cliente FTP/SFTP y haz clic en el botón Quickconnect.
Si ves un error, lo más probable es que sea porque FileZilla utiliza por defecto el protocolo FTP y no el protocolo SFTP. Para solucionarlo, ve a Archivo > Administrador de sitios. Añade un nuevo sitio en FileZilla y selecciona SFTP. Pega las credenciales de alojamiento en esa zona e intenta conectarte de nuevo.
Después de conectarte a tu host, todos los archivos del sitio de WordPress aparecen para ser modificados.
Localiza el archivo raíz de tu sitio, que contiene carpetas como wp-content y wp-admin.
Busca el archivo de verificación HTML (en este caso, le he cambiado el nombre para encontrarlo más fácilmente) en el área que muestra los archivos de tu ordenador. Por ejemplo, puede que lo veas en Descargas si es ahí donde van tus descargas de internet.
Arrastra ese archivo al archivo raíz de tu sitio web. Todo esto se hace en el cliente FTP/SFTP.
La subida del archivo solo debería tardar unos segundos.
Una vez que esté en los archivos de tu sitio, puedes volver a la página de verificación de Google y comprobar si se está registrando que tú eres el propietario del sitio. Debería aparecer un mensaje de éxito en Google Search Console, y se abrirán varias funciones para que puedas optimizar y analizar la salud de tu sitio web.
Convertir Manualmente un Sitio HTML Completo a WordPress
Para convertir un sitio HTML a WordPress, puedes utilizar un plugin/app, convertir manualmente tus archivos o utilizar un tema hijo y transferir los archivos HTML a ese tema hijo.
Lo primero es convertir manualmente ese HTML para hacer un tema de WordPress.
Algunos dicen que es el más desalentador de los métodos, pero otros lo prefieren, ya que obtienes el control total del proceso y no tienes que depender de aplicaciones o plugins que a veces pueden ser poco fiables. Sigue los siguientes pasos para completar la conversión de un sitio HTML a WordPress de forma manual.
Crea una Carpeta para Tu Tema y Añade los Archivos del Tema Estándar
En tu ordenador, crea una carpeta para guardar todos los archivos básicos de tu tema. Llama a la carpeta como quieras, preferiblemente dándole un nombre que puedas recordar.
Crea los siguientes archivos temáticos básicos:
- style.css
- index.php
- header.php
- barra lateral.php
- pie de página.php
Siéntete libre de abrirlos en tu editor de código o de texto, ya que los editará en el futuro. A partir de ahora, no hay necesidad de añadir ningún código a los archivos. Simplemente déjalos en la carpeta.
Nota: Puedes empezar por crearlos como archivos TXT. Si luego cambias la extensión del archivo – como de .txt a .php o de .txt a .css- tu ordenador lo ajusta automáticamente al formato de archivo correcto. Por ejemplo, al añadir la extensión .css, el archivo se convierte en una hoja de estilo en cascada.
Transfiere el CSS Actual de Tu Sitio WordPress a la Nueva Carpeta
Ya deberías tener un tema instalado en tu sitio actual de WordPress. Si no es así, sigue adelante e instala un tema para ayudarte con esta parte.
Utilizarás el CSS del tema actual como base, construyendo sobre él en el archivo style.css con los archivos de tu sitio HTML.
Por lo tanto, copia la cabecera de la hoja de estilos de tu sitio de WordPress en el nuevo archivo style.css.
Debería ser algo así:
/*
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 utilizado tiene el tema Twenty Seventeen. Si estás usando un tema diferente, verás algunas variaciones en la cabecera de la hoja de estilos.
Ahora es el momento de sustituir los elementos del antiguo tema por información sobre el nuevo.
Para ello, intercambia lo siguiente:
- Nombre del tema: Siéntete libre de llamar a tu tema cualquier cosa, pero no es una mala idea nombrarlo igual que tu carpeta de temas.
- URI del tema – Puedes utilizar la URL principal de tu sitio para esto.
- Autor – Escribe aquí tu nombre, o el nombre que quieras utilizar.
- URI del autor – Haz que sea un enlace a tu página de inicio.
- Descripción – Puedes hacer una descripción de tu tema para mostrar en el backend de tu sitio de WordPress.
Deja todo lo demás como está. La mayoría de los otros elementos como la Licencia y las Etiquetas son solo para sí planeas publicar el nuevo tema en el Directorio de Temas de WordPress.
Recuerda que lo que acabas de pegar y editar es la cabecera de tu tema.
Encuentra el CSS existente de tu sitio web HTML. Copia y pega este CSS después de la cabecera en el nuevo archivo style.css.
Guarda y cierra el archivo style.css.
Toma Tu HTML Actual y divídelo en Trozos
Por lo general, WordPress utiliza PHP para extraer elementos como archivos y código, y medios de comunicación de tu base de datos. Por lo tanto, un sitio web HTML necesita ser troceado en archivos PHP separados para mezclarse con la infraestructura de WordPress.
Esto puede sonar intimidante, pero todo lo que se requiere es dividir tu documento HTML en varias partes, convirtiendo cada una de esas partes en archivos PHP.
Cada archivo HTML tendrá un aspecto diferente, pero ayuda a tener un ejemplo visual. Por lo tanto, vamos a mostrar algunas plantillas de sitios web HTML para demostrar.
El siguiente código es una gran opción para cruzar con tu propio archivo HTML. Se trata de una página web HTML sencilla con una cabecera, elementos de menú, subtítulos, una barra lateral y un pie de página. Puedes encontrar un código similar en tu propio archivo index.html.
<!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="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 tus propias estrategias.
Como puedes ver, el archivo index.html de éste es un poco más complicado pero sigue siendo familiar en la forma en que está estructurado.
Ambos ejemplos incluyen cabeceras, áreas de contenido, barras laterales y pies de página.
Lo más probable es que tengas un diseño diferente. Por ello, tendrás que modificar los pasos que se indican a continuación.
Cada paso que avanzas implica editar y añadir a cada uno de los nuevos archivos de WordPress que has creado antes. Dicho esto, mantén abierto el archivo index.html de tu sitio HTML. Lo utilizarás en el futuro.
El Archivo header.php
En tu archivo HTML abierto, busca todo al principio del archivo y que termine con el área de contenido principal. El área de contenido principal suele representarse con una etiqueta <div class="main"> o <main>.
Copia y pega esta sección del archivo HTML en tu nuevo archivo header.php.
Después de eso, busca donde dice </head>.
Justo antes de eso, pega lo siguiente:
<?php wp_head();?>
Este fragmento de código es importante para que la mayoría de los plugins de WordPress funcionen.
El Archivo sidebar.php
Busca la sección <aside> en tu archivo index.html.
Todo lo que hay dentro de las etiquetas <aside> y </aside>, incluyendo esas mismas etiquetas aside, deben copiarse en el nuevo archivo sidebar.php.
Desde nuestro archivo de ejemplo, se ve algo así:
<aside>
<h3>Sidebar here</h3>
<p>Etiam ullam corper lorem dapibus velit suscipit ultrices. </p>
</aside>El Archivo footer.php
Si tienes un sitio web HTML sencillo, es posible que solo tengas que transferir la información del pie de página. Otros sitios son un poco más complicados. En cualquier caso, no es mala idea terminar con la modificación del pie de página, ya que es uno de los elementos básicos que componen los archivos del sitio de WordPress.
En el archivo index.html, busca y copia todo el código después de la etiqueta </aside>(la barra lateral).
Una vez más, es posible que tengas más contenido después de la sección de la barra lateral, pero es posible para los sitios HTML más simples, solo tener que lidiar con el pie de página.
En nuestro ejemplo, el pie de página tiene el siguiente aspecto:
</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 el código del pie de página en el nuevo archivo footer.php, añade el fragmento <?php wp_footer();?>justo antes del paréntesis </body>. Esto ayuda a que el pie de página funcione correctamente con WordPress.
Puedes ver un ejemplo del código <?php wp_footer();?> 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úrate de guardar todos estos nuevos archivos en la carpeta de tu tema. Por ejemplo, después de pegar este código de pie de página en el archivo footer.php, debes hacer clic en el botón Guardar de tu editor y cerrarlo.
Ahora que los archivos básicos están hechos, cierra el archivo original index.html de tu sitio web HTML.
Conecta Tus Archivos header.php e index.php a WordPress
Ya lo has añadido al archivo header.php, pero todavía tienes que realizar acciones adicionales. Esencialmente, quieres modificar la llamada en la hoja de estilos desde el HTML que está allí ahora mismo al formato estándar de WordPress PHP.
De vuelta en el archivo header.php, encuentra la sección <head>.
Buscamos la llamada a la hoja de estilos. Es algo así:
<link rel="stylesheet" href="style.css">Elimina esta llamada y sustitúyela por la siguiente:
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/style.css" type="text/css" media="all" />Eso es todo lo que tienes que hacer al archivo header.php. La llamada a la hoja de estilos ahora funciona con el formato de WordPress, no con el HTML.
Continúa y guarda y cierra el archivo header.php.
A continuación, abre el archivo index.php (no el archivo index.html que estaba utilizando antes, sino el nuevo archivo index.php).
En este momento, el archivo index.php está vacío.
Toma el siguiente código y cópialo y pégalo en el nuevo archivo index.php. Deja el espacio entre las dos primeras líneas. Eso está ahí por una razón, que verás pronto.
Estas líneas actúan como llamadas a otros archivos de tu sitio, incluyendo 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 El Bucle, o un proceso dinámico en WordPress que se ejecuta en segundo plano para añadir nuevas entradas a tu sitio. Esencialmente, está permitiendo a WordPress saber que hay más contenido por venir y que debe usar El Bucle para añadir ese contenido. Aprende más sobre The Loop aquí.
Para añadir El Bucle, pega el siguiente código en el espacio que has dejado antes en el archivo index.php (justo debajo de <?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; ?>El resultado debería ser el siguiente:
<?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(); ?>Sigue adelante y guarda el archivo index.php. También puedes cerrar el archivo ahora.
Una vez hecho esto, un tema de WordPress basado en tu sitio web HTML original está listo para cargarlo en WordPress.
Subir el Nuevo Tema a WordPress
El último paso es subir el tema a tu sitio de WordPress. Una opción es simplemente comprimir la carpeta del sitio y subirla a la sección de temas de WordPress sin añadir una captura de pantalla de tu sitio como referencia.
Aunque tu tema sigue funcionando de la misma manera sin una captura de pantalla de referencia, te recomendamos crear una captura de pantalla para que te resulte más fácil organizar tus temas y entender cuál está realmente activo en tu sitio web.
Por captura de pantalla, nos referimos a la pequeña vista previa que aparece para todos los temas instalados en tu panel de control de WordPress. Incluso los que no están activos tienen capturas de pantalla. Es un requisito tener una captura de pantalla si planeas subir tu tema a la biblioteca de temas de WordPress.
Puede que no subas tu tema públicamente, pero una captura de pantalla ayuda a la gestión de tu propio tema. Como puedes ver, es bastante difícil saber cómo es el tema si no hay una vista previa de la captura de pantalla disponible. El tema Twenty Seventeen Child no tiene una captura de pantalla, por lo que es solo una imagen en blanco. Podría confundir a muchos en el futuro.
Para añadir una captura de pantalla, abre el antiguo sitio HTML en un navegador y haz una captura de pantalla de la página de inicio con cualquier herramienta de recorte o software de captura de pantalla que tengas disponible.
Abre tu programa de edición de imágenes favorito y recorta la captura de pantalla a 880×660 píxeles. Esto asegurará que la captura de pantalla no se estire ni se desproporcione cuando se añada a WordPress.
Guarda la versión editada de la captura de pantalla en la carpeta de tu nuevo tema. No tiene que ir en ninguna carpeta especial – simplemente colócalo en la carpeta del tema junto a los otros archivos como header.php y footer.php.
Ahora, tiene dos opciones para subir el nuevo tema de WordPress a WordPress.
La primera es arrastrando esos archivos a la carpeta wp-content/themes vía FTP. Si sigues esta ruta, no hay necesidad de comprimir el archivo. Simplemente utiliza un cliente FTP como FileZilla y arrastra la carpeta normal a la carpeta wp-content/themes.
La otra opción es subir una versión comprimida al panel de control de WordPress.
Para empezar, comprime toda la carpeta del tema en un archivo zip.
A continuación, en el panel de control de WordPress, dirígete a Apariencia > Temas.
Haz clic en el botón Añadir nuevo.
Selecciona el botón Subir tema.
Haz clic en Elegir archivo y busca el archivo comprimido en tu ordenador. Selecciona el archivo para que aparezca en el panel de control de WordPress.
Haz clic en Instalar ahora para procesar el archivo en WordPress.
WordPress debería indicarte que el paquete se está instalando y que se instaló con éxito.
Haz clic en el botón Activar para finalizar el trabajo.
Ahora el tema, con tu captura de pantalla, aparece en la lista de Temas como el tema Activo. Puedes ir al frontend de tu sitio de WordPress para ver ahora una versión de WordPress de tu sitio web HTML original.
Ten en cuenta que ninguna conversión de HTML a WordPress es igual. Es posible que la tuya sea un poco más compleja de lo que acabamos de ver. En general, es necesario realizar otras acciones para obtener un duplicado exacto de su sitio web en HTML.
Por ejemplo, tendrás que añadir áreas de widgets y comentarios e incluso ajustar el título y la descripción de tu blog para que sean modificables en WordPress.
El cambio de un sitio HTML a un sitio WordPress conlleva mucho trabajo manual, 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 la adición de contenido como entradas e imágenes. Esto se puede hacer manualmente subiendo imágenes a la biblioteca de medios y ajustando elementos como las estructuras de URL.
Existen algunos plugins para automatizar la importación de contenidos, pero la mayoría de ellos no están actualizados con las nuevas versiones de WordPress. Por lo tanto, te sugerimos que los pruebes para ver si te funcionan, pero no esperes mucho.
Conversión de HTML a WordPress a través de un Tema Hijo
Este es sin duda uno de los métodos más fáciles para convertir un sitio web HTML completo en un sitio WordPress. Funciona utilizando cualquiera de los temas gratuitos de WordPress ya existentes en línea, por lo que puedes elegir tu favorito y combinarlo con el diseño de tu sitio HTML.
En general, se utiliza el tema de WordPress ya creado como tema padre. Luego, el sitio web HTML se convierte para trabajar con WordPress y se vincula al tema padre como tema hijo. Si tienes preguntas sobre los temas padre e hijo, lee nuestra guía sobre el tema aquí.
Como explicación rápida, el tema padre gestiona la funcionalidad de tu sitio mientras que el tema hijo se construye sobre el tema padre. El tema principal podría ser técnicamente independiente, pero el tema secundario no. Por lo tanto, utilizamos el tema hijo para modificar el diseño del tema padre, conservando la potente funcionalidad que ya ofrece el tema padre.
A continuación se explica cómo pasar de HTML a WordPress mediante un tema hijo.
Elige un Tema Padre
Lo primero que hay que hacer es seleccionar un tema que te guste. El tema que decidas funcionará como tu tema principal, y lo utilizarás como base del diseño de tu sitio web.
Lo ideal es que localices un tema que ya se acerque en diseño al aspecto de tu antiguo sitio HTML. Otra opción es utilizar un framework de WordPress o un tema de inicio, ya que ambos tipos de temas ya se utilizan como base 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 por defecto que llevan el nombre del año en que fueron creados. Te recomendamos ir hacia atrás en los años (Twenty Nineteen, Twenty Seventeen, etc.) para ver si alguno de ellos encaja mejor con el diseño de tu sitio HTML.
Para este tutorial utilizaremos el tema Twenty Seventeen debido a su limpieza y a su capacidad para adaptarse a muchos diseños web HTML sencillos.
En cualquier caso, todos estos temas sirven como magníficos puntos de partida.
Para empezar, instala el tema en tu sitio web de WordPress.
Puedes activar el tema si quieres, pero más tarde activarás un nuevo tema hijo y solo utilizarás el tema inicial como base para el diseño.
Crear una Nueva Carpeta
Todos los temas de WordPress requieren carpetas para almacenar los archivos de tu sitio. Por lo tanto, debes hacer una nueva carpeta para el tema hijo que se está creando desde el sitio HTML.
Te recomendamos nombrar la carpeta como el tema principal y añadir «-child» al final del nombre de la carpeta.
Por ejemplo, en este caso llamaremos a la carpeta «twentyseventeen-child».
En general, cualquier nombre servirá, siempre y cuando puedas recordar el nombre de la carpeta y no le añadas ningún espacio.
Configura Tu hoja de Estilo
Todos los temas hijos requieren hojas de estilo que van en la carpeta del tema.
Por lo tanto, haz un documento de texto y llámalo style.css. Guárdalo en la carpeta del tema e incluye 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úrate de reemplazar los elementos que son personalizados para tu sitio. Potencialmente necesitarás modificar cosas como el Nombre del Tema, el URI del Tema, el Autor, la Plantilla y algunos otros elementos para asegurarte de que coinciden con tus propios nombres de archivo. Es similar a algunos de los pasos en la sección anterior llamada «Convertir manualmente un sitio HTML completo a WordPress», explicando lo que significa cada fila.
La más importante es la etiqueta Template. Esta debe tener el mismo nombre que el tema padre para que el tema hijo funcione correctamente.
Crea un Archivo functions.php
Si solo utilizáramos la hoja de estilo para el sitio, y activaríamos el tema hijo, tendríamos un sitio HTML sin ningún tipo de estilo. Sin embargo, también queremos añadir estilo al tema hijo para que tenga el aspecto que queremos.
Todo el estilo será extraído del tema principal.
Por lo tanto, se necesita un archivo functions.php para heredar los estilos del padre al tema hijo.
Cree un archivo llamado functions.php en la carpeta de su tema.
Para activar el archivo, añade una etiqueta PHP de apertura, junto con el código que pide a WordPress que utilice 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' );Otra ventaja de este trozo de código es que permite ajustar el diseño del sitio web con el tema hijo.
Activar el nuevo tema infantil
Ahora es el momento de activar el tema hijo.
Una forma de activar el tema hijo es añadir la carpeta al archivo wp/content/themes en tus archivos de WordPress. Esto se haría utilizando un cliente FTP/SFTP.
También puedes comprimir la carpeta y subir el tema en Apariencia > Temas > Añadir nuevo.
Selecciona el botón Subir tema.
Haz clic en Elegir archivo y localiza el archivo zip del tema hijo en tu ordenador.
Una vez cargado, haz clic en el botón Instalar ahora.
Haz clic en el botón Activar.
Ahora deberías ver el tema infantil Twenty Seventeen (o el tema que hayas utilizado) activado como tema principal.
Independientemente del método que utilices para activar el tema hijo, tu sitio web de WordPress debe ser un reflejo del tema padre. En otras palabras, es un duplicado exacto del tema padre.
Nota: Es posible añadir una captura de pantalla a tu nuevo tema en lugar de no tener ninguna vista previa. Cubrimos cómo añadir una captura de pantalla al tema en una de las secciones anteriores llamada «Convertir manualmente un sitio HTML completo a WordPress».
Añadir Archivos HTML
El objetivo es hacer un sitio que se parezca a tu sitio web HTML original, no al tema principal.
Por lo tanto, el último paso consiste en copiar el contenido de tu sitio web en HTML a tu nuevo sitio web en WordPress. La mayoría de las veces, tendrás que realizar estos pasos manualmente. Ya lo hemos mencionado antes, pero hay algunos plugins que automatizan el proceso de transferencia de contenidos. Sin embargo, esos plugins no están actualizados con las nuevas versiones de WordPress, así que utilízalos bajo tu propio riesgo.
¿Qué es un Conversor de HTML a WordPress? (¿Y Cuáles Son las Opciones?)
Un conversor de HTML a WordPress toma los pasos mencionados anteriormente y los simplifica o completa la tarea por ti. Puedes considerar una herramienta de conversión de HTML a WordPress si no tienes tiempo o experiencia para hacer la conversión manualmente.
Los convertidores vienen en muchos estilos diferentes, pero es importante recordar que no todos ellos son alternativas razonables a hacer 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.
- Plugins de WordPress.
- Desarrolladores humanos reales.
Al mirar las opciones de conversión, el software/las aplicaciones de terceros parecen razonables para trabajos sencillos. Puedes tomar un archivo zip de los archivos HTML de tu sitio web y subirlos al conversor. La mayoría de las herramientas de terceros disponibles funcionan como aplicaciones en línea, por lo que solo tienes que abrirlas en tu navegador y hacer clic en el botón Cargar.
Nos gustan estas aplicaciones para conversiones menos complicadas. Si tienes un sitio web HTML básico y quieres ejecutarlo en WordPress, esto puede servir, pero no se garantiza una transición fluida.
En cuanto a los plugins de WordPress que convierten HTML para WordPress, te será difícil encontrar plugins que tomen un sitio web HTML completo y conviertan los archivos para WordPress. Había algunos plugins disponibles, pero ninguno de ellos está actualizado para funcionar con las nuevas versiones de WordPress, y no querrás usar un plugin obsoleto.
Sin embargo, algunos plugins proporcionan las características necesarias para la carga de archivos básicos que pueden hacer que sea más fácil que una transferencia FTP o que el lío con el backend de tu cuenta de alojamiento. En general, muchos de los plugins solo permiten la subida 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 para ti al pedir ayuda de expertos y tener una persona que complete el trabajo. En general, la contratación de un desarrollador humano para convertir tu sitio web HTML ofrece la menor probabilidad de que te encuentres con problemas, y tienes a alguien con quien hablar si algo va mal.
Las Mejores Opciones de Plugins de Conversión de HTML a WordPress y Otras Herramientas
Como se ha mencionado, los convertidores de HTML a WordPress vienen en muchas configuraciones diferentes. No vas a encontrar muchos plugins designados para WordPress que no estén anticuados o que ya no funcionen. Sin embargo, tenemos algunos plugins convertidores favoritos que completan tareas de conversión más pequeñas, junto con aplicaciones web y opciones de desarrollo manual que resultan útiles para trabajos de conversión de HTML a WordPress más avanzados.
Ventajas y Desventajas de Utilizar un Plugin o Aplicación de Conversión Automática de HTML a WordPress
Un convertidor automático de HTML a WordPress parece una bendición para algunos, pero no siempre es la mejor solución. Echa un vistazo a los pros y los contras a continuación antes de comprometerte con una aplicación o un plugin hecho para duplicar o convertir HTML.
Pros
- Elimina la necesidad de crear tus propios archivos para el sitio web, a menudo generándolos por ti.
- Muchos de los conversores te dan opciones para dividir los elementos HTML y elegir cuáles irán en los archivos adecuados para WordPress.
- Puedes crear un tema a partir de HTML antiguo y utilizarlo 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 tuyo, proporcionando un punto de partida para un diseño que te guste.
Cons
- A menudo, aún queda trabajo manual para transferir contenidos como entradas de blog y fotos.
- Lo más probable es que tengas que ingeniártelas para transferir manualmente los enlaces del sitio antiguo.
- Estos convertidores no siempre se mantienen actualizados. Uno de los mejores convertidores era un plugin de WordPress, pero no lo sugerimos en este artículo porque 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 ya conoces las ventajas y los inconvenientes de los conversores automáticos de HTML, vamos a echar un vistazo a nuestras aplicaciones y plugins de conversores automáticos favoritos.
WP Site Importer
Aunque la herramienta WP Site Importer extrae e importa todo tipo de contenido y archivos de sitios web antiguos o de terceros, puedes apostar que uno de esos elementos implica HTML. En resumen, el Importador de Sitios WP te permite convertir cualquier sitio en uno de WordPress, extrayendo contenido como imágenes, menús y páginas del sitio HTML y archivos del sitio. WP Site Importer arregla los enlaces rotos para que no tengas que ajustarlos o añadir nuevos manualmente. Incluso conserva la información de SEO construida desde el sitio anterior, incluyendo meta descripciones y palabras clave.
El importador te ahorra tiempo y dinero al eliminar los costes de un desarrollador y hacer que esta conversión de HTML y contenido sea un proceso de un solo clic. Además, limpia tu HTML, limpiando y reformateando el HTML de origen. Esto hace que tus archivos HTML sean más compatibles con WordPress y muestra a Google que estás trabajando con un código limpio, impulsando a su vez tu SEO.
La herramienta WP Site Importer funciona como un plugin directo de WordPress, por lo que puedes descargar el plugin y activar sus características directamente desde el panel de control.
WP All Import
El plugin 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 plugin te permite migrar el contenido de un sitio web anterior o un sitio web de demostración potencial construido con HTML simple o algunos archivos HTML que te gustaría duplicar y llevar a la nueva página web de WordPress.
La conversión se produce en cuestión de cuatro pasos, y tienes acceso a una hermosa interfaz de arrastrar y soltar para gestionar sus conversiones e importaciones. Lo que también es interesante sobre el plugin WP All Import es que maneja las importaciones de URL desde sitios web externos. Por lo tanto, ni siquiera tienes que tener una contraseña o control sobre un sitio para transferir esos pocos archivos y potencialmente renderizar elementos en WordPress desde ese sitio.
Una conversión completa del sitio web puede resultar desalentadora con este plugin, pero vale la pena intentarlo, especialmente si se trata de un simple archivo HTML. Lo que es más, es que el plugin soporta conversiones HTML para elementos como productos de WooCommerce y páginas de WordPress. Hay una versión premium disponible para funciones más avanzadas, sobre todo el soporte al cliente premium que te permite pedir ayuda al hacer estas conversiones.
HTMLtoWordPress.io
La aplicación online HTMLtoWordPress.io es una de las soluciones más populares para convertir un archivo HTML a WordPress. Lo interesante de la herramienta HTMLtoWordPress.io es que ofrece principalmente conversiones para sitios web completos, sitios web construidos con HTML.
Todo lo que tienes que hacer es acceder a la página de inicio y subir tu archivo HTML zip para una rápida conversión. La aplicación web automatiza completamente la conversión de HTML a WordPress, por lo que no se requieren conocimientos de codificación ni hay que complicarse con un cliente FTP.
También puedes ver una vista previa completa de tu nuevo sitio de WordPress antes de completar el proceso y publicarlo en Internet. El contenido y las imágenes de tu sitio también se conservan para el nuevo sitio web de WordPress. Son editables 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 tienes uno o varios sitios web HTML que necesitan ser convertidos. Como ventaja, puedes añadir clases a tu HTML para utilizar funciones avanzadas de WordPress.
Pinegrow Theme Converter for WordPress
El convertidor de temas de Pinegrow es una herramienta de diseño web única para tomar una carpeta de sitio web HTML y convertirla instantáneamente en un tema completo de WordPress. El convertidor de temas carga tus archivos y presenta una vista previa del sitio de WordPress en una interfaz visual. Tras la carga, puedes hacer clic en diferentes elementos de las páginas y asignar acciones inteligentes a cada elemento. Estas se integran con WordPress, de modo que mientras asignas acciones, añade las características adecuadas de WordPress a tu estructura y estilo HTML personalizado.
Una vez que hayas decidido las acciones deseadas y hayas guardado los archivos, Pinegrow tiene una opción para exportar el proyecto en archivos PHP estándar de WordPress, que pueden subirse a una instalación normal de WordPress para probarlo en la vida real. Además, el sistema de importación de contenidos asegura que se transfieran con éxito los elementos multimedia como imágenes y vídeos.
Disfrutamos especialmente de las funciones que te permiten volver a Pinegrow y hacer modificaciones. Todo lo que tienes que hacer es pulsar el botón Actualizar y enviar la nueva versión a tu tema de WordPress sin necesidad de realizar cambios avanzados en la codificación o ajustar el sitio web en WordPress.
Esto no es un plugin. De hecho, no se utilizan plugins de WordPress para convertir el archivo HTML en un tema de WordPress. Pinegrow viene como un software descargable en versiones para Mac, Windows y Linux. Desde el hermoso editor visual hasta la función de actualización inmediata, el software Pinegrow 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 transformando archivos de texto plano en verdaderos sitios web. El proyecto está alojado en GitHub como descarga gratuita. Presenta la oportunidad de eliminar la necesidad de bases de datos y la moderación de comentarios en lugar de centrarse en la transferencia de tu contenido y la transferencia/conversión de archivos con HTML, CSS y markdown.
Una parte interesante de Jekyll es que atiende a los diseños HTML orientados a los blogs, recopilando la configuración del contenido de las páginas, las entradas y los enlaces permanentes para migrar tu blog y conservar, o crear, diseños y categorías personalizados y muchos otros elementos.
Puedes instalar el convertidor de Jekyll en macOS, Ubuntu, Windows e incluso en otros sistemas operativos de Linux. En definitiva, Jekyll es un proyecto voluntario con varios recursos como temas, plugins y guías para poner a prueba tus conocimientos y ayudarte 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 todo el potencial que tienes con tu sitio web después de hacer la conversión de HTML a WordPress.
Theme Matcher
Theme Matcher no es tanto un convertidor de archivos HTML como un extractor de archivos HTML de sitios web de terceros. Genera temas de WordPress completos después de pegar una URL de tu sitio personal o de un sitio HTML que no posee.
La idea detrás de este tipo de convertidor y generador de temas es tomar uno de tus propios sitios HTML y convertirlo en un sitio web completo de WordPress o hacer un tema que se basa en un diseño que has visto en otro lugar en línea.
Por ejemplo, podrías navegar a tu tienda online favorita y decidir que te gustaría empezar tu diseño con ese formato y estructura. El Theme Matcher genera un tema completamente nuevo para tu sitio, que obviamente debe ser modificado por cuestiones de derechos de autor, pero sirve como un maravilloso punto de partida.
El proceso funciona copiando y pegando la URL de un sitio en el campo Theme Matcher. Pídele que cree un tema para ti y selecciona 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, y es importante identificar las áreas de contenido de WordPress para que sea lo más parecido a un tema real de WordPress. Finalmente, puedes descargar el tema y subirlo a tu CMS de WordPress.
Si tu sitio HTML no está actualmente activo, y no puedes pegar una URL, el Theme Matcher proporciona una manera de cargar un archivo zip de su página HTML para luego recorrer el mismo proceso.
Import Into Blog
El sitio web Import Into Blog es una aplicación en línea que toma el HTML y otros archivos de tu sitio web en vivo para convertirlo en un sitio de WordPress. Hay varias opciones disponibles, como la creación de un archivo XML descargable para importar a tu sitio de WordPress. También puedes considerar la posibilidad de descargar el resultado final como un tema de WordPress para subirlo a WordPress y ver el sitio web terminado.
La recuperación automática del sitio está disponible con la herramienta ImportIntoBlog. Por no hablar de que todos los enlaces internos se reescriben para que vayan a las páginas correctas de tu nuevo sitio web. La gran mayoría del contenido del sitio se descubre automáticamente, y puedes 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. Gestiona los archivos CSS y Javascript y te permite averiguar la historia completa de tu sitio web y hacer que funcione correctamente.
HTML to WordPress Converter
El HTML to WordPress Converter es otra solución que toma un sitio web HTML y lo transforma en un tema de WordPress.
Hay un campo para pegar la URL de un sitio web y hacer clic en el botón Generar tema. Eliges el contenido y las áreas de la barra lateral de WordPress para que tus páginas y entradas terminen en las ubicaciones correctas, y estás sacando los datos necesarios exactos del sitio web HTML anterior. Parece que todo el contenido debería ser transferido. Sin embargo, es posible que tengas que volver a comprobar tus fotos y otros elementos multimedia y completar la carga ocasional a través de WordPress.
Este crea un tema y no un sitio web completo. Tienes que activar tu propio sitio de WordPress y alojarlo en otro lugar. Descargarás el tema de esta herramienta, un tema que se ve exactamente como el sitio web HTML de antes. Ten en cuenta que algunos elementos no funcionarán como los tenías originalmente, pero hace un magnífico trabajo manteniendo la estructura y el formato de tu sitio desde nuestras pruebas.
Aparentemente, los desarrolladores de la herramienta HTML to WordPress Converter también ofrecen ajustes gratuitos de CSS si algo no sale como querías.
PHP Simple HTML DOM Parser
El PHP Simple HTML DOM Parser completa un proceso necesario cuando se sube un archivo HTML a WordPress. El Parser interviene como una forma de localizar, extraer y cambiar cualquier elemento HTML en tu sitio web o en un archivo HTML. De esta manera, puedes identificar errores, corregirlos antes de convertirlos a un sitio de WordPress, o incluso utilizar la herramienta para modificar los elementos HTML que existen en tu sitio web actual de WordPress.
Se trata de una descarga gratuita desde el sitio web de SourceForge, por lo que puedes consultar las reseñas y solicitar asistencia si es necesario.
Contratación de un Desarrollador
WP Geeks, WP Online Support y Acclaim ofrecen servicios de conversión de HTML a WordPress a precios razonables para aquellos que no quieren complicarse con la conversión por sí 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ías terminar ahorrando tiempo y dinero en el proceso, especialmente si es un trabajo fácil que simplemente no tienes el conocimiento para completar.
Asociarte con un desarrollador real significa que no tienes que utilizar ninguno de tus propios conocimientos técnicos -o la falta de ellos- para crear un nuevo sitio web a partir de los archivos HTML. El trabajo se delega a personas que saben lo que hacen, y es mucho más probable que puedas encontrar la ayuda adecuada y hacer preguntas y peticiones en comparación con una aplicación web que podría tener algunos desarrolladores que podrían ayudarte.
Por no mencionar que esto te permite solicitar qué característica te gustaría mantener en el nuevo sitio web. Y es casi una garantía de que las acciones del sitio web se transferirán y funcionarán como deberían.
Entendemos que contratar a un desarrollador de HTML a WordPress no siempre cabe en el presupuesto, pero vale la pena pensarlo si tienes problemas y tienes un poco de dinero para gastar.
Cómo Convertir HTML a WordPress con una Aplicación o Plugin Automatizado
Si tienes dudas sobre el uso de uno de los convertidores automatizados de HTML a WordPress mencionados anteriormente, aquí tienes un ejemplo con el WP Site Importer. Esta es una de las soluciones más reputadas, y es un plugin de WordPress de terceros que reúne muchas de las características de otros convertidores automatizados de HTML a WordPress.
Para empezar, descarga, instala y activa el plugin WP Site Importer en tu panel de control de WordPress. Debes descargar el archivo zip desde el sitio web del desarrollador e inscribirte en la prueba gratuita. También hay planes premium a considerar. Haz clic aquí si tiene alguna pregunta sobre la instalación de un plugin de WordPress.
El plugin WP Site Importer ofrece una colección de herramientas de importación para páginas y entradas individuales, 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, recorreremos la mayoría de las funciones, empezando por una sola página HTML. En el panel de control de WordPress, dirígete a Importador de sitios > Importar una sola página.
La gran mayoría de los ajustes por defecto del plugin están listos para funcionar, lo que significa que normalmente no tienes que cambiar nada. A menos, por supuesto, que quieras modificar cosas como importar una página como una entrada, o eliminar las imágenes destacadas. Siéntete libre de desplazarte a través de todos los ajustes del plugin para asegurarte de que se ajustan a tus necesidades.
Todo lo que tienes que hacer para las importaciones de una sola página es pegar la URL para que el plugin la escanee.
Nota: La subida de archivos solo está disponible para las conversiones de varias páginas.
Haz clic en el botón Importar página para continuar.
El plugin te indica lo que se ha conseguido y proporciona varios enlaces para previsualizar las nuevas páginas de WordPress y editarlas si es necesario.
También querrás transferir los menús del sitio web HTML estático.
Para ello, dirígete a Importador de sitios > Importar menús.
La importación de un menú es similar a la conversión de archivos, ya que pide la URL. También puede establecer elementos como la densidad del menú y el tamaño mínimo del mismo.
Haz clic en el menú de identificación para continuar.
Cada elemento del menú aparece ahora en una lista. También deberías ver varios menús si tenía más de uno en tu sitio HTML.
Marca los menús que deseas importar y nombra a cada uno de ellos. Haz clic en el botón Importar menú.
Con las importaciones de menús de WordPress, todavía tienes que configurar la ubicación del menú.
En el panel de control, dirígete a Apariencia > Menús.
Nombra y crea un menú y guárdalo en WordPress. Ya deberías ver el menú importado si todo ha funcionado como estaba previsto.
Haz clic en la pestaña Gestionar ubicaciones y busca el menú importado en el menú desplegable. Debes colocar ese nuevo menú en la ubicación de menú que elijas.
Asegúrate de guardar los cambios cuando hayas terminado.
Otra parte de la importación de un sitio HTML a WordPress es la localización de las imágenes. Para completar este proceso, vaya a Importador de sitios > Localizar imágenes.
Todos los ajustes por defecto para la localización de la imagen son normalmente buenos para usar.
Haz clic en el botón Siguiente.
Verás una lista de las imágenes que se transfieren desde el sitio web anterior.
Selecciona los que deseas localizar y haz clic en el botón Siguiente.
En cuestión de segundos, el plugin añade cada imagen a tu biblioteca multimedia de WordPress, dándoles todas las URL en el nuevo sitio web. Podrás ir a la biblioteca de medios para asegurarse de que esta transición se produjo.
Otra parte de la conversión a HTML consiste en actualizar los enlaces internos. Todas las transferencias de sitios web suelen dar lugar a enlaces rotos y problemas con las estructuras de las URL.
Tenemos que arreglarlas, así que dirígete a Importador de sitios > Actualizar enlaces internos para empezar.
En la siguiente página se explica cómo se sustituirán los enlaces antiguos por versiones del nuevo dominio del sitio web, añadiendo subdirectorios para una experiencia de usuario fluida que reside en la URL del sitio de WordPress.
Todo lo que tienes que hacer es pulsar el botón de Actualizar Enlaces. El plugin hace todas las conversiones por ti.
Si tienes previsto convertir un sitio web HTML completo (en lugar de una página), ve a la pestaña Importar varias páginas del menú Importador de sitios.
Esta es también una maravillosa opción para aquellos interesados en cargar archivos locales del sitio en lugar de copiar en una URL en vivo.
El asistente de páginas múltiples tiene campos para pegar una URL y cargar archivos HTML del sitio web.
Elige el que mejor se adapte a tu trabajo.
A medida que el sitio HTML se convierta y se importe, verás una lista de URL que se han introducido en tu sitio web de WordPress. Puedes eliminar algunas de las páginas de la importación si no las necesitas. También tienes opciones para importar a las entradas, establecerlas como no publicadas e incluir la imagen destacada.
El último paso revela la lista completa de páginas web convertidas desde el sitio HTML a su sistema WordPress. Ahora puede hacer clic en el botón Editar o Vista Previa de cada página para seguir personalizando su sitio web.
Recuerda que una conversión de este tipo no significa que vaya a ver inmediatamente el diseño exacto de tu sitio web en HTML. Puede que tengas que importar una hoja de estilos o incluso personalizar el código del sitio web o de las páginas tú mismo.
Resumen
Pasar de HTML a WordPress requiere un poco de trabajo. Pero el reto merece la pena. Una subida de HTML a WordPress también puede ayudar en tareas menos complicadas, como la verificación de la propiedad de tu sitio o la implementación de un módulo HTML sencillo.
Las posibilidades son abundantes cuando se trata de subir y convertir archivos HTML. Solo recuerda que normalmente puedes completar gran parte del trabajo con un conversor de HTML automatizado. Después de eso, lo más probable es que haya trabajo manual, pero con la combinación de las herramientas y los conocimientos adecuados, puedes duplicar casi cualquier sitio web HTML que desees.
Si tienes alguna pregunta sobre la subida de archivos HTML a WordPress o la conversión de sitios web HTML a WordPress, háznoslo saber en la sección de comentarios más abajo.
Salman Ravoof es desarrollador web autodidacta, escritor, creador y un gran admirador del Software Libre y de Código Abierto (FOSS, Free and Open Source Software). Además de la tecnología, le apasionan la ciencia, la filosofía, la fotografía, las artes, los gatos y la comida. Obtén más información sobre él en su sitio web, y conecta con Salman en X.
Deja una respuesta