{"id":2490,"date":"2019-11-18T16:39:52","date_gmt":"2019-11-18T14:39:52","guid":{"rendered":"https:\/\/www.sarpanet.es\/es\/?p=2490"},"modified":"2021-01-26T19:41:58","modified_gmt":"2021-01-26T17:41:58","slug":"como-pasar-una-web-de-html-a-wordpress","status":"publish","type":"post","link":"https:\/\/www.sarpanet.es\/es\/como-pasar-una-web-de-html-a-wordpress\/","title":{"rendered":"C\u00f3mo pasar una web de HTML a WordPress"},"content":{"rendered":"<p>A d\u00eda de hoy la gran mayor\u00eda de las webs est\u00e1n hechas con HTML como base de programaci\u00f3n. Pero, en ocasiones, podemos necesitar <strong>pasar una web dise\u00f1ada en HTML a WordPress<\/strong>.<\/p>\n<p>Los <strong>motivos<\/strong> pueden ser muchos, pero principalmente ser\u00e1 la <strong>facilidad para poder gestionar los contenidos de la web<\/strong>. Adem\u00e1s, la publicaci\u00f3n de los cambios de una web en HTML requiere una conexi\u00f3n FTP, m\u00e1s l\u00edos y menos productivo.<\/p>\n<p>Para modificar los contenidos de una web en HTML necesitamos un programa espec\u00edfico, como puede ser DreamWeaver. Sin embargo, para modificar los contenidos de una web en WordPress nos basta con un navegador de internet como Google Chrome, Safari, Firefox&#8230;<\/p>\n<h2><strong>C\u00f3mo pasar una web de HTML a WordPress<\/strong><\/h2>\n<p>Convertir una web hecha en HTML a WordPress es un proceso no demasiado sencillo y, os avanzo, el resultado no siempre es el esperado en cuanto a dise\u00f1o se refiere. No obstante, os explicar\u00e9 c\u00f3mo hacerlo:<\/p>\n<p>Usando un plugin&#8230; \u00a1c\u00f3mo no!. Aunque tambi\u00e9n se podr\u00eda hacer a mano&#8230; ser\u00eda lo ideal para garantizarnos que todos los contenidos se convierten correctamente en WordPress. La forma de hacerlo manualmente:<\/p>\n<ul>\n<li>Instalar WordPress.<\/li>\n<li>Instalar un tema que nos guste.<\/li>\n<li>Copiar y pegar texto y subir im\u00e1genes, \u00a1casi nah!<\/li>\n<\/ul>\n<p>As\u00ed pues, lo ideal es usar el plugin, nos ahorrar\u00e1 mucho tiempo.<\/p>\n<p>Lo que har\u00e1 el plugin ser\u00e1:<\/p>\n<ul>\n<li>Convertir los archivos HTML en PHP.<\/li>\n<li>Convertir los archivos de la web hecha en HTML en un tema de WordPress. Creando un archivo index.php y styile.css.<\/li>\n<li>Vincular de forma correcta los archivos CSS y JS.<\/li>\n<li>Automatizar todo aquello que permita la web de HTML.<\/li>\n<li>Crear Widgets para poder editar los contenidos que as\u00ed lo requieran y poder hacerlo de forma correcta.<\/li>\n<li>Crear los men\u00fas.<\/li>\n<li>\u00abReprogramar\u00bb todos los contenidos (textos e im\u00e1genes) para que puedan ser gestionados en WordPress.<\/li>\n<li>M\u00e1s cosas&#8230;<\/li>\n<\/ul>\n<p>El plugin para convertir una web de HMTL en WordPress es\u00a0 y puedes descargarlo en:<\/p>\n<blockquote class=\"wp-embedded-content\" data-secret=\"p8MyE6C6mh\"><p><a href=\"https:\/\/wordpress.org\/plugins\/import-html-pages\/\">HTML Import 2<\/a><\/p><\/blockquote>\n<p><iframe loading=\"lazy\" class=\"wp-embedded-content\" sandbox=\"allow-scripts\" security=\"restricted\" style=\"position: absolute; visibility: hidden;\" title=\"&#8220;HTML Import 2&#8221; &#8212; Plugin Directory\" src=\"https:\/\/wordpress.org\/plugins\/import-html-pages\/embed\/#?secret=OhXd9IWb8L#?secret=p8MyE6C6mh\" data-secret=\"p8MyE6C6mh\" width=\"600\" height=\"338\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\"><\/iframe><\/p>\n<p>Una vez descargado e instalado nos aparecer\u00e1n las opciones del plugin en \u00abAjustes\u00bb, \u00abHTML Import\u00bb.<\/p>\n<p>La primera pesta\u00f1a es la de <strong>\u00abFiles\u00bb <\/strong>y contiene todos los ajustes de los archivos que vamos a importar.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-2492 alignnone\" src=\"https:\/\/www.sarpanet.es\/es\/wp-content\/uploads\/2020\/08\/HTML-Import-2.png\" alt=\"\" width=\"2064\" height=\"1368\" srcset=\"https:\/\/www.sarpanet.es\/es\/wp-content\/uploads\/2020\/08\/HTML-Import-2.png 2064w, https:\/\/www.sarpanet.es\/es\/wp-content\/uploads\/2020\/08\/HTML-Import-2-300x199.png 300w, https:\/\/www.sarpanet.es\/es\/wp-content\/uploads\/2020\/08\/HTML-Import-2-768x509.png 768w, https:\/\/www.sarpanet.es\/es\/wp-content\/uploads\/2020\/08\/HTML-Import-2-1024x679.png 1024w\" sizes=\"auto, (max-width: 2064px) 100vw, 2064px\" \/><\/p>\n<p>Como ves hay un mont\u00f3n de opciones, la mayor\u00eda son muy intuitivas, pero vamos a repasar una a una para que no te pierdas:<\/p>\n<ol>\n<li><strong>Directory to import:<\/strong> En este primer campo escribiremos la ruta a la que queremos importar la web. Por defecto nos pone \u00abhtml-files-to-import\u00bb.<\/li>\n<li><strong>Old site URL:<\/strong> En este campo debemos poner la URL de la carpeta a la que queremos importar los archivos. Con este dato se crear\u00e1 un .htaccess que servir\u00e1 para no perder nuestro posicionamiento web.<\/li>\n<li><strong>Default file:<\/strong> Aqu\u00ed le indicaremos el archivo que por defecto lee nuestro servidor, lo habitual es que sea index.html o index.php.<\/li>\n<li><strong>File extensions to include:<\/strong> En esta opci\u00f3n debemos indicar el tipo de archivos que queremos convertir en posts y p\u00e1ginas. Los archivos m\u00e1s habituales son html y php.<\/li>\n<li><strong>Directories to exclude:<\/strong> En este campo podemos escribir los directorios que no queremos importar.<\/li>\n<li><strong>Preserve fils names:<\/strong> Este campo es muy interesante para decirle que el archivo de la web en html mantenga su nombre pero sin la ra\u00edz html. Por ejemplo, si tenemos un archivo quienes-somos.html se llamar\u00e1 quienes-somos en la nueva web en WordPress.<\/li>\n<\/ol>\n<h3>La importaci\u00f3n del contenido<\/h3>\n<p>En la pesta\u00f1a de \u00abContent\u00bb le indicaremos al plugin c\u00f3mo se deber\u00e1 hacer la conversi\u00f3n y de d\u00f3nde debe coger el contenido de cada p\u00e1gina o de cada post.<\/p>\n<div id=\"attachment_133353\" class=\"wp-caption aligncenter\">\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignleft size-full wp-image-2498\" src=\"https:\/\/www.sarpanet.es\/es\/wp-content\/uploads\/2020\/08\/html-import.png\" alt=\"\" width=\"1311\" height=\"685\" srcset=\"https:\/\/www.sarpanet.es\/es\/wp-content\/uploads\/2020\/08\/html-import.png 1311w, https:\/\/www.sarpanet.es\/es\/wp-content\/uploads\/2020\/08\/html-import-300x157.png 300w, https:\/\/www.sarpanet.es\/es\/wp-content\/uploads\/2020\/08\/html-import-768x401.png 768w, https:\/\/www.sarpanet.es\/es\/wp-content\/uploads\/2020\/08\/html-import-1024x535.png 1024w\" sizes=\"auto, (max-width: 1311px) 100vw, 1311px\" \/><\/p>\n<p id=\"caption-attachment-133353\" class=\"wp-caption-text\">Vamos a indicarle de d\u00f3nde sacar el <strong>contenido<\/strong>.<\/p>\n<\/div>\n<p>Como pod\u00e9is ver, hay dos apartados. En el primero seleccionaremos el delimitador del contenido, y en el segundo las opciones.<\/p>\n<p>En el primer apartado llamado \u00ab<strong>Select content by<\/strong>\u00bb se divide en:<\/p>\n<ul>\n<li><strong>HTML tag:<\/strong> En esta opci\u00f3n debemos indicarle que todo el contenido\u00a0 ser\u00e1 delimitado por una etiqueta tipo &lt;content&gt;, &lt;post&gt;, &lt;articulo&gt;&#8230; Le tenemos que poner la etiqueta, el atributo y el valor.<\/li>\n<li><strong>DreamWeaver template region:<\/strong> Si nuestra web HTML est\u00e1 hecha con DreamWeaver, aqu\u00ed pondremos el nombre de la regi\u00f3n.<\/li>\n<li><strong>Import entire file:\u00a0\u00a0<\/strong>Si escogemos esta opci\u00f3n se importar\u00e1n todos los contenidos en bruto.<\/li>\n<\/ul>\n<p>El segungo apartado se llama \u00ab<strong>More content options<\/strong>\u00bb y encontramos estas opciones:<\/p>\n<ol>\n<li><strong>Import linked images:<\/strong> Para decirle que debe importar\u00a0 las im\u00e1genes.<\/li>\n<li><strong>Import linked documents:<\/strong> Para decirle que debe importar\u00a0 los documentos enlazados.<\/li>\n<li><strong>Update internal links:<\/strong> Aqu\u00ed le diremos que importe los enlaces internos de la web. Es muy importante marcar esta opci\u00f3n para los men\u00fas y los enlaces funcionen.<\/li>\n<li><strong>Use meta description as excerpt:<\/strong> Si marcamos esta opci\u00f3n, se usar\u00e1 la metadescripci\u00f3n como resumen de la entrada o de la p\u00e1gina.<\/li>\n<li><strong>Convert special characters (accents and symbols):<\/strong> Con esta casilla se convierten los caracteres especiales como acentos y s\u00edmbolos.<\/li>\n<li><strong>Clean up bad HTML:<\/strong> Esta opci\u00f3n eliminar\u00e1 todo el contenido que no es HTML como comentarios, etiquetas generados por otros editores.<\/li>\n<\/ol>\n<h3>La importaci\u00f3n de los t\u00edtulos y metas<\/h3>\n<p>Una vez que hemos configurado toda la importaci\u00f3n del contenido, toca hacerlo con los t\u00edtulos de las p\u00e1ginas y sus metadatos.<\/p>\n<div id=\"attachment_133354\" class=\"wp-caption alignnone\">\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignleft size-full wp-image-2499\" src=\"https:\/\/www.sarpanet.es\/es\/wp-content\/uploads\/2020\/08\/html_import_2.png\" alt=\"\" width=\"952\" height=\"728\" srcset=\"https:\/\/www.sarpanet.es\/es\/wp-content\/uploads\/2020\/08\/html_import_2.png 952w, https:\/\/www.sarpanet.es\/es\/wp-content\/uploads\/2020\/08\/html_import_2-300x229.png 300w, https:\/\/www.sarpanet.es\/es\/wp-content\/uploads\/2020\/08\/html_import_2-768x587.png 768w\" sizes=\"auto, (max-width: 952px) 100vw, 952px\" \/><\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<\/div>\n<p>Lo primero que debemos saber es d\u00f3nde est\u00e1n los t\u00edtulos de nuestra web en HTML:\u00a0 si bien es un a Etiqueta HTML, regi\u00f3n de DreamWeaver o nombre del archivo.<\/p>\n<p>Y, a continuaci\u00f3n tenemos las siguientes opciones:<\/p>\n<ul>\n<li><strong>Phrase to remove from page title:<\/strong> Aqu\u00ed podemos poner una o varias palabras o frase de todos los t\u00edtulos.<\/li>\n<li><strong>Title position:<\/strong> Marcar\u00edamos esta opci\u00f3n en el caso de que la etiqueta del t\u00edtulo estuviera dentro del contenido.<\/li>\n<li><strong>Import files as:<\/strong> Aqu\u00ed elegiremos si queremos que se importe el contenido como p\u00e1gina o como entrada.<\/li>\n<li><strong>Set status to:<\/strong> En esta opci\u00f3n elegiremos si queremos que se publiquen todas las entradas o p\u00e1ginas, o bien que queden como borradores.<\/li>\n<li><strong>Set timestamps to:<\/strong> Aqu\u00ed podemos escoger la fecha de publicaci\u00f3n de las p\u00e1ginas o entradas.<\/li>\n<li><strong>Set author to:<\/strong> Aqu\u00ed elegiremos el autor de las entradas o p\u00e1ginas que vamos a importar.<\/li>\n<li><strong>Import pages as children of:<\/strong> En esta opci\u00f3n le indicaremos el nivel de las p\u00e1ginas.<\/li>\n<li><strong>Template for imported pages:<\/strong> Y, finalmente, si queremos que las p\u00e1ginas importadas utilicen la plantilla predeterminada u otra.<\/li>\n<\/ul>\n<h3>Importando los campos personalizados<\/h3>\n<p>La opci\u00f3n de \u00abCustom Fields\u00bb\u00a0 solo la usaremos si nuestra web en HTML tiene campos personalizados. Como pueden ser referencias, tallas, precios, etc.<\/p>\n<div id=\"attachment_133355\" class=\"wp-caption aligncenter\">\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignleft size-full wp-image-2501\" src=\"https:\/\/www.sarpanet.es\/es\/wp-content\/uploads\/2020\/08\/html_import_3.png\" alt=\"\" width=\"1204\" height=\"649\" srcset=\"https:\/\/www.sarpanet.es\/es\/wp-content\/uploads\/2020\/08\/html_import_3.png 1204w, https:\/\/www.sarpanet.es\/es\/wp-content\/uploads\/2020\/08\/html_import_3-300x162.png 300w, https:\/\/www.sarpanet.es\/es\/wp-content\/uploads\/2020\/08\/html_import_3-768x414.png 768w, https:\/\/www.sarpanet.es\/es\/wp-content\/uploads\/2020\/08\/html_import_3-1024x552.png 1024w\" sizes=\"auto, (max-width: 1204px) 100vw, 1204px\" \/><\/p>\n<p id=\"caption-attachment-133355\" class=\"wp-caption-text\">\n<\/div>\n<p>Como en las pesta\u00f1as anteriores, debemos decirle de d\u00f3nde importaremos los contenidos, en este caso, los campos personalizados. Si es desde una etiqueta HTML o desde una regi\u00f3n de nuestra plantilla de DreamWeaver.<\/p>\n<p>Primero debemos escribir el nombre del campo personalizado y luego en \u00ab<strong>Select date by:\u00bb<\/strong> escogeremos bien una etiqueta HTML o b una regi\u00f3n de DreamWeaver para usar como fecha. Y, en la opci\u00f3n de \u00ab<strong>Custom fields:\u00bb<\/strong> haremos lo mismo. Para acabar le diremos el nombre del campo, la etiqueta, el atributo y el valor que queremos asignar a cada campo.<\/p>\n<h3>Importando categor\u00edas y etiquetas<\/h3>\n<p>Si nuestra web en HTML ten\u00eda p\u00e1ginas creadas con noticias lo ideal es que las categoricemos. Previamente debemos crear las categor\u00edas en nuestro WordPress. En Entradas &#8211; Categor\u00edas.<\/p>\n<div id=\"attachment_133356\" class=\"wp-caption alignnone\">\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignleft size-full wp-image-2502\" src=\"https:\/\/www.sarpanet.es\/es\/wp-content\/uploads\/2020\/08\/html_import_4.png\" alt=\"\" width=\"960\" height=\"571\" srcset=\"https:\/\/www.sarpanet.es\/es\/wp-content\/uploads\/2020\/08\/html_import_4.png 960w, https:\/\/www.sarpanet.es\/es\/wp-content\/uploads\/2020\/08\/html_import_4-300x178.png 300w, https:\/\/www.sarpanet.es\/es\/wp-content\/uploads\/2020\/08\/html_import_4-768x457.png 768w\" sizes=\"auto, (max-width: 960px) 100vw, 960px\" \/><\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<\/div>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>Una vez configurado todo le daremos a \u00abSave setting\u00bb para guardarlo todo.<\/p>\n<h3>Finalizando la importaci\u00f3n de nuestra web en HTML a WordPress<\/h3>\n<p>Ya casi estamos terminando, y ahora nos iremos a Herramientas, Importar, HTML (y aqu\u00ed pulsamos en ejecutar importador).<\/p>\n<p>Para probar la configuraci\u00f3n que hemos hecho previamente, seleccionaremos la casilla de \u00aba single file\u00bb de tal forma que probemos que funciona todo importando un solo archivo html de nuestra antigua web. Seleccionamos el archivo HTML que queramos y le damos a SUBMIT. Si todo ha salido bien nos iremos a Entradas o P\u00e1ginas y ah\u00ed veremos\u00a0 la p\u00e1gina HTML importada. Si est\u00e1 bien ser\u00eda volver a Herramientas, Importar, HTML (y aqu\u00ed pulsamos en ejecutar importador) y escogeremos la opci\u00f3n \u00aba directory of files\u00bb.<\/p>\n<h3>Opini\u00f3n sobre el plugin y este tipo de importaci\u00f3n<\/h3>\n<p>He probado a importar a WordPress dos antiguas webs que ten\u00eda guardadas en HTML y la importaci\u00f3n no ha sido del todo satisfactoria. Al menos no lo que esperaba. Me ha importado todos los t\u00edtulos, metadatos, textos, enlaces e im\u00e1genes, pero el dise\u00f1o se ha movido. No est\u00e1 exactamente igual. Ahora me tocar\u00eda enredar con los CSS y trabajar bien los estilos.<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>A d\u00eda de hoy la gran mayor\u00eda de las webs est\u00e1n hechas con HTML como base de programaci\u00f3n. Pero, en ocasiones, podemos necesitar pasar una web dise\u00f1ada en HTML a WordPress. Los motivos pueden ser muchos, pero principalmente ser\u00e1 la facilidad para poder gestionar los contenidos de la web. Adem\u00e1s, [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":2502,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1,108,40],"tags":[],"class_list":["post-2490","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-hosting","category-plugins-de-wordpress","category-wordpress"],"_links":{"self":[{"href":"https:\/\/www.sarpanet.es\/es\/wp-json\/wp\/v2\/posts\/2490","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.sarpanet.es\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.sarpanet.es\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.sarpanet.es\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.sarpanet.es\/es\/wp-json\/wp\/v2\/comments?post=2490"}],"version-history":[{"count":5,"href":"https:\/\/www.sarpanet.es\/es\/wp-json\/wp\/v2\/posts\/2490\/revisions"}],"predecessor-version":[{"id":2503,"href":"https:\/\/www.sarpanet.es\/es\/wp-json\/wp\/v2\/posts\/2490\/revisions\/2503"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.sarpanet.es\/es\/wp-json\/wp\/v2\/media\/2502"}],"wp:attachment":[{"href":"https:\/\/www.sarpanet.es\/es\/wp-json\/wp\/v2\/media?parent=2490"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.sarpanet.es\/es\/wp-json\/wp\/v2\/categories?post=2490"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.sarpanet.es\/es\/wp-json\/wp\/v2\/tags?post=2490"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}