{"id":39940,"date":"2021-02-25T14:52:58","date_gmt":"2021-02-25T13:52:58","guid":{"rendered":"https:\/\/kinsta.com\/?p=83776"},"modified":"2025-02-14T13:02:47","modified_gmt":"2025-02-14T12:02:47","slug":"html-a-wordpress","status":"publish","type":"post","link":"https:\/\/kinsta.com\/es\/blog\/html-a-wordpress\/","title":{"rendered":"De HTML a WordPress: Una Gu\u00eda Detallada para Subir y Convertir HTML"},"content":{"rendered":"<p>La subida y conversi\u00f3n de HTML a WordPress se realiza por una gran variedad de razones. Es posible que quieras convertir un <a href=\"https:\/\/kinsta.com\/es\/blog\/wordpress-vs-html-estatico\/\">sitio HTML est\u00e1tico<\/a> y antiguo, y ejecutarlo en el sistema de gesti\u00f3n de contenidos de WordPress. Tambi\u00e9n existe la posibilidad de que simplemente necesites un <a href=\"https:\/\/kinsta.com\/es\/docs\/facturacion\/planes-de-alojamiento-wordpress\/excesos\/#disk-space-addon\">lugar para almacenar<\/a> o compartir un archivo HTML, y WordPress ofrece una soluci\u00f3n viable para ambos casos.<\/p>\n<p>El cambio de HTML a WordPress a menudo resulta intimidante o improductivo. Estamos aqu\u00ed para guiarte a trav\u00e9s del proceso para asegurarte de que aprendes las herramientas necesarias para convertir archivos HTML y completar una conversi\u00f3n por tu cuenta.<\/p>\n<p>HTML es un lenguaje de marcado sencillo, y WordPress, aunque potente y <a href=\"https:\/\/kinsta.com\/es\/blog\/por-que-usar-wordpress\/\">repleto de caracter\u00edsticas<\/a>, es bastante sencillo e intuitivo. Por lo tanto, la conversi\u00f3n entre HTML y WordPress tampoco deber\u00eda parecer una tarea dif\u00edcil.<\/p>\n<p>Sigue leyendo para saber m\u00e1s sobre las conversiones de HTML b\u00e1sico a WordPress, junto con situaciones reales en las que puedes considerar este cambio.<\/p>\n<div><\/div><kinsta-auto-toc heading=\"Table of Contents\" exclude=\"last\" list-style=\"arrow\" selector=\"h2\" count-number=\"-1\"><\/kinsta-auto-toc>\n<h2>Las Razones Principales Para Subir o Convertir HTML a WordPress<\/h2>\n<p>Si te preguntas por qu\u00e9 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.<\/p>\n<ul>\n<li>Convierte un viejo sitio web HTML para que funcione en el sistema WordPress. Tal vez el viejo dise\u00f1o es uno de tus favoritos o simplemente no quieres pasar por el trabajo de redise\u00f1o. Esto tambi\u00e9n es importante para conservar tu <a href=\"https:\/\/kinsta.com\/es\/blog\/ejemplos-de-sitios-wordpress\/\">imagen de marca<\/a>.<\/li>\n<li>Convierte una sola p\u00e1gina web o entrada de blog en HTML y publ\u00edcala en tu sitio actual de WordPress. Esto es particularmente \u00fatil si tu tema actual no tiene un dise\u00f1o de p\u00e1gina personalizado que quieras.<\/li>\n<li>Cambia una plantilla de sitio web HTML a un formato de tema que pueda instalarse en WordPress.<\/li>\n<li>Sube un archivo de verificaci\u00f3n HTML que demuestre las propiedades de tu sitio web a un motor de b\u00fasqueda u otro servicio.<\/li>\n<li>Guarda un archivo HTML en tu sitio web para utilizarlo m\u00e1s tarde.<\/li>\n<li>Genera un enlace a ese archivo para poder compartirlo o para que los usuarios lo descarguen en sus propios ordenadores.<\/li>\n<li>Genera un componente de dise\u00f1o HTML en una p\u00e1gina o entrada de WordPress, como una caja de autor personalizada o un <a href=\"https:\/\/kinsta.com\/es\/blog\/formularios-registro-wordpress\/\">formulario de suscripci\u00f3n por correo electr\u00f3nico<\/a>.<\/li>\n<li>Combina tu tema de WordPress con un dise\u00f1o de sitio web en HTML que hayas encontrado en Internet, pero al que no tengas acceso.<\/li>\n<\/ul>\n<p>Como puedes ver, las razones para a\u00f1adir un archivo HTML a WordPress var\u00edan en funci\u00f3n de tus objetivos. A veces el proceso es bastante sencillo, como subir un archivo HTML a una entrada o p\u00e1gina del blog de WordPress. Otras veces hay un largo proceso de conversi\u00f3n 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.<\/p>\n<p>Para esta gu\u00eda sobre la conversi\u00f3n y carga de HTML a WordPress, comenzaremos con lo b\u00e1sico (c\u00f3mo subir un archivo HTML a WordPress), y luego pasaremos a los requisitos m\u00e1s profundos para duplicar o convertir sitios web HTML completos para que funcionen en el sistema WordPress.<\/p>\n<p>Por \u00faltimo, hablaremos de los pros y los contras de los convertidores autom\u00e1ticos de HTML y de las herramientas disponibles en el mercado.<\/p>\n<p>Sigue leyendo para empezar a subir o convertir tu primer HTML a WordPress<\/p>\n\n<h2>C\u00f3mo Subir un Archivo HTML a WordPress<\/h2>\n<p>El primer paso para aprender a convertir un archivo HTML en una p\u00e1gina o sitio web completo de WordPress es ver c\u00f3mo funciona el proceso de subida de archivos HTML.<\/p>\n<p>Dir\u00edgete a <a href=\"https:\/\/kinsta.com\/es\/blog\/como-subir-un-archivo-html-a-wordpress\/\">esta gu\u00eda para ver en profundidad c\u00f3mo subir un archivo HTML a WordPress<\/a>.<\/p>\n<p>A continuaci\u00f3n, te ofreceremos un r\u00e1pido resumen de este proceso para asegurarte de que vas por el buen camino, ya que pasamos a otros pasos m\u00e1s adelante en este art\u00edculo.<\/p>\n<p>Existen tres m\u00e9todos para subir un archivo HTML a WordPress:<\/p>\n<ol>\n<li>A trav\u00e9s del panel de control de WordPress.<\/li>\n<li>Con un cliente FTP.<\/li>\n<li>Usando cPanel.<\/li>\n<\/ol>\n<p>Subir un archivo HTML al panel de control de <a href=\"https:\/\/kinsta.com\/es\/blog\/dashboard-personalizado-de-wordpress\/\">WordPress<\/a> se hace en la Biblioteca de <a href=\"https:\/\/kinsta.com\/es\/blog\/biblioteca-multimedia-wordpress\/\">Medios<\/a>. Cubriremos algunas de las rutas a seguir en los tutoriales a continuaci\u00f3n, pero ten en cuenta que subir un archivo a trav\u00e9s del panel de control de WordPress se puede hacer en una p\u00e1gina, post, o directamente a trav\u00e9s de la Biblioteca de Medios.<\/p>\n<p>Un cliente <a href=\"https:\/\/kinsta.com\/es\/blog\/mejores-clientes-ftp\/\">FTP<\/a> (como <a href=\"https:\/\/kinsta.com\/es\/blog\/filezilla-mostrar-archivos-ocultos\/\">FileZilla<\/a>) 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\u00f3n en el cliente FTP con tus <a href=\"https:\/\/kinsta.com\/es\/blog\/como-usar-sftp\/\">credenciales de alojamiento SFTP<\/a>.<\/p>\n<p>Por \u00faltimo, un <a href=\"https:\/\/kinsta.com\/es\/blog\/que-es-cpanel\/\">cPanel de alojamiento<\/a> ofrece acceso a un <a href=\"https:\/\/kinsta.com\/es\/blog\/gestor-descargas-wordpress\/\">administrador de archivos en l\u00ednea<\/a>. Funciona de forma muy parecida a un cliente FTP, d\u00e1ndote el control de los mismos archivos. La principal diferencia es que el cPanel es una aplicaci\u00f3n web en l\u00ednea, que requiere que cargues tus archivos en el cPanel en lugar de transferirlos instant\u00e1neamente desde un entorno local a un sitio en vivo en un cliente FTP.<\/p>\n<p>Cada m\u00e9todo tiene sus pros y sus contras. Kinsta Hosting no ofrece una experiencia de cPanel, por lo que es mejor subir los archivos HTML m\u00e1s peque\u00f1os que deseas almacenar o compartir a trav\u00e9s del panel de control de WordPress.<\/p>\n<p>Un cliente FTP\/SFTP es el m\u00e9todo elegido para crear un sitio web completamente nuevo a partir de un sitio web HTML est\u00e1tico. La raz\u00f3n es que un Cliente FTP\/SFTP proporciona una incre\u00edble cantidad de control sobre los archivos de tu sitio y puedes transferir cualquier cosa, desde archivos multimedia hasta carpetas HTML directamente desde tu ordenador.<\/p>\n<h2>C\u00f3mo A\u00f1adir C\u00f3digo HTML a una P\u00e1gina o Entrada de WordPress<\/h2>\n<p>Existen varios m\u00e9todos para subir un archivo HTML directamente a una entrada o p\u00e1gina de WordPress. El primero es el proceso de subir un archivo HTML zip o TXT como elemento multimedia. Este m\u00e9todo funciona de forma similar a la subida de una imagen al gestor de medios, excepto que lo haces a trav\u00e9s de una p\u00e1gina o entrada, y es un archivo HTML en lugar de una foto.<\/p>\n<p>Puedes completar este m\u00e9todo 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.<\/p>\n<p>Otra opci\u00f3n es pegar un bloque HTML en una p\u00e1gina o entrada para a\u00f1adir algunos elementos de dise\u00f1o. Por ejemplo, es posible que tengas un formulario de registro personalizado hecho solo para esa p\u00e1gina que te gustar\u00eda insertar con un poco de HTML.<\/p>\n<p>Ambos m\u00e9todos tienen prop\u00f3sitos y procesos diferentes para lograr los resultados finales.<\/p>\n<p>Para subir un archivo HTML a una entrada o p\u00e1gina, sigue estos pasos.<\/p>\n<p>Dir\u00edgete a <strong>P\u00e1ginas &gt; Todas las p\u00e1ginas <\/strong>en el panel de control de WordPress. Si quieres empezar con una p\u00e1gina en blanco, ve a <strong>P\u00e1ginas &gt;<\/strong> <strong>A\u00f1adir nueva.<\/strong><\/p>\n<figure style=\"width: 934px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/11\/pages-all.png\" alt=\"A\u00f1adir nuevas p\u00e1ginas en WordPress\" width=\"934\" height=\"441\"><figcaption class=\"wp-caption-text\">A\u00f1adir nuevas p\u00e1ginas en WordPress<\/figcaption><\/figure>\n<p>Elige la p\u00e1gina en la que deseas cargar el archivo HTML. Tambi\u00e9n puedes hacer clic en el bot\u00f3n <strong>A\u00f1adir nuevo <\/strong>si est\u00e1s haciendo una p\u00e1gina nueva.<\/p>\n<p>Estos pasos son pr\u00e1cticamente los mismos para a\u00f1adir archivos HTML a las entradas de WordPress. Simplemente estamos explicando c\u00f3mo hacerlo con una p\u00e1gina de WordPress. Si quieres usar una entrada en su lugar, ve a <strong>Entradas &gt; Todas las entradas <\/strong>o<strong> Entradas &gt; A\u00f1adir nueva.<\/strong><\/p>\n<figure style=\"width: 1000px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/11\/about-us.png\" alt=\"P\u00e1gina sobre nosotros en WordPress\" width=\"1000\" height=\"690\"><figcaption class=\"wp-caption-text\">P\u00e1gina sobre nosotros en WordPress<\/figcaption><\/figure>\n<p>Esta parte depende de si utilizas el editor de bloques de Gutenberg o el editor cl\u00e1sico de WordPress.<\/p>\n<p>En Gutenberg, puedes encontrar el bot\u00f3n del signo <strong>+ <\/strong>y hacer clic en \u00e9l para buscar un nuevo bloque de construcci\u00f3n visual. Busca el bloque <strong>Archivo<\/strong>, que puedes escribir en el campo de b\u00fasqueda o desplazarte por la lista de bloques para localizarlo.<\/p>\n<p>Selecciona el bloque Archivo para colocarlo en tu p\u00e1gina o publicaci\u00f3n.<\/p>\n<p><strong>Nota: <\/strong>Si est\u00e1s usando el Editor Cl\u00e1sico de WordPress, simplemente haz clic en el bot\u00f3n <strong>A\u00f1adir Medios <\/strong>y sube tu archivo HTML usando eso. Eso crear\u00e1 un enlace a tu archivo para que la gente lo descargue en el frontend de tu sitio.<\/p>\n<figure style=\"width: 1073px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/11\/file-block.png\" alt=\"A\u00f1adir un m\u00f3dulo \"Archivo\" en WordPress\" width=\"1073\" height=\"676\"><figcaption class=\"wp-caption-text\">A\u00f1adir un m\u00f3dulo \u00abArchivo\u00bb en WordPress<\/figcaption><\/figure>\n<p>Para el bloque de Gutenberg, el m\u00f3dulo <strong>Archivo <\/strong>deber\u00eda mostrar un bot\u00f3n de carga. Haz clic en el bot\u00f3n <strong>Subir <\/strong>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.<\/p>\n<p>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\u00e1gina o entrada para ver el archivo HTML e incluso descargarlo en su propio ordenador.<\/p>\n<p>Adem\u00e1s, 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\u00e9n puedes usar WordPress como almac\u00e9n para el archivo.<\/p>\n<p>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\u00e1gina o la entrada.<\/p>\n<figure style=\"width: 907px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/11\/upload-button-2.png\" alt=\"Bot\u00f3n 'Subir' bajo el bloque 'Archivos' en WordPress\" width=\"907\" height=\"442\"><figcaption class=\"wp-caption-text\">Bot\u00f3n &#8216;Subir&#8217; bajo el bloque &#8216;Archivos&#8217; en WordPress<\/figcaption><\/figure>\n<p>Es posible que veas un error que te indica que el tipo de archivo no est\u00e1 permitido por razones de seguridad. Esto es bastante com\u00fan, as\u00ed que echa <a href=\"https:\/\/kinsta.com\/es\/blog\/lo-siento-este-tipo-archivo-esta-permitido-razones-seguridad\/\">un vistazo a esta gu\u00eda para eliminar ese error<\/a> y permitir la mayor\u00eda de los tipos de archivos en tu biblioteca multimedia de WordPress. En general, el proceso implica editar tu archivo <strong>wp-config.php <\/strong>o utilizar un plugin para eliminar el error.<\/p>\n<figure style=\"width: 927px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/11\/error-card.png\" alt=\"Error de tipo de archivo no v\u00e1lido en WordPress\" width=\"927\" height=\"511\"><figcaption class=\"wp-caption-text\">Error de tipo de archivo no v\u00e1lido en WordPress<\/figcaption><\/figure>\n<h3>A\u00f1adir C\u00f3digo HTML al Dise\u00f1o de Tu P\u00e1gina o Entrada<\/h3>\n<p>Como mencion\u00e9 anteriormente, una de las razones por las que se puede considerar la adici\u00f3n de un archivo HTML a una p\u00e1gina o post es para hacer un dise\u00f1o simple en esa p\u00e1gina o post.<\/p>\n<p>El m\u00e9todo anterior es m\u00e1s bien para almacenar archivos HTML en WordPress y a\u00f1adir un enlace para que la gente los descargue.<\/p>\n<p>Esta es una soluci\u00f3n m\u00e1s funcional, ya que tienes la oportunidad de copiar y pegar o hacer tu propio c\u00f3digo HTML para cosas como formularios, cajas de autor, banners y m\u00e1s.<\/p>\n<p>Ve a la p\u00e1gina o a la entrada de tu elecci\u00f3n y elige la secci\u00f3n en la que quieres colocar el trozo de c\u00f3digo HTML.<\/p>\n<p>Haz clic en el signo <strong>+ <\/strong>para ver la selecci\u00f3n de bloques. Encuentra el bloque HTML personalizado escribi\u00e9ndolo en el campo de b\u00fasqueda o desplaz\u00e1ndose por la lista de bloques.<\/p>\n<p>Elige el bloque de HTML personalizado para insertarlo en la p\u00e1gina o la publicaci\u00f3n.<\/p>\n<figure style=\"width: 1060px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/11\/html-module.png\" alt=\"C\u00f3mo a\u00f1adir un bloque de 'HTML personalizado' en Gutenberg\" width=\"1060\" height=\"688\"><figcaption class=\"wp-caption-text\">C\u00f3mo a\u00f1adir un bloque de &#8216;HTML personalizado&#8217; en Gutenberg<\/figcaption><\/figure>\n<p>Ese bloque proporciona un campo de c\u00f3digo simple y en blanco para que pegues o escribas, cualquier c\u00f3digo HTML que tengas disponible.<\/p>\n<p>Voy a pegar un formulario de contacto sencillo con un campo de correo electr\u00f3nico y un bot\u00f3n de env\u00edo para este tutorial en particular.<\/p>\n<p>Una vez que tengas el c\u00f3digo HTML en el bloque, haz clic en el bot\u00f3n Actualizar o Publicar para que se muestre en el frontend de tu p\u00e1gina o post.<\/p>\n<figure style=\"width: 973px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/11\/free-form-html.png\" alt=\"M\u00f3dulo de HTML a WordPress\" width=\"973\" height=\"517\"><figcaption class=\"wp-caption-text\">M\u00f3dulo de HTML a WordPress<\/figcaption><\/figure>\n<p>Si vas al frontend de la p\u00e1gina o del post, HTML deber\u00eda hacer su trabajo y revelar cualquier dise\u00f1o o funcionalidad que estabas intentando a\u00f1adir al dise\u00f1o.<\/p>\n<p>En este caso, puedes ver el formulario donde pido un correo electr\u00f3nico y tambi\u00e9n tengo un bot\u00f3n de env\u00edo.<\/p>\n<figure style=\"width: 906px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/11\/simple-form-on-frontend.png\" alt=\"La vista frontal del formulario\" width=\"906\" height=\"807\"><figcaption class=\"wp-caption-text\">La vista frontal del formulario<\/figcaption><\/figure>\n<p>El proceso y el resultado no son muy diferentes en el editor cl\u00e1sico de WordPress, excepto que no utilizar\u00e1s un bloque de Gutenberg de arrastrar y soltar. En su lugar, navega a la pesta\u00f1a de Texto en tu editor (en lugar de la pesta\u00f1a Visual) y pega el c\u00f3digo HTML donde quieras que aparezca en la p\u00e1gina.<\/p>\n<h2>C\u00f3mo Subir un Archivo de Verificaci\u00f3n HTML a WordPress<\/h2>\n<p>Otra raz\u00f3n por la que puedes querer subir el HTML a WordPress es por requisitos de optimizaci\u00f3n de b\u00fasqueda. Google, y algunos otros motores de b\u00fasqueda, ofrecen consolas y herramientas para webmasters para ver el rendimiento de tu sitio y optimizar tu contenido con la ayuda de an\u00e1lisis e informes que verifican los problemas y las soluciones para esos problemas.<\/p>\n<p>Sin embargo, Google no puede asumir que t\u00fa siendo el propietario de un sitio web al azar simplemente porque afirmas que lo eres. Ah\u00ed es donde entra en juego un archivo de verificaci\u00f3n HTML.<\/p>\n<p>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\u00e1s tratando de controlar las herramientas para webmasters de otra persona.<\/p>\n<p>A continuaci\u00f3n, el archivo de verificaci\u00f3n HTML subido env\u00eda un mensaje a Google indicando que el archivo se ha a\u00f1adido a ese dominio y que efectivamente eres t\u00fa, el propietario.<\/p>\n<p>Es prudente aprender a subir un archivo de verificaci\u00f3n HTML, ya que Google y los motores de b\u00fasqueda no son los \u00fanicos servicios que te piden que verifiques tu identidad o propiedad con archivos de este tipo. Algunos plugins, directorios y complementos de terceros tambi\u00e9n quieren asegurarse de que no eres un intruso.<\/p>\n<h3>Razones para Subir un Archivo de Verificaci\u00f3n HTML<\/h3>\n<ul>\n<li>Para verificar que tienes un sitio web para las herramientas de optimizaci\u00f3n de motores de b\u00fasqueda.<\/li>\n<li>Demostrar la propiedad para ciertos directorios en l\u00ednea.<\/li>\n<li>Si necesitas enlazar con una integraci\u00f3n o un plugin de terceros, tienes que averiguar si realmente mantienes la propiedad de tu sitio.<\/li>\n<\/ul>\n<p>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.<\/p>\n<p>Dicho esto, nuestra demostraci\u00f3n de c\u00f3mo subir un archivo de verificaci\u00f3n HTML a WordPress incluir\u00e1 la Consola de B\u00fasqueda de Google, ya que es una de las maneras m\u00e1s comunes para utilizar un archivo de verificaci\u00f3n.<\/p>\n<p>Para empezar, registra tu sitio web en Google. Para ello, dir\u00edgete a la <a href=\"https:\/\/kinsta.com\/es\/blog\/google-search-console\/\">herramienta Google Search Console<\/a>. Haz clic en el bot\u00f3n Iniciar ahora y accede a tu cuenta de Google o registra una cuenta en Google.<\/p>\n<figure style=\"width: 900px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/11\/click-the-start-now-button.png\" alt=\"Pulsa \"Empezar ahora\" en Google Search Console\" width=\"900\" height=\"730\"><figcaption class=\"wp-caption-text\">Pulsa \u00abEmpezar ahora\u00bb en Google Search Console<\/figcaption><\/figure>\n<p>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\u00e9n puede pasar que veas ver una lista vac\u00eda.<\/p>\n<p>En cualquier caso, dir\u00edgete a la pesta\u00f1a de b\u00fasqueda de propiedades en la esquina superior izquierda del panel de control.<\/p>\n<p>En el men\u00fa desplegable, selecciona la opci\u00f3n <a href=\"https:\/\/kinsta.com\/es\/blog\/google-search-console\/#step-4--add-your-domain\">A\u00f1adir propiedad<\/a> para avanzar. Eso te permite a\u00f1adir tu sitio web como una propiedad administrada en Google Search Console.<\/p>\n<figure style=\"width: 900px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/11\/add-property.png\" alt=\"A\u00f1adir una propiedad en Google Search Console\" width=\"900\" height=\"458\"><figcaption class=\"wp-caption-text\">A\u00f1adir una propiedad en Google Search Console<\/figcaption><\/figure>\n<p>La siguiente ventana emergente te pide que selecciones un tipo de propiedad. La opci\u00f3n de Dominio te permite verificar todas las URL en todos los subdominios. Esa es a menudo la forma m\u00e1s f\u00e1cil de verificar una p\u00e1gina, pero requiere la verificaci\u00f3n de DNS &#8211; que se encuentra en tu cuenta de alojamiento.<\/p>\n<p>Sin embargo, en este momento estamos hablando de la carga de archivos HTML, por lo que vamos a ver la opci\u00f3n del prefijo de la URL, que es un m\u00e9todo m\u00e1s antiguo, pero todav\u00eda fiable, para verificar que t\u00fa eres el due\u00f1o de un sitio web. Adem\u00e1s, este m\u00e9todo ayuda a identificar URL espec\u00edficas bajo la direcci\u00f3n introducida.<\/p>\n<p>Por lo tanto, toma la URL desde tu sitio web y p\u00e9gala en el campo <strong>Prefijo de URL<\/strong>.<\/p>\n<p>Haz clic en el bot\u00f3n <strong>Continuar<\/strong>.<\/p>\n<figure style=\"width: 900px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/11\/url-prefix.png\" alt=\"Introducci\u00f3n de la URL del sitio en GSC\" width=\"900\" height=\"620\"><figcaption class=\"wp-caption-text\">Introducci\u00f3n de la URL del sitio en GSC<\/figcaption><\/figure>\n<p>Ahora Google Search Console te pide que verifiques la propiedad del sitio web.<\/p>\n<p>Hay otros m\u00e9todos de verificaci\u00f3n, pero este es el que utiliza una carga de archivos HTML.<\/p>\n<p>Haz clic en el bot\u00f3n que te pide que descargues el archivo.<\/p>\n<p>Guarda ese archivo HTML en tu ordenador en una carpeta que recuerdes.<\/p>\n<p>El siguiente paso es subir el archivo al sitio web de WordPress que has pegado antes en Google Search Console.<\/p>\n<figure style=\"width: 900px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/11\/download-the-file.png\" alt=\"Verificaci\u00f3n de la propiedad de los sitios en GSC\" width=\"900\" height=\"706\"><figcaption class=\"wp-caption-text\">Verificaci\u00f3n de la propiedad de los sitios en GSC<\/figcaption><\/figure>\n<p>Como se ha mencionado anteriormente, <a href=\"https:\/\/kinsta.com\/es\/blog\/como-subir-un-archivo-html-a-wordpress\/\">hay tres opciones para subir un archivo HTML a WordPress<\/a>.<\/p>\n<p>El primer m\u00e9todo, subir a trav\u00e9s del panel de control, es definitivamente una opci\u00f3n viable. Mucha gente todav\u00eda se desv\u00eda cuando aparece un error com\u00fan para subir un archivo HTML a la Biblioteca de Medios. Debido a esto, a menudo es m\u00e1s r\u00e1pido hacer tus subidas con un cliente FTP. Sin embargo, si planeas subir a trav\u00e9s del panel de control de WordPress, y ves el error \u00abLo sentimos, este tipo de archivo no est\u00e1 permitido\u00bb, utiliza <a href=\"https:\/\/kinsta.com\/es\/blog\/lo-siento-este-tipo-archivo-esta-permitido-razones-seguridad\/\">esta gu\u00eda para solucionar el problema<\/a>.<\/p>\n<p>Ahora tienes las otras dos soluciones: usar un cliente FTP\/SFTP o subir al cPanel desde tu cuenta de hosting.<\/p>\n<p>El cPanel no es una mala opci\u00f3n para algunos hosts, pero de nuevo, Kinsta no ofrece un cPanel. Por lo tanto, nos centraremos principalmente en subir el archivo HTML a trav\u00e9s de un cliente FTP\/SFTP. Los pasos detallados se describen en el art\u00edculo enlazado arriba, pero aqu\u00ed tienes un resumen r\u00e1pido para guiarte en el camino.<\/p>\n<p>Para empezar, <a href=\"https:\/\/filezilla-project.org\/\">descarga FileZilla<\/a> en tu ordenador. Tambi\u00e9n puedes probar otros <a href=\"https:\/\/kinsta.com\/es\/blog\/mejores-clientes-ftp\/\">clientes FTP\/SFTP<\/a>.<\/p>\n<p><strong>Nota:<\/strong> te recomendamos que hagas una copia de seguridad de tu sitio web antes de este proceso. Es poco com\u00fan que se produzcan problemas con un sitio mientras se transfieren archivos a trav\u00e9s de FTP\/SFTP, pero es absolutamente posible. No querr\u00e1s que tu sitio se caiga o pierda datos, as\u00ed que crea una <a href=\"https:\/\/kinsta.com\/es\/docs\/alojamiento-wordpress\/copias-de-seguridad-wordpress\/#external-backups-addon\">copia de seguridad del sitio<\/a>.<\/p>\n<p><span style=\"font-family: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;font-size: 1rem\">Abre el cliente FTP\/SFTP e introduce tus credenciales FTP\/SFTP para conectarte al host web.<\/span><\/p>\n<figure style=\"width: 1266px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/11\/creds.png\" alt=\"Introduzca sus credenciales SFTP en Filezilla\" width=\"1266\" height=\"899\"><figcaption class=\"wp-caption-text\">Introduce tus credenciales SFTP en Filezilla<\/figcaption><\/figure>\n<p>Las credenciales requeridas son las siguientes:<\/p>\n<ul>\n<li>Host<\/li>\n<li>Nombre de usuario<\/li>\n<li>Contrase\u00f1a<\/li>\n<li>Puerto<\/li>\n<\/ul>\n<p>\u00bfD\u00f3nde se encuentran las credenciales de tu sitio de WordPress?<\/p>\n<p>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.<\/p>\n<p>Kinsta tiene una ruta f\u00e1cil para localizar las credenciales FTP\/SFTP yendo a la pesta\u00f1a Sitios en tu panel de de control Kinsta y seleccionando tu sitio web deseado.<\/p>\n<p>En la pesta\u00f1a Informaci\u00f3n, busca el \u00e1rea SFTP\/SSH. Copia las credenciales correspondientes en el cliente FTP\/SFTP.<\/p>\n<p>Por ejemplo, puedes ver los Hosts, Nombre de Usuario, Contrase\u00f1a y Puerto, todos ellos bien organizados en Kinsta.<\/p>\n<figure id=\"attachment_47945\" aria-describedby=\"caption-attachment-47945\" style=\"width: 2560px\" class=\"wp-caption alignnone\"><a href=\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2021\/02\/mykinsta-stpf.png\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-47945 size-full\" src=\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2021\/02\/mykinsta-stpf.png\" alt=\"Credenciales SFTP en el panel de control MyKinsta\" width=\"2560\" height=\"1600\" srcset=\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2021\/02\/mykinsta-stpf.png 2560w, https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2021\/02\/mykinsta-stpf-300x188.png 300w, https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2021\/02\/mykinsta-stpf-1024x640.png 1024w, https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2021\/02\/mykinsta-stpf-768x480.png 768w, https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2021\/02\/mykinsta-stpf-1536x960.png 1536w, https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2021\/02\/mykinsta-stpf-2048x1280.png 2048w\" sizes=\"auto, (max-width: 2560px) 100vw, 2560px\" \/><\/a><figcaption id=\"caption-attachment-47945\" class=\"wp-caption-text\">Credenciales SFTP en el panel de control MyKinsta<\/figcaption><\/figure>\n<p>Pega esos elementos en el cliente FTP\/SFTP y haz clic en el bot\u00f3n Quickconnect.<\/p>\n<p>Si ves un error, lo m\u00e1s probable es que sea porque FileZilla utiliza por defecto el protocolo FTP y no el protocolo SFTP. Para solucionarlo, ve a <strong>Archivo &gt; Administrador de sitios.<\/strong> A\u00f1ade un nuevo sitio en FileZilla y selecciona SFTP. Pega las credenciales de alojamiento en esa zona e intenta conectarte de nuevo.<\/p>\n<figure style=\"width: 1204px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/the-site-manager.png\" alt=\"El gestor de sitios de HTML a WordPress\" width=\"1204\" height=\"797\"><figcaption class=\"wp-caption-text\">El administrador de sitios de HTML a WordPress<\/figcaption><\/figure>\n<p>Despu\u00e9s de conectarte a tu host, todos los archivos del sitio de WordPress aparecen para ser modificados.<\/p>\n<figure style=\"width: 1215px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/see-the-new-site-files.png\" alt=\"Introduce las credenciales para ver los archivos del nuevo sitio\" width=\"1215\" height=\"805\"><figcaption class=\"wp-caption-text\">Introduce las credenciales para ver los archivos del nuevo sitio<\/figcaption><\/figure>\n<p>Localiza el archivo ra\u00edz de tu sitio, que contiene carpetas como <strong>wp-content <\/strong>y <strong>wp-admin<\/strong>.<\/p>\n<figure style=\"width: 1225px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/the-root.png\" alt=\"Encuentre la carpeta ra\u00edz de su sitio.\" width=\"1225\" height=\"803\"><figcaption class=\"wp-caption-text\">Encuentra la carpeta ra\u00edz de tu sitio.<\/figcaption><\/figure>\n<p>Busca el archivo de verificaci\u00f3n HTML (en este caso, le he cambiado el nombre para encontrarlo m\u00e1s f\u00e1cilmente) en el \u00e1rea que muestra los archivos de tu ordenador. Por ejemplo, puede que lo veas en <strong>Descargas <\/strong>si es ah\u00ed donde van tus descargas de internet.<\/p>\n<p>Arrastra ese archivo al archivo ra\u00edz de tu sitio web. Todo esto se hace en el cliente FTP\/SFTP.<\/p>\n<figure style=\"width: 1205px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/12\/move-it-over.png\" alt=\"Arrastre el archivo para subirlo a su servidor\" width=\"1205\" height=\"815\"><figcaption class=\"wp-caption-text\">Arrastra el archivo para subirlo a tu servidor<\/figcaption><\/figure>\n<p>La subida del archivo solo deber\u00eda tardar unos segundos.<\/p>\n<figure style=\"width: 1195px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/done-2.png\" alt=\"El archivo ya est\u00e1 cargado\" width=\"1195\" height=\"797\"><figcaption class=\"wp-caption-text\">El archivo ya est\u00e1 cargado<\/figcaption><\/figure>\n<p>Una vez que est\u00e9 en los archivos de tu sitio, puedes volver a la p\u00e1gina de verificaci\u00f3n de Google y comprobar si se est\u00e1 registrando que t\u00fa eres el propietario del sitio. Deber\u00eda aparecer un mensaje de \u00e9xito en Google Search Console, y se abrir\u00e1n varias funciones para que puedas optimizar y analizar la salud de tu sitio web.<\/p>\n<h2>Convertir Manualmente un Sitio HTML Completo a WordPress<\/h2>\n<p>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.<\/p>\n<p>Lo primero es convertir manualmente ese HTML para hacer un tema de WordPress.<\/p>\n<p>Algunos dicen que es el m\u00e1s desalentador de los m\u00e9todos, 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\u00f3n de un sitio HTML a WordPress de forma manual.<\/p>\n<h3>Crea una Carpeta para Tu Tema y A\u00f1ade los Archivos del Tema Est\u00e1ndar<\/h3>\n<p>En tu ordenador, crea una carpeta para guardar todos los archivos b\u00e1sicos de tu tema. Llama a la carpeta como quieras, preferiblemente d\u00e1ndole un nombre que puedas recordar.<\/p>\n<p>Crea los siguientes archivos tem\u00e1ticos b\u00e1sicos:<\/p>\n<ul>\n<li><strong>style.css<\/strong><\/li>\n<li><strong>index.php<\/strong><\/li>\n<li><strong>header.php<\/strong><\/li>\n<li><strong>barra lateral.php<\/strong><\/li>\n<li><strong>pie de p\u00e1gina.php<\/strong><\/li>\n<\/ul>\n<p>Si\u00e9ntete libre de abrirlos en tu <a href=\"https:\/\/kinsta.com\/es\/blog\/editores-html-gratuitos\/\">editor de c\u00f3digo o de texto<\/a>, ya que los editar\u00e1 en el futuro. A partir de ahora, no hay necesidad de a\u00f1adir ning\u00fan c\u00f3digo a los archivos. Simplemente d\u00e9jalos en la carpeta.<\/p>\n<p><strong>Nota: <\/strong>Puedes empezar por crearlos como archivos TXT. Si luego cambias la extensi\u00f3n del archivo &#8211; como de <strong>.txt <\/strong>a <strong>.php <\/strong>o de <strong>.txt <\/strong>a <strong>.css- tu <\/strong>ordenador lo ajusta autom\u00e1ticamente al formato de archivo correcto. Por ejemplo, al a\u00f1adir la extensi\u00f3n <strong>.css<\/strong>, el archivo se convierte en una <a href=\"https:\/\/kinsta.com\/es\/blog\/css-wordpress\/\">hoja de estilo en cascada<\/a>.<\/p>\n<figure style=\"width: 1018px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/12\/files-in-folder.png\" alt=\"Los archivos del sitio para HTML a WordPress\" width=\"1018\" height=\"529\"><figcaption class=\"wp-caption-text\">Los archivos del sitio para HTML a WordPress<\/figcaption><\/figure>\n<h3>Transfiere el CSS Actual de Tu Sitio WordPress a la Nueva Carpeta<\/h3>\n<p>Ya deber\u00edas tener un tema instalado en tu sitio actual de WordPress. Si no es as\u00ed, sigue adelante e <a href=\"https:\/\/kinsta.com\/es\/blog\/instalar-tema-wordpress\/\">instala un tema<\/a> para ayudarte con esta parte.<\/p>\n<p>Utilizar\u00e1s el CSS del tema actual como base, construyendo sobre \u00e9l en el archivo <strong>style.css <\/strong>con los archivos de tu sitio HTML.<\/p>\n<p>Por lo tanto, copia la cabecera de la hoja de estilos de tu sitio de WordPress en el nuevo archivo <strong>style.css<\/strong>.<\/p>\n<p><span style=\"font-family: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;font-size: 1rem\">Deber\u00eda ser algo as\u00ed:<\/span><\/p>\n<pre><code class=\"language-html\">\/*\nTheme Name: Twenty Seventeen\nTheme URI: https:\/\/wordpress.org\/themes\/twentyseventeen\/\nAuthor: the WordPress team\nAuthor URI: https:\/\/wordpress.org\/\nDescription: 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.\nVersion: 2.4\nRequires at least: 4.7\nRequires PHP: 5.2.4\nLicense: GNU General Public License v2 or later\nLicense URI: http:\/\/www.gnu.org\/licenses\/gpl-2.0.html\nText Domain: twentyseventeen\nTags: 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\n\nThis theme, like WordPress, is licensed under the GPL.\nUse it to make something cool, have fun, and share what you've learned with others.\n*\/<\/code><\/pre>\n<p>En este caso, el sitio utilizado tiene el tema Twenty Seventeen. Si est\u00e1s usando un tema diferente, ver\u00e1s algunas variaciones en la cabecera de la hoja de estilos.<\/p>\n<p>Ahora es el momento de sustituir los elementos del antiguo tema por informaci\u00f3n sobre el nuevo.<\/p>\n<p>Para ello, intercambia lo siguiente:<\/p>\n<ul>\n<li>Nombre del tema: Si\u00e9ntete libre de llamar a tu tema cualquier cosa, pero no es una mala idea nombrarlo igual que tu carpeta de temas.<\/li>\n<li>URI del tema &#8211; Puedes utilizar la URL principal de tu sitio para esto.<\/li>\n<li>Autor &#8211; Escribe aqu\u00ed tu nombre, o el nombre que quieras utilizar.<\/li>\n<li>URI del autor &#8211; Haz que sea un enlace a tu p\u00e1gina de inicio.<\/li>\n<li>Descripci\u00f3n &#8211; Puedes hacer una descripci\u00f3n de tu tema para mostrar en el backend de tu sitio de WordPress.<\/li>\n<\/ul>\n<p>Deja todo lo dem\u00e1s como est\u00e1. La mayor\u00eda de los otros elementos como la Licencia y las Etiquetas son solo para s\u00ed planeas publicar el nuevo tema en el Directorio de Temas de WordPress.<\/p>\n<p>Recuerda que lo que acabas de pegar y editar es la cabecera de tu tema.<\/p>\n<p>Encuentra el CSS existente de tu sitio web HTML. Copia y pega este CSS despu\u00e9s de la cabecera en el nuevo archivo <strong>style.css<\/strong>.<\/p>\n<p>Guarda y cierra el archivo <strong>style.css<\/strong>.<\/p>\n<h3>Toma Tu HTML Actual y div\u00eddelo en Trozos<\/h3>\n<p>Por lo general, WordPress utiliza PHP para extraer elementos como archivos y c\u00f3digo, y medios de comunicaci\u00f3n 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.<\/p>\n<p>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.<\/p>\n<p>Cada archivo HTML tendr\u00e1 un aspecto diferente, pero ayuda a tener un ejemplo visual. Por lo tanto, vamos a mostrar algunas plantillas de sitios web HTML para demostrar.<\/p>\n<p>El siguiente c\u00f3digo es una gran opci\u00f3n para cruzar con tu propio archivo HTML. Se trata de una p\u00e1gina web HTML sencilla con una cabecera, elementos de men\u00fa, subt\u00edtulos, una barra lateral y un pie de p\u00e1gina. Puedes encontrar un c\u00f3digo similar en tu propio archivo <strong>index.html<\/strong>.<\/p>\n<pre><code class=\"language-html\">&lt;!doctype html&gt;\n&lt;html&gt;\n&lt;head&gt;\n&lt;meta charset=\"utf-8\"&gt;\n&lt;title&gt;Test Site&lt;\/title&gt;\n&lt;meta name=\"description\" content=\"Website description\"&gt;\n&lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1\"&gt;\n\n&lt;link rel=\"stylesheet\" href=\"style.css\"&gt;\n&lt;\/head&gt;\n\n&lt;body&gt;\n&lt;div class=\"header-container\"&gt;\n&lt;header class=\"wrapper clearfix\"&gt;\n&lt;h1 class=\"title\"&gt;Website Title&lt;\/h1&gt;\n&lt;nav&gt;\n&lt;ul&gt;\n&lt;li&gt;&lt;a href=\"#\"&gt;menu item #1&lt;\/a&gt;&lt;\/li&gt;\n&lt;li&gt;&lt;a href=\"#\"&gt;menu item #2&lt;\/a&gt;&lt;\/li&gt;\n&lt;li&gt;&lt;a href=\"#\"&gt;menu item #3&lt;\/a&gt;&lt;\/li&gt;\n&lt;\/ul&gt;\n&lt;\/nav&gt;\n&lt;\/header&gt;\n&lt;\/div&gt;\n\n&lt;div class=\"main-container\"&gt;\n&lt;main class=\"main wrapper clearfix\"&gt;\n&lt;article&gt;\n&lt;header class=\"entry-header\"&gt;\n&lt;h2 class=\"entry-title\"&gt;Article&lt;\/h2&gt;\n&lt;\/header&gt;\n&lt;p&gt;Test text right here..&lt;\/p&gt;\n&lt;h2&gt;Subheading&lt;\/h2&gt;\n&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. &lt;\/p&gt;\n&lt;h2&gt;A Sub&lt;\/h2&gt;\n&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. &lt;\/p&gt;\n&lt;\/article&gt;\n&lt;aside&gt;\n&lt;h3&gt;Sidebar here&lt;\/h3&gt;\n&lt;p&gt;Etiam ullamcorper lorem dapibus velit suscipit ultrices. &lt;\/p&gt;\n&lt;\/aside&gt;\n&lt;\/main&gt; &lt;!-- #main --&gt;\n&lt;\/div&gt; &lt;!-- #main-container --&gt;\n\n&lt;div class=\"footer-container\"&gt;\n&lt;footer class=\"wrapper\"&gt;\n&lt;p class=\"footer-credits\"&gt;\u00a9 2019 My Test Site&lt;\/p&gt;\n&lt;\/footer&gt;\n&lt;\/div&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n<p>La siguiente plantilla es otro ejemplo para basar tus propias estrategias.<\/p>\n<p>\u00a0<\/p>\n<figure id=\"attachment_84407\" aria-describedby=\"caption-attachment-84407\" style=\"width: 938px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-84407 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/12\/spacial-html-template.png\" alt=\"Un ejemplo de sitio HTML\" width=\"938\" height=\"761\"><figcaption id=\"caption-attachment-84407\" class=\"wp-caption-text\">Un ejemplo de sitio HTML<\/figcaption><\/figure>\n<p>Como puedes ver, el archivo <strong>index.html <\/strong>de \u00e9ste es un poco m\u00e1s complicado pero sigue siendo familiar en la forma en que est\u00e1 estructurado.<\/p>\n<figure id=\"attachment_88608\" aria-describedby=\"caption-attachment-88608\" style=\"width: 1078px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-88608 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/html-index.png\" alt=\"Ejemplo de archivo de \u00edndice HTML\" width=\"1078\" height=\"685\"><figcaption id=\"caption-attachment-88608\" class=\"wp-caption-text\">Ejemplo de archivo de \u00edndice HTML<\/figcaption><\/figure>\n<p>Ambos ejemplos incluyen cabeceras, \u00e1reas de contenido, barras laterales y pies de p\u00e1gina.<\/p>\n<p>Lo m\u00e1s probable es que tengas un dise\u00f1o diferente. Por ello, tendr\u00e1s que modificar los pasos que se indican a continuaci\u00f3n.<\/p>\n<p>Cada paso que avanzas implica editar y a\u00f1adir a cada uno de los nuevos archivos de WordPress que has creado antes. Dicho esto, mant\u00e9n abierto el archivo <strong>index.html <\/strong>de tu sitio HTML. Lo utilizar\u00e1s en el futuro.<\/p>\n<h4>El Archivo header.php<\/h4>\n<p>En tu archivo HTML abierto, busca todo al principio del archivo y que termine con el \u00e1rea de contenido principal. El \u00e1rea de contenido principal suele representarse con una <strong>etiqueta <code>&lt;div class=\"main\"&gt;<\/code> o <code>&lt;main&gt;<\/code>.<\/strong><\/p>\n<p>Copia y pega esta secci\u00f3n del archivo HTML en tu nuevo archivo <strong>header.php<\/strong>.<\/p>\n<p>Despu\u00e9s de eso, busca donde dice <strong><code>&lt;\/head&gt;<\/code>.<\/strong><\/p>\n<p>Justo antes de eso, pega lo siguiente:<\/p>\n<p><code>&lt;?php wp_head();?&gt;<\/code><\/p>\n<p>Este fragmento de c\u00f3digo es importante para que la mayor\u00eda de los plugins de WordPress funcionen.<\/p>\n<h4>El Archivo sidebar.php<\/h4>\n<p>Busca la secci\u00f3n<strong> <code>&lt;aside&gt;<\/code> <\/strong>en tu <strong>archivo <\/strong>index.<strong>html.<\/strong><\/p>\n<p>Todo lo que hay dentro de las <strong><code>etiquetas &lt;aside&gt;<\/code> y <code>&lt;\/aside&gt;<\/code>, <\/strong>incluyendo esas mismas etiquetas aside, deben copiarse en el nuevo <strong>archivo <\/strong>sidebar.php<strong>.<\/strong><\/p>\n<p>Desde nuestro archivo de ejemplo, se ve algo as\u00ed:<\/p>\n<pre><code class=\"language-html\">&lt;aside&gt;\n&lt;h3&gt;Sidebar here&lt;\/h3&gt;\n&lt;p&gt;Etiam ullam corper lorem dapibus velit suscipit ultrices. &lt;\/p&gt;\n&lt;\/aside&gt;<\/code><\/pre>\n<h4>El Archivo footer.php<\/h4>\n<p>Si tienes un sitio web HTML sencillo, es posible que solo tengas que transferir la informaci\u00f3n del pie de p\u00e1gina. Otros sitios son un poco m\u00e1s complicados. En cualquier caso, no es mala idea terminar con la modificaci\u00f3n del pie de p\u00e1gina, ya que es uno de los elementos b\u00e1sicos que componen los archivos del sitio de WordPress.<\/p>\n<p>En el archivo <strong>index.html<\/strong>, busca y copia todo el c\u00f3digo despu\u00e9s de la etiqueta <strong><code>&lt;\/aside&gt;<\/code><\/strong>(la barra lateral).<\/p>\n<p>Una vez m\u00e1s, es posible que tengas m\u00e1s contenido despu\u00e9s de la secci\u00f3n de la barra lateral, pero es posible para los sitios HTML m\u00e1s simples, solo tener que lidiar con el pie de p\u00e1gina.<\/p>\n<p>En nuestro ejemplo, el pie de p\u00e1gina tiene el siguiente aspecto:<\/p>\n<pre><code class=\"language-html\">&lt;\/main&gt; &lt;!-- #main --&gt;\n&lt;\/div&gt; &lt;!-- #main-container --&gt;\n\n&lt;div class=\"footer-container\"&gt;\n&lt;footer class=\"wrapper\"&gt;\n&lt;p class=\"footer-credits\"&gt;\u00a9 2020 My Test Site&lt;\/p&gt;\n&lt;\/footer&gt;\n&lt;\/div&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n<p>Pero no tan r\u00e1pido. Despu\u00e9s de pegar el c\u00f3digo del pie de p\u00e1gina en el nuevo archivo <strong>footer.php<\/strong>, a\u00f1ade el <code><strong>fragmento &lt;?php wp_footer();?&gt;<\/strong><\/code>justo antes del <code><strong>par\u00e9ntesis <\/strong>&lt;\/body<\/code><strong><code>&gt;<\/code>.<\/strong> Esto ayuda a que el pie de p\u00e1gina funcione correctamente con WordPress.<\/p>\n<p>Puedes ver un ejemplo del <code><strong>c\u00f3digo &lt;?php wp_footer();?&gt; <\/strong><\/code>pegado en el archivo de pie de p\u00e1gina a continuaci\u00f3n.<\/p>\n<pre><code class=\"language-html\">&lt;\/main&gt; &lt;!-- #main --&gt;\n&lt;\/div&gt; &lt;!-- #main-container --&gt;\n&lt;div class=\"footer-container\"&gt;\n&lt;footer class=\"wrapper\"&gt;\n&lt;p class=\"footer-credits\"&gt;\u00a9 2020 My Test Site&lt;\/p&gt;\n&lt;\/footer&gt;\n&lt;\/div&gt;\n&lt;?php wp_footer();?&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n<p>Aseg\u00farate de guardar todos estos nuevos archivos en la carpeta de tu tema. Por ejemplo, despu\u00e9s de pegar este c\u00f3digo de pie de p\u00e1gina en el archivo <strong>footer.php<\/strong>, debes hacer clic en el bot\u00f3n Guardar de tu editor y cerrarlo.<\/p>\n<p>Ahora que los archivos b\u00e1sicos est\u00e1n hechos, cierra el archivo original index.html de tu sitio web HTML.<\/p>\n<h3>Conecta Tus Archivos header.php e index.php a WordPress<\/h3>\n<p>Ya lo has a\u00f1adido al archivo <strong>header.php<\/strong>, pero todav\u00eda tienes que realizar acciones adicionales. Esencialmente, quieres modificar la llamada en la hoja de estilos desde el HTML que est\u00e1 all\u00ed ahora mismo al formato est\u00e1ndar de WordPress PHP.<\/p>\n<p>De vuelta en el archivo <strong>header.php<\/strong>, encuentra la secci\u00f3n<strong> &lt;head<\/strong>&gt;.<\/p>\n<p>Buscamos la llamada a la hoja de estilos. Es algo as\u00ed:<\/p>\n<pre><code class=\"language-css\">&lt;link rel=\"stylesheet\" href=\"style.css\"&gt;<\/code><\/pre>\n<p>Elimina esta llamada y sustit\u00fayela por la siguiente:<\/p>\n<pre><code class=\"language-css\">&lt;link rel=\"stylesheet\" href=\"&lt;?php echo get_template_directory_uri(); ?&gt;\/style.css\" type=\"text\/css\" media=\"all\" \/&gt;<\/code><\/pre>\n<p>Eso es todo lo que tienes que hacer al archivo <strong>header.php<\/strong>. La llamada a la hoja de estilos ahora funciona con el formato de WordPress, no con el HTML.<\/p>\n<p>Contin\u00faa y guarda y cierra el archivo <strong>header.php<\/strong>.<\/p>\n<p>A continuaci\u00f3n, abre el archivo <strong>index.php <\/strong>(no el archivo <strong>index.html <\/strong>que estaba utilizando antes, sino el nuevo archivo <strong>index.php<\/strong>).<\/p>\n<p>En este momento, el archivo <strong>index.php <\/strong>est\u00e1 vac\u00edo.<\/p>\n<p>Toma el siguiente c\u00f3digo y c\u00f3pialo y p\u00e9galo en el nuevo archivo <strong>index.php<\/strong>. Deja el espacio entre las dos primeras l\u00edneas. Eso est\u00e1 ah\u00ed por una raz\u00f3n, que ver\u00e1s pronto.<\/p>\n<p>Estas l\u00edneas act\u00faan como llamadas a otros archivos de tu sitio, incluyendo <strong>header.php<\/strong>, <strong>sidebar.php <\/strong>y <strong>footer.php<\/strong>.<\/p>\n<pre><code class=\"language-css\">&lt;?php get_header(); ?&gt;\n\n&lt;?php get_sidebar(); ?&gt;\n&lt;?php get_footer(); ?&gt;<\/code><\/pre>\n<p>El espacio abierto en la segunda l\u00ednea est\u00e1 reservado para lo que llamamos El Bucle, o un proceso din\u00e1mico en WordPress que se ejecuta en segundo plano para a\u00f1adir nuevas entradas a tu sitio. Esencialmente, est\u00e1 permitiendo a WordPress saber que hay m\u00e1s contenido por venir y que debe usar El Bucle para a\u00f1adir ese contenido. Aprende m\u00e1s sobre <a href=\"https:\/\/codex.wordpress.org\/The_Loop\">The Loop aqu\u00ed<\/a>.<\/p>\n<p>Para a\u00f1adir El Bucle, pega el siguiente c\u00f3digo en el espacio que has dejado antes en el archivo <strong>index.php <\/strong>(justo debajo de &lt;?php get_header(); ?&gt;).<\/p>\n<pre><code class=\"language-css\">&lt;?php while ( have_posts() ) : the_post(); ?&gt;\n&lt;article class=\"&lt;?php post_class(); ?&gt;\" id=\"post-&lt;?php the_ID(); ?&gt;\"&gt;\n&lt;h2 class=\"entry-title\"&gt;&lt;?php the_title(); ?&gt;&lt;\/h2&gt;\n&lt;?php if ( !is_page() ):?&gt;\n&lt;section class=\"entry-meta\"&gt;\n&lt;p&gt;Posted on &lt;?php the_date();?&gt; by &lt;?php the_author();?&gt;&lt;\/p&gt;\n&lt;\/section&gt;\n&lt;?php endif; ?&gt;\n&lt;section class=\"entry-content\"&gt;\n&lt;?php the_content(); ?&gt;\n&lt;\/section&gt;\n&lt;section class=\"entry-meta\"&gt;&lt;?php if ( count( get_the_category() ) ) : ?&gt;\n&lt;span class=\"category-links\"&gt;\nPosted under: &lt;?php echo get_the_category_list( ', ' ); ?&gt;\n&lt;\/span&gt;\n&lt;?php endif; ?&gt;&lt;\/section&gt;\n&lt;\/article&gt;\n&lt;?php endwhile; ?&gt;<\/code><\/pre>\n<p>El resultado deber\u00eda ser el siguiente:<\/p>\n<pre><code class=\"language-css\">&lt;?php get_header(); ?&gt;\n&lt;?php while ( have_posts() ) : the_post(); ?&gt;\n&lt;article class=\"&lt;?php post_class(); ?&gt;\" id=\"post-&lt;?php the_ID(); ?&gt;\"&gt;\n&lt;h2 class=\"entry-title\"&gt;&lt;?php the_title(); ?&gt;&lt;\/h2&gt;\n&lt;?php if ( !is_page() ):?&gt;\n&lt;section class=\"entry-meta\"&gt;\n&lt;p&gt;Posted on &lt;?php the_date();?&gt; by &lt;?php the_author();?&gt;&lt;\/p&gt;\n&lt;\/section&gt;\n&lt;?php endif; ?&gt;\n&lt;section class=\"entry-content\"&gt;\n&lt;?php the_content(); ?&gt;\n&lt;\/section&gt;\n&lt;section class=\"entry-meta\"&gt;&lt;?php if ( count( get_the_category() ) ) : ?&gt;\n&lt;span class=\"category-links\"&gt;\nPosted under: &lt;?php echo get_the_category_list( ', ' ); ?&gt;\n&lt;\/span&gt;\n&lt;?php endif; ?&gt;&lt;\/section&gt;\n&lt;\/article&gt;\n&lt;?php endwhile; ?&gt;\n&lt;?php get_sidebar(); ?&gt;\n&lt;?php get_footer(); ?&gt;<\/code><\/pre>\n<p>Sigue adelante y guarda el archivo <strong>index.php<\/strong>. Tambi\u00e9n puedes cerrar el archivo ahora.<\/p>\n<p>Una vez hecho esto, un tema de WordPress basado en tu sitio web HTML original est\u00e1 listo para cargarlo en WordPress.<\/p>\n<h3>Subir el Nuevo Tema a WordPress<\/h3>\n<p>El \u00faltimo paso es subir el tema a tu sitio de WordPress. Una opci\u00f3n es simplemente comprimir la carpeta del sitio y subirla a la secci\u00f3n de temas de WordPress sin a\u00f1adir una captura de pantalla de tu sitio como referencia.<\/p>\n<p>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\u00e1s f\u00e1cil organizar tus temas y entender cu\u00e1l est\u00e1 realmente activo en tu sitio web.<\/p>\n<p>Por captura de pantalla, nos referimos a la peque\u00f1a vista previa que aparece para todos los temas instalados en tu panel de control de WordPress. Incluso los que no est\u00e1n 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.<\/p>\n<figure id=\"attachment_84416\" aria-describedby=\"caption-attachment-84416\" style=\"width: 1284px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-84416 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/12\/screenshots.png\" alt=\"El panel de Temas en WordPress\" width=\"1284\" height=\"506\"><figcaption id=\"caption-attachment-84416\" class=\"wp-caption-text\">El panel de control de Temas en WordPress<\/figcaption><\/figure>\n<p>Puede que no subas tu tema p\u00fablicamente, pero una captura de pantalla ayuda a la gesti\u00f3n de tu propio tema. Como puedes ver, es bastante dif\u00edcil saber c\u00f3mo 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\u00eda confundir a muchos en el futuro.<\/p>\n<p>Para a\u00f1adir una captura de pantalla, abre el antiguo sitio HTML en un navegador y haz una captura de pantalla de la p\u00e1gina de inicio con cualquier herramienta de recorte o software de captura de pantalla que tengas disponible.<\/p>\n<p>Abre tu programa de edici\u00f3n de im\u00e1genes favorito y recorta la captura de pantalla a 880&#215;660 p\u00edxeles. Esto asegurar\u00e1 que la captura de pantalla no se estire ni se desproporcione cuando se a\u00f1ada a WordPress.<\/p>\n<p>Guarda la versi\u00f3n editada de la captura de pantalla en la carpeta de tu nuevo tema. No tiene que ir en ninguna carpeta especial &#8211; simplemente col\u00f3calo en la carpeta del tema junto a los otros archivos como <strong>header.php <\/strong>y <strong>footer.php<\/strong>.<\/p>\n<figure id=\"attachment_84418\" aria-describedby=\"caption-attachment-84418\" style=\"width: 987px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-84418 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/12\/the-shot.png\" alt=\"Captura de pantalla en la carpeta del tema\" width=\"987\" height=\"553\"><figcaption id=\"caption-attachment-84418\" class=\"wp-caption-text\">Captura de pantalla en la carpeta del tema<\/figcaption><\/figure>\n<p>Ahora, tiene dos opciones para subir el nuevo tema de WordPress a WordPress.<\/p>\n<p>La primera es arrastrando esos archivos a la carpeta wp-content\/themes v\u00eda 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.<\/p>\n<p>La otra opci\u00f3n es subir una versi\u00f3n comprimida al panel de control de WordPress.<\/p>\n<p>Para empezar, comprime toda la carpeta del tema en un archivo zip.<\/p>\n<p>A continuaci\u00f3n, en el panel de control de WordPress, dir\u00edgete a <strong>Apariencia &gt; Temas.<\/strong><\/p>\n<figure id=\"attachment_84425\" aria-describedby=\"caption-attachment-84425\" style=\"width: 954px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-84425 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/12\/app-themes.png\" alt=\"Ir al panel de Temas en WordPress\" width=\"954\" height=\"414\"><figcaption id=\"caption-attachment-84425\" class=\"wp-caption-text\">Ir al panel de Temas en WordPress<\/figcaption><\/figure>\n<p>Haz clic en el bot\u00f3n A\u00f1adir nuevo.<\/p>\n<figure id=\"attachment_84424\" aria-describedby=\"caption-attachment-84424\" style=\"width: 946px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-84424 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/12\/add-new-button-s.png\" alt=\"A\u00f1adir un nuevo tema en WordPress\" width=\"946\" height=\"414\"><figcaption id=\"caption-attachment-84424\" class=\"wp-caption-text\">A\u00f1adir un nuevo tema en WordPress<\/figcaption><\/figure>\n<p>Selecciona el bot\u00f3n Subir tema.<\/p>\n<figure id=\"attachment_84423\" aria-describedby=\"caption-attachment-84423\" style=\"width: 1041px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-84423 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/12\/upload-a-theme.png\" alt=\"Subiendo un tema en WordPress\" width=\"1041\" height=\"516\"><figcaption id=\"caption-attachment-84423\" class=\"wp-caption-text\">Subiendo un tema en WordPress<\/figcaption><\/figure>\n<p>Haz clic en <strong>Elegir archivo <\/strong>y busca el archivo comprimido en tu ordenador. Selecciona el archivo para que aparezca en el panel de control de WordPress.<\/p>\n<figure id=\"attachment_84422\" aria-describedby=\"caption-attachment-84422\" style=\"width: 948px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-84422 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/12\/choose-the-file.png\" alt=\"Elija el archivo del tema que desea cargar\" width=\"948\" height=\"361\"><figcaption id=\"caption-attachment-84422\" class=\"wp-caption-text\">Elige el archivo del tema que deseas cargar<\/figcaption><\/figure>\n<p>Haz clic en Instalar ahora para procesar el archivo en WordPress.<\/p>\n<figure id=\"attachment_84421\" aria-describedby=\"caption-attachment-84421\" style=\"width: 913px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-84421 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/12\/install-it.png\" alt=\"Instalar el tema despu\u00e9s de subirlo\" width=\"913\" height=\"341\"><figcaption id=\"caption-attachment-84421\" class=\"wp-caption-text\">Instalar el tema despu\u00e9s de subirlo<\/figcaption><\/figure>\n<p>WordPress deber\u00eda indicarte que el paquete se est\u00e1 instalando y que se instal\u00f3 con \u00e9xito.<\/p>\n<p>Haz clic en el bot\u00f3n Activar para finalizar el trabajo.<\/p>\n<figure id=\"attachment_84420\" aria-describedby=\"caption-attachment-84420\" style=\"width: 921px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-84420 size-full\" style=\"font-family: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;font-size: 1rem\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/12\/activate-the-theme.png\" alt=\"Activar el tema despu\u00e9s de su instalaci\u00f3n\" width=\"921\" height=\"298\"><figcaption id=\"caption-attachment-84420\" class=\"wp-caption-text\">Activar el tema despu\u00e9s de su instalaci\u00f3n<\/figcaption><\/figure>\n<p>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\u00f3n de WordPress de tu sitio web HTML original.<\/p>\n<figure id=\"attachment_84419\" aria-describedby=\"caption-attachment-84419\" style=\"width: 1032px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-84419 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/12\/theres-the-theme.png\" alt=\"El nuevo tema aparece en el salpicadero\" width=\"1032\" height=\"599\"><figcaption id=\"caption-attachment-84419\" class=\"wp-caption-text\">El nuevo tema aparece en el salpicadero<\/figcaption><\/figure>\n<p>Ten en cuenta que ninguna conversi\u00f3n de HTML a WordPress es igual. Es posible que la tuya sea un poco m\u00e1s 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.<\/p>\n<p>Por ejemplo, tendr\u00e1s que a\u00f1adir \u00e1reas de widgets y comentarios e incluso ajustar el t\u00edtulo y la descripci\u00f3n de tu blog para que sean modificables en WordPress.<\/p>\n<p>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.<\/p>\n<p>Adem\u00e1s, este tutorial no tiene nada que ver con la adici\u00f3n de contenido como entradas e im\u00e1genes. Esto se puede hacer manualmente subiendo im\u00e1genes a la biblioteca de medios y ajustando elementos como las estructuras de URL.<\/p>\n<p>Existen algunos plugins para automatizar la importaci\u00f3n de contenidos, pero la mayor\u00eda de ellos no est\u00e1n actualizados con las nuevas versiones de WordPress. Por lo tanto, te sugerimos que los pruebes para ver si te funcionan, pero no esperes mucho.<\/p>\n<h2>Conversi\u00f3n de HTML a WordPress a trav\u00e9s de un Tema Hijo<\/h2>\n<p>Este es sin duda uno de los m\u00e9todos m\u00e1s f\u00e1ciles para convertir un sitio web HTML completo en un sitio WordPress. Funciona utilizando cualquiera de los <a href=\"https:\/\/kinsta.com\/es\/blog\/temas-de-wordpress\/\">temas gratuitos de WordPress<\/a> ya existentes en l\u00ednea, por lo que puedes elegir tu favorito y combinarlo con el dise\u00f1o de tu sitio HTML.<\/p>\n<p>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, <a href=\"https:\/\/kinsta.com\/es\/blog\/temas-child-wordpress\/\">lee nuestra gu\u00eda sobre el tema aqu\u00ed<\/a>.<\/p>\n<p>Como explicaci\u00f3n r\u00e1pida, el tema padre gestiona la funcionalidad de tu sitio mientras que el tema hijo se construye sobre el tema padre. El tema principal podr\u00eda ser t\u00e9cnicamente independiente, pero el tema secundario no. Por lo tanto, utilizamos el tema hijo para modificar el dise\u00f1o del tema padre, conservando la potente funcionalidad que ya ofrece el tema padre.<\/p>\n<p>A continuaci\u00f3n se explica c\u00f3mo pasar de HTML a WordPress mediante un tema hijo.<\/p>\n<h3>Elige un Tema Padre<\/h3>\n<p>Lo primero que hay que hacer es seleccionar un tema que te guste. El tema que decidas funcionar\u00e1 como tu tema principal, y lo utilizar\u00e1s como base del dise\u00f1o de tu sitio web.<\/p>\n<p>Lo ideal es que localices un tema que ya se acerque en dise\u00f1o al aspecto de tu antiguo sitio HTML. Otra opci\u00f3n es utilizar un <a href=\"https:\/\/kinsta.com\/es\/blog\/frameworks-php\/\">framework de WordPress<\/a> o un tema de inicio, ya que ambos <a href=\"https:\/\/kinsta.com\/es\/blog\/temas-wordpress-rapidos\/\">tipos de temas<\/a> ya se utilizan como base de dise\u00f1o.<\/p>\n<p>Por ejemplo, un tema de inicio de calidad es el <a href=\"https:\/\/kinsta.com\/es\/blog\/tema-twenty-twenty\/\">tema Twenty Twenty<\/a> o cualquiera de los temas de inicio de WordPress por defecto que llevan el nombre del a\u00f1o en que fueron creados. Te recomendamos ir hacia atr\u00e1s en los a\u00f1os (Twenty Nineteen, Twenty Seventeen, etc.) para ver si alguno de ellos encaja mejor con el dise\u00f1o de tu sitio HTML.<\/p>\n<p>Para este tutorial utilizaremos el <a href=\"https:\/\/kinsta.com\/es\/blog\/tema-twenty-seventeen\/\">tema Twenty Seventeen<\/a> debido a su limpieza y a su capacidad para adaptarse a muchos dise\u00f1os web HTML sencillos.<\/p>\n<p>En cualquier caso, todos estos temas sirven como magn\u00edficos puntos de partida.<\/p>\n<p>Para empezar, <a href=\"https:\/\/kinsta.com\/es\/blog\/instalar-tema-wordpress\/\">instala el tema en tu sitio web de WordPress<\/a>.<\/p>\n<figure id=\"attachment_84388\" aria-describedby=\"caption-attachment-84388\" style=\"width: 1602px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-84388 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/12\/activate-s-s.png\" alt=\"Activaci\u00f3n de un tema de WordPress\" width=\"1602\" height=\"823\"><figcaption id=\"caption-attachment-84388\" class=\"wp-caption-text\">Activaci\u00f3n de un tema de WordPress<\/figcaption><\/figure>\n<p>Puedes activar el tema si quieres, pero m\u00e1s tarde activar\u00e1s un nuevo tema hijo y solo utilizar\u00e1s el tema inicial como base para el dise\u00f1o.<\/p>\n<h3>Crear una Nueva Carpeta<\/h3>\n<p>Todos los <a href=\"https:\/\/kinsta.com\/es\/blog\/temas-wordpress-rapidos\/\">temas de WordPress<\/a> requieren carpetas para almacenar los archivos de tu sitio. Por lo tanto, debes hacer una nueva carpeta para el tema hijo que se est\u00e1 creando desde el sitio HTML.<\/p>\n<p>Te recomendamos nombrar la carpeta como el tema principal y a\u00f1adir \u00ab-child\u00bb al final del nombre de la carpeta.<\/p>\n<p>Por ejemplo, en este caso llamaremos a la carpeta \u00abtwentyseventeen-child\u00bb.<\/p>\n<figure id=\"attachment_84389\" aria-describedby=\"caption-attachment-84389\" style=\"width: 1310px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-84389 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/12\/the-folder.png\" alt=\"Carpeta de temas hijo para HTML a WordPress\" width=\"1310\" height=\"795\"><figcaption id=\"caption-attachment-84389\" class=\"wp-caption-text\">Carpeta de temas hijo para HTML a WordPress<\/figcaption><\/figure>\n<p>En general, cualquier nombre servir\u00e1, siempre y cuando puedas recordar el nombre de la carpeta y no le a\u00f1adas ning\u00fan espacio.<\/p>\n<h3>Configura Tu hoja de Estilo<\/h3>\n<p>Todos los temas hijos requieren hojas de estilo que van en la carpeta del tema.<\/p>\n<p>Por lo tanto, haz un documento de texto y ll\u00e1malo <strong>style.css<\/strong>. Gu\u00e1rdalo en la carpeta del tema e incluye el siguiente c\u00f3digo en ese archivo de texto:<\/p>\n<pre><code class=\"language-css\">\/*\n Theme Name:   Twenty Seventeen Child\n Theme URI:    http:\/\/examplesite.com\/twenty-seventeen-child\/\n Description:  Twenty Seventeen Child Theme\n Author:       Jane Doe\n Author URI:   http:\/\/examplesite.com\n Template:     twentyseventeen\n Version:      1.0.0\n License:      GNU General Public License v2 or later\n License URI:  http:\/\/www.gnu.org\/licenses\/gpl-2.0.html\n Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready\n Text Domain:  twenty-seventeen-child\n*\/<\/code><\/pre>\n<p>Aseg\u00farate de reemplazar los elementos que son personalizados para tu sitio. Potencialmente necesitar\u00e1s 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\u00f3n anterior llamada \u00abConvertir manualmente un sitio HTML completo a WordPress\u00bb, explicando lo que significa cada fila.<\/p>\n<p>La m\u00e1s importante es la etiqueta Template. Esta debe tener el mismo nombre que el tema padre para que el tema hijo funcione correctamente.<\/p>\n<h3>Crea un Archivo functions.php<\/h3>\n<p>Si solo utiliz\u00e1ramos la hoja de estilo para el sitio, y activar\u00edamos el tema hijo, tendr\u00edamos un sitio HTML sin ning\u00fan tipo de estilo. Sin embargo, tambi\u00e9n queremos a\u00f1adir estilo al tema hijo para que tenga el aspecto que queremos.<\/p>\n<p>Todo el estilo ser\u00e1 extra\u00eddo del tema principal.<\/p>\n<p>Por lo tanto, se necesita un archivo <strong>functions.php <\/strong>para heredar los estilos del padre al tema hijo.<\/p>\n<p>Cree un archivo llamado <strong>functions.php <\/strong>en la carpeta de su tema.<\/p>\n<figure id=\"attachment_84397\" aria-describedby=\"caption-attachment-84397\" style=\"width: 1309px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-84397 size-full\" style=\"font-family: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;font-size: 1rem\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/12\/function-file-2.png\" alt=\"El archivo functions.php para HTML a WordPress\" width=\"1309\" height=\"803\"><figcaption id=\"caption-attachment-84397\" class=\"wp-caption-text\">El archivo functions.php para HTML a WordPress<\/figcaption><\/figure>\n<p>Para activar el archivo, a\u00f1ade una etiqueta PHP de apertura, junto con el c\u00f3digo que pide a WordPress que utilice el estilo del tema principal:<\/p>\n<pre><code class=\"language-php\">&lt;?php\nfunction child_theme_enqueue_styles() {\n\n    $parent_style = 'parent-style';\n\n    wp_enqueue_style( $parent_style, get_template_directory_uri() . '\/style.css' );\n    wp_enqueue_style( 'child-style',\n        get_stylesheet_directory_uri() . '\/style.css',\n        array( $parent_style ),\n        wp_get_theme()-&gt;get('Version')\n    );\n}\nadd_action( 'wp_enqueue_scripts', 'child_theme_enqueue_styles' );<\/code><\/pre>\n<p>Otra ventaja de este trozo de c\u00f3digo es que permite ajustar el dise\u00f1o del sitio web con el tema hijo.<\/p>\n<h3>Activar el nuevo tema infantil<\/h3>\n<p>Ahora es el momento de activar el tema hijo.<\/p>\n<p>Una forma de activar el tema hijo es a\u00f1adir la carpeta al archivo wp\/content\/themes en tus archivos de WordPress. Esto se har\u00eda utilizando un <a href=\"https:\/\/kinsta.com\/es\/blog\/mejores-clientes-ftp\/\">cliente FTP\/SFTP<\/a>.<\/p>\n<p>Tambi\u00e9n puedes comprimir la carpeta y subir el tema en <strong>Apariencia &gt; Temas &gt; A\u00f1adir nuevo.<\/strong><\/p>\n<figure id=\"attachment_84396\" aria-describedby=\"caption-attachment-84396\" style=\"width: 1089px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-84396 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/12\/add-new-b.png\" alt=\"A\u00f1adir un tema hijo en WordPress\" width=\"1089\" height=\"658\"><figcaption id=\"caption-attachment-84396\" class=\"wp-caption-text\">A\u00f1adir un tema hijo en WordPress<\/figcaption><\/figure>\n<p>Selecciona el bot\u00f3n <strong>Subir tema<\/strong>.<\/p>\n<figure id=\"attachment_84395\" aria-describedby=\"caption-attachment-84395\" style=\"width: 928px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-84395 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/12\/upload-theme.png\" alt=\"Subiendo un tema hijo en WordPress\" width=\"928\" height=\"463\"><figcaption id=\"caption-attachment-84395\" class=\"wp-caption-text\">Subiendo un tema hijo en WordPress<\/figcaption><\/figure>\n<p>Haz clic en <strong>Elegir archivo <\/strong>y localiza el archivo zip del tema hijo en tu ordenador.<\/p>\n<figure id=\"attachment_84394\" aria-describedby=\"caption-attachment-84394\" style=\"width: 1310px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-84394 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/12\/choose-file.png\" alt=\"Elecci\u00f3n del tema hijo a subir\" width=\"1310\" height=\"568\"><figcaption id=\"caption-attachment-84394\" class=\"wp-caption-text\">Elecci\u00f3n del tema hijo a subir<\/figcaption><\/figure>\n<p>Una vez cargado, haz clic en el bot\u00f3n <strong>Instalar ahora<\/strong>.<\/p>\n<figure id=\"attachment_84393\" aria-describedby=\"caption-attachment-84393\" style=\"width: 1021px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-84393 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/12\/install-now.png\" alt=\"Instalaci\u00f3n del tema hijo\" width=\"1021\" height=\"387\"><figcaption id=\"caption-attachment-84393\" class=\"wp-caption-text\">Instalaci\u00f3n del tema hijo<\/figcaption><\/figure>\n<p>Haz clic en el bot\u00f3n <strong>Activar<\/strong>.<\/p>\n<figure id=\"attachment_84392\" aria-describedby=\"caption-attachment-84392\" style=\"width: 929px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-84392 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/12\/activate-theme.png\" alt=\"Activaci\u00f3n del tema hijo\" width=\"929\" height=\"426\"><figcaption id=\"caption-attachment-84392\" class=\"wp-caption-text\">Activaci\u00f3n del tema hijo<\/figcaption><\/figure>\n<p>Ahora deber\u00edas ver el tema infantil Twenty Seventeen (o el tema que hayas utilizado) activado como tema principal.<\/p>\n<figure id=\"attachment_84391\" aria-describedby=\"caption-attachment-84391\" style=\"width: 1110px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-84391 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/12\/the-child-theme.png\" alt=\"Detalles del tema en el panel de control de WordPress\" width=\"1110\" height=\"658\"><figcaption id=\"caption-attachment-84391\" class=\"wp-caption-text\">Detalles del tema en el panel de control de WordPress<\/figcaption><\/figure>\n<p>Independientemente del m\u00e9todo 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.<\/p>\n<p><strong>Nota: <\/strong>Es posible a\u00f1adir una captura de pantalla a tu nuevo tema en lugar de no tener ninguna vista previa. Cubrimos c\u00f3mo a\u00f1adir una captura de pantalla al tema en una de las secciones anteriores llamada \u00abConvertir manualmente un sitio HTML completo a WordPress\u00bb.<\/p>\n<h3>A\u00f1adir Archivos HTML<\/h3>\n<p>El objetivo es hacer un sitio que se parezca a tu sitio web HTML original, no al tema principal.<\/p>\n<p>Por lo tanto, el \u00faltimo paso consiste en copiar el contenido de tu sitio web en HTML a tu nuevo sitio web en WordPress. La mayor\u00eda de las veces, tendr\u00e1s 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\u00e1n actualizados con las nuevas versiones de WordPress, as\u00ed que util\u00edzalos bajo tu propio riesgo.<\/p>\n<h2>\u00bfQu\u00e9 es un Conversor de HTML a WordPress? (\u00bfY Cu\u00e1les Son las Opciones?)<\/h2>\n<p>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\u00f3n de HTML a WordPress si no tienes tiempo o experiencia para hacer la conversi\u00f3n manualmente.<\/p>\n<p>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\u00f3n de HTML a WordPress.<\/p>\n<p>Los convertidores se ofrecen en las siguientes formas:<\/p>\n<ul>\n<li>Convertidores de software de terceros, tanto en l\u00ednea como localmente.<\/li>\n<li>Plugins de WordPress.<\/li>\n<li>Desarrolladores humanos reales.<\/li>\n<\/ul>\n<p>Al mirar las opciones de conversi\u00f3n, 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\u00eda de las herramientas de terceros disponibles funcionan como aplicaciones en l\u00ednea, por lo que solo tienes que abrirlas en tu navegador y hacer clic en el bot\u00f3n Cargar.<\/p>\n<p>Nos gustan estas aplicaciones para conversiones menos complicadas. Si tienes un sitio web HTML b\u00e1sico y quieres ejecutarlo en WordPress, esto puede servir, pero no se garantiza una transici\u00f3n fluida.<\/p>\n<p>En cuanto a los plugins de WordPress que convierten HTML para WordPress, te ser\u00e1 dif\u00edcil encontrar plugins que tomen un sitio web HTML completo y conviertan los archivos para WordPress. Hab\u00eda algunos plugins disponibles, pero ninguno de ellos est\u00e1 actualizado para funcionar con las nuevas versiones de WordPress, y no querr\u00e1s usar un plugin obsoleto.<\/p>\n<p>Sin embargo, algunos plugins proporcionan las caracter\u00edsticas necesarias para la carga de archivos b\u00e1sicos que pueden hacer que sea m\u00e1s f\u00e1cil que una transferencia FTP o que el l\u00edo 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\u00f3n masiva de sitios web.<\/p>\n<p>Consideramos que el \u00faltimo m\u00e9todo (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\u00f3n 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.<\/p>\n<h2>Las Mejores Opciones de Plugins de Conversi\u00f3n de HTML a WordPress y Otras Herramientas<\/h2>\n<p>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\u00e9n anticuados o que ya no funcionen. Sin embargo, tenemos algunos plugins convertidores favoritos que completan tareas de conversi\u00f3n m\u00e1s peque\u00f1as, junto con aplicaciones web y opciones de <a href=\"https:\/\/kinsta.com\/es\/blog\/contratar-desarrollador-de-wordpress\/\">desarrollo manual<\/a> que resultan \u00fatiles para trabajos de conversi\u00f3n de HTML a WordPress m\u00e1s avanzados.<\/p>\n<h3>Ventajas y Desventajas de Utilizar un Plugin o Aplicaci\u00f3n de Conversi\u00f3n Autom\u00e1tica de HTML a WordPress<\/h3>\n<p>Un convertidor autom\u00e1tico de HTML a WordPress parece una bendici\u00f3n para algunos, pero no siempre es la mejor soluci\u00f3n. Echa un vistazo a los pros y los contras a continuaci\u00f3n antes de comprometerte con una aplicaci\u00f3n o un plugin hecho para duplicar o convertir HTML.<\/p>\n<h4>Pros<\/h4>\n<ul>\n<li>Elimina la necesidad de crear tus propios archivos para el sitio web, a menudo gener\u00e1ndolos por ti.<\/li>\n<li>Muchos de los conversores te dan opciones para dividir los elementos HTML y elegir cu\u00e1les ir\u00e1n en los archivos adecuados para WordPress.<\/li>\n<li>Puedes crear un tema a partir de HTML antiguo y utilizarlo en varios sitios web.<\/li>\n<li>Algunas herramientas solo requieren una <a href=\"https:\/\/kinsta.com\/es\/blog\/que-es-una-url\/\">URL<\/a> para crear un nuevo sitio web o tema.<\/li>\n<li>Otras herramientas ofrecen opciones para <a href=\"https:\/\/kinsta.com\/es\/blog\/clonar-sitio-wordpress\/\">duplicar un sitio web que no es<\/a> tuyo, proporcionando un punto de partida para un dise\u00f1o que te guste.<\/li>\n<\/ul>\n<h4>Cons<\/h4>\n<ul>\n<li>A menudo, a\u00fan queda trabajo manual para transferir contenidos como entradas de blog y fotos.<\/li>\n<li>Lo m\u00e1s probable es que tengas que ingeni\u00e1rtelas para <a href=\"https:\/\/kinsta.com\/es\/blog\/wordpress-cambiar-dominio\/\">transferir<\/a> manualmente los <a href=\"https:\/\/kinsta.com\/es\/blog\/wordpress-cambiar-dominio\/\">enlaces del sitio antiguo<\/a>.<\/li>\n<li>Estos convertidores no siempre se mantienen actualizados. Uno de los mejores convertidores era un plugin de WordPress, pero no lo sugerimos en este art\u00edculo porque el desarrollador ya no lo mantiene.<\/li>\n<li>Es posible que algunos de los convertidores de aplicaciones web no puedan manejar trabajos con archivos m\u00e1s grandes.<\/li>\n<\/ul>\n<p>Ahora que ya conoces las ventajas y los inconvenientes de los conversores autom\u00e1ticos de HTML, vamos a echar un vistazo a nuestras aplicaciones y plugins de conversores autom\u00e1ticos favoritos.<\/p>\n<h3>WP Site Importer<\/h3>\n<p>Aunque la herramienta\u00a0 <a href=\"https:\/\/www.wpsiteimporter.com\/\">WP Site Importer<\/a> 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\u00e1genes, men\u00fas y p\u00e1ginas del sitio HTML y archivos del sitio. WP Site Importer arregla <a href=\"https:\/\/kinsta.com\/es\/blog\/enlaces-rotos\/\">los enlaces rotos<\/a> para que no tengas que ajustarlos o a\u00f1adir nuevos manualmente. Incluso conserva la informaci\u00f3n de SEO construida desde el sitio anterior, incluyendo meta descripciones y palabras clave.<\/p>\n<figure id=\"attachment_84164\" aria-describedby=\"caption-attachment-84164\" style=\"width: 925px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-84164 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/11\/site-importer.png\" alt=\"WP Site Importer\" width=\"925\" height=\"791\"><figcaption id=\"caption-attachment-84164\" class=\"wp-caption-text\">WP Site Importer<\/figcaption><\/figure>\n<p>El importador te ahorra tiempo y dinero al eliminar los costes de un desarrollador y hacer que esta conversi\u00f3n de HTML y contenido sea un proceso de un solo clic. Adem\u00e1s, limpia tu HTML, limpiando y reformateando el HTML de origen. Esto hace que tus archivos HTML sean m\u00e1s compatibles con WordPress y muestra a Google que est\u00e1s trabajando con un c\u00f3digo limpio, impulsando a su vez tu <a href=\"https:\/\/kinsta.com\/es\/?s=seo\">SEO<\/a>.<\/p>\n<p>La herramienta WP Site Importer funciona como un plugin directo de WordPress, por lo que puedes descargar el plugin y activar sus caracter\u00edsticas directamente desde el panel de control.<\/p>\n<h3>WP All Import<\/h3>\n<figure id=\"attachment_84107\" aria-describedby=\"caption-attachment-84107\" style=\"width: 1045px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-84107 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/11\/wp-all-import.png\" alt=\"WP All Import\" width=\"1045\" height=\"349\"><figcaption id=\"caption-attachment-84107\" class=\"wp-caption-text\">WP All Import<\/figcaption><\/figure>\n<p>El plugin <a href=\"https:\/\/wordpress.org\/plugins\/wp-all-import\/\">WP All Import<\/a> es una de las herramientas m\u00e1s r\u00e1pidas y f\u00e1ciles 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\u00f3n potencial construido con HTML simple o algunos archivos HTML que te gustar\u00eda duplicar y llevar a la nueva p\u00e1gina web de WordPress.<\/p>\n<p>La conversi\u00f3n se produce en cuesti\u00f3n de cuatro pasos, y tienes acceso a una hermosa interfaz de arrastrar y soltar para gestionar sus conversiones e importaciones. Lo que tambi\u00e9n 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\u00f1a o control sobre un sitio para transferir esos pocos archivos y potencialmente renderizar elementos en WordPress desde ese sitio.<\/p>\n<p>Una conversi\u00f3n 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\u00e1s, es que el plugin soporta conversiones HTML para elementos como <a href=\"https:\/\/kinsta.com\/es\/blog\/tutorial-de-woocommerce\/#new-products\">productos de WooCommerce<\/a> y p\u00e1ginas de WordPress. Hay una versi\u00f3n premium disponible para funciones m\u00e1s avanzadas, sobre todo el soporte al cliente premium que te permite pedir ayuda al hacer estas conversiones.<\/p>\n<h3>HTMLtoWordPress.io<\/h3>\n<figure id=\"attachment_84108\" aria-describedby=\"caption-attachment-84108\" style=\"width: 1184px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-84108 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/11\/html-to-word.png\" alt=\"HTMLtoWordPress.io\" width=\"1184\" height=\"663\"><figcaption id=\"caption-attachment-84108\" class=\"wp-caption-text\">HTMLtoWordPress.io<\/figcaption><\/figure>\n<p>La <a href=\"https:\/\/htmltowordpress.io\/\">aplicaci\u00f3n online HTMLtoWordPress.io<\/a> es una de las soluciones m\u00e1s 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.<\/p>\n<p>Todo lo que tienes que hacer es acceder a la p\u00e1gina de inicio y subir tu archivo HTML zip para una r\u00e1pida conversi\u00f3n. La aplicaci\u00f3n web automatiza completamente la conversi\u00f3n de HTML a WordPress, por lo que no se requieren conocimientos de codificaci\u00f3n ni hay que complicarse con un cliente FTP.<\/p>\n<p>Tambi\u00e9n 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\u00e1genes de tu sitio tambi\u00e9n se conservan para el nuevo sitio web de WordPress. Son editables a trav\u00e9s de la aplicaci\u00f3n Simple Live Editor, y se supone que hace referencia a esas im\u00e1genes, junto con JavaScript y CSS, sin problemas. En general, parece una soluci\u00f3n s\u00f3lida si tienes uno o varios sitios web HTML que necesitan ser convertidos. Como ventaja, puedes a\u00f1adir clases a tu HTML para utilizar <a href=\"https:\/\/kinsta.com\/es\/\">funciones avanzadas de WordPress<\/a>.<\/p>\n<h3>Pinegrow Theme Converter for WordPress<\/h3>\n<p>El convertidor de temas de <a href=\"https:\/\/pinegrow.com\/theme-converter-for-wordpress\">Pinegrow<\/a> es una herramienta de dise\u00f1o web \u00fanica para tomar una carpeta de sitio web HTML y convertirla instant\u00e1neamente 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\u00e1ginas y asignar acciones inteligentes a cada elemento. Estas se integran con WordPress, de modo que mientras asignas acciones, a\u00f1ade las caracter\u00edsticas adecuadas de WordPress a tu <a href=\"https:\/\/kinsta.com\/es\/blog\/editar-codigo-wordpress\/\">estructura y estilo HTML personalizado<\/a>.<\/p>\n<figure id=\"attachment_84109\" aria-describedby=\"caption-attachment-84109\" style=\"width: 933px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-84109 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/11\/pinegrow.png\" alt=\"Convertidor de temas de Pinegrow\" width=\"933\" height=\"581\"><figcaption id=\"caption-attachment-84109\" class=\"wp-caption-text\">Convertidor de temas de Pinegrow<\/figcaption><\/figure>\n<p>Una vez que hayas decidido las acciones deseadas y hayas guardado los archivos, Pinegrow tiene una opci\u00f3n para exportar el proyecto en archivos <a href=\"https:\/\/kinsta.com\/es\/blog\/que-es-php\/\">PHP<\/a> est\u00e1ndar de WordPress, que pueden subirse a una instalaci\u00f3n normal de WordPress para probarlo en la vida real. Adem\u00e1s, el sistema de importaci\u00f3n de contenidos asegura que se transfieran con \u00e9xito los elementos multimedia como im\u00e1genes y v\u00eddeos.<\/p>\n<p>Disfrutamos especialmente de las funciones que te permiten volver a Pinegrow y hacer modificaciones. Todo lo que tienes que hacer es pulsar el bot\u00f3n Actualizar y enviar la nueva versi\u00f3n a tu tema de WordPress sin necesidad de realizar cambios avanzados en la codificaci\u00f3n o ajustar el sitio web en WordPress.<\/p>\n<p>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\u00f3n de actualizaci\u00f3n inmediata, el software Pinegrow parece una de las mejores opciones para convertir un sitio web HTML completo en un tema de WordPress.<\/p>\n<h3>Jekyll<\/h3>\n<figure id=\"attachment_84110\" aria-describedby=\"caption-attachment-84110\" style=\"width: 926px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-84110 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/11\/Jekyll.png\" alt=\"Jekyll\" width=\"926\" height=\"729\"><figcaption id=\"caption-attachment-84110\" class=\"wp-caption-text\">Jekyll<\/figcaption><\/figure>\n<p><a href=\"https:\/\/jekyllrb.com\/\">Jekyll<\/a> es un conversor gratuito de HTML a WordPress que funciona transformando archivos de texto plano en verdaderos sitios web. El proyecto est\u00e1 alojado en <a href=\"https:\/\/kinsta.com\/es\/blog\/que-es-github\/\">GitHub<\/a> como descarga gratuita. Presenta la oportunidad de eliminar la necesidad de bases de datos y la moderaci\u00f3n de comentarios en lugar de centrarse en la transferencia de tu contenido y la transferencia\/conversi\u00f3n de archivos con HTML, CSS y markdown.<\/p>\n<p>Una parte interesante de Jekyll es que atiende a los dise\u00f1os HTML orientados a los blogs, recopilando la configuraci\u00f3n del contenido de las p\u00e1ginas, las entradas y <a href=\"https:\/\/kinsta.com\/es\/blog\/permalinks-wordpress\/\">los enlaces permanentes<\/a> para migrar tu blog y conservar, o crear, dise\u00f1os y categor\u00edas personalizados y muchos otros elementos.<\/p>\n<p>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\u00edas para poner a prueba tus conocimientos y ayudarte a convertir un dise\u00f1o HTML en algo especial.<\/p>\n<p>Nos gustan especialmente las integraciones con herramientas de comercio electr\u00f3nico 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\u00e9s de hacer la conversi\u00f3n de HTML a WordPress.<\/p>\n<h3>Theme Matcher<\/h3>\n<figure id=\"attachment_84112\" aria-describedby=\"caption-attachment-84112\" style=\"width: 930px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-84112 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/11\/theme-matcher.png\" alt=\"PIC: Conversi\u00f3n de Theme Matcher de HTML a WordPress\" width=\"930\" height=\"496\"><figcaption id=\"caption-attachment-84112\" class=\"wp-caption-text\">PIC: Conversi\u00f3n de Theme Matcher de HTML a WordPress<\/figcaption><\/figure>\n<p><a href=\"https:\/\/www.themematcher.com\/\">Theme Matcher<\/a> 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\u00e9s de pegar una URL de tu <a href=\"https:\/\/kinsta.com\/es\/blog\/portafolio-online\/\">sitio personal<\/a> o de un sitio HTML que no posee.<\/p>\n<p>La idea detr\u00e1s 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\u00f1o que has visto en otro lugar en l\u00ednea.<\/p>\n<figure id=\"attachment_84111\" aria-describedby=\"caption-attachment-84111\" style=\"width: 943px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-84111 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/11\/bonobos.png\" alt=\"Vista previa de Theme Matcher\" width=\"943\" height=\"914\"><figcaption id=\"caption-attachment-84111\" class=\"wp-caption-text\">Vista previa de Theme Matcher<\/figcaption><\/figure>\n<p>Por ejemplo, podr\u00edas navegar a tu tienda online favorita y decidir que te gustar\u00eda empezar tu dise\u00f1o 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.<\/p>\n<p>El proceso funciona copiando y pegando la URL de un sitio en el campo Theme Matcher. P\u00eddele que cree un tema para ti y selecciona el dise\u00f1o del sitio web para convertirlo en contenido de WordPress. Gran parte de la conversi\u00f3n de HTML a WordPress se realiza en segundo plano, y es importante identificar las \u00e1reas de contenido de WordPress para que sea lo m\u00e1s parecido a un tema real de WordPress. Finalmente, puedes descargar el tema y subirlo a tu <a href=\"https:\/\/kinsta.com\/es\/blog\/sitema-de-gestion-de-contenido\/\">CMS de WordPress<\/a>.<\/p>\n<p>Si tu sitio HTML no est\u00e1 actualmente activo, y no puedes pegar una URL, el Theme Matcher proporciona una manera de cargar un archivo zip de su p\u00e1gina HTML para luego recorrer el mismo proceso.<\/p>\n<h3 class=\"has-anchor-hash\">Import Into Blog<\/h3>\n<figure id=\"attachment_84113\" aria-describedby=\"caption-attachment-84113\" style=\"width: 926px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-84113 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/11\/import-to-blog.png\" alt=\"ImportIntoBlog.com HTML to WordPress Converter\" width=\"926\" height=\"659\"><figcaption id=\"caption-attachment-84113\" class=\"wp-caption-text\">ImportIntoBlog.com HTML para WordPress Converter<\/figcaption><\/figure>\n<div class=\"mceTemp\"><\/div>\n<p>El sitio web <a href=\"https:\/\/importintoblog.com\/\">Import Into Blog<\/a> es una aplicaci\u00f3n en l\u00ednea 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\u00f3n de un <a href=\"https:\/\/kinsta.com\/es\/blog\/problemas-timeout-wordpress\/\">archivo XML<\/a> descargable <a href=\"https:\/\/kinsta.com\/es\/blog\/problemas-timeout-wordpress\/\">para importar<\/a> a tu sitio de WordPress. Tambi\u00e9n puedes considerar la posibilidad de descargar el resultado final como un tema de WordPress para subirlo a WordPress y ver el sitio web terminado.<\/p>\n<p>La recuperaci\u00f3n autom\u00e1tica del sitio est\u00e1 disponible con la herramienta ImportIntoBlog. Por no hablar de que todos los <a href=\"https:\/\/kinsta.com\/es\/blog\/wordpress-seo\/#16-create-an-internal-linking-strategy\">enlaces internos<\/a> se reescriben para que vayan a las p\u00e1ginas correctas de tu nuevo sitio web. La gran mayor\u00eda del contenido del sitio se descubre autom\u00e1ticamente, y puedes personalizar el aspecto y el estilo del tema antes de exportarlo. En general, la herramienta funciona mejor con archivos HTML est\u00e1ticos 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.<\/p>\n<h3>HTML to WordPress Converter<\/h3>\n<figure id=\"attachment_84162\" aria-describedby=\"caption-attachment-84162\" style=\"width: 940px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-84162 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/11\/convert.png\" alt=\"Aplicaci\u00f3n de conversi\u00f3n de HTML a WordPress\" width=\"940\" height=\"691\"><figcaption id=\"caption-attachment-84162\" class=\"wp-caption-text\">Aplicaci\u00f3n de HTML to WordPress converter<\/figcaption><\/figure>\n<p>El <a href=\"https:\/\/www.htmltowordpressconverter.com\/\">HTML to WordPress Converter<\/a> es otra soluci\u00f3n que toma un sitio web HTML y lo transforma en un tema de WordPress.<\/p>\n<p>Hay un campo para pegar la URL de un sitio web y hacer clic en el bot\u00f3n Generar tema. Eliges el contenido y las \u00e1reas de la barra lateral de WordPress para que tus p\u00e1ginas y entradas terminen en las ubicaciones correctas, y est\u00e1s sacando los datos necesarios exactos del sitio web HTML anterior. Parece que todo el contenido deber\u00eda 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\u00e9s de WordPress.<\/p>\n<p>Este crea un tema y no un sitio web completo. Tienes que activar tu propio sitio de WordPress y <a href=\"https:\/\/kinsta.com\/es\/wordpress-hosting\/\">alojarlo<\/a> en otro lugar. Descargar\u00e1s 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\u00e1n como los ten\u00edas originalmente, pero hace un magn\u00edfico trabajo manteniendo la estructura y el formato de tu sitio desde nuestras pruebas.<\/p>\n<p>Aparentemente, los desarrolladores de la herramienta HTML to WordPress Converter tambi\u00e9n ofrecen <a href=\"https:\/\/kinsta.com\/es\/blog\/css-wordpress\/\">ajustes<\/a> gratuitos <a href=\"https:\/\/kinsta.com\/es\/blog\/css-wordpress\/\">de CSS<\/a> si algo no sale como quer\u00edas.<\/p>\n<h3>PHP Simple HTML DOM Parser<\/h3>\n<figure id=\"attachment_84163\" aria-describedby=\"caption-attachment-84163\" style=\"width: 934px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-84163 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/11\/parser.png\" alt=\"PHP Simple HTML DOM Parser tool\" width=\"934\" height=\"251\"><figcaption id=\"caption-attachment-84163\" class=\"wp-caption-text\">Herramienta PHP Simple HTML DOM Parser<\/figcaption><\/figure>\n<p>El <a href=\"https:\/\/sourceforge.net\/projects\/simplehtmldom\/\">PHP Simple HTML DOM Parser<\/a> 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 <a href=\"https:\/\/kinsta.com\/es\/blog\/errores-wordpress\/\">errores<\/a>, 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.<\/p>\n<p>Se trata de una descarga gratuita desde el sitio web de SourceForge, por lo que puedes consultar las rese\u00f1as y solicitar asistencia si es necesario.<\/p>\n<h3>Contrataci\u00f3n de un Desarrollador<\/h3>\n<figure id=\"attachment_84165\" aria-describedby=\"caption-attachment-84165\" style=\"width: 927px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-84165 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/11\/acclaim.png\" alt=\"Servicio de conversi\u00f3n de HTML a WordPress de Acclaim\" width=\"927\" height=\"567\"><figcaption id=\"caption-attachment-84165\" class=\"wp-caption-text\">Servicio de conversi\u00f3n de HTML a WordPress de Acclaim<\/figcaption><\/figure>\n<p><a href=\"https:\/\/www.hirewpgeeks.com\/\">WP Geeks<\/a>, <a href=\"https:\/\/www.wponlinesupport.com\/migrate-html-to-wordpress\/\">WP Online Support<\/a> y <a href=\"https:\/\/acclaim.agency\/html-to-wordpress-conversion-service\">Acclaim<\/a> ofrecen servicios de conversi\u00f3n de HTML a WordPress a precios razonables para aquellos que no quieren complicarse con la conversi\u00f3n por s\u00ed mismos o una de las herramientas automatizadas de arriba no produce resultados s\u00f3lidos. La raz\u00f3n por la que <a href=\"https:\/\/kinsta.com\/es\/blog\/contratar-desarrollador-de-wordpress\/\">contratar a un desarrollador<\/a> tiene tanto sentido a veces es que podr\u00edas terminar ahorrando tiempo y dinero en el proceso, especialmente si es un trabajo f\u00e1cil que simplemente no tienes el conocimiento para completar.<\/p>\n<p>Asociarte con un desarrollador real significa que no tienes que utilizar ninguno de tus propios conocimientos t\u00e9cnicos -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\u00e1s probable que puedas encontrar la ayuda adecuada y hacer preguntas y peticiones en comparaci\u00f3n con una aplicaci\u00f3n web que podr\u00eda tener algunos desarrolladores que podr\u00edan ayudarte.<\/p>\n<p>Por no mencionar que esto te permite solicitar qu\u00e9 caracter\u00edstica te gustar\u00eda mantener en el nuevo sitio web. Y es casi una garant\u00eda de que las acciones del sitio web se transferir\u00e1n y funcionar\u00e1n como deber\u00edan.<\/p>\n<p>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.<\/p>\n<h2>C\u00f3mo Convertir HTML a WordPress con una Aplicaci\u00f3n o Plugin Automatizado<\/h2>\n<p>Si tienes dudas sobre el uso de uno de los convertidores automatizados de HTML a WordPress mencionados anteriormente, aqu\u00ed tienes un ejemplo con el <a href=\"https:\/\/www.wpsiteimporter.com\/\">WP Site Importer<\/a>. Esta es una de las soluciones m\u00e1s reputadas, y es un plugin de WordPress de terceros que re\u00fane muchas de las caracter\u00edsticas de otros convertidores automatizados de HTML a WordPress.<\/p>\n<p>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\u00e9n hay planes premium a considerar. <a href=\"https:\/\/kinsta.com\/es\/blog\/como-instalar-wordpress-plugins\/\">Haz clic aqu\u00ed<\/a> si tiene alguna pregunta sobre la instalaci\u00f3n de un plugin de WordPress.<\/p>\n<p>El plugin WP Site Importer ofrece una colecci\u00f3n de herramientas de importaci\u00f3n para p\u00e1ginas y entradas individuales, junto con sitios web completos y los elementos adicionales necesarios para completar el trabajo, como la localizaci\u00f3n de im\u00e1genes y la modificaci\u00f3n de enlaces internos.<\/p>\n<p>Para este ejemplo, recorreremos la mayor\u00eda de las funciones, empezando por una sola p\u00e1gina HTML. En el panel de control de WordPress, dir\u00edgete a <strong>Importador de sitios &gt; Importar una sola p\u00e1gina.<\/strong><\/p>\n<figure id=\"attachment_84527\" aria-describedby=\"caption-attachment-84527\" style=\"width: 938px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-84527 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/12\/import-single-page.png\" alt=\"Importaci\u00f3n de HTML simple a una p\u00e1gina de WordPress\" width=\"938\" height=\"564\"><figcaption id=\"caption-attachment-84527\" class=\"wp-caption-text\">Importaci\u00f3n de HTML simple a una p\u00e1gina de WordPress<\/figcaption><\/figure>\n<p>La gran mayor\u00eda de los ajustes por defecto del plugin est\u00e1n 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\u00e1gina como una entrada, o eliminar las im\u00e1genes destacadas. Si\u00e9ntete libre de desplazarte a trav\u00e9s de todos los ajustes del plugin para asegurarte de que se ajustan a tus necesidades.<\/p>\n<p>Todo lo que tienes que hacer para las importaciones de una sola p\u00e1gina es pegar la URL para que el plugin la escanee.<\/p>\n<p><strong>Nota: <\/strong>La subida de archivos solo est\u00e1 disponible para las conversiones de varias p\u00e1ginas.<\/p>\n<figure id=\"attachment_84526\" aria-describedby=\"caption-attachment-84526\" style=\"width: 1060px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-84526 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/12\/import-page-wizard.png\" alt=\"El asistente de la p\u00e1gina de importaci\u00f3n\" width=\"1060\" height=\"854\"><figcaption id=\"caption-attachment-84526\" class=\"wp-caption-text\">El asistente de la p\u00e1gina de importaci\u00f3n<\/figcaption><\/figure>\n<p>Haz clic en el bot\u00f3n <strong>Importar p\u00e1gina <\/strong>para continuar.<\/p>\n<figure id=\"attachment_84525\" aria-describedby=\"caption-attachment-84525\" style=\"width: 1009px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-84525 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/12\/import-page.png\" alt=\"Haga clic en el bot\u00f3n \"Importar p\u00e1gina\".\" width=\"1009\" height=\"416\"><figcaption id=\"caption-attachment-84525\" class=\"wp-caption-text\">Haz clic en el bot\u00f3n \u00abImportar p\u00e1gina\u00bb.<\/figcaption><\/figure>\n<p>El plugin te indica lo que se ha conseguido y proporciona varios enlaces para previsualizar las nuevas p\u00e1ginas de WordPress y editarlas si es necesario.<\/p>\n<figure id=\"attachment_84524\" aria-describedby=\"caption-attachment-84524\" style=\"width: 1038px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-84524 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/12\/complete-edit-or-preview.png\" alt=\"Haga clic en el enlace \"Vista previa\".\" width=\"1038\" height=\"578\"><figcaption id=\"caption-attachment-84524\" class=\"wp-caption-text\">Haz clic en el enlace \u00abVista previa\u00bb.<\/figcaption><\/figure>\n<p>Tambi\u00e9n querr\u00e1s transferir los men\u00fas del sitio web HTML est\u00e1tico.<\/p>\n<p>Para ello, dir\u00edgete a <strong>Importador de sitios &gt; Importar men\u00fas<\/strong>.<\/p>\n<figure id=\"attachment_84523\" aria-describedby=\"caption-attachment-84523\" style=\"width: 909px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-84523 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/12\/import-menus.png\" alt=\"Importaci\u00f3n de men\u00fas en WordPress\" width=\"909\" height=\"328\"><figcaption id=\"caption-attachment-84523\" class=\"wp-caption-text\">Importaci\u00f3n de men\u00fas en WordPress<\/figcaption><\/figure>\n<p>La importaci\u00f3n de un men\u00fa es similar a la conversi\u00f3n de archivos, ya que pide la URL. Tambi\u00e9n puede establecer elementos como la densidad del men\u00fa y el tama\u00f1o m\u00ednimo del mismo.<\/p>\n<p>Haz clic en el <strong>men\u00fa de identificaci\u00f3n <\/strong>para continuar.<\/p>\n<figure id=\"attachment_84522\" aria-describedby=\"caption-attachment-84522\" style=\"width: 1027px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-84522 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/12\/find-menus.png\" alt=\"El panel \"Asistente para la importaci\u00f3n de men\u00fas\" width=\"1027\" height=\"631\"><figcaption id=\"caption-attachment-84522\" class=\"wp-caption-text\">El panel de control \u2018Import Menu Wizard\u2019<\/figcaption><\/figure>\n<p>Cada elemento del men\u00fa aparece ahora en una lista. Tambi\u00e9n deber\u00edas ver varios men\u00fas si ten\u00eda m\u00e1s de uno en tu sitio HTML.<\/p>\n<p>Marca los men\u00fas que deseas importar y nombra a cada uno de ellos. Haz clic en el bot\u00f3n <strong>Importar men\u00fa<\/strong>.<\/p>\n<figure id=\"attachment_84520\" aria-describedby=\"caption-attachment-84520\" style=\"width: 975px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-84520 size-full\" style=\"font-family: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;font-size: 1rem\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/12\/import-menu.png\" alt=\"Importar un men\u00fa\" width=\"975\" height=\"837\"><figcaption id=\"caption-attachment-84520\" class=\"wp-caption-text\">Importar un men\u00fa<\/figcaption><\/figure>\n<p>Con las importaciones de men\u00fas de WordPress, todav\u00eda tienes que configurar la ubicaci\u00f3n del men\u00fa.<\/p>\n<p>En el panel de control, dir\u00edgete a <strong>Apariencia &gt; Men\u00fas.<\/strong><\/p>\n<p>Nombra y crea un men\u00fa y gu\u00e1rdalo en WordPress. Ya deber\u00edas ver el men\u00fa importado si todo ha funcionado como estaba previsto.<\/p>\n<figure id=\"attachment_84519\" aria-describedby=\"caption-attachment-84519\" style=\"width: 1604px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-84519 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/12\/save-the-menu.png\" alt=\"Guardar el men\u00fa importado\" width=\"1604\" height=\"877\"><figcaption id=\"caption-attachment-84519\" class=\"wp-caption-text\">Guardar el men\u00fa importado<\/figcaption><\/figure>\n<p>Haz clic en la pesta\u00f1a <strong>Gestionar ubicaciones <\/strong>y busca el men\u00fa importado en el men\u00fa desplegable. Debes colocar ese nuevo men\u00fa en la ubicaci\u00f3n de men\u00fa que elijas.<\/p>\n<p>Aseg\u00farate de <strong>guardar los cambios <\/strong>cuando hayas terminado.<\/p>\n<figure id=\"attachment_84518\" aria-describedby=\"caption-attachment-84518\" style=\"width: 1033px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-84518 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/12\/manage-location.png\" alt=\"Cambiar la ubicaci\u00f3n del men\u00fa si es necesario\" width=\"1033\" height=\"507\"><figcaption id=\"caption-attachment-84518\" class=\"wp-caption-text\">Cambiar la ubicaci\u00f3n del men\u00fa si es necesario<\/figcaption><\/figure>\n<p>Otra parte de la importaci\u00f3n de un sitio HTML a WordPress es la localizaci\u00f3n de las im\u00e1genes. Para completar este proceso, vaya a <strong>Importador de sitios &gt; Localizar im\u00e1genes.<\/strong><\/p>\n<figure id=\"attachment_84517\" aria-describedby=\"caption-attachment-84517\" style=\"width: 903px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-84517 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/12\/local-images.png\" alt=\"Localizar im\u00e1genes para la conversi\u00f3n de HTML a WordPress\" width=\"903\" height=\"427\"><figcaption id=\"caption-attachment-84517\" class=\"wp-caption-text\">Localizar im\u00e1genes para la conversi\u00f3n de HTML a WordPress<\/figcaption><\/figure>\n<p>Todos los ajustes por defecto para la localizaci\u00f3n de la imagen son normalmente buenos para usar.<\/p>\n<p>Haz clic en el bot\u00f3n <strong>Siguiente<\/strong>.<\/p>\n<figure id=\"attachment_84516\" aria-describedby=\"caption-attachment-84516\" style=\"width: 1161px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-84516 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/12\/next-s.png\" alt=\"Pulsa el bot\u00f3n \"Siguiente\" para empezar\" width=\"1161\" height=\"818\"><figcaption id=\"caption-attachment-84516\" class=\"wp-caption-text\">Pulsa el bot\u00f3n \u00abSiguiente\u00bb para empezar<\/figcaption><\/figure>\n<p>Ver\u00e1s una lista de las im\u00e1genes que se transfieren desde el sitio web anterior.<\/p>\n<p>Selecciona los que deseas localizar y haz clic en el bot\u00f3n <strong>Siguiente<\/strong>.<\/p>\n<figure id=\"attachment_84515\" aria-describedby=\"caption-attachment-84515\" style=\"width: 1609px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-84515 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/12\/next-buttons.png\" alt=\"Ver todas las im\u00e1genes importadas\" width=\"1609\" height=\"841\"><figcaption id=\"caption-attachment-84515\" class=\"wp-caption-text\">Ver todas las im\u00e1genes importadas<\/figcaption><\/figure>\n<p>En cuesti\u00f3n de segundos, el plugin a\u00f1ade cada imagen a tu biblioteca multimedia de WordPress, d\u00e1ndoles todas las URL en el nuevo sitio web. Podr\u00e1s ir a la biblioteca de medios para asegurarse de que esta transici\u00f3n se produjo.<\/p>\n<figure id=\"attachment_84514\" aria-describedby=\"caption-attachment-84514\" style=\"width: 1565px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-84514 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/12\/all-done.png\" alt=\"El producto final de las im\u00e1genes localizadas\" width=\"1565\" height=\"840\"><figcaption id=\"caption-attachment-84514\" class=\"wp-caption-text\">El producto final de las im\u00e1genes localizadas<\/figcaption><\/figure>\n<p>Otra parte de la conversi\u00f3n 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.<\/p>\n<p>Tenemos que arreglarlas, as\u00ed que dir\u00edgete a <strong>Importador de sitios &gt; Actualizar enlaces internos para <\/strong>empezar.<\/p>\n<figure id=\"attachment_84513\" aria-describedby=\"caption-attachment-84513\" style=\"width: 918px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-84513 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/12\/update-links.png\" alt=\"Actualizar a fondo los enlaces internos\" width=\"918\" height=\"450\"><figcaption id=\"caption-attachment-84513\" class=\"wp-caption-text\">Actualizar a fondo los enlaces internos<\/figcaption><\/figure>\n<p>En la siguiente p\u00e1gina se explica c\u00f3mo se sustituir\u00e1n los enlaces antiguos por versiones del nuevo dominio del sitio web, a\u00f1adiendo subdirectorios para una experiencia de usuario fluida que reside en la URL del sitio de WordPress.<\/p>\n<p>Todo lo que tienes que hacer es pulsar el bot\u00f3n de Actualizar Enlaces. El plugin hace todas las conversiones por ti.<\/p>\n<figure id=\"attachment_84512\" aria-describedby=\"caption-attachment-84512\" style=\"width: 1329px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-84512 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/12\/update-the-link.png\" alt=\"Haga clic en el bot\u00f3n \"Actualizar enlaces\".\" width=\"1329\" height=\"777\"><figcaption id=\"caption-attachment-84512\" class=\"wp-caption-text\">Haz clic en el bot\u00f3n \u00abActualizar enlaces\u00bb.<\/figcaption><\/figure>\n<p>Si tienes previsto convertir un sitio web HTML completo (en lugar de una p\u00e1gina), ve a la pesta\u00f1a <strong>Importar varias p\u00e1ginas del <\/strong>men\u00fa <strong>Importador de sitios<\/strong>.<\/p>\n<p>Esta es tambi\u00e9n una maravillosa opci\u00f3n para aquellos interesados en cargar archivos locales del sitio en lugar de copiar en una URL en vivo.<\/p>\n<figure id=\"attachment_84511\" aria-describedby=\"caption-attachment-84511\" style=\"width: 949px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-84511 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/12\/multiple-pages-here.png\" alt=\"Importar varias p\u00e1ginas a la vez\" width=\"949\" height=\"488\"><figcaption id=\"caption-attachment-84511\" class=\"wp-caption-text\">Importar varias p\u00e1ginas a la vez<\/figcaption><\/figure>\n<p>El <strong>asistente de p\u00e1ginas m\u00faltiples <\/strong>tiene campos para pegar una URL y cargar archivos HTML del sitio web.<\/p>\n<p>Elige el que mejor se adapte a tu trabajo.<\/p>\n<figure id=\"attachment_84510\" aria-describedby=\"caption-attachment-84510\" style=\"width: 1146px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-84510 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/12\/choose-file-s.png\" alt=\"Introduzca la URL a escanear para la importaci\u00f3n\" width=\"1146\" height=\"823\"><figcaption id=\"caption-attachment-84510\" class=\"wp-caption-text\">Introduce la URL a escanear para la importaci\u00f3n<\/figcaption><\/figure>\n<p>A medida que el sitio HTML se convierta y se importe, ver\u00e1s una lista de URL que se han introducido en tu sitio web de WordPress. Puedes eliminar algunas de las p\u00e1ginas de la importaci\u00f3n si no las necesitas. Tambi\u00e9n tienes opciones para importar a las entradas, establecerlas como no publicadas e incluir la imagen destacada.<\/p>\n<figure id=\"attachment_84528\" aria-describedby=\"caption-attachment-84528\" style=\"width: 1707px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-84528 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/12\/next-button.png\" alt=\"El 'Asistente para importar varias p\u00e1ginas'\" width=\"1707\" height=\"805\"><figcaption id=\"caption-attachment-84528\" class=\"wp-caption-text\">El &#8216;Asistente para importar varias p\u00e1ginas&#8217;<\/figcaption><\/figure>\n<p>El \u00faltimo paso revela la lista completa de p\u00e1ginas web convertidas desde el sitio HTML a su sistema WordPress. Ahora puede hacer clic en el bot\u00f3n <strong>Editar <\/strong>o <strong>Vista Previa <\/strong>de cada p\u00e1gina para seguir personalizando su sitio web.<\/p>\n<figure id=\"attachment_84529\" aria-describedby=\"caption-attachment-84529\" style=\"width: 1439px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-84529 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/12\/the-many-pages.png\" alt=\"Todas las p\u00e1ginas importadas y listas\" width=\"1439\" height=\"714\"><figcaption id=\"caption-attachment-84529\" class=\"wp-caption-text\">Todas las p\u00e1ginas importadas y listas<\/figcaption><\/figure>\n<p>Recuerda que una conversi\u00f3n de este tipo no significa que vaya a ver inmediatamente el dise\u00f1o exacto de tu sitio web en HTML. Puede que tengas que importar una hoja de estilos o incluso personalizar el c\u00f3digo del sitio web o de las p\u00e1ginas t\u00fa mismo.<\/p>\n\n<h2>Resumen<\/h2>\n<p>Pasar de HTML a WordPress requiere un poco de trabajo. Pero el reto merece la pena. Una subida de HTML a WordPress tambi\u00e9n puede ayudar en tareas menos complicadas, como la <a href=\"https:\/\/kinsta.com\/es\/blog\/verificacion-sitio-google\/\">verificaci\u00f3n de la propiedad de tu sitio<\/a> o la implementaci\u00f3n de un <a href=\"https:\/\/kinsta.com\/es\/blog\/editar-codigo-wordpress\/\">m\u00f3dulo HTML sencillo<\/a>.<\/p>\n<p>Las posibilidades son abundantes cuando se trata de <a href=\"https:\/\/kinsta.com\/es\/blog\/como-subir-un-archivo-html-a-wordpress\/\">subir<\/a>\u00a0y convertir <a href=\"https:\/\/kinsta.com\/es\/blog\/como-subir-un-archivo-html-a-wordpress\/\">archivos HTML<\/a>. Solo recuerda que normalmente puedes completar gran parte del trabajo con un conversor de HTML automatizado. Despu\u00e9s de eso, lo m\u00e1s probable es que haya trabajo manual, pero con la combinaci\u00f3n de las herramientas y los <a href=\"https:\/\/kinsta.com\/es\/aprender\/\">conocimientos adecuados<\/a>, puedes duplicar casi cualquier sitio web HTML que desees.<\/p>\n<p>Si tienes alguna pregunta sobre la subida de archivos HTML a WordPress o la conversi\u00f3n de sitios web HTML a WordPress, h\u00e1znoslo saber en la secci\u00f3n de comentarios m\u00e1s abajo.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>La subida y conversi\u00f3n de HTML a WordPress se realiza por una gran variedad de razones. Es posible que quieras convertir un sitio HTML est\u00e1tico y &#8230;<\/p>\n","protected":false},"author":117,"featured_media":39942,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[105,414],"topic":[1345],"class_list":["post-39940","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-html","tag-webdev","topic-desarrollo-wordpress"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.6 (Yoast SEO v24.6) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>HTML a WordPress: Una gu\u00eda detallada para subir y convertir HTML<\/title>\n<meta name=\"description\" content=\"Aprende a a\u00f1adir HTML a WordPress y a convertir archivos HTML para dar vida al c\u00f3digo en tu sitio. Cubrimos todo, desde la carga hasta la conversi\u00f3n.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinsta.com\/es\/blog\/html-a-wordpress\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"De HTML a WordPress: Una Gu\u00eda Detallada para Subir y Convertir HTML\" \/>\n<meta property=\"og:description\" content=\"Aprende a a\u00f1adir HTML a WordPress y a convertir archivos HTML para dar vida al c\u00f3digo en tu sitio. Cubrimos todo, desde la carga hasta la conversi\u00f3n.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/es\/blog\/html-a-wordpress\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/kinsta.es\/\" \/>\n<meta property=\"article:published_time\" content=\"2021-02-25T13:52:58+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-02-14T12:02:47+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2021\/02\/html-a-wordpress.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1460\" \/>\n\t<meta property=\"og:image:height\" content=\"730\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Salman Ravoof\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Aprende a a\u00f1adir HTML a WordPress y a convertir archivos HTML para dar vida al c\u00f3digo en tu sitio. Cubrimos todo, desde la carga hasta la conversi\u00f3n.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2021\/02\/html-a-wordpress.png\" \/>\n<meta name=\"twitter:creator\" content=\"@salmanravoof\" \/>\n<meta name=\"twitter:site\" content=\"@Kinsta_ES\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Salman Ravoof\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"66 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/es\/blog\/html-a-wordpress\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/html-a-wordpress\/\"},\"author\":{\"name\":\"Salman Ravoof\",\"@id\":\"https:\/\/kinsta.com\/es\/#\/schema\/person\/9cafd2eedd617e640eeea4cf3a5fd987\"},\"headline\":\"De HTML a WordPress: Una Gu\u00eda Detallada para Subir y Convertir HTML\",\"datePublished\":\"2021-02-25T13:52:58+00:00\",\"dateModified\":\"2025-02-14T12:02:47+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/html-a-wordpress\/\"},\"wordCount\":12249,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/es\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/html-a-wordpress\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2021\/02\/html-a-wordpress.png\",\"keywords\":[\"html\",\"webdev\"],\"articleSection\":[\"Los mejores tutoriales de WordPress\"],\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/es\/blog\/html-a-wordpress\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/es\/blog\/html-a-wordpress\/\",\"url\":\"https:\/\/kinsta.com\/es\/blog\/html-a-wordpress\/\",\"name\":\"HTML a WordPress: Una gu\u00eda detallada para subir y convertir HTML\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/es\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/html-a-wordpress\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/html-a-wordpress\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2021\/02\/html-a-wordpress.png\",\"datePublished\":\"2021-02-25T13:52:58+00:00\",\"dateModified\":\"2025-02-14T12:02:47+00:00\",\"description\":\"Aprende a a\u00f1adir HTML a WordPress y a convertir archivos HTML para dar vida al c\u00f3digo en tu sitio. Cubrimos todo, desde la carga hasta la conversi\u00f3n.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/html-a-wordpress\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/es\/blog\/html-a-wordpress\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/kinsta.com\/es\/blog\/html-a-wordpress\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2021\/02\/html-a-wordpress.png\",\"contentUrl\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2021\/02\/html-a-wordpress.png\",\"width\":1460,\"height\":730,\"caption\":\"HTML a WordPress\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/es\/blog\/html-a-wordpress\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/es\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Desarrollo WordPress\",\"item\":\"https:\/\/kinsta.com\/es\/secciones\/desarrollo-wordpress\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"De HTML a WordPress: Una Gu\u00eda Detallada para Subir y Convertir HTML\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/es\/#website\",\"url\":\"https:\/\/kinsta.com\/es\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Soluciones de alojamiento premium, r\u00e1pidas y seguras\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/es\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/es\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/es\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/es\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/kinsta.com\/es\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/es\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/kinsta.es\/\",\"https:\/\/x.com\/Kinsta_ES\",\"https:\/\/www.instagram.com\/kinstahosting\/\",\"https:\/\/www.linkedin.com\/company\/kinsta\/\",\"https:\/\/www.pinterest.com\/kinstahosting\/\",\"https:\/\/www.youtube.com\/c\/Kinsta\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/kinsta.com\/es\/#\/schema\/person\/9cafd2eedd617e640eeea4cf3a5fd987\",\"name\":\"Salman Ravoof\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/kinsta.com\/es\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/0c5885f75cb78473fb7408e5e49ad190?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/0c5885f75cb78473fb7408e5e49ad190?s=96&d=mm&r=g\",\"caption\":\"Salman Ravoof\"},\"description\":\"Salman Ravoof is a self-taught web developer, writer, creator, and a huge admirer of Free and Open Source Software (FOSS). Besides tech, he's excited by science, philosophy, photography, arts, cats, and food. Learn more about him on his website, and connect with Salman on Twitter.\",\"sameAs\":[\"https:\/\/salmanravoof.com\",\"https:\/\/www.linkedin.com\/in\/salman-ravoof-5a749133\/\",\"https:\/\/x.com\/salmanravoof\"],\"url\":\"https:\/\/kinsta.com\/es\/blog\/author\/salmanravoof\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"HTML a WordPress: Una gu\u00eda detallada para subir y convertir HTML","description":"Aprende a a\u00f1adir HTML a WordPress y a convertir archivos HTML para dar vida al c\u00f3digo en tu sitio. Cubrimos todo, desde la carga hasta la conversi\u00f3n.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kinsta.com\/es\/blog\/html-a-wordpress\/","og_locale":"es_ES","og_type":"article","og_title":"De HTML a WordPress: Una Gu\u00eda Detallada para Subir y Convertir HTML","og_description":"Aprende a a\u00f1adir HTML a WordPress y a convertir archivos HTML para dar vida al c\u00f3digo en tu sitio. Cubrimos todo, desde la carga hasta la conversi\u00f3n.","og_url":"https:\/\/kinsta.com\/es\/blog\/html-a-wordpress\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinsta.es\/","article_published_time":"2021-02-25T13:52:58+00:00","article_modified_time":"2025-02-14T12:02:47+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2021\/02\/html-a-wordpress.png","type":"image\/png"}],"author":"Salman Ravoof","twitter_card":"summary_large_image","twitter_description":"Aprende a a\u00f1adir HTML a WordPress y a convertir archivos HTML para dar vida al c\u00f3digo en tu sitio. Cubrimos todo, desde la carga hasta la conversi\u00f3n.","twitter_image":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2021\/02\/html-a-wordpress.png","twitter_creator":"@salmanravoof","twitter_site":"@Kinsta_ES","twitter_misc":{"Escrito por":"Salman Ravoof","Tiempo de lectura":"66 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/es\/blog\/html-a-wordpress\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/es\/blog\/html-a-wordpress\/"},"author":{"name":"Salman Ravoof","@id":"https:\/\/kinsta.com\/es\/#\/schema\/person\/9cafd2eedd617e640eeea4cf3a5fd987"},"headline":"De HTML a WordPress: Una Gu\u00eda Detallada para Subir y Convertir HTML","datePublished":"2021-02-25T13:52:58+00:00","dateModified":"2025-02-14T12:02:47+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/es\/blog\/html-a-wordpress\/"},"wordCount":12249,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/es\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/es\/blog\/html-a-wordpress\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2021\/02\/html-a-wordpress.png","keywords":["html","webdev"],"articleSection":["Los mejores tutoriales de WordPress"],"inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/es\/blog\/html-a-wordpress\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/es\/blog\/html-a-wordpress\/","url":"https:\/\/kinsta.com\/es\/blog\/html-a-wordpress\/","name":"HTML a WordPress: Una gu\u00eda detallada para subir y convertir HTML","isPartOf":{"@id":"https:\/\/kinsta.com\/es\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/es\/blog\/html-a-wordpress\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/es\/blog\/html-a-wordpress\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2021\/02\/html-a-wordpress.png","datePublished":"2021-02-25T13:52:58+00:00","dateModified":"2025-02-14T12:02:47+00:00","description":"Aprende a a\u00f1adir HTML a WordPress y a convertir archivos HTML para dar vida al c\u00f3digo en tu sitio. Cubrimos todo, desde la carga hasta la conversi\u00f3n.","breadcrumb":{"@id":"https:\/\/kinsta.com\/es\/blog\/html-a-wordpress\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/es\/blog\/html-a-wordpress\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/kinsta.com\/es\/blog\/html-a-wordpress\/#primaryimage","url":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2021\/02\/html-a-wordpress.png","contentUrl":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2021\/02\/html-a-wordpress.png","width":1460,"height":730,"caption":"HTML a WordPress"},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/es\/blog\/html-a-wordpress\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/es\/"},{"@type":"ListItem","position":2,"name":"Desarrollo WordPress","item":"https:\/\/kinsta.com\/es\/secciones\/desarrollo-wordpress\/"},{"@type":"ListItem","position":3,"name":"De HTML a WordPress: Una Gu\u00eda Detallada para Subir y Convertir HTML"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/es\/#website","url":"https:\/\/kinsta.com\/es\/","name":"Kinsta\u00ae","description":"Soluciones de alojamiento premium, r\u00e1pidas y seguras","publisher":{"@id":"https:\/\/kinsta.com\/es\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/es\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/es\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/es\/","logo":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/kinsta.com\/es\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/es\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/kinsta.es\/","https:\/\/x.com\/Kinsta_ES","https:\/\/www.instagram.com\/kinstahosting\/","https:\/\/www.linkedin.com\/company\/kinsta\/","https:\/\/www.pinterest.com\/kinstahosting\/","https:\/\/www.youtube.com\/c\/Kinsta"]},{"@type":"Person","@id":"https:\/\/kinsta.com\/es\/#\/schema\/person\/9cafd2eedd617e640eeea4cf3a5fd987","name":"Salman Ravoof","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/kinsta.com\/es\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/0c5885f75cb78473fb7408e5e49ad190?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/0c5885f75cb78473fb7408e5e49ad190?s=96&d=mm&r=g","caption":"Salman Ravoof"},"description":"Salman Ravoof is a self-taught web developer, writer, creator, and a huge admirer of Free and Open Source Software (FOSS). Besides tech, he's excited by science, philosophy, photography, arts, cats, and food. Learn more about him on his website, and connect with Salman on Twitter.","sameAs":["https:\/\/salmanravoof.com","https:\/\/www.linkedin.com\/in\/salman-ravoof-5a749133\/","https:\/\/x.com\/salmanravoof"],"url":"https:\/\/kinsta.com\/es\/blog\/author\/salmanravoof\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/posts\/39940","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/users\/117"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/comments?post=39940"}],"version-history":[{"count":16,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/posts\/39940\/revisions"}],"predecessor-version":[{"id":47947,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/posts\/39940\/revisions\/47947"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/39940\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/39940\/translations\/it"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/39940\/translations\/es"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/39940\/translations\/fr"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/39940\/translations\/nl"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/39940\/translations\/de"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/39940\/translations\/pt"},{"href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/39940\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/media\/39942"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/media?parent=39940"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/tags?post=39940"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/topic?post=39940"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}