{"id":14911,"date":"2019-02-21T10:36:36","date_gmt":"2019-02-21T13:36:36","guid":{"rendered":"https:\/\/blog.hostinger.io\/br-tutoriais\/?p=14911"},"modified":"2023-08-18T18:52:47","modified_gmt":"2023-08-18T21:52:47","slug":"converter-site-html-para-wordpress","status":"publish","type":"post","link":"\/br\/tutoriais\/converter-site-html-para-wordpress","title":{"rendered":"Como converter site HTML para WordPress"},"content":{"rendered":"<p><span style=\"font-weight: 400\">Ent&atilde;o, conferindo as <\/span><span style=\"font-weight: 400\">estat&iacute;sticas<\/span><span style=\"font-weight: 400\"> recentes voc&ecirc; viu que o WordPress comporta 33% dos sites da internet. E como dono de site, voc&ecirc; passa a considerar converter seu site est&aacute;tico em HTML para WordPress.<\/span><\/p><p><span style=\"font-weight: 400\">N&atilde;o existe problema algum em ter um site constru&iacute;do em HTML. O HTML 5 &eacute; poderoso, principalmente se o seu site for um site apenas para apresenta&ccedil;&atilde;o de produto ou de uma empresa, por n&atilde;o permitir altera&ccedil;&otilde;es constantes.<\/span><\/p><p><span style=\"font-weight: 400\">Mas se estamos falando de um site mais robusto, o WordPress oferece mais solu&ccedil;&otilde;es como temas, plugins e widgets para melhorar o seu site WordPress e voc&ecirc; ainda poder&aacute; adicionar outros recursos muito &uacute;teis.<\/span><\/p><p><span style=\"font-weight: 400\">O WordPress tamb&eacute;m &eacute; f&aacute;cil de gerenciar. Voc&ecirc; pode adicionar e remover o conte&uacute;do do seu site sem conhecimento em programa&ccedil;&atilde;o. Com um site HTML, a hist&oacute;ria j&aacute; &eacute; diferente. Se voc&ecirc; n&atilde;o sabe programar e codificar, atualizar um conte&uacute;do em HTML pode ser complicado. <\/span><\/p><p><span style=\"font-weight: 400\">Neste artigo, voc&ecirc; vai aprender como converter um site est&aacute;tico em HTML para WordPress em diferentes m&eacute;todos. Vamos come&ccedil;ar. <\/span><\/p><p>\n\n\n\n\n\n\n\n\n<\/p><h2 class=\"wp-block-heading\" id=\"h-o-que-saber-antes-de-mudar-de-html-para-wordpress\"><b>O Que Saber Antes de Mudar de HTML Para WordPress <\/b><\/h2><p><span style=\"font-weight: 400\">Antes de fazer a mudan&ccedil;a, voc&ecirc; precisa considerar algumas coisas importantes: <\/span><\/p><ol class=\"wp-block-list\">\n<li><span style=\"font-weight: 400\"><strong>Servi&ccedil;o de hospedagem<\/strong>. Voc&ecirc; precisa ter um plano de hospedagem ativo para hospedar um site WordPress. <\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400\"><strong>Editor de c&oacute;digos<\/strong>. Voc&ecirc; vai precisar de um editor de c&oacute;digos como o Notepad++, Atom, Sublime, etc., para trabalhar no c&oacute;digo HTML do seu site.<\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400\"><strong>Tempo e dinheiro<\/strong>. Voc&ecirc; precisa considerar o tempo e o dinheiro que poder&aacute; investir. Se voc&ecirc; est&aacute; comprometido em aprender sozinho, este tutorial &eacute; perfeito para voc&ecirc;. Ou ent&atilde;o, voc&ecirc; pode contratar desenvolvedores ou utilizar aplicativos de migra&ccedil;&atilde;o para te ajudar a converter seu site HTML. <\/span><\/li>\n<\/ol><h2 class=\"wp-block-heading\" id=\"h-dois-metodos-para-converter-hmtl-para-wordpress\"><b>Dois M&eacute;todos Para Converter HMTL para WordPress<\/b><\/h2><p><span style=\"font-weight: 400\">Existem diferentes m&eacute;todos para converter HTML em WordPress com diversos n&iacute;veis de dificuldade. Alguns desafios s&atilde;o: <\/span><\/p><ol class=\"wp-block-list\">\n<li><span style=\"font-weight: 400\"><strong>Criar um tema WordPress de um site HTML est&aacute;tico<\/strong>. Se voc&ecirc; prefere o design do seu antigo site est&aacute;tico em HTML, este &eacute; o seu caso. &Eacute; tamb&eacute;m o caminho mais desafiador e requer conhecimentos em c&oacute;digo. Mas, n&atilde;o fique intimidado. Tudo o que voc&ecirc; precisa fazer &eacute; copiar\/colar o HTML antigo em diversos arquivos PHP. <\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400\"><strong>Abrir m&atilde;o do design e manter somente o conte&uacute;do<\/strong>. Se est&aacute; tudo bem pra voc&ecirc; se desfazer do design do seu site antigo e encontrar um novo tema WordPress, esta op&ccedil;&atilde;o &eacute; para voc&ecirc;. Voc&ecirc; apenas precisa transferir o conte&uacute;do para o novo endere&ccedil;o. <\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400\"><strong>Usando um tema filho adaptado de um tema existente<\/strong>. Este provavelmente &eacute; o caminho mais f&aacute;cil se voc&ecirc; quiser manter o design do seu site antigo. Com este m&eacute;todo, voc&ecirc; usar&aacute; um tema WordPress pr&eacute;-existente e construir seu site a partir da&iacute;. E, como b&ocirc;nus, voc&ecirc; ainda pode usar recursos incr&iacute;veis que o WordPress oferece em seus temas. <\/span><\/li>\n<\/ol><h3 class=\"wp-block-heading\" id=\"h-como-criar-um-tema-wordpress-de-um-site-html-estatico\"><b>Como Criar um Tema WordPress de um Site HTML Est&aacute;tico<\/b><\/h3><p><span style=\"font-weight: 400\">Se o seu objetivo &eacute; criar um site WordPress parecido com o seu site HTML, voc&ecirc; pode come&ccedil;ar por aqui. Neste tutorial, vamos usal um t<\/span><a href=\"https:\/\/github.com\/rachelmccollin\/WPMU-DEV-Theme-Development-Series-Files\/tree\/master\/Starting%20code\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400\">ema HTML est&aacute;tico<\/span><\/a><span style=\"font-weight: 400\"> de Rachel McCollin. <\/span><\/p><h4 class=\"wp-block-heading\" id=\"h-1-criar-uma-pasta-de-tema-e-arquivos-basicos\"><b>1. Criar uma Pasta de Tema e Arquivos B&aacute;sicos<\/b><\/h4><p><span style=\"font-weight: 400\">Crie uma nova pasta na sua &aacute;rea de trabalho e escolha um nome. Aqui, vamos cham&aacute;-lo de <\/span><b>my-theme<\/b><span style=\"font-weight: 400\">. Depois disso, abra o editor e crie os seguintes arquivos.<\/span><\/p><ul class=\"wp-block-list\">\n<li><b>style.css<\/b><\/li>\n\n\n\n<li><b>index.php<\/b><\/li>\n\n\n\n<li><b>header.php<\/b><\/li>\n\n\n\n<li><b>sidebar.php<\/b><\/li>\n\n\n\n<li><b>footer.php<\/b><\/li>\n<\/ul><p><span style=\"font-weight: 400\">Deixe o editor aberto. Vamos voltar ali em breve. <\/span><\/p><h4 class=\"wp-block-heading\" id=\"h-2-trocar-css-do-site-antigo-para-folha-de-estilo-wordpress\"><b>2. Trocar CSS do Site Antigo para folha de estilo WordPress <\/b><\/h4><p><span style=\"font-weight: 400\">Agora, vamos criar uma folha de estilo WordPress copiando o antigo c&oacute;digo CSS. Acesse o arquivo <\/span><b>style.css<\/b><span style=\"font-weight: 400\">, e cole este c&oacute;digo abaixo:<\/span><\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"null\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/*\nTheme Name: My Theme\nAuthor: LakiGarang\nAuthor URI: https:\/\/hostinger.com\/tutorials\/author\/luqman\nDescription: A development theme, from static HTML to WordPress\nVersion: 1.0\nLicense: GNU General Public License v2 or later\nLicense URI: http:\/\/www.gnu.org\/licenses\/gpl-2.0.html\n*\/\n<\/pre><p><span style=\"font-weight: 400\">Este c&oacute;digo informa ao WordPress que esta &eacute; o cabe&ccedil;alho da folha de estilo do tema. <\/span><\/p><p><span style=\"font-weight: 400\">Voc&ecirc; pode editar os detalhes como nome do tema, autor, url, descri&ccedil;&atilde;o, etc. <\/span><\/p><p><span style=\"font-weight: 400\">Depois de copiar o cabe&ccedil;alho, copie e cole o c&oacute;digo antigo do CSS no arquivo. Salve e feche. <\/span><\/p><h4 class=\"wp-block-heading\" id=\"h-3-divida-o-html-do-seu-site-antigo\"><b>3. Divida o HTML do seu Site Antigo<\/b><\/h4><p><span style=\"font-weight: 400\">WordPress usa PHP para extrair informa&ccedil;&atilde;o do seu banco de dados. Ent&atilde;o, voc&ecirc; precisa dividir seu site HTML em diferentes partes para garantir que todos ser&atilde;o agrupados corretamente. &nbsp;<\/span><\/p><p><span style=\"font-weight: 400\">Se isto parece complicado, n&atilde;o se preocupe, vamos explicar tudo. Primeiro, vamos ver como &eacute; o c&oacute;digo do nosso site:<\/span><\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"null\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;!DOCTYPE html&gt;\n&lt;!--[if lt IE 7]&gt;&lt;html lang=\"en-US\" class=\"ie6\"&gt;&lt;![endif]--&gt;\n&lt;!--[if IE 7]&gt;&lt;html lang=\"en-US\" class=\"ie7\"&gt;&lt;![endif]--&gt;\n&lt;!--[if IE 8]&gt;&lt;html lang=\"en-US\" class=\"ie8\"&gt;&lt;![endif]--&gt;\n&lt;!--[if IE 9]&gt;&lt;html lang=\"en-US\" class=\"ie9\"&gt;&lt;![endif]--&gt;\n&lt;!--[if gt IE 9]&gt;&lt;html lang=\"en-US\"&gt;&lt;![endif]--&gt;\n&lt;!--[if !IE]&gt;&lt;html lang=\"en-US\"&gt;&lt;![endif]--&gt;\n&lt;head&gt;\n&lt;meta charset=\"UTF-8\" \/&gt;\n&lt;meta name=\"viewport\" content=\"width=device-width\" \/&gt;\n&lt;title&gt;WordPress Writer and Instructor | RACHEL McCOLLIN&lt;\/title&gt;\n\n&lt;link rel=\"stylesheet\" type=\"text\/css\" media=\"all\" href=\"style.css\" \/&gt;\n&lt;link href=\"https:\/\/fonts.googleapis.com\/css?family=Assistant|Oswald\" rel=\"stylesheet\"&gt;\n\n&lt;\/head&gt;\n\n&lt;body&gt;\n\n&lt;div class=\"header-bg\"&gt;\n\n&nbsp;&nbsp;&lt;header role=\"banner\"&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&lt;hgroup class=\"site-name three-quarters left\"&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;!-- site name and description - site name is inside a div element on all pages execpt the front page and\/or main blog page, where it is in a h1 element --&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h1 id=\"site-title\" class=\"one-half-left\"&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;a href=\"https:\/\/rachelmccollin.com\/\" title=\"RACHEL McCOLLIN\" rel=\"home\"&gt;RACHEL McCOLLIN&lt;\/a&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/h1&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h2 id=\"site-description\"&gt;Fiction and Technical Writer&lt;\/h2&gt;\n&nbsp;&nbsp;&nbsp;\n&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/hgroup&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"right quarter\"&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;a class=\"toggle-nav\" href=\"#\"&gt;&#9776;&lt;\/a&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\n&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/div&gt; &lt;!-- .right quarter --&gt;\n&nbsp;\n&nbsp;&nbsp;&lt;\/header&gt;&lt;!-- header --&gt;\n&nbsp;\n&lt;\/div&gt;&lt;!-- header-bg--&gt;\n\n&nbsp;&nbsp;&nbsp;\n&lt;!-- full width navigation menu --&gt;\n&lt;nav class=\"menu main\"&gt;\n&nbsp;&nbsp;&nbsp;\n&nbsp;&nbsp;&lt;div class=\"skip-link screen-reader-text\"&gt;&lt;a href=\"#content\" title=\"Skip to content\"&gt;Skip to content&lt;\/a&gt;&lt;\/div&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\n&nbsp;&nbsp;&lt;div class=\"main-nav\"&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&lt;ul class=\"menu\"&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li class=\"menu-item\"&gt;&lt;a href=\"https:\/\/rachelmccollin.com\/\"&gt;Home&lt;\/a&gt;&lt;\/li&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li class=\"menu-item\"&gt;&lt;a href=\"https:\/\/rachelmccollin.com\/about-me\/\"&gt;About Me&lt;\/a&gt;&lt;\/li&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li class=\"menu-item\"&gt;&lt;a href=\"https:\/\/rachelmccollin.com\/books\/\"&gt;Books&lt;\/a&gt;&lt;\/li&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li class=\"menu-item\"&gt;&lt;a href=\"https:\/\/rachelmccollin.com\/bookclub\/\"&gt;Book Club&lt;\/a&gt;&lt;\/li&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li class=\"menu-item\"&gt;&lt;a href=\"https:\/\/rachelmccollin.com\/blog\/\"&gt;Blog&lt;\/a&gt;&lt;\/li&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li class=\"menu-item\"&gt;&lt;a href=\"https:\/\/rachelmccollin.com\/contact\/\"&gt;Contact&lt;\/a&gt;&lt;\/li&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/ul&gt;\n&nbsp;&nbsp;&lt;\/div&gt; &nbsp;&nbsp;\n&nbsp;\n&lt;\/nav&gt;&lt;!-- .main --&gt;\n&nbsp;\n\n&lt;div class=\"main\"&gt;\n&nbsp;\n&nbsp;&nbsp;&lt;div id=\"content\" class=\"two-thirds left\"&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&lt;article class=\"post\"&gt;\n&nbsp;&nbsp;&nbsp;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h2 class=\"entry-title\"&gt;Welcome to This Website&lt;\/h2&gt;\n&nbsp;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;section class=\"entry-content\"&gt;\n&nbsp;&nbsp;&nbsp;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;This site is comprised of one static HTML file.&lt;\/p&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;You will be able to add more content later via the WordPress admin screens.\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h3&gt;Here's a heading so you can check how it's styled&lt;\/h3&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;And another paragraph underneath.&lt;\/p&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;And a list:&lt;\/p&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;ul&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;Item 1&lt;\/li&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;Item 2&lt;\/li&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;And so on...&lt;\/li&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/ul&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/section&gt;&lt;!-- .entry-content --&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/article&gt;&lt;!-- #post-## --&gt;\n\n&nbsp;&nbsp;&lt;\/div&gt;&lt;!-- #content --&gt;\n\n&nbsp;\n&nbsp;&nbsp;&lt;aside class=\"sidebar one-third right\"&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&lt;aside class=\"widget-area\"&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"widget-container\"&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h3 class=\"widget-title\"&gt;Buy My Book&lt;\/h3&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;img width=\"242\" height=\"300\" src=\"https:\/\/premium.wpmudev.org\/wp-content\/themes\/wpmudev-2015-1\/assets\/img\/projects\/snapshot-hero@2x.png?v=1\" alt=\"WordPress: Pushing the Limits by Rachel McCollin\" style=\"max-width: 100%; height: auto;\" \/&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;&lt;em&gt;WordPress: Pushing the Limits&lt;\/em&gt; will help you become a professional WordPress developer.&lt;\/p&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/div&gt;\n&nbsp;&nbsp;&nbsp;\n&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/aside&gt;\n\n&nbsp;&nbsp;&lt;\/aside&gt;\n&nbsp;\n&lt;\/div&gt;&lt;!-- .main --&gt;\n\n\n&lt;footer&gt;\n\n&nbsp;&nbsp;&lt;div class=\"fatfooter\"&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;Add footer content here with &lt;a href=\"#\"&gt;widget areas&lt;\/a&gt; - the tutorials will show you how.&lt;\/p&gt;\n\n&nbsp;&nbsp;&lt;\/div&gt;\n\n&lt;\/footer&gt;\n\n&lt;\/body&gt;\n&lt;\/html&gt;\n\nNow, open your old static website index.html file, we&rsquo;re going to split that into the newly created WordPress files. (The examples below are our markup).\n\nheader.php\nEverything from the beginning of your old HTML code up to the main content area goes into this file. The main content area usually expressed with &lt;main&gt; or &lt;div class=\"main\"&gt;.\n\nAdditionally, right before the &lt;\/head&gt; element, copy and paste this code &lt;?php wp_head();?&gt;. This ensures WordPress plugins work properly. When you finish, save the file.\n\n&lt;!DOCTYPE html&gt;\n&lt;!--[if lt IE 7]&gt;&lt;html lang=\"en-US\" class=\"ie6\"&gt;&lt;![endif]--&gt;\n&lt;!--[if IE 7]&gt;&lt;html lang=\"en-US\" class=\"ie7\"&gt;&lt;![endif]--&gt;\n&lt;!--[if IE 8]&gt;&lt;html lang=\"en-US\" class=\"ie8\"&gt;&lt;![endif]--&gt;\n&lt;!--[if IE 9]&gt;&lt;html lang=\"en-US\" class=\"ie9\"&gt;&lt;![endif]--&gt;\n&lt;!--[if gt IE 9]&gt;&lt;html lang=\"en-US\"&gt;&lt;![endif]--&gt;\n&lt;!--[if !IE]&gt;&lt;html lang=\"en-US\"&gt;&lt;![endif]--&gt;\n&lt;head&gt;\n&lt;meta charset=\"UTF-8\" \/&gt;\n&lt;meta name=\"viewport\" content=\"width=device-width\" \/&gt;\n&lt;title&gt;WordPress Writer and Instructor | RACHEL McCOLLIN&lt;\/title&gt;\n\n&lt;link rel=\"stylesheet\" type=\"text\/css\" media=\"all\" href=\"style.css\" \/&gt;\n&lt;link href=\"https:\/\/fonts.googleapis.com\/css?family=Assistant|Oswald\" rel=\"stylesheet\"&gt;\n&lt;?php wp_head();?&gt;\n&lt;\/head&gt;\n\n&lt;body&gt;\n\n&lt;div class=\"header-bg\"&gt;\n\n&nbsp;&nbsp;&lt;header role=\"banner\"&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&lt;hgroup class=\"site-name three-quarters left\"&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;!-- site name and description - site name is inside a div element on all pages execpt the front page and\/or main blog page, where it is in a h1 element --&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h1 id=\"site-title\" class=\"one-half-left\"&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;a href=\"https:\/\/rachelmccollin.com\/\" title=\"RACHEL McCOLLIN\" rel=\"home\"&gt;RACHEL McCOLLIN&lt;\/a&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/h1&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h2 id=\"site-description\"&gt;Fiction and Technical Writer&lt;\/h2&gt;\n&nbsp;&nbsp;&nbsp;\n&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/hgroup&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"right quarter\"&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;a class=\"toggle-nav\" href=\"#\"&gt;&#9776;&lt;\/a&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\n&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/div&gt; &lt;!-- .right quarter --&gt;\n&nbsp;\n&nbsp;&nbsp;&lt;\/header&gt;&lt;!-- header --&gt;\n&nbsp;\n&lt;\/div&gt;&lt;!-- header-bg--&gt;\n\n&nbsp;&nbsp;&nbsp;\n&lt;!-- full width navigation menu --&gt;\n&lt;nav class=\"menu main\"&gt;\n&nbsp;&nbsp;&nbsp;\n&nbsp;&nbsp;&lt;div class=\"skip-link screen-reader-text\"&gt;&lt;a href=\"#content\" title=\"Skip to content\"&gt;Skip to content&lt;\/a&gt;&lt;\/div&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\n&nbsp;&nbsp;&lt;div class=\"main-nav\"&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&lt;ul class=\"menu\"&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li class=\"menu-item\"&gt;&lt;a href=\"https:\/\/rachelmccollin.com\/\"&gt;Home&lt;\/a&gt;&lt;\/li&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li class=\"menu-item\"&gt;&lt;a href=\"https:\/\/rachelmccollin.com\/about-me\/\"&gt;About Me&lt;\/a&gt;&lt;\/li&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li class=\"menu-item\"&gt;&lt;a href=\"https:\/\/rachelmccollin.com\/books\/\"&gt;Books&lt;\/a&gt;&lt;\/li&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li class=\"menu-item\"&gt;&lt;a href=\"https:\/\/rachelmccollin.com\/bookclub\/\"&gt;Book Club&lt;\/a&gt;&lt;\/li&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li class=\"menu-item\"&gt;&lt;a href=\"https:\/\/rachelmccollin.com\/blog\/\"&gt;Blog&lt;\/a&gt;&lt;\/li&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li class=\"menu-item\"&gt;&lt;a href=\"https:\/\/rachelmccollin.com\/contact\/\"&gt;Contact&lt;\/a&gt;&lt;\/li&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/ul&gt;\n&nbsp;&nbsp;&lt;\/div&gt; &nbsp;&nbsp;\n&nbsp;\n&lt;\/nav&gt;&lt;!-- .main --&gt;<\/pre><p><b>Sidebar.php<\/b><\/p><p><span style=\"font-weight: 400\">Tudo que pertence a se&ccedil;&atilde;o <\/span><b>&lt;aside &hellip; &lt;\/aside&gt; <\/b><span style=\"font-weight: 400\">do seu c&oacute;dito HTML antigo, deve ir para este arquivo. Quando terminar, salve o arquivo.<\/span><\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"null\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;aside class=\"sidebar one-third right\"&gt;\n \n     &lt;aside class=\"widget-area\"&gt;\n      \n       &lt;div class=\"widget-container\"&gt;\n        \n         &lt;h3 class=\"widget-title\"&gt;Buy My Book&lt;\/h3&gt;\n        \n         &lt;img width=\"242\" height=\"300\" src=\"https:\/\/premium.wpmudev.org\/wp-content\/themes\/wpmudev-2015-1\/assets\/img\/projects\/snapshot-hero@2x.png?v=1\" alt=\"WordPress: Pushing the Limits by Rachel McCollin\" style=\"max-width: 100%; height: auto;\" \/&gt;\n        \n         &lt;p&gt;&lt;em&gt;WordPress: Pushing the Limits&lt;\/em&gt; will help you become a professional WordPress developer.&lt;\/p&gt;\n \n       &lt;\/div&gt;\n    \n     &lt;\/aside&gt;\n \n   &lt;\/aside&gt;\n<\/pre><p><b>Footer.php<\/b><\/p><p><span style=\"font-weight: 400\">Agora, tudo que tiver at&eacute; o final do arquivo deve ser a informa&ccedil;&atilde;o do rodap&eacute;, e deve ir para este arquivo.<\/span><\/p><p><span style=\"font-weight: 400\">Antes de fechar o elemento <\/span><b>&lt;\/body&gt;<\/b><span style=\"font-weight: 400\">, adicione este c&oacute;digo &lt;?php wp_footer();?&gt; igualmente em <\/span><b>header.php<\/b><span style=\"font-weight: 400\">. Quando finalizar, clique em salvar. <\/span><\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"null\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;\/div&gt;&lt;!-- .main --&gt;\n \n \n &lt;footer&gt;\n \n   &lt;div class=\"fatfooter\"&gt;\n \n     &lt;p&gt;Add footer content here with &lt;a href=\"#\"&gt;widget areas&lt;\/a&gt; - the tutorials will show you how.&lt;\/p&gt;\n \n   &lt;\/div&gt;\n \n &lt;\/footer&gt;\n &lt;?php wp_footer();?&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;\n<\/pre><p><span style=\"font-weight: 400\">Agora voc&ecirc; j&aacute; terminou o trabalho co arquivo antigo <\/span><b>index.html<\/b><span style=\"font-weight: 400\">. Voc&ecirc; pode fechar junto com os demais arquivos dentro da sua pasta tema, exceto o <\/span><b>header.php<\/b><span style=\"font-weight: 400\"> e <\/span><b>index.php<\/b><span style=\"font-weight: 400\">. Ainda temos o que fazer aqui. <\/span><\/p><h4 class=\"wp-block-heading\" id=\"h-4-alterar-o-estilo-do-formato-wordpress\"><b>4. Alterar o Estilo do Formato WordPress <\/b><\/h4><p><span style=\"font-weight: 400\">No cabe&ccedil;alho, tudo o que voc&ecirc; precisa fazer &eacute; trocar a folha de estilo do HTML para o formato WordPress. Procure pelo link existente na se&ccedil;&atilde;o <\/span><b>&lt;head&gt;<\/b><span style=\"font-weight: 400\">. No meu caso, &eacute; algo parecido com isso: <\/span><\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"null\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;link rel=\"stylesheet\" type=\"text\/css\" media=\"all\" href=\"style.css\" \/&gt;\n<\/pre><p><span style=\"font-weight: 400\">Substitua por essa linha:<\/span><\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"null\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;link rel=\"stylesheet\" href=\"&lt;?php echo get_template_directory_uri(); ?&gt;\/style.css\" type=\"text\/css\" media=\"all\" \/&gt;\n<\/pre><p><span style=\"font-weight: 400\">Agora, voc&ecirc; pode salvar e fechar o arquivo <\/span><b>header.php<\/b><span style=\"font-weight: 400\">.<\/span><\/p><p><span style=\"font-weight: 400\">Volte ao arquivo <\/span><b>index.php<\/b><span style=\"font-weight: 400\">. Neste momento ele deve estar em branco, ent&atilde;o copie e cole estas linhas de c&oacute;digo: <\/span><\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"null\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;?php get_header(); ?&gt;\n \n&lt;?php get_sidebar(); ?&gt;\n&lt;?php get_footer(); ?&gt;\n<\/pre><p><span style=\"font-weight: 400\">Este c&oacute;digo vai denominar o restante dos seus arquivos WordPress. Voc&ecirc; vai notar um espa&ccedil;o entre o cabe&ccedil;alho e a barra lateral. Aqui voc&ecirc; deve adicionar o <\/span><a href=\"https:\/\/codex.wordpress.org\/The_Loop\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400\">The Loop<\/span><\/a><span style=\"font-weight: 400\">.<\/span><\/p><p><span style=\"font-weight: 400\">The Loop vai processar cada post para ser exibido e formatar&aacute; de acordo com a maneira que o conte&uacute;do corresponde aos crit&eacute;rios nas tags do The Loop. &Eacute; um aspecto importante para adicionar um conte&uacute;do din&acirc;mico no seu site WordPress. <\/span><\/p><p><span style=\"font-weight: 400\">Para fazer isto, copie o c&oacute;digo abaixo ap&oacute;s o <\/span><b>&lt;?php get_header(); ?&gt;<\/b><span style=\"font-weight: 400\">:<\/span><\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"null\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&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;\n       Posted 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<\/pre><p><span style=\"font-weight: 400\">Quando terminar, salve e feche o arquivo <\/span><b>index.php<\/b><span style=\"font-weight: 400\">. Voc&ecirc; acabou de criar um tema WordPress com sucesso. Agora, voc&ecirc; pode adicion&aacute;-lo ao seu site. <\/span><\/p><h4 class=\"wp-block-heading\" id=\"h-5-fazer-upload-do-seu-tema-para-o-wordpress\"><b>5. Fazer Upload do Seu Tema Para o WordPress<\/b><\/h4><p><span style=\"font-weight: 400\">Ap&oacute;s terminar de criar um tema b&aacute;sico, voc&ecirc; pode fazer o upload no WordPress. Todos os arquivos dentro da sua pasta de tema devem estar no mesmo lugar. Para fazer isso, voc&ecirc; pode &ldquo;zipar&rdquo; os arquivos.<\/span><\/p><p><span style=\"font-weight: 400\">Acesse o seu <\/span><a href=\"https:\/\/www.hostinger.com\/br\/tutoriais\/wordpress-login-guia-rapido-acessar-site\"><span style=\"font-weight: 400\">Painel de Controle<\/span><\/a><span style=\"font-weight: 400\"> do WordPress. V&aacute; para <\/span><b>Apar&ecirc;ncias <\/b><span style=\"font-weight: 400\"><strong>&gt;<\/strong> <\/span><b>Temas<\/b><span style=\"font-weight: 400\">. Clique em <\/span><b>Adicionar Novo<\/b><strong> &gt; <\/strong><b>Enviar Temas<\/b><span style=\"font-weight: 400\">.<\/span><\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"900\" height=\"244\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/08\/upload-do-tema.jpg\/public\" alt=\"Upload do tema do WordPress\" class=\"wp-image-39320\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/08\/upload-do-tema.jpg\/w=900,fit=scale-down 900w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/08\/upload-do-tema.jpg\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/08\/upload-do-tema.jpg\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/08\/upload-do-tema.jpg\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 900px) 100vw, 900px\" \/><\/figure><\/div><p><span style=\"font-weight: 400\">No menu, localize o seu arquivo de tema, fa&ccedil;a o upload e clique em <\/span><b>Instalar Agora<\/b><span style=\"font-weight: 400\">. Depois disso, n&atilde;o se esque&ccedil;a de ativar o tema.<\/span><\/p><p><span style=\"font-weight: 400\">Agora, o front end do seu site deve se parecer com a vers&atilde;o antiga. Voc&ecirc; deve estar atento pois, embora aspectos b&aacute;sicos do design estejam parecidos, existem outras coisas que voc&ecirc; deve fazer para tornar a integra&ccedil;&atilde;o bem melhor.<\/span><\/p><p><span style=\"font-weight: 400\">Por exemplo, voc&ecirc; n&atilde;o pode usar recursos do WordPress como a &aacute;rea de widgets. Voc&ecirc; tamb&eacute;m precisa alinhar as marca&ccedil;&otilde;es do CSS para que fa&ccedil;am parte do design original do WordPress. <\/span><\/p><h3 class=\"wp-block-heading\" id=\"h-abandonar-design-e-manter-somente-o-conteudo\"><b>Abandonar Design e Manter Somente o Conte&uacute;do<\/b><\/h3><p><span style=\"font-weight: 400\">Se est&aacute; tudo bem para voc&ecirc; abrir m&atilde;o do antigo design do seu site HTML e usar um novo tema, este &eacute; o t&oacute;pico certo! Este m&eacute;todo tamb&eacute;m vai facilitar na hora de importar o conte&uacute;do. <\/span><\/p><p><span style=\"font-weight: 400\">Tudo o que voc&ecirc; precisa fazer &eacute; <\/span><a href=\"https:\/\/www.hostinger.com\/br\/tutoriais\/como-instalar-temas-do-wordpress\/\"><span style=\"font-weight: 400\">instalar e ativar o seu tema<\/span><\/a><span style=\"font-weight: 400\"> preferido e seguir os passos abaixo. <\/span><br><\/p><p>\n\n\n<div><p class=\"important\"><b><i>Importante<\/i><\/b><i><span style=\"font-weight: 400\">: Sempre tenha um backup do seu site antes de qualquer mudan&ccedil;a.<\/span><\/i><\/p><\/div>\n\n\n\n<\/p><h4 class=\"wp-block-heading\" id=\"h-1-instalar-o-import-plugin-2\"><b>1. Instalar o Import Plugin 2<\/b><\/h4><p><span style=\"font-weight: 400\">Voc&ecirc; precisa instalar o <\/span> <a href=\"https:\/\/wordpress.org\/plugins\/import-html-pages\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400\">Import Plugin 2<\/span><\/a><span style=\"font-weight: 400\">. <\/span><\/p><p><span style=\"font-weight: 400\">Abaixo vamos ensinar como instalar o plugin pelo painel de controle. Caso n&atilde;o esteja dispon&iacute;vel, voc&ecirc; pode baixar o plugin no <\/span><a href=\"https:\/\/wordpress.org\/plugins\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400\">Diret&oacute;rio Oficial<\/span><\/a><span style=\"font-weight: 400\"> e <\/span><a href=\"https:\/\/www.hostinger.com\/br\/tutoriais\/como-instalar-plugins-wordpress\/\"><span style=\"font-weight: 400\">instalar via FTP<\/span><\/a><span style=\"font-weight: 400\"> (op&ccedil;&atilde;o 3). <\/span><\/p><p><span style=\"font-weight: 400\">Acesse <\/span><b>Plugins &gt; Adicionar Novo <\/b><span style=\"font-weight: 400\">e pesquise pelo nome do plugin. Voc&ecirc; vai encontrar o plugin um pouco mais abaixo porque ele &eacute; um plugin antigo, mas n&atilde;o se preocupe pois ainda entrega &oacute;timos resultados. Clique em <strong>I<\/strong><\/span><b>nstalar <\/b><span style=\"font-weight: 400\">e <strong>A<\/strong><\/span><b>tivar<\/b><span style=\"font-weight: 400\">.<\/span><\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"899\" height=\"485\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/08\/plugin-importar-html.png\/public\" alt=\"plugins para importar c&oacute;digo HTML\" class=\"wp-image-39321\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/08\/plugin-importar-html.png\/w=899,fit=scale-down 899w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/08\/plugin-importar-html.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/08\/plugin-importar-html.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/08\/plugin-importar-html.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 899px) 100vw, 899px\" \/><\/figure><\/div><h4 class=\"wp-block-heading\" id=\"h-2-preparar-a-importacao\"><b>2. Preparar a Importa&ccedil;&atilde;o<\/b><\/h4><p><span style=\"font-weight: 400\">Agora, acesse <\/span><b>Settings\/<\/b><b>Configura&ccedil;&otilde;es &gt; HTML Import<\/b><span style=\"font-weight: 400\">. Voc&ecirc; poder&aacute; importar diversas p&aacute;ginas ou uma p&aacute;gina de cada vez.<\/span><\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"900\" height=\"593\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2019\/02\/html-import-configuracoes.jpg\/public\" alt=\"importat diversas p&aacute;ginas com plugin html import\" class=\"wp-image-14916\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2019\/02\/html-import-configuracoes.jpg\/w=900,fit=scale-down 900w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2019\/02\/html-import-configuracoes.jpg\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2019\/02\/html-import-configuracoes.jpg\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2019\/02\/html-import-configuracoes.jpg\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 900px) 100vw, 900px\" \/><\/figure><\/div><p><span style=\"font-weight: 400\">Voc&ecirc; vai perceber que o plugin aponta para um caminho espec&iacute;fico como <\/span><b>html-files-to-import. <\/b><span style=\"font-weight: 400\">Isto significa que voc&ecirc; precisa subir o arquivo HTML para o mesmo servidor em que o WordPress est&aacute; instalado. <\/span><\/p><p><span style=\"font-weight: 400\">Caso voc&ecirc; precise de mais detalhes, voc&ecirc; pode consultar o <\/span><a href=\"http:\/\/stephanieleary.com\/code\/wordpress\/html-import\/html-import-2-user-guide\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400\">guia do usu&aacute;rio<\/span><\/a><span style=\"font-weight: 400\">. <\/span><\/p><p><span style=\"font-weight: 400\">Neste tutorial, n&oacute;s vamos importar o conte&uacute;do. Para fazer isto, escolha a op&ccedil;&atilde;o <\/span><b>HTML Tag<\/b><span style=\"font-weight: 400\"> que voc&ecirc; v&ecirc; acima e selecione as configura&ccedil;&otilde;es nos tr&ecirc;s campos seguintes.<\/span><\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"900\" height=\"479\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2019\/02\/configuracao-importar-conteudo.jpg\/public\" alt=\"importar conteudo no wordpress\" class=\"wp-image-14917\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2019\/02\/configuracao-importar-conteudo.jpg\/w=900,fit=scale-down 900w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2019\/02\/configuracao-importar-conteudo.jpg\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2019\/02\/configuracao-importar-conteudo.jpg\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2019\/02\/configuracao-importar-conteudo.jpg\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 900px) 100vw, 900px\" \/><\/figure><\/div><p><span style=\"font-weight: 400\">Quando terminar, clique em <strong>S<\/strong><\/span><b>ave Settings <\/b>(<b>Salvar Configura&ccedil;&otilde;es<\/b>)<span style=\"font-weight: 400\">.<\/span><\/p><h4 class=\"wp-block-heading\" id=\"h-3-importanr-o-seu-conteudo\"><b>3. Importanr o Seu Conte&uacute;do<\/b><\/h4><p><span style=\"font-weight: 400\">O bot&atilde;o <\/span><b>Import Files<\/b><span style=\"font-weight: 400\"> estar&aacute; dispon&iacute;vel assim que voc&ecirc; salvar as configura&ccedil;&otilde;es. Se voc&ecirc; n&atilde;o encontrar, voc&ecirc; poder&aacute; acessar <\/span><b>Tools &gt; Import<\/b><span style=\"font-weight: 400\"> e clicar em <\/span><b>Run Importer<\/b><span style=\"font-weight: 400\"> abaixo das op&ccedil;&otilde;es de HTML.<\/span><\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"900\" height=\"264\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2019\/02\/importar-conteudo.jpg\/public\" alt=\"importar conteudo\" class=\"wp-image-14918\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2019\/02\/importar-conteudo.jpg\/w=900,fit=scale-down 900w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2019\/02\/importar-conteudo.jpg\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2019\/02\/importar-conteudo.jpg\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2019\/02\/importar-conteudo.jpg\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 900px) 100vw, 900px\" \/><\/figure><\/div><p><span style=\"font-weight: 400\">Escolha se voc&ecirc; quer importar um diret&oacute;rio de arquivos ou um arquivo &uacute;nico, e clique em <\/span><b>Submit<\/b><span style=\"font-weight: 400\">. Assim que terminar, todo o seu conte&uacute;do existente estar&aacute; dispon&iacute;vel no seu novo site WordPress.<\/span><\/p><h3 class=\"wp-block-heading\" id=\"h-usando-um-tema-filho-adaptado-do-tema-existente\"><b>Usando um Tema Filho Adaptado do Tema Existente<\/b><\/h3><p><span style=\"font-weight: 400\">Se voc&ecirc; quer manter alguma coisa do design do seu antigo site, mas achou o primeiro m&eacute;todo um pouco complicado, ent&atilde;o, usar um tema filho (Child Theme) pode ser uma simples alternativa. <\/span><\/p><p><span style=\"font-weight: 400\">Temas Filho permitem que voc&ecirc; se beneficie das vantagens de centenas de temas existentes (que s&atilde;o chamados os Parent Themes\/ temas Pais) no seu WordPress e construir seu novo site em cima dele. <\/span><\/p><p><span style=\"font-weight: 400\">Voc&ecirc; tamb&eacute;m pode fazer altera&ccedil;&otilde;es na apar&ecirc;ncia do seu site sem atrapalhar o n&uacute;cleo do Parent tema. Voc&ecirc; n&atilde;o vai perder nenhuma altera&ccedil;&atilde;o feita enquanto atualizava o seu tema. <\/span><\/p><p><span style=\"font-weight: 400\">N&oacute;s temos este tutorial avan&ccedil;ado de <\/span><a href=\"https:\/\/www.hostinger.com\/br\/tutoriais\/como-criar-o-tema-filho-wordpress\/\"><span style=\"font-weight: 400\">como criar<\/span><\/a><span style=\"font-weight: 400\"> um tema filho WordPress. <\/span><span style=\"font-weight: 400\">Neste tutorial, vamos usar o <\/span><a href=\"https:\/\/wordpress.org\/plugins\/childify-me\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400\">Childify Me<\/span><\/a><span style=\"font-weight: 400\"> para simplificar o m&eacute;todo para iniciantes.<\/span><br><\/p><p>\n\n\n<div><p class=\"important\"><b><i>Importante<\/i><\/b><i><span style=\"font-weight: 400\">: Sempre fa&ccedil;a o backup do seu site antes de quaisquer altera&ccedil;&atilde;o. <\/span><\/i><\/p><\/div>\n\n\n\n<\/p><h4 class=\"wp-block-heading\" id=\"h-1-escolha-um-tema\"><b>1. Escolha um Tema<\/b><\/h4><p><span style=\"font-weight: 400\">Voc&ecirc; precisa encontrar um tema que se enquadre ao que voc&ecirc; precisa para ent&atilde;o se basear nele. Ser&aacute; &oacute;timo se voc&ecirc; encontrar um tema parecido com o seu site antigo, ent&atilde;o n&atilde;o sofrer&aacute; muitas altera&ccedil;&otilde;es. <\/span><\/p><p><span style=\"font-weight: 400\">Navegue ao <\/span><a href=\"https:\/\/wordpress.org\/themes\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400\">Diret&oacute;rio de Temas WordPress<\/span><\/a><span style=\"font-weight: 400\"> para encontrar o tema ideal. Neste tutorial, vamos usar o <\/span><a href=\"https:\/\/wordpress.org\/themes\/twentyseventeen\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400\">Twenty Seventeen<\/span><\/a><span style=\"font-weight: 400\"> para come&ccedil;ar. <\/span><\/p><h4 class=\"wp-block-heading\" id=\"h-2-instalar-childify-me\"><b>2. Instalar Childify Me<\/b><\/h4><p><span style=\"font-weight: 400\">V&aacute; em <\/span><b>Plugins &gt; Adicionar Novo <\/b><span style=\"font-weight: 400\">e pesquise pelo nome no plugin. <\/span><b>Instale <\/b><span style=\"font-weight: 400\">e <\/span><b>Ative.<\/b><\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"561\" height=\"236\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/08\/childify-me-plugin-1.png\/public\" alt=\"imagem do plugin childfy me\" class=\"wp-image-39323\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/08\/childify-me-plugin-1.png\/w=561,fit=scale-down 561w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/08\/childify-me-plugin-1.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/08\/childify-me-plugin-1.png\/w=150,fit=scale-down 150w\" sizes=\"(max-width: 561px) 100vw, 561px\" \/><\/figure><\/div><p>\n\n<div><p class=\"important\"><b><i>Observa&ccedil;&atilde;o<\/i><\/b><i><span style=\"font-weight: 400\">: O plugin Childify Me plugin cria arquivos <\/span><\/i><b><i>style.css<\/i><\/b><i><span style=\"font-weight: 400\"> e <\/span><\/i><b><i>function.php<\/i><\/b><i><span style=\"font-weight: 400\">. Se voc&ecirc; quer adicionar fun&ccedil;&otilde;es customizadas no arquivo <\/span><\/i><b><i>functions.php<\/i><\/b><i><span style=\"font-weight: 400\">, novas pastas\/arquivos, voc&ecirc; pode fazer o upload usando um cliente FTP. Se voc&ecirc; &eacute; usu&aacute;rio da Hostinger, nosso <\/span><\/i><a href=\"https:\/\/us-files.hostinger.com\/\" target=\"_blank\" rel=\"noopener\"><i><span style=\"font-weight: 400\">Gerenciador de Arquivos<\/span><\/i><\/a><i><span style=\"font-weight: 400\"> vai te ajudar a gerenciar os arquivos diretamente do painel de controle. <\/span><\/i><\/p><\/div>\n\n\n\n<\/p><h4 class=\"wp-block-heading\" id=\"h-3-customizar-o-parent-theme\"><b>3. Customizar o Parent Theme<\/b><\/h4><p><span style=\"font-weight: 400\">Agora v&aacute; para <\/span><b>Apar&ecirc;ncia &gt; Temas<\/b><span style=\"font-weight: 400\">. Aqui o seu parent theme precisa estar ativado. Clique em <\/span><b>Personalizar<\/b><span style=\"font-weight: 400\">, e navegue at&eacute; o painel de personaliza&ccedil;&atilde;o do seu tema ativo.<\/span><\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"751\" height=\"594\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/08\/informacoes-tema-wordpress.png\/public\" alt=\"Tela de informa&ccedil;&otilde;es do tema do WordPress\" class=\"wp-image-39324\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/08\/informacoes-tema-wordpress.png\/w=751,fit=scale-down 751w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/08\/informacoes-tema-wordpress.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/08\/informacoes-tema-wordpress.png\/w=150,fit=scale-down 150w\" sizes=\"(max-width: 751px) 100vw, 751px\" \/><\/figure><\/div><h4 class=\"wp-block-heading\" id=\"h-4-childify-o-parent-theme\"><b>4. Childify o Parent Theme<\/b><\/h4><p><span style=\"font-weight: 400\">Clique no bot&atilde;o <\/span><b>Childify Me<\/b><span style=\"font-weight: 400\">, e d&ecirc; um nome para o seu tema filho. N&oacute;s sugerimos que voc&ecirc; d&ecirc; um nome similar ao tema pai. <\/span><\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"600\" height=\"1166\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/08\/childify-the-parent-theme.jpg\/public\" alt=\"tema pai do childfy\" class=\"wp-image-39325\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/08\/childify-the-parent-theme.jpg\/w=600,fit=scale-down 600w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/08\/childify-the-parent-theme.jpg\/w=154,fit=scale-down 154w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/08\/childify-the-parent-theme.jpg\/w=527,fit=scale-down 527w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/08\/childify-the-parent-theme.jpg\/w=77,fit=scale-down 77w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><\/figure><\/div><p><span style=\"font-weight: 400\">Clique em <\/span><b>Criar<\/b><span style=\"font-weight: 400\">. Quando terminar, clique em <\/span><b>Preview and Activate<\/b><span style=\"font-weight: 400\">.<\/span><\/p><h4 class=\"wp-block-heading\" id=\"h-5-importar-o-seu-conteudo\"><b>5. Importar o Seu Conte&uacute;do<\/b><\/h4><p><span style=\"font-weight: 400\">Agora que o seu novo site WordPress est&aacute; parecido com o site antigo na vers&atilde;o est&aacute;tica HTML, o que falta &eacute; importar o seu conte&uacute;do. Aqui, voc&ecirc; pode usar os mesmos m&eacute;todos anteriores. E com muito sucesso voc&ecirc; conseguiu converter seu site est&aacute;tico HTML para WordPress. Parab&eacute;ns!<\/span><\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"\/br\/hospedagem-wordpress\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" width=\"1024\" height=\"300\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/06\/BR-New-WP_in-text-banner.png\/public\" alt=\"\" class=\"wp-image-44638\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/06\/BR-New-WP_in-text-banner.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/06\/BR-New-WP_in-text-banner.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/06\/BR-New-WP_in-text-banner.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/06\/BR-New-WP_in-text-banner.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/div><h2 class=\"wp-block-heading\" id=\"h-conclusao\"><b>Conclus&atilde;o<\/b><\/h2><p><span style=\"font-weight: 400\">&Eacute;! Este foi um tutorial longo. Mas, abordamos tudo o que voc&ecirc; precisa saber para converter um site est&aacute;tico HTML para WordPress usando diferentes m&eacute;todos. <\/span><\/p><p><span style=\"font-weight: 400\">Recapitulando, voc&ecirc; pode criar um tema WordPress do zero. Este &eacute; um m&eacute;todo mais dif&iacute;cil mas &eacute; uma &oacute;tima op&ccedil;&atilde;o se voc&ecirc; sabe como fazer e tiver tempo para investir nisso. <\/span><\/p><p><span style=\"font-weight: 400\">E outra alternativa, &eacute; que voc&ecirc; tamb&eacute;m poder&aacute; usar plugins para converter de forma bem mais f&aacute;cil e importar todo o seu conte&uacute;do para a nova casa. <\/span><\/p><p><span style=\"font-weight: 400\">Espero que este artigo ajude e facilite o processo. Te vejo na pr&oacute;xima!<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Ent&atilde;o, conferindo as estat&iacute;sticas recentes voc&ecirc; viu que o WordPress comporta 33% dos sites da internet. E como dono de site, voc&ecirc; passa a considerar converter seu site est&aacute;tico em HTML para WordPress. N&atilde;o existe problema algum em ter um site constru&iacute;do em HTML. O HTML 5 &eacute; poderoso, principalmente se o seu site for [&#8230;]<\/p>\n<p><a class=\"btn btn-secondary understrap-read-more-link\" href=\"\/br\/tutoriais\/converter-site-html-para-wordpress\">Read More&#8230;<\/a><\/p>\n","protected":false},"author":78,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"rank_math_title":"","rank_math_description":"Ensinamos como converter um site HTML para WordPress em diferentes m\u00e9todos com um passo a passo completo. Veja o tutorial e fa\u00e7a voc\u00ea mesmo!","rank_math_focus_keyword":"html para wordpress","footnotes":""},"categories":[4911],"tags":[6340,6341],"class_list":["post-14911","post","type-post","status-publish","format-standard","hentry","category-wordpress","tag-converter-html-para-wordpress","tag-site-estatico-para-wordpress"],"hreflangs":[{"locale":"en-US","link":"https:\/\/www.hostinger.com\/tutorials\/how-to-convert-html-to-wordpress","default":0},{"locale":"pt-BR","link":"https:\/\/www.hostinger.com\/br\/tutoriais\/converter-site-html-para-wordpress","default":0},{"locale":"fr-FR","link":"https:\/\/www.hostinger.com\/fr\/tutoriels\/comment-convertir-html-vers-wordpress","default":0},{"locale":"id-ID","link":"https:\/\/www.hostinger.com\/id\/tutorial\/cara-convert-html-ke-wordpress","default":0},{"locale":"en-UK","link":"https:\/\/www.hostinger.com\/uk\/tutorials\/how-to-convert-html-to-wordpress","default":0},{"locale":"en-MY","link":"https:\/\/www.hostinger.com\/my\/tutorials\/how-to-convert-html-to-wordpress","default":0},{"locale":"en-PH","link":"https:\/\/www.hostinger.com\/ph\/tutorials\/how-to-convert-html-to-wordpress","default":0},{"locale":"pt-PT","link":"https:\/\/www.hostinger.com\/pt\/tutoriais\/converter-site-html-para-wordpress","default":0},{"locale":"en-IN","link":"https:\/\/www.hostinger.com\/in\/tutorials\/how-to-convert-html-to-wordpress","default":0},{"locale":"en-CA","link":"https:\/\/www.hostinger.com\/ca\/tutorials\/how-to-convert-html-to-wordpress","default":0},{"locale":"en-AU","link":"https:\/\/www.hostinger.com\/au\/tutorials\/how-to-convert-html-to-wordpress","default":0},{"locale":"en-NG","link":"https:\/\/www.hostinger.com\/ng\/tutorials\/how-to-convert-html-to-wordpress","default":0}],"acf":[],"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/posts\/14911","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/users\/78"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/comments?post=14911"}],"version-history":[{"count":7,"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/posts\/14911\/revisions"}],"predecessor-version":[{"id":39328,"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/posts\/14911\/revisions\/39328"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/media?parent=14911"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/categories?post=14911"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/tags?post=14911"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}