{"id":41662,"date":"2021-02-19T08:49:29","date_gmt":"2021-02-19T07:49:29","guid":{"rendered":"https:\/\/kinsta.com\/?p=83776"},"modified":"2025-02-14T09:02:41","modified_gmt":"2025-02-14T12:02:41","slug":"html-para-wordpress","status":"publish","type":"post","link":"https:\/\/kinsta.com\/pt\/blog\/html-para-wordpress\/","title":{"rendered":"HTML para WordPress: Um Guia Detalhado para Upload e Convers\u00e3o de HTML"},"content":{"rendered":"<p>O upload e convers\u00e3o de HTML para WordPress \u00e9 feito por uma grande variedade de raz\u00f5es. Voc\u00ea pode querer converter um <a href=\"https:\/\/kinsta.com\/pt\/blog\/wordpress-vs-html-estatico\/\">site HTML<\/a> antigo e <a href=\"https:\/\/kinsta.com\/pt\/blog\/wordpress-vs-html-estatico\/\">est\u00e1tico<\/a> e execut\u00e1-lo no sistema de gerenciamento de conte\u00fado do WordPress. H\u00e1 tamb\u00e9m a possibilidade de que voc\u00ea simplesmente precise de um <a href=\"https:\/\/kinsta.com\/pt\/docs\/cobranca\/planos-de-hospedagem-wordpress\/excedentes\/#disk-space-addon\">lugar para armazenar<\/a> ou compartilhar um arquivo HTML, e o WordPress fornece uma solu\u00e7\u00e3o vi\u00e1vel para ambos.<\/p>\n<p>A mudan\u00e7a do HTML para o WordPress muitas vezes parece intimidante ou improdutiva. Estamos aqui para gui\u00e1-lo atrav\u00e9s do processo para garantir que voc\u00ea aprenda as ferramentas necess\u00e1rias para converter arquivos HTML e completar uma convers\u00e3o por conta pr\u00f3pria.<\/p>\n<p>O HTML \u00e9 uma linguagem de marca\u00e7\u00e3o simples, e o WordPress, embora poderoso e <a href=\"https:\/\/kinsta.com\/pt\/blog\/porque-usar-o-wordpress\/\">repleto de recursos<\/a>, \u00e9 bastante simples e intuitivo. Portanto, a convers\u00e3o entre HTML e WordPress tamb\u00e9m n\u00e3o deve parecer uma tarefa f\u00e1cil.<\/p>\n<p>Continue lendo para aprender mais sobre o b\u00e1sico de HTML para convers\u00f5es do WordPress, juntamente com as situa\u00e7\u00f5es do mundo real em que voc\u00ea pode considerar tal movimento.<\/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>Principais raz\u00f5es para fazer upload ou convers\u00e3o de HTML para WordPress<\/h2>\n<p>Se voc\u00ea est\u00e1 se perguntando por que voc\u00ea pode converter ou carregar HTML para o WordPress em primeiro lugar, d\u00ea uma olhada nos seguintes exemplos para entender as raz\u00f5es para completar uma tarefa como esta.<\/p>\n<ul>\n<li>Converter um antigo site HTML para ser executado no sistema WordPress. Talvez o design antigo seja um de seus favoritos ou voc\u00ea simplesmente n\u00e3o quer passar pelo trabalho de redesigning. Isto tamb\u00e9m \u00e9 importante para manter sua <a href=\"https:\/\/kinsta.com\/pt\/blog\/exemplos-de-sites-de-grandes-marcas-do-wordpress\/\">imagem de marca<\/a>.<\/li>\n<li>Converter uma \u00fanica p\u00e1gina web HTML ou blog e publique em seu site WordPress atual. Isto \u00e9 particularmente \u00fatil se seu tema atual n\u00e3o tiver um layout de p\u00e1gina personalizado que voc\u00ea deseja.<\/li>\n<li>Alterar um modelo de website HTML para um formato tem\u00e1tico que pode ser instalado no WordPress.<\/li>\n<li>Fazer o upload de um arquivo de verifica\u00e7\u00e3o HTML, comprovando a propriedade do seu website para um mecanismo de busca ou outro servi\u00e7o.<\/li>\n<li>Armazenar um arquivo HTML em seu site para uso posterior.<\/li>\n<li>Gerar um link para esse arquivo para que voc\u00ea possa compartilh\u00e1-lo ou fazer com que os usu\u00e1rios baixem o arquivo para seus pr\u00f3prios computadores.<\/li>\n<li>Gerar um componente de design HTML em uma p\u00e1gina do WordPress ou postar, como uma caixa de autor personalizado ou um <a href=\"https:\/\/kinsta.com\/pt\/blog\/formularios-de-registro-wordpress\/\">formul\u00e1rio de assinatura por e-mail<\/a>.<\/li>\n<li>Combine seu tema WordPress com um design de site HTML que voc\u00ea encontrou on-line, mas n\u00e3o tem acesso.<\/li>\n<\/ul>\n<p>Como voc\u00ea pode ver, as raz\u00f5es para adicionar um arquivo HTML ao WordPress variam de acordo com seus objetivos. \u00c0s vezes o processo \u00e9 bastante simples, como carregar um arquivo HTML em um post ou p\u00e1gina de um blog WordPress. Outras vezes, h\u00e1 um longo processo de convers\u00e3o de um website HTML inteiro com dezenas de arquivos e trabalhos paralelos que devem ser completados, como transferir o conte\u00fado do website junto com o HTML.<\/p>\n<p>Para este guia sobre convers\u00e3o e upload de HTML para WordPress, come\u00e7aremos com o b\u00e1sico (como carregar um arquivo HTML para WordPress), depois passaremos aos requisitos mais profundos para duplica\u00e7\u00e3o ou convers\u00e3o de sites HTML completos para funcionar no sistema WordPress.<\/p>\n<p>Finalmente, falaremos sobre os pr\u00f3s e os contras dos conversores HTML automatizados e quais ferramentas est\u00e3o dispon\u00edveis no mercado.<\/p>\n<p>Continue lendo para saber mais sobre os conceitos b\u00e1sicos da convers\u00e3o de HTML para WordPress, bem como as situa\u00e7\u00f5es da vida real em que voc\u00ea pode considerar tal convers\u00e3o.<\/p>\n\n<h2>Como fazer o upload de um arquivo HTML para WordPress<\/h2>\n<p>O primeiro passo para aprender como transformar um arquivo HTML em uma p\u00e1gina do WordPress ou site completo \u00e9 visualizar como funciona o processo de upload do arquivo HTML.<\/p>\n<p>V\u00e1 a <a href=\"https:\/\/kinsta.com\/pt\/blog\/como-fazer-upload-arquivo-html-wordpress\/\">este guia para uma an\u00e1lise aprofundada sobre como carregar um arquivo HTML para o WordPress<\/a>.<\/p>\n<p>Daremos a voc\u00ea um r\u00e1pido resumo desse processo abaixo para garantir que voc\u00ea esteja no caminho certo enquanto avan\u00e7amos para outras etapas mais abaixo neste artigo.<\/p>\n<p>H\u00e1 tr\u00eas m\u00e9todos para fazer upload de um arquivo HTML para o WordPress:<\/p>\n<ol>\n<li>Atrav\u00e9s do painel de controle do WordPress.<\/li>\n<li>Com um cliente FTP.<\/li>\n<li>Usando o cPanel.<\/li>\n<\/ol>\n<p>O upload de um arquivo HTML para o <a href=\"https:\/\/kinsta.com\/pt\/blog\/painel-wordpress-personalizado\/\">painel de controle do WordPress<\/a> \u00e9 feito na <a href=\"https:\/\/kinsta.com\/pt\/blog\/biblioteca-midia-wordpress\/\">Biblioteca de M\u00eddia<\/a>. Cobriremos algumas das rotas a serem seguidas nos tutoriais abaixo, mas tenha em mente que o upload de um arquivo atrav\u00e9s do painel de controle do WordPress pode ser feito em uma p\u00e1gina, artigo, ou diretamente atrav\u00e9s da Biblioteca de M\u00eddia.<\/p>\n<p>Um <a href=\"https:\/\/kinsta.com\/pt\/blog\/melhores-clientes-ftp\/\">cliente FTP<\/a> (como o <a href=\"https:\/\/kinsta.com\/pt\/blog\/mostrar-arquivos-escondidos-filezilla\/\">FileZilla<\/a>) faz o link para os arquivos ao vivo do seu site WordPress, juntamente com os arquivos em seu computador. Isto permite que voc\u00ea transfira arquivos locais para os arquivos do site hospedado, desde que voc\u00ea fa\u00e7a login no cliente FTP com suas <a href=\"https:\/\/kinsta.com\/pt\/blog\/como-usar-sftp\/\">credenciais de hospedagem SFTP<\/a>.<\/p>\n<p>Finalmente, um <a href=\"https:\/\/kinsta.com\/pt\/blog\/o-que-e-cpanel\/\">cPanel de hospedagem<\/a> oferece acesso a um <a href=\"https:\/\/kinsta.com\/pt\/blog\/gerenciador-downloads-wordpress\/\">gerenciador de arquivos online<\/a>. Ele funciona muito como um cliente FTP, dando-lhe o controle de todos os mesmos arquivos. A principal diferen\u00e7a \u00e9 que o cPanel \u00e9 uma aplica\u00e7\u00e3o web online, exigindo que voc\u00ea carregue seus arquivos para o cPanel ao inv\u00e9s de transferi-los instantaneamente de um ambiente local para um site ao vivo em um cliente FTP.<\/p>\n<p>Cada m\u00e9todo tem seus pr\u00f3s e contras. A <a href=\"https:\/\/kinsta.com\/pt\/hospedagem-wordpress\/\">hospedagem de WordPress<\/a> da Kinsta n\u00e3o oferece uma experi\u00eancia cPanel, portanto \u00e9 melhor carregar arquivos HTML menores que voc\u00ea deseja armazenar ou compartilhar atrav\u00e9s do painel de controle do WordPress.<\/p>\n<p>Um cliente FTP\/SFTP \u00e9 o m\u00e9todo escolhido para criar um website inteiramente novo a partir de um website HTML est\u00e1tico. A raz\u00e3o para isto \u00e9 porque um Cliente FTP\/SFTP fornece uma quantidade incr\u00edvel de controle sobre os arquivos do seu site e pode transferir qualquer coisa de arquivos de m\u00eddia para pastas HTML diretamente do seu computador.<\/p>\n<p><span style=\"color: #43414e;font-family: 'Brandon Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;font-size: 2rem;font-weight: 900\">Como adicionar c\u00f3digo HTML a uma p\u00e1gina WordPress ou Artigo<\/span><\/p>\n<p>H\u00e1 alguns m\u00e9todos para carregar um arquivo HTML diretamente em um artigo ou p\u00e1gina do WordPress. O primeiro \u00e9 o processo de realmente carregar um arquivo HTML zip ou TXT como um elemento de m\u00eddia. Este m\u00e9todo funciona de forma semelhante ao upload de uma imagem para o gerenciador de m\u00eddia, exceto que voc\u00ea est\u00e1 fazendo isso atrav\u00e9s de uma p\u00e1gina ou artigo , e \u00e9 um arquivo HTML em vez de uma foto.<\/p>\n<p>Voc\u00ea pode querer completar este m\u00e9todo para ter um link para as pessoas baixarem o arquivo HTML ou acessar o arquivo voc\u00ea mesmo no backend do seu site.<\/p>\n<p>Outra op\u00e7\u00e3o \u00e9 colar um bloco HTML em uma p\u00e1gina ou artigo para adicionar alguns elementos de design. Por exemplo, voc\u00ea pode ter um formul\u00e1rio de inscri\u00e7\u00e3o personalizado feito apenas para esta p\u00e1gina que voc\u00ea gostaria de inserir com um pequeno peda\u00e7o de HTML.<\/p>\n<p>Ambos os m\u00e9todos t\u00eam prop\u00f3sitos e processos diferentes para alcan\u00e7ar os resultados finais.<\/p>\n<p>Para carregar um arquivo HTML para um artigo ou p\u00e1gina, siga estes passos.<\/p>\n<p>Ir para <strong>P\u00e1ginas &gt; Todas as p\u00e1ginas <\/strong>no painel do WordPress. Se voc\u00ea gostaria de come\u00e7ar com uma p\u00e1gina em branco, v\u00e1 para <strong>P\u00e1ginas &gt; Adicionar novo.<\/strong><\/p>\n<figure id=\"attachment_84338\" aria-describedby=\"caption-attachment-84338\" style=\"width: 934px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-84338 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/11\/pages-all.png\" alt=\"Adicionando novas p\u00e1ginas no WordPress\" width=\"934\" height=\"441\"><figcaption id=\"caption-attachment-84338\" class=\"wp-caption-text\">Adicionando novas p\u00e1ginas no WordPress<\/figcaption><\/figure>\n<p>Escolha a p\u00e1gina onde voc\u00ea gostaria de fazer o upload do arquivo HTML. Voc\u00ea tamb\u00e9m pode clicar no bot\u00e3o <strong>Adicionar nova <\/strong>p\u00e1gina se voc\u00ea estiver fazendo uma p\u00e1gina nova.<\/p>\n<p>Estes passos s\u00e3o praticamente os mesmos para adicionar arquivos HTML aos artigos do WordPress. Estamos simplesmente passando por como fazer isso com uma p\u00e1gina WordPress. Se voc\u00ea gostaria de usar um artigo em seu lugar, v\u00e1 para <strong>Artigos &gt; Todos os Artigos ou Artigos &gt; Adicionar Novo.<\/strong><\/p>\n<figure id=\"attachment_84337\" aria-describedby=\"caption-attachment-84337\" style=\"width: 1000px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-84337 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/11\/about-us.png\" alt=\"Sobre n\u00f3s p\u00e1gina em WordPress\" width=\"1000\" height=\"690\"><figcaption id=\"caption-attachment-84337\" class=\"wp-caption-text\">Sobre n\u00f3s p\u00e1gina em WordPress<\/figcaption><\/figure>\n<p>Esta parte depende se voc\u00ea est\u00e1 usando o Editor de Blocos Gutenberg ou o Editor do WordPress Cl\u00e1ssico.<\/p>\n<p>No Gutenberg, voc\u00ea pode encontrar o bot\u00e3o de sinal <strong>+ <\/strong>e clicar sobre ele para procurar um novo bloco de constru\u00e7\u00e3o visual. Procure o bloco de <strong>Arquivo<\/strong>, que voc\u00ea pode digitar no campo de busca ou percorrer a lista de blocos para localizar.<\/p>\n<p>Selecione o bloco Arquivo para coloc\u00e1-lo em sua p\u00e1gina ou postagem.<\/p>\n<p><strong>Nota: <\/strong>Se voc\u00ea estiver usando o Editor WordPress cl\u00e1ssico, basta clicar no bot\u00e3o <strong>Add Media <\/strong>e carregar seu arquivo HTML usando-o. Ele cria um link para o seu arquivo para que as pessoas fa\u00e7am o download no frontend do seu site.<\/p>\n<figure id=\"attachment_84336\" aria-describedby=\"caption-attachment-84336\" style=\"width: 1073px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-84336 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/11\/file-block.png\" alt=\"Adicionando um m\u00f3dulo 'Arquivo' no WordPress\" width=\"1073\" height=\"676\"><figcaption id=\"caption-attachment-84336\" class=\"wp-caption-text\">Adicionando um m\u00f3dulo &#8216;Arquivo&#8217; no WordPress<\/figcaption><\/figure>\n<p>Para o bloco Gutenberg, o m\u00f3dulo <strong>Arquivo <\/strong>deve mostrar um bot\u00e3o <strong>Upload. <\/strong>Clique no bot\u00e3o <strong>Upload <\/strong>e localize o arquivo HTML desejado em seu computador. Estes s\u00e3o geralmente armazenados como arquivos TXT, cole\u00e7\u00f5es de arquivos TXT em uma pasta, ou em arquivos ZIP.<\/p>\n<p>Uma vez carregado em seu site, o arquivo \u00e9 revelado como um link. Qualquer usu\u00e1rio pode agora vir ao seu site e clicar no link dessa p\u00e1gina ou postar para ver o arquivo HTML e at\u00e9 mesmo baix\u00e1-lo para seu pr\u00f3prio computador.<\/p>\n<p>Al\u00e9m disso, esse arquivo \u00e9 armazenado em sua biblioteca de m\u00eddia, assim voc\u00ea pode ir \u00e0 biblioteca para obter o URL do arquivo a qualquer momento e coloc\u00e1-lo em qualquer outro lugar que voc\u00ea desejar. Voc\u00ea tamb\u00e9m pode simplesmente usar o WordPress como armazenamento para o arquivo.<\/p>\n<p>Se voc\u00ea quiser armazenar o arquivo apenas no WordPress e n\u00e3o tiver um link para download para todos os seus usu\u00e1rios clicarem, basta apagar o link criado na p\u00e1gina ou no artigo.<\/p>\n<figure id=\"attachment_84335\" aria-describedby=\"caption-attachment-84335\" style=\"width: 907px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-84335 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\/11\/upload-button-2.png\" alt=\"Bot\u00e3o 'Upload' sob o bloco 'Arquivos' no WordPress\" width=\"907\" height=\"442\"><figcaption id=\"caption-attachment-84335\" class=\"wp-caption-text\">Bot\u00e3o &#8216;Upload&#8217; sob o bloco &#8216;Arquivos&#8217; no WordPress<\/figcaption><\/figure>\n<p>Voc\u00ea pode ver um erro que lhe diz que o tipo de arquivo n\u00e3o \u00e9 permitido por raz\u00f5es de seguran\u00e7a. Isto \u00e9 bastante comum, portanto, <a href=\"https:\/\/kinsta.com\/pt\/blog\/sorry-this-file-type-is-not-permitted-for-security-reasons\/\">d\u00ea uma olhada neste guia para remover esse erro<\/a> e permitir a maioria dos tipos de arquivo em sua biblioteca de m\u00eddia WordPress. Em geral, o processo envolve tanto a edi\u00e7\u00e3o do seu arquivo <strong>wp-config.php <\/strong>quanto o uso de um plugin para eliminar o erro.<\/p>\n<figure id=\"attachment_84334\" aria-describedby=\"caption-attachment-84334\" style=\"width: 927px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-84334 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/11\/error-card.png\" alt=\"Erro de tipo de arquivo inv\u00e1lido no WordPress\" width=\"927\" height=\"511\"><figcaption id=\"caption-attachment-84334\" class=\"wp-caption-text\">Erro de tipo de arquivo inv\u00e1lido no WordPress<\/figcaption><\/figure>\n<h3>Adicione o c\u00f3digo HTML ao design de sua p\u00e1gina ou artigo<\/h3>\n<p>Como mencionado anteriormente, uma das raz\u00f5es pelas quais voc\u00ea pode considerar adicionar um arquivo HTML a uma p\u00e1gina ou artigo \u00e9 para tornar um desenho simples naquela p\u00e1gina ou artigo.<\/p>\n<p>O m\u00e9todo anterior \u00e9 mais para armazenar arquivos HTML no WordPress e adicionar um link para que as pessoas os baixem.<\/p>\n<p>Esta \u00e9 uma solu\u00e7\u00e3o mais funcional, visto que voc\u00ea tem a oportunidade de copiar e colar ou fazer seu pr\u00f3prio c\u00f3digo HTML para coisas como formul\u00e1rios, caixas de autor, banners e muito mais.<\/p>\n<p>V\u00e1 para a p\u00e1gina ou artigo de sua escolha e escolha a se\u00e7\u00e3o que voc\u00ea gostaria de colocar o peda\u00e7o de c\u00f3digo HTML.<\/p>\n<p>Clique no sinal <strong>+ <\/strong>para ver a sele\u00e7\u00e3o de blocos. Encontre o bloco HTML personalizado, digitando-o no campo de busca ou rolando pela lista de blocos.<\/p>\n<p>Escolha o bloco HTML personalizado para inseri-lo na p\u00e1gina ou no artigo.<\/p>\n<figure id=\"attachment_84341\" aria-describedby=\"caption-attachment-84341\" style=\"width: 1060px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-84341 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/11\/html-module.png\" alt=\"Adicionando um bloco 'HTML personalizado' em Gutenberg\" width=\"1060\" height=\"688\"><figcaption id=\"caption-attachment-84341\" class=\"wp-caption-text\">Adicionando um bloco &#8216;HTML personalizado&#8217; em Gutenberg<\/figcaption><\/figure>\n<p>Esse bloco fornece um campo de c\u00f3digo simples e em branco para voc\u00ea colar ou digitar, qualquer que seja o c\u00f3digo HTML que voc\u00ea tenha dispon\u00edvel.<\/p>\n<p>Vou colar em um formul\u00e1rio de contato direto com um campo de e-mail e um bot\u00e3o Submit para este tutorial em particular.<\/p>\n<p>Uma vez que voc\u00ea tenha o c\u00f3digo HTML no bloco, clique no bot\u00e3o Atualizar ou Publicar para que ele seja renderizado no frontend de sua p\u00e1gina ou artigo.<\/p>\n<figure id=\"attachment_84340\" aria-describedby=\"caption-attachment-84340\" style=\"width: 973px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-84340 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/11\/free-form-html.png\" alt=\"M\u00f3dulo HTML para WordPress\" width=\"973\" height=\"517\"><figcaption id=\"caption-attachment-84340\" class=\"wp-caption-text\">M\u00f3dulo HTML para WordPress<\/figcaption><\/figure>\n<p>Se voc\u00ea for ao frontend da p\u00e1gina ou ao artigo, o HTML deve fazer seu trabalho e revelar qualquer design ou funcionalidade que voc\u00ea estava tentando adicionar ao layout.<\/p>\n<p>Neste caso, voc\u00ea pode ver o formul\u00e1rio onde solicito um e-mail e tamb\u00e9m tenho um bot\u00e3o Enviar.<\/p>\n<figure id=\"attachment_84339\" aria-describedby=\"caption-attachment-84339\" style=\"width: 906px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-84339 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\/11\/simple-form-on-frontend.png\" alt=\"A vis\u00e3o de frente do formul\u00e1rio\" width=\"906\" height=\"807\"><figcaption id=\"caption-attachment-84339\" class=\"wp-caption-text\">A vis\u00e3o de frente do formul\u00e1rio<\/figcaption><\/figure>\n<p>O processo e o resultado n\u00e3o s\u00e3o muito diferentes no Editor WordPress cl\u00e1ssico, exceto que voc\u00ea n\u00e3o usar\u00e1 um bloco de Gutenberg de arrastar e soltar. Em vez disso, navegue at\u00e9 a aba Texto em seu editor (em vez da aba Visual) e cole o c\u00f3digo HTML onde voc\u00ea quiser que ele apare\u00e7a na p\u00e1gina.<\/p>\n<h2>Como fazer o upload de um arquivo de verifica\u00e7\u00e3o HTML para o WordPress<\/h2>\n<p>Outro motivo pelo qual voc\u00ea pode querer carregar HTML no WordPress \u00e9 para requisitos de otimiza\u00e7\u00e3o de busca. O Google, e alguns outros mecanismos de busca, oferecem consoles e ferramentas de webmaster para visualizar o desempenho do seu site e otimizar seu conte\u00fado com a ajuda de an\u00e1lises e relat\u00f3rios que fazem o check-in de problemas e corre\u00e7\u00f5es para esses problemas.<\/p>\n<p>No entanto, o Google n\u00e3o pode assumir que voc\u00ea \u00e9 o propriet\u00e1rio de um site aleat\u00f3rio simplesmente porque voc\u00ea afirma que \u00e9. \u00c9 a\u00ed que entra em jogo um arquivo de verifica\u00e7\u00e3o HTML.<\/p>\n<p>Simplificando, o Google fornece um arquivo HTML que voc\u00ea deve carregar em seu site. Somente o propriet\u00e1rio do site deve ter acesso aos arquivos do site, portanto o Google usa isso como uma forma de garantir que voc\u00ea n\u00e3o esteja tentando controlar as ferramentas de webmaster de outra pessoa.<\/p>\n<p>O arquivo de verifica\u00e7\u00e3o HTML carregado envia ent\u00e3o uma mensagem ao Google indicando que o arquivo foi adicionado \u00e0quele dom\u00ednio e que voc\u00ea \u00e9, de fato, o propriet\u00e1rio.<\/p>\n<p>\u00c9 prudente aprender sobre o upload de um arquivo de verifica\u00e7\u00e3o HTML, j\u00e1 que o Google e os mecanismos de busca n\u00e3o s\u00e3o os \u00fanicos servi\u00e7os que lhe pedem para verificar sua identidade ou propriedade com arquivos como estes. Alguns plugins, diret\u00f3rios e plugins de terceiros tamb\u00e9m querem garantir que voc\u00ea n\u00e3o seja um intruso.<\/p>\n<p><span style=\"color: #43414e;font-family: 'Brandon Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;font-size: 1.25rem;font-weight: 900\">Raz\u00f5es para o upload de um arquivo de verifica\u00e7\u00e3o HTML<\/span><\/p>\n<ul>\n<li>Para verificar se voc\u00ea possui um website para ferramentas de otimiza\u00e7\u00e3o para mecanismos de busca.<\/li>\n<li>Ao provar a propriedade de certos diret\u00f3rios on-line.<\/li>\n<li>Se voc\u00ea precisar de um link para uma integra\u00e7\u00e3o ou plugin de terceiros, voc\u00ea precisa descobrir se voc\u00ea realmente mant\u00e9m a propriedade do seu site.<\/li>\n<\/ul>\n<p>Como voc\u00ea pode ver, este arquivo HTML pode vir de diferentes fontes. Normalmente voc\u00ea n\u00e3o precisa saber nada sobre o conte\u00fado do arquivo HTML, mas apenas que ele \u00e9 utilizado para enviar aquele pingback ao servi\u00e7o para indicar que voc\u00ea tem controle sobre os arquivos do site.<\/p>\n<p>Dito isto, nossa demonstra\u00e7\u00e3o de carregar um arquivo de verifica\u00e7\u00e3o HTML para o WordPress envolver\u00e1 o Console de Busca do Google, visto que essa \u00e9 uma das raz\u00f5es mais comuns para o uso de um arquivo de verifica\u00e7\u00e3o.<\/p>\n<p>Para come\u00e7ar, registre seu site no Google. Isto \u00e9 feito indo para a <a href=\"https:\/\/kinsta.com\/pt\/blog\/google-search-console\/\">ferramenta Google Search Console<\/a>. Clique no bot\u00e3o Start Now e fa\u00e7a o login em sua conta Google ou registre uma conta no Google.<\/p>\n<figure id=\"attachment_83781\" aria-describedby=\"caption-attachment-83781\" style=\"width: 900px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-83781 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/11\/click-the-start-now-button.png\" alt=\"Pressione 'Iniciar agora' no Console de Busca do Google\" width=\"900\" height=\"730\"><figcaption id=\"caption-attachment-83781\" class=\"wp-caption-text\">Pressione &#8216;Iniciar agora&#8217; no Console de Busca do Google<\/figcaption><\/figure>\n<p>Uma vez conectado ao Console de Busca do Google, voc\u00ea poder\u00e1 ver uma lista de propriedades que voc\u00ea gerenciou ou testou no passado. Por outro lado, voc\u00ea pode ver uma lista vazia.<\/p>\n<p>Independentemente disso, v\u00e1 para a aba Search Property no canto superior esquerdo do painel de controle.<\/p>\n<p>No menu suspenso, selecione a op\u00e7\u00e3o <a href=\"https:\/\/kinsta.com\/pt\/blog\/google-search-console\/#step-4--add-your-domain\">Adicionar propriedade<\/a> para seguir em frente. Isto permite adicionar seu website como propriedade administrada no Console de Busca do Google.<\/p>\n<figure id=\"attachment_83785\" aria-describedby=\"caption-attachment-83785\" style=\"width: 900px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-83785 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/11\/add-property.png\" alt=\"Adicionando um im\u00f3vel no Google Search Console\" width=\"900\" height=\"458\"><figcaption id=\"caption-attachment-83785\" class=\"wp-caption-text\">Adicionando um im\u00f3vel no Google Search Console<\/figcaption><\/figure>\n<p>A pr\u00f3xima janela popup pede que voc\u00ea selecione um tipo de propriedade. A op\u00e7\u00e3o Dom\u00ednio permite que voc\u00ea verifique todas as URLs em todos os subdom\u00ednios. Esta \u00e9 muitas vezes a maneira mais f\u00e1cil de verificar uma p\u00e1gina, mas requer verifica\u00e7\u00e3o DNS &#8211; que \u00e9 encontrada em sua conta de hospedagem.<\/p>\n<p>No entanto, estamos atualmente falando de uploads de arquivos HTML, ent\u00e3o caminharemos atrav\u00e9s da op\u00e7\u00e3o de prefixo URL, que \u00e9 um m\u00e9todo antigo, por\u00e9m ainda confi\u00e1vel, para verificar se voc\u00ea possui um website. Al\u00e9m disso, este m\u00e9todo ajuda a identificar URLs espec\u00edficas sob o endere\u00e7o que voc\u00ea digita.<\/p>\n<p>Portanto, pegue a URL do seu site e cole no campo <strong>Prefixo da URL.<\/strong><\/p>\n<p>Clique no bot\u00e3o <strong>Continuar.<\/strong><\/p>\n<figure id=\"attachment_83783\" aria-describedby=\"caption-attachment-83783\" style=\"width: 900px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-83783 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/11\/url-prefix.png\" alt=\"Inserindo o URL do site no GSC\" width=\"900\" height=\"620\"><figcaption id=\"caption-attachment-83783\" class=\"wp-caption-text\">Inserindo o URL do site no GSC<\/figcaption><\/figure>\n<p>Agora o Console de Busca do Google solicita que voc\u00ea verifique a propriedade do site.<\/p>\n<p>Existem v\u00e1rios outros m\u00e9todos de verifica\u00e7\u00e3o, mas este \u00e9 o que utiliza o upload de um arquivo HTML.<\/p>\n<p>Clique no bot\u00e3o que lhe pede para fazer o download do arquivo.<\/p>\n<p>Salve esse arquivo HTML em seu computador em uma pasta que voc\u00ea se lembrar\u00e1.<\/p>\n<p>O pr\u00f3ximo passo \u00e9 enviar o arquivo para o site WordPress que voc\u00ea colou anteriormente no Console de Busca do Google.<\/p>\n<figure id=\"attachment_83782\" aria-describedby=\"caption-attachment-83782\" style=\"width: 900px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-83782 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/11\/download-the-file.png\" alt=\"Verifica\u00e7\u00e3o da propriedade do local no GSC\" width=\"900\" height=\"706\"><figcaption id=\"caption-attachment-83782\" class=\"wp-caption-text\">Verifica\u00e7\u00e3o da propriedade do local no GSC<\/figcaption><\/figure>\n<p>Como mencionado anteriormente, <a href=\"https:\/\/kinsta.com\/pt\/blog\/como-fazer-upload-arquivo-html-wordpress\/\">h\u00e1 tr\u00eas op\u00e7\u00f5es para carregar um arquivo HTML para o WordPress<\/a>.<\/p>\n<p>O primeiro m\u00e9todo, fazer o upload atrav\u00e9s do painel de controle, \u00e9 definitivamente uma op\u00e7\u00e3o vi\u00e1vel. Muitas pessoas ainda s\u00e3o desviadas quando surge um erro comum ao fazer upload de um arquivo HTML para a Biblioteca de M\u00eddia. Por causa disso, muitas vezes \u00e9 mais r\u00e1pido fazer seus uploads com um cliente FTP. Se, no entanto, voc\u00ea planeja fazer o upload para o painel do WordPress, e voc\u00ea v\u00ea o erro &#8220;Sorry, This File Type is Not Permitted&#8221;, use <a href=\"https:\/\/kinsta.com\/pt\/blog\/sorry-this-file-type-is-not-permitted-for-security-reasons\/\">este guia para corrigir o problema<\/a>.<\/p>\n<p>Agora voc\u00ea tem as outras duas solu\u00e7\u00f5es: usar um cliente FTP\/SFTP ou fazer o upload para o cPanel a partir de sua conta de hospedagem.<\/p>\n<p>O cPanel n\u00e3o \u00e9 uma m\u00e1 escolha para alguns hosts, mas novamente, Kinsta n\u00e3o oferece um cPanel. Portanto, vamos nos concentrar principalmente no upload do arquivo HTML atrav\u00e9s de um cliente FTP\/SFTP. Os passos detalhados est\u00e3o descritos no artigo acima, mas aqui est\u00e1 uma r\u00e1pida recapitula\u00e7\u00e3o para gui\u00e1-lo em seu caminho.<\/p>\n<p>Para come\u00e7ar, <a href=\"https:\/\/filezilla-project.org\/\">baixe FileZilla<\/a> em seu computador. Voc\u00ea tamb\u00e9m pode tentar outros <a href=\"https:\/\/kinsta.com\/pt\/blog\/melhores-clientes-ftp\/\">clientes FTP\/SFTP<\/a>.<\/p>\n<p><strong>Nota: <\/strong>Recomendamos que voc\u00ea fa\u00e7a um backup do seu site antes deste processo. \u00c9 incomum causar problemas com um site durante a transfer\u00eancia de arquivos via FTP\/SFTP, mas isso \u00e9 absolutamente poss\u00edvel. Voc\u00ea n\u00e3o quer que seu site seja bloqueado ou perca dados, ent\u00e3o crie um <a href=\"https:\/\/kinsta.com\/pt\/docs\/hospedagem-de-wordpress\/backups-wordpress\/#external-backups-addon\">arquivo de backup do site<\/a>.<\/p>\n<p>Abra o cliente FTP\/SFTP e digite suas credenciais de FTP\/SFTP para se conectar ao host da web.<\/p>\n<figure id=\"attachment_84166\" aria-describedby=\"caption-attachment-84166\" style=\"width: 1266px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-84166 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/11\/creds.png\" alt=\"Digite suas credenciais SFTP no Filezilla\" width=\"1266\" height=\"899\"><figcaption id=\"caption-attachment-84166\" class=\"wp-caption-text\">Digite suas credenciais SFTP no Filezilla<\/figcaption><\/figure>\n<p>As credenciais exigidas incluem o seguinte:<\/p>\n<ul>\n<li>Host<\/li>\n<li>Nome de usu\u00e1rio<\/li>\n<li>Senha<\/li>\n<li>Porta<\/li>\n<\/ul>\n<p>Onde voc\u00ea encontra as credenciais para seu site WordPress?<\/p>\n<p>Eles normalmente est\u00e3o localizados no painel de controle do seu host, de modo que voc\u00ea mesmo pode alcan\u00e7\u00e1-los ou procur\u00e1-los.<\/p>\n<p>Kinsta tem um caminho f\u00e1cil para localizar as credenciais FTP\/SFTP indo at\u00e9 a guia Sites em seu painel de hospedagem Kinsta e selecionando seu site desejado.<\/p>\n<p>Sob a aba Info, procure a \u00e1rea SFTP\/SSH. Copie sobre as credenciais correspondentes para o cliente FTP\/SFTP.<\/p>\n<p>Por exemplo, voc\u00ea pode ver os itens Host, Nome de usu\u00e1rio, Senha e Porta, todos bem organizados na Kinsta.<\/p>\n<figure id=\"attachment_88602\" aria-describedby=\"caption-attachment-88602\" style=\"width: 936px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-88602 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/sftp-credentials-MyKinsta.png\" alt=\"Credenciais SFTP sob o painel MyKinsta\" width=\"936\" height=\"668\"><figcaption id=\"caption-attachment-88602\" class=\"wp-caption-text\">Credenciais SFTP sob o painel MyKinsta<\/figcaption><\/figure>\n<p>Cole esses elementos no cliente FTP\/SFTP e clique no bot\u00e3o Quickconnect.<\/p>\n<p>Se voc\u00ea vir um erro, \u00e9 mais prov\u00e1vel que seja porque o FileZilla n\u00e3o respeita o protocolo SFTP, mas sim o protocolo FTP. Para corrigir isso, v\u00e1 para <strong>File &gt; Site Manager.<\/strong> Adicione um novo site no FileZilla e selecione SFTP. Cole as credenciais de hospedagem nessa \u00e1rea e tente se conectar novamente.<\/p>\n<figure id=\"attachment_88607\" aria-describedby=\"caption-attachment-88607\" style=\"width: 1204px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-88607 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/the-site-manager.png\" alt=\"O gerente do site para HTML para WordPress\" width=\"1204\" height=\"797\"><figcaption id=\"caption-attachment-88607\" class=\"wp-caption-text\">O gerente do site para HTML para WordPress<\/figcaption><\/figure>\n<p>Ap\u00f3s a conex\u00e3o com seu host, todos os arquivos do site WordPress aparecem para modifica\u00e7\u00e3o.<\/p>\n<figure id=\"attachment_88605\" aria-describedby=\"caption-attachment-88605\" style=\"width: 1215px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-88605 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/see-the-new-site-files.png\" alt=\"Digite as credenciais para ver os arquivos do novo site\" width=\"1215\" height=\"805\"><figcaption id=\"caption-attachment-88605\" class=\"wp-caption-text\">Digite as credenciais para ver os arquivos do novo site<\/figcaption><\/figure>\n<p>Localize o arquivo raiz do seu site, que cont\u00e9m pastas como <strong>wp-content <\/strong>e <strong>wp-admin<\/strong>.<\/p>\n<figure id=\"attachment_88606\" aria-describedby=\"caption-attachment-88606\" style=\"width: 1225px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-88606 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/the-root.png\" alt=\"Encontre a pasta raiz do seu site.\" width=\"1225\" height=\"803\"><figcaption id=\"caption-attachment-88606\" class=\"wp-caption-text\">Encontre a pasta raiz do seu site.<\/figcaption><\/figure>\n<p>Encontre o arquivo de verifica\u00e7\u00e3o HTML (neste caso, renomeei para encontr\u00e1-lo mais facilmente) sob a \u00e1rea que mostra os arquivos do seu computador. Por exemplo, voc\u00ea pode v\u00ea-lo em <strong>Downloads<\/strong>, se for para l\u00e1 que seus downloads da Internet est\u00e3o indo.<\/p>\n<p>Arraste esse arquivo para o arquivo raiz do seu site. Tudo isso \u00e9 feito no cliente FTP\/SFTP.<\/p>\n<figure id=\"attachment_84497\" aria-describedby=\"caption-attachment-84497\" style=\"width: 1205px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-84497 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/12\/move-it-over.png\" alt=\"Arraste o arquivo para carreg\u00e1-lo em seu servidor\" width=\"1205\" height=\"815\"><figcaption id=\"caption-attachment-84497\" class=\"wp-caption-text\">Arraste o arquivo para carreg\u00e1-lo em seu servidor<\/figcaption><\/figure>\n<p>O upload deve levar apenas alguns segundos.<\/p>\n<figure id=\"attachment_88603\" aria-describedby=\"caption-attachment-88603\" style=\"width: 1195px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-88603 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/done-2.png\" alt=\"O arquivo est\u00e1 agora carregado\" width=\"1195\" height=\"797\"><figcaption id=\"caption-attachment-88603\" class=\"wp-caption-text\">O arquivo est\u00e1 agora carregado<\/figcaption><\/figure>\n<p>Uma vez que esteja nos arquivos do seu site, voc\u00ea pode voltar \u00e0 p\u00e1gina de Verifica\u00e7\u00e3o do Google e verificar se est\u00e1 registrando que voc\u00ea \u00e9 o propriet\u00e1rio do site. Uma mensagem de sucesso deve aparecer no Console de Busca do Google, e v\u00e1rios recursos se abrir\u00e3o para voc\u00ea otimizar e analisar a sa\u00fade do seu site.<\/p>\n<h2>Convers\u00e3o manual de um site HTML inteiro para WordPress<\/h2>\n<p>Para converter um site HTML para WordPress, voc\u00ea pode usar um plugin\/app, converter manualmente seus arquivos ou utilizar um Child Theme e transferir sobre os arquivos HTML para esse Child Theme.<\/p>\n<p>A primeira \u00e9 a convers\u00e3o manual desse HTML para fazer um tema WordPress.<\/p>\n<p>Alguns dizem que \u00e9 o mais assustador dos m\u00e9todos, mas outros o preferem, j\u00e1 que voc\u00ea ganha controle total sobre o processo e n\u00e3o precisa confiar em aplicativos ou plugins que \u00e0s vezes podem n\u00e3o ser confi\u00e1veis. Siga os passos abaixo para completar manualmente uma convers\u00e3o completa do HTML para o site WordPress.<\/p>\n<h3>Crie uma pasta para seu tema e adicione os arquivos de tema padr\u00e3o<\/h3>\n<p>Em seu computador, crie uma pasta para salvar todos os arquivos b\u00e1sicos do seu tema. Chame a pasta do que quiser, de prefer\u00eancia dando-lhe um nome que voc\u00ea possa lembrar.<\/p>\n<p>Crie os seguintes arquivos 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>sidebar.php<\/strong><\/li>\n<li><strong>footer.php<\/strong><\/li>\n<\/ul>\n<p>Sinta-se \u00e0 vontade para abri-los em seu <a href=\"https:\/\/kinsta.com\/pt\/blog\/editores-html-gratuitos\/\">editor de c\u00f3digo ou texto<\/a>, pois voc\u00ea os editar\u00e1 no futuro. A partir de agora, n\u00e3o h\u00e1 necessidade de adicionar nenhum c\u00f3digo aos arquivos. Simplesmente deixe-os na pasta.<\/p>\n<p><strong>Nota: <\/strong>Voc\u00ea pode come\u00e7ar criando-os como arquivos TXT. Se voc\u00ea ent\u00e3o mudar a extens\u00e3o do arquivo como <strong>.txt <\/strong>para <strong>.php <\/strong>ou <strong>.txt <\/strong>para <strong>.css, seu <\/strong>computador ajustar\u00e1 automaticamente para o formato de arquivo correto. Por exemplo, adicionar uma extens\u00e3o <strong>.css <\/strong>transforma o arquivo em uma <a href=\"https:\/\/kinsta.com\/pt\/blog\/css-wordpress\/\">Style Sheet em Cascata<\/a>.<\/p>\n<figure id=\"attachment_84404\" aria-describedby=\"caption-attachment-84404\" style=\"width: 1018px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-84404 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/12\/files-in-folder.png\" alt=\"Os arquivos do site para HTML para WordPress\" width=\"1018\" height=\"529\"><figcaption id=\"caption-attachment-84404\" class=\"wp-caption-text\">Os arquivos do site para HTML para WordPress<\/figcaption><\/figure>\n<h3>Transfira o CSS atual do seu site WordPress para a nova Pasta<\/h3>\n<p>Voc\u00ea j\u00e1 deve ter um tema instalado em seu site WordPress atual. Caso contr\u00e1rio, v\u00e1 em frente e <a href=\"https:\/\/kinsta.com\/pt\/blog\/como-instalar-um-tema-do-wordpress\/\">instale um tema<\/a> para ajudar com esta parte.<\/p>\n<p>Voc\u00ea usar\u00e1 o CSS do tema atual como alicerce, construindo sobre isso no arquivo <strong>style.css <\/strong>com os arquivos do seu site HTML.<\/p>\n<p>Portanto, copie o cabe\u00e7alho do stylesheet do seu site WordPress para o novo arquivo <strong>style.css.<\/strong><\/p>\n<p>Deve ser algo parecido com isto:<\/p>\n<pre class=\" language-html\"><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>Neste caso, o site em uso tem o tema Twenty Seventeen. Se voc\u00ea estiver usando um tema diferente, voc\u00ea ver\u00e1 algumas varia\u00e7\u00f5es no cabe\u00e7alho do stylesheet.<\/p>\n<p>Agora \u00e9 hora de substituir os elementos do antigo tema por informa\u00e7\u00f5es sobre seu novo tema.<\/p>\n<p>Para fazer isso, troque o seguinte:<\/p>\n<ul>\n<li>Nome do tema: Sinta-se livre para chamar seu tema como desejar, mas n\u00e3o \u00e9 uma m\u00e1 id\u00e9ia nome\u00e1-lo da mesma forma que a sua pasta de temas.<\/li>\n<li>Tema URI &#8211; Voc\u00ea pode usar a URL principal do seu site para isso.<\/li>\n<li>Autor &#8211; Digite seu nome aqui, ou qualquer nome que voc\u00ea queira usar.<\/li>\n<li>Autor URI &#8211; Fa\u00e7a deste um link para sua p\u00e1gina inicial.<\/li>\n<li>Descri\u00e7\u00e3o &#8211; Voc\u00ea pode fazer uma descri\u00e7\u00e3o do seu tema para aparecer na administra\u00e7\u00e3o do seu site WordPress.<\/li>\n<\/ul>\n<p>Deixe tudo o resto como est\u00e1. A maioria dos outros elementos como a Licen\u00e7a e as Tags s\u00e3o apenas para se voc\u00ea planeja publicar o novo tema na pasta de temas WordPress.<\/p>\n<p>Lembre-se, o que voc\u00ea acabou de colar e editar \u00e9 o cabe\u00e7alho do seu tema.<\/p>\n<p>Encontre o CSS existente em seu site HTML. Copie e cole este CSS ap\u00f3s o cabe\u00e7alho no novo arquivo <strong>style.css.<\/strong><\/p>\n<p>Salve e feche o arquivo <strong>style.css.<\/strong><\/p>\n<h3>Pegue seu HTML atual e divida-o em pe\u00e7as<\/h3>\n<p>O WordPress geralmente usa PHP para extrair itens como arquivos e c\u00f3digos, e m\u00eddia do seu banco de dados. Portanto, um site HTML precisa ser cortado em arquivos PHP separados para se misturar com a infra-estrutura do WordPress.<\/p>\n<p>Isto pode parecer intimidante, mas tudo o que \u00e9 necess\u00e1rio \u00e9 dividir seu documento HTML em v\u00e1rias partes, transformando cada uma dessas partes em arquivos PHP.<\/p>\n<p>Cada arquivo HTML ter\u00e1 um aspecto diferente, mas isso ajuda a obter um exemplo visual. Portanto, vamos exibir alguns modelos de sites HTML para demonstrar.<\/p>\n<p>O c\u00f3digo a seguir \u00e9 uma \u00f3tima op\u00e7\u00e3o para cruzar refer\u00eancias com seu pr\u00f3prio arquivo HTML. \u00c9 uma p\u00e1gina web HTML simples com um cabe\u00e7alho, itens de menu, subt\u00edtulos, uma barra lateral (sidebar) e um rodap\u00e9 (footer). Voc\u00ea pode encontrar um c\u00f3digo similar em seu pr\u00f3prio arquivo <strong>index.html.<\/strong><\/p>\n<pre class=\" language-html\"><code class=\" language-html\"><span class=\"token doctype\"><span class=\"token punctuation\">&lt;!<\/span><span class=\"token name\">doctype<\/span> <span class=\"token name\">html<\/span><span class=\"token punctuation\">&gt;<\/span><\/span>\n<span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>html<span class=\"token punctuation\">&gt;<\/span><\/span>\n<span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>head<span class=\"token punctuation\">&gt;<\/span><\/span>\n<span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>meta <span class=\"token attr-name\">charset<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>utf-8<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span>\n<span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>title<span class=\"token punctuation\">&gt;<\/span><\/span>Test Site<span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>title<span class=\"token punctuation\">&gt;<\/span><\/span>\n<span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>meta <span class=\"token attr-name\">name<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>description<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">content<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>Website description<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span>\n<span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>meta <span class=\"token attr-name\">name<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>viewport<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">content<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>width=device-width, initial-scale=1<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span>\n\n<span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>link <span class=\"token attr-name\">rel<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>stylesheet<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">href<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>style.css<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span>\n<span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>head<span class=\"token punctuation\">&gt;<\/span><\/span>\n\n<span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>body<span class=\"token punctuation\">&gt;<\/span><\/span>\n<span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div <span class=\"token attr-name\">class<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>header-container<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span>\n<span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>header <span class=\"token attr-name\">class<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>wrapper clearfix<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span>\n<span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>h1 <span class=\"token attr-name\">class<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>title<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span>Website Title<span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>h1<span class=\"token punctuation\">&gt;<\/span><\/span>\n<span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>nav<span class=\"token punctuation\">&gt;<\/span><\/span>\n<span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>ul<span class=\"token punctuation\">&gt;<\/span><\/span>\n<span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>li<span class=\"token punctuation\">&gt;<\/span><\/span><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>a <span class=\"token attr-name\">href<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>#<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span>menu item #1<span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>a<span class=\"token punctuation\">&gt;<\/span><\/span><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>li<span class=\"token punctuation\">&gt;<\/span><\/span>\n<span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>li<span class=\"token punctuation\">&gt;<\/span><\/span><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>a <span class=\"token attr-name\">href<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>#<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span>menu item #2<span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>a<span class=\"token punctuation\">&gt;<\/span><\/span><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>li<span class=\"token punctuation\">&gt;<\/span><\/span>\n<span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>li<span class=\"token punctuation\">&gt;<\/span><\/span><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>a <span class=\"token attr-name\">href<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>#<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span>menu item #3<span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>a<span class=\"token punctuation\">&gt;<\/span><\/span><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>li<span class=\"token punctuation\">&gt;<\/span><\/span>\n<span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>ul<span class=\"token punctuation\">&gt;<\/span><\/span>\n<span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>nav<span class=\"token punctuation\">&gt;<\/span><\/span>\n<span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>header<span class=\"token punctuation\">&gt;<\/span><\/span>\n<span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>div<span class=\"token punctuation\">&gt;<\/span><\/span>\n\n<span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div <span class=\"token attr-name\">class<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>main-container<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span>\n<span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>main <span class=\"token attr-name\">class<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>main wrapper clearfix<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span>\n<span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>article<span class=\"token punctuation\">&gt;<\/span><\/span>\n<span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>header <span class=\"token attr-name\">class<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>entry-header<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span>\n<span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>h2 <span class=\"token attr-name\">class<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>entry-title<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span>Article<span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>h2<span class=\"token punctuation\">&gt;<\/span><\/span>\n<span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>header<span class=\"token punctuation\">&gt;<\/span><\/span>\n<span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>p<span class=\"token punctuation\">&gt;<\/span><\/span>Test text right here..<span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>p<span class=\"token punctuation\">&gt;<\/span><\/span>\n<span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>h2<span class=\"token punctuation\">&gt;<\/span><\/span>Subheading<span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>h2<span class=\"token punctuation\">&gt;<\/span><\/span>\n<span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>p<span class=\"token punctuation\">&gt;<\/span><\/span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>p<span class=\"token punctuation\">&gt;<\/span><\/span>\n<span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>h2<span class=\"token punctuation\">&gt;<\/span><\/span>A Sub<span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>h2<span class=\"token punctuation\">&gt;<\/span><\/span>\n<span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>p<span class=\"token punctuation\">&gt;<\/span><\/span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>p<span class=\"token punctuation\">&gt;<\/span><\/span>\n<span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>article<span class=\"token punctuation\">&gt;<\/span><\/span>\n<span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>aside<span class=\"token punctuation\">&gt;<\/span><\/span>\n<span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>h3<span class=\"token punctuation\">&gt;<\/span><\/span>Sidebar here<span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>h3<span class=\"token punctuation\">&gt;<\/span><\/span>\n<span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>p<span class=\"token punctuation\">&gt;<\/span><\/span>Etiam ullamcorper lorem dapibus velit suscipit ultrices. <span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>p<span class=\"token punctuation\">&gt;<\/span><\/span>\n<span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>aside<span class=\"token punctuation\">&gt;<\/span><\/span>\n<span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>main<span class=\"token punctuation\">&gt;<\/span><\/span> <span class=\"token comment\">&lt;!-- #main --&gt;<\/span>\n<span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>div<span class=\"token punctuation\">&gt;<\/span><\/span> <span class=\"token comment\">&lt;!-- #main-container --&gt;<\/span>\n\n<span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div <span class=\"token attr-name\">class<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>footer-container<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span>\n<span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>footer <span class=\"token attr-name\">class<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>wrapper<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span>\n<span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>p <span class=\"token attr-name\">class<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>footer-credits<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span>\u00a9 2019 My Test Site<span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>p<span class=\"token punctuation\">&gt;<\/span><\/span>\n<span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>footer<span class=\"token punctuation\">&gt;<\/span><\/span>\n<span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>div<span class=\"token punctuation\">&gt;<\/span><\/span>\n<span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>body<span class=\"token punctuation\">&gt;<\/span><\/span>\n<span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>html<span class=\"token punctuation\">&gt;<\/span><\/span><\/code><\/pre>\n<p>O seguinte modelo \u00e9 mais um exemplo para basear suas pr\u00f3prias estrat\u00e9gias.<\/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=\"Um exemplo de site HTML\" width=\"938\" height=\"761\"><figcaption id=\"caption-attachment-84407\" class=\"wp-caption-text\">Um exemplo de site HTML<\/figcaption><\/figure>\n<p>Como voc\u00ea pode ver, o arquivo <strong>index.html <\/strong>deste arquivo \u00e9 um pouco mais complicado, mas ainda familiar na forma como est\u00e1 estruturado.<\/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=\"Exemplo de um arquivo de \u00edndice HTML\" width=\"1078\" height=\"685\"><figcaption id=\"caption-attachment-88608\" class=\"wp-caption-text\">Exemplo de um arquivo de \u00edndice HTML<\/figcaption><\/figure>\n<p>Ambos os exemplos incluem cabe\u00e7alhos, \u00e1reas de conte\u00fado, barras laterais e rodap\u00e9s.<\/p>\n<p>O mais prov\u00e1vel \u00e9 que voc\u00ea tenha um projeto diferente. Por causa disso, voc\u00ea ter\u00e1 que ajustar os passos cobertos abaixo.<\/p>\n<p>Cada passo em frente envolve editar e adicionar a cada um dos novos arquivos WordPress que voc\u00ea criou anteriormente. Dito isto, mantenha o arquivo <strong>index.html <\/strong>do seu site HTML aberto. Voc\u00ea estar\u00e1 usando este passo em frente.<\/p>\n<h4>O arquivo header.php<\/h4>\n<p>Em seu arquivo HTML aberto, procure por tudo no in\u00edcio do arquivo e no final com a \u00e1rea de conte\u00fado principal. A \u00e1rea de conte\u00fado principal \u00e9 normalmente representada com uma <strong><code>&lt;div class=\"main\"&gt;<\/code><\/strong>ou<strong><code>&lt;main&gt; tag<\/code>.<\/strong><\/p>\n<p>Copie e cole esta se\u00e7\u00e3o do arquivo HTML em seu novo arquivo <code><strong>header.php.<\/strong><\/code><\/p>\n<p>Depois disso, encontre onde diz <strong><code>&lt;\/head&gt;<\/code>.<\/strong><\/p>\n<p>Logo antes disso, cole no seguinte:<\/p>\n<p><code>&lt;?php wp_head();?&gt;<\/code><\/p>\n<p>Este peda\u00e7o de c\u00f3digo \u00e9 importante para que a maioria dos plugins WordPress funcionem.<\/p>\n<h4>O arquivo sidebar.php<\/h4>\n<p><strong>Procure <\/strong>a se\u00e7\u00e3o<code><strong> &lt;aside&gt; <\/strong><\/code>em seu <strong>arquivo <\/strong>index.<strong>html.<\/strong><\/p>\n<p>Tudo dentro das <strong>etiquetas <code>&lt;aside&gt;<\/code> e <code>&lt;\/aside&gt;<\/code>, <\/strong>incluindo as pr\u00f3prias etiquetas \u00e0 parte, deve ser copiado para o novo <strong>arquivo <\/strong>sidebar.php.<\/p>\n<p>A partir de nosso arquivo de exemplo, parece algo parecido com isto:<\/p>\n<pre class=\" language-html\"><code class=\" language-html\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>aside<span class=\"token punctuation\">&gt;<\/span><\/span>\n<span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>h3<span class=\"token punctuation\">&gt;<\/span><\/span>Sidebar here<span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>h3<span class=\"token punctuation\">&gt;<\/span><\/span>\n<span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>p<span class=\"token punctuation\">&gt;<\/span><\/span>Etiam ullam corper lorem dapibus velit suscipit ultrices. <span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>p<span class=\"token punctuation\">&gt;<\/span><\/span>\n<span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>aside<span class=\"token punctuation\">&gt;<\/span><\/span><\/code><\/pre>\n<h4>O arquivo de footer.php<\/h4>\n<p>Se voc\u00ea tiver um site HTML simples, voc\u00ea pode ter apenas suas informa\u00e7\u00f5es de rodap\u00e9 (footer) para transferir. Outros sites s\u00e3o um pouco mais complicados. Independentemente disso, n\u00e3o \u00e9 uma m\u00e1 id\u00e9ia terminar com a modifica\u00e7\u00e3o do rodap\u00e9 (footer), visto que \u00e9 um dos principais blocos de constru\u00e7\u00e3o que comp\u00f5em os arquivos do site WordPress.<\/p>\n<p>No arquivo <strong>index.html<\/strong>, encontrar e copiar todos os c\u00f3digos ap\u00f3s a tag <strong><code>&lt;\/aside&gt;<\/code> <\/strong>barra lateral (sidebar).<\/p>\n<p>Mais uma vez, voc\u00ea pode ter mais conte\u00fado ap\u00f3s a se\u00e7\u00e3o da barra lateral (sidebar), mas \u00e9 poss\u00edvel para sites HTML mais simples, apenas para ter o rodap\u00e9 (footer) para lidar com isso.<\/p>\n<p>Em nosso exemplo, o rodap\u00e9 (footer) \u00e9 algo parecido com isto:<\/p>\n<pre class=\" language-html\"><code class=\" language-html\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>main<span class=\"token punctuation\">&gt;<\/span><\/span> <span class=\"token comment\">&lt;!-- #main --&gt;<\/span>\n<span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>div<span class=\"token punctuation\">&gt;<\/span><\/span> <span class=\"token comment\">&lt;!-- #main-container --&gt;<\/span>\n\n<span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div <span class=\"token attr-name\">class<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>footer-container<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span>\n<span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>footer <span class=\"token attr-name\">class<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>wrapper<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span>\n<span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>p <span class=\"token attr-name\">class<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>footer-credits<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span>\u00a9 2020 My Test Site<span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>p<span class=\"token punctuation\">&gt;<\/span><\/span>\n<span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>footer<span class=\"token punctuation\">&gt;<\/span><\/span>\n<span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>div<span class=\"token punctuation\">&gt;<\/span><\/span>\n<span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>body<span class=\"token punctuation\">&gt;<\/span><\/span>\n<span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>html<span class=\"token punctuation\">&gt;<\/span><\/span><\/code><\/pre>\n<p>Mas n\u00e3o t\u00e3o r\u00e1pido. Depois de colar esse c\u00f3digo de rodap\u00e9 (footer) no novo arquivo de <strong>footer.php<\/strong>, adicione o arquivo <strong><code>&lt;?php wp_footer();?&gt;<\/code> snippet <\/strong>bem antes do <code>&lt;\/corpo&gt;<\/code> <strong>colchete.<\/strong> Isto ajuda o rodap\u00e9 (footer) a funcionar corretamente com o WordPress.<\/p>\n<p>Voc\u00ea pode ver um exemplo do <strong>c\u00f3digo <\/strong> <strong><code>&lt;?php wp_footer();?&gt;<\/code><\/strong>\u00a0colado no arquivo de rodap\u00e9 (footer) abaixo.<\/p>\n<pre class=\" language-html\"><code class=\" language-html\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>main<span class=\"token punctuation\">&gt;<\/span><\/span> <span class=\"token comment\">&lt;!-- #main --&gt;<\/span>\n<span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>div<span class=\"token punctuation\">&gt;<\/span><\/span> <span class=\"token comment\">&lt;!-- #main-container --&gt;<\/span>\n<span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div <span class=\"token attr-name\">class<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>footer-container<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span>\n<span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>footer <span class=\"token attr-name\">class<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>wrapper<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span>\n<span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>p <span class=\"token attr-name\">class<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>footer-credits<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span>\u00a9 2020 My Test Site<span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>p<span class=\"token punctuation\">&gt;<\/span><\/span>\n<span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>footer<span class=\"token punctuation\">&gt;<\/span><\/span>\n<span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>div<span class=\"token punctuation\">&gt;<\/span><\/span>\n<span class=\"token prolog\">&lt;?php wp_footer();?&gt;<\/span>\n<span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>body<span class=\"token punctuation\">&gt;<\/span><\/span>\n<span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>html<span class=\"token punctuation\">&gt;<\/span><\/span><\/code><\/pre>\n<p>Certifique-se de salvar todos esses novos arquivos em sua pasta de temas. Por exemplo, depois de colar este c\u00f3digo de rrodap\u00e9 (footer) no arquivo <strong>footer.php<\/strong>, voc\u00ea deve clicar no bot\u00e3o Salvar em seu editor e fech\u00e1-lo.<\/p>\n<p>Agora que os arquivos b\u00e1sicos est\u00e3o prontos, feche o arquivo <strong>index.html <\/strong>original do seu site HTML.<\/p>\n<h3>Vincule seus arquivos header.php e index.php ao WordPress<\/h3>\n<p>Voc\u00ea j\u00e1 o adicionou ao arquivo <strong>header.php<\/strong>, mas ainda precisa tomar medidas adicionais. Essencialmente, voc\u00ea quer modificar o chamado stylesheet a partir do HTML que est\u00e1 l\u00e1 dentro agora mesmo para o formato padr\u00e3o PHP do WordPress.<\/p>\n<p>De volta ao arquivo <strong>header.php<\/strong>, encontre a se\u00e7\u00e3o<strong> &lt;head&gt;.<\/strong><\/p>\n<p>Estamos procurando o stylesheet. \u00c9 algo parecido com isto:<\/p>\n<pre class=\" language-css\"><code class=\" language-css\">&lt;link rel=<span class=\"token string\">\"stylesheet\"<\/span> href=<span class=\"token string\">\"style.css\"<\/span>&gt;<\/code><\/pre>\n<p>Elimine esta e substitua com o seguinte:<\/p>\n<pre class=\" language-css\"><code class=\" language-css\">&lt;link rel=<span class=\"token string\">\"stylesheet\"<\/span> href=<span class=\"token string\">\"&lt;?php echo get_template_directory_uri(); ?&gt;\/style.css\"<\/span> type=<span class=\"token string\">\"text\/css\"<\/span> media=<span class=\"token string\">\"all\"<\/span> \/&gt;<\/code><\/pre>\n<p>Isso \u00e9 tudo que voc\u00ea tem que fazer com o arquivo <strong>header.php.<\/strong> O stylesheet est\u00e1 agora trabalhando com o formato WordPress, e n\u00e3o HTML.<\/p>\n<p>V\u00e1 em frente e salve e feche o arquivo <strong>header.php.<\/strong><\/p>\n<p>Em seguida, abra o arquivo <strong>index.php <\/strong>(n\u00e3o o arquivo <strong>index.html que <\/strong>voc\u00ea estava usando antes, mas o novo arquivo <strong>index.php<\/strong>).<\/p>\n<p>Neste momento, o arquivo <strong>index.php <\/strong>est\u00e1 vazio.<\/p>\n<p>Pegue o seguinte c\u00f3digo e o copie e cole no novo arquivo <strong>index.php.<\/strong> Deixe o espa\u00e7o entre as duas primeiras linhas. Isso est\u00e1 l\u00e1 por uma raz\u00e3o, que voc\u00ea ver\u00e1 em breve.<\/p>\n<p>Estas linhas funcionam como chamadas para seus outros arquivos do site, incluindo <strong>header.php<\/strong>, <strong>sidebar.php<\/strong>, e <strong>footer.php<\/strong>.<\/p>\n<pre class=\" language-css\"><code class=\" language-css\">&lt;?php get_<span class=\"token function\">header<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span> ?&gt;\n\n&lt;?php get_<span class=\"token function\">sidebar<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span> ?&gt;\n&lt;?php get_<span class=\"token function\">footer<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span> ?&gt;<\/code><\/pre>\n<p>O espa\u00e7o aberto na segunda linha \u00e9 reservado para o que chamamos de The Loop, ou um processo din\u00e2mico no WordPress que roda em segundo plano para adicionar novos posts ao seu site. Essencialmente, \u00e9 deixar o WordPress saber que mais conte\u00fado ainda est\u00e1 por vir e que ele deve usar o The Loop para adicionar esse conte\u00fado. Saiba mais sobre o <a href=\"https:\/\/codex.wordpress.org\/The_Loop\">The Loop aqui<\/a>.<\/p>\n<p>Para adicionar The Loop, cole o seguinte c\u00f3digo no espa\u00e7o que voc\u00ea deixou no arquivo <strong>index.php <\/strong>antes (logo abaixo de &lt;?php get_header(); ?&gt;).<\/p>\n<pre class=\" language-css\"><code class=\" language-css\">&lt;?php while <span class=\"token punctuation\">(<\/span> have_<span class=\"token function\">posts<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">:<\/span> the_<span class=\"token function\">post<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span> ?&gt;\n&lt;article class=<span class=\"token string\">\"&lt;?php post_class(); ?&gt;\"<\/span> id=<span class=\"token string\">\"post-&lt;?php the_ID(); ?&gt;\"<\/span>&gt;\n&lt;h2 class=<span class=\"token string\">\"entry-title\"<\/span>&gt;&lt;?php the_<span class=\"token function\">title<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span> ?&gt;&lt;\/h2&gt;\n&lt;?php if <span class=\"token punctuation\">(<\/span> !is_<span class=\"token function\">page<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">:<\/span>?&gt;\n&lt;section class=<span class=\"token string\">\"entry-meta\"<\/span>&gt;\n&lt;p&gt;Posted on &lt;?php the_<span class=\"token function\">date<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>?&gt; by &lt;?php the_<span class=\"token function\">author<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>?&gt;&lt;\/p&gt;\n&lt;\/section&gt;\n&lt;?php endif<span class=\"token punctuation\">;<\/span> ?&gt;\n&lt;section class=<span class=\"token string\">\"entry-content\"<\/span>&gt;\n&lt;?php the_<span class=\"token function\">content<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span> ?&gt;\n&lt;\/section&gt;\n&lt;section class=<span class=\"token string\">\"entry-meta\"<\/span>&gt;&lt;?php if <span class=\"token punctuation\">(<\/span> <span class=\"token function\">count<\/span><span class=\"token punctuation\">(<\/span> get_the_<span class=\"token function\">category<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">:<\/span> ?&gt;\n&lt;span class=<span class=\"token string\">\"category-links\"<\/span>&gt;\nPosted <span class=\"token property\">under<\/span><span class=\"token punctuation\">:<\/span> &lt;?php echo get_the_category_<span class=\"token function\">list<\/span><span class=\"token punctuation\">(<\/span> <span class=\"token string\">', '<\/span> <span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span> ?&gt;\n&lt;\/span&gt;\n&lt;?php endif<span class=\"token punctuation\">;<\/span> ?&gt;&lt;\/section&gt;\n&lt;\/article&gt;\n&lt;?php endwhile<span class=\"token punctuation\">;<\/span> ?&gt;<\/code><\/pre>\n<p>O resultado deve ser o seguinte:<\/p>\n<pre class=\" language-css\"><code class=\" language-css\">&lt;?php get_<span class=\"token function\">header<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span> ?&gt;\n&lt;?php while <span class=\"token punctuation\">(<\/span> have_<span class=\"token function\">posts<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">:<\/span> the_<span class=\"token function\">post<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span> ?&gt;\n&lt;article class=<span class=\"token string\">\"&lt;?php post_class(); ?&gt;\"<\/span> id=<span class=\"token string\">\"post-&lt;?php the_ID(); ?&gt;\"<\/span>&gt;\n&lt;h2 class=<span class=\"token string\">\"entry-title\"<\/span>&gt;&lt;?php the_<span class=\"token function\">title<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span> ?&gt;&lt;\/h2&gt;\n&lt;?php if <span class=\"token punctuation\">(<\/span> !is_<span class=\"token function\">page<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">:<\/span>?&gt;\n&lt;section class=<span class=\"token string\">\"entry-meta\"<\/span>&gt;\n&lt;p&gt;Posted on &lt;?php the_<span class=\"token function\">date<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>?&gt; by &lt;?php the_<span class=\"token function\">author<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>?&gt;&lt;\/p&gt;\n&lt;\/section&gt;\n&lt;?php endif<span class=\"token punctuation\">;<\/span> ?&gt;\n&lt;section class=<span class=\"token string\">\"entry-content\"<\/span>&gt;\n&lt;?php the_<span class=\"token function\">content<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span> ?&gt;\n&lt;\/section&gt;\n&lt;section class=<span class=\"token string\">\"entry-meta\"<\/span>&gt;&lt;?php if <span class=\"token punctuation\">(<\/span> <span class=\"token function\">count<\/span><span class=\"token punctuation\">(<\/span> get_the_<span class=\"token function\">category<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">:<\/span> ?&gt;\n&lt;span class=<span class=\"token string\">\"category-links\"<\/span>&gt;\nPosted <span class=\"token property\">under<\/span><span class=\"token punctuation\">:<\/span> &lt;?php echo get_the_category_<span class=\"token function\">list<\/span><span class=\"token punctuation\">(<\/span> <span class=\"token string\">', '<\/span> <span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span> ?&gt;\n&lt;\/span&gt;\n&lt;?php endif<span class=\"token punctuation\">;<\/span> ?&gt;&lt;\/section&gt;\n&lt;\/article&gt;\n&lt;?php endwhile<span class=\"token punctuation\">;<\/span> ?&gt;\n&lt;?php get_<span class=\"token function\">sidebar<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span> ?&gt;\n&lt;?php get_<span class=\"token function\">footer<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span> ?&gt;<\/code><\/pre>\n<p>V\u00e1 em frente e salve o arquivo <strong>index.php.<\/strong> Voc\u00ea tamb\u00e9m pode fechar o arquivo agora.<\/p>\n<p>Com isso feito, um tema WordPress baseado em seu site HTML original est\u00e1 pronto para ser carregado no WordPress.<\/p>\n<h3>Fa\u00e7a o upload do novo tema para o WordPress<\/h3>\n<p>O \u00faltimo passo \u00e9 carregar o tema em seu site WordPress. Uma op\u00e7\u00e3o \u00e9 simplesmente zipar a pasta do site e carreg\u00e1-lo na se\u00e7\u00e3o Tema WordPress sem adicionar uma captura de tela do seu site para refer\u00eancia.<\/p>\n<p>Embora seu tema ainda funcione da mesma maneira sem uma captura de tela de refer\u00eancia, recomendamos a cria\u00e7\u00e3o de uma captura de tela para que seja mais f\u00e1cil para voc\u00ea organizar seus temas e entender qual deles est\u00e1 realmente ativo em seu website.<\/p>\n<p>Por captura de tela, entendemos a pequena visualiza\u00e7\u00e3o que aparece para todos os temas instalados em seu painel do WordPress. Mesmo os que n\u00e3o est\u00e3o ativos t\u00eam screenshots. \u00c9 um requisito ter uma captura de tela se voc\u00ea planeja fazer o upload do seu tema para a Biblioteca de Temas do 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=\"Painel de Temas em WordPress\" width=\"1284\" height=\"506\"><figcaption id=\"caption-attachment-84416\" class=\"wp-caption-text\">Painel de Temas em WordPress<\/figcaption><\/figure>\n<p>Voc\u00ea pode n\u00e3o estar carregando seu tema publicamente, mas uma captura de tela ajuda na gest\u00e3o do seu pr\u00f3prio tema. Como voc\u00ea pode ver, \u00e9 bastante dif\u00edcil dizer como \u00e9 o tema se n\u00e3o houver uma pr\u00e9via da tela dispon\u00edvel. O tema Twenty Seventeen Child n\u00e3o tem uma captura de tela, portanto, \u00e9 apenas uma imagem em branco. Isso pode confundir muitos no futuro.<\/p>\n<p>Para adicionar uma captura de tela, abra o antigo site HTML em um navegador e pegue uma captura de tela da p\u00e1gina inicial com qualquer ferramenta de recorte ou software de captura de tela que voc\u00ea tenha dispon\u00edvel.<\/p>\n<p>Abra seu software favorito de edi\u00e7\u00e3o de imagem e corte a captura de tela para 880&#215;660 pixels. Isto garantir\u00e1 que a captura de tela n\u00e3o seja esticada ou desproporcional quando adicionada ao WordPress.<\/p>\n<p>Salve a vers\u00e3o editada da captura de tela em sua nova pasta de tema. Ela n\u00e3o precisa ir em nenhuma pasta especial &#8211; basta coloc\u00e1-la diretamente na pasta de temas ao lado dos outros arquivos como <strong>header.php <\/strong>e <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 tela na pasta tem\u00e1tica\" width=\"987\" height=\"553\"><figcaption id=\"caption-attachment-84418\" class=\"wp-caption-text\">Captura de tela na pasta de temas<\/figcaption><\/figure>\n<p>Agora, voc\u00ea tem duas op\u00e7\u00f5es para carregar o novo tema do WordPress para o WordPress.<\/p>\n<p>A primeira \u00e9 arrastando esses arquivos para a pasta wp-content\/temas via FTP. Se voc\u00ea seguir este caminho, n\u00e3o h\u00e1 necessidade de zipar o arquivo. Basta usar um cliente FTP como o FileZilla e arrastar a pasta normal para a pasta wp-content\/temesmes.<\/p>\n<p>A outra op\u00e7\u00e3o \u00e9 carregar uma vers\u00e3o zipada no painel de controle do WordPress.<\/p>\n<p>Para come\u00e7ar, comprima a pasta de temas inteira em um arquivo zip.<\/p>\n<p>Em seguida, no painel do WordPress, v\u00e1 para <strong>Appearance &gt; Themes.<\/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 para o painel Temas em WordPress\" width=\"954\" height=\"414\"><figcaption id=\"caption-attachment-84425\" class=\"wp-caption-text\">Ir para o painel Temas em WordPress<\/figcaption><\/figure>\n<p>Clique no bot\u00e3o Adicionar novo.<\/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=\"Adicionando um novo tema no WordPress\" width=\"946\" height=\"414\"><figcaption id=\"caption-attachment-84424\" class=\"wp-caption-text\">Adicionando um novo tema no WordPress<\/figcaption><\/figure>\n<p>Selecione o bot\u00e3o Upload Theme.<\/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=\"Carregamento de um tema no WordPress\" width=\"1041\" height=\"516\"><figcaption id=\"caption-attachment-84423\" class=\"wp-caption-text\">upload de um tema no WordPress<\/figcaption><\/figure>\n<p>Clique em <strong>Choose File <\/strong>e procure o arquivo zipado em seu computador. Selecione o arquivo para que ele apare\u00e7a no painel do 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=\"Escolha o arquivo tem\u00e1tico a ser carregado\" width=\"948\" height=\"361\"><figcaption id=\"caption-attachment-84422\" class=\"wp-caption-text\">Escolha o arquivo tem\u00e1tico a ser carregado<\/figcaption><\/figure>\n<p>Clique em Instalar Agora para processar o arquivo no 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 o tema depois de carregado\" width=\"913\" height=\"341\"><figcaption id=\"caption-attachment-84421\" class=\"wp-caption-text\">Instalar o tema depois de carregado<\/figcaption><\/figure>\n<p>O WordPress deve lhe dizer que o pacote est\u00e1 sendo instalado e que ele \u00e9 instalado com sucesso.<\/p>\n<p>Clique no bot\u00e3o Ativar para concluir o trabalho.<\/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\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/12\/activate-the-theme.png\" alt=\"Ativar o tema ap\u00f3s sua instala\u00e7\u00e3o\" width=\"921\" height=\"298\"><figcaption id=\"caption-attachment-84420\" class=\"wp-caption-text\">Ativar o tema ap\u00f3s sua instala\u00e7\u00e3o<\/figcaption><\/figure>\n<p>Agora o tema, com sua captura de tela, aparece na lista de Temas como o tema Ativo. Voc\u00ea pode ir para o frontend do seu site WordPress para ver agora uma vers\u00e3o WordPress do seu site 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=\"O novo tema aparece no painel de bordo\" width=\"1032\" height=\"599\"><figcaption id=\"caption-attachment-84419\" class=\"wp-caption-text\">O novo tema aparece no painel de controle<\/figcaption><\/figure>\n<p>Tenha em mente que nenhuma convers\u00e3o de HTML para WordPress \u00e9 a mesma. Voc\u00ea pode descobrir que o seu \u00e9 um pouco mais complexo do que o que acabamos de passar. Em geral, v\u00e1rias outras a\u00e7\u00f5es precisam ser tomadas para obter uma duplicata exata do seu site HTML.<\/p>\n<p>Por exemplo, voc\u00ea ter\u00e1 que adicionar \u00e1reas widget e coment\u00e1rios e at\u00e9 mesmo ajustar o t\u00edtulo e descri\u00e7\u00e3o do seu blog para que sejam modific\u00e1veis no WordPress.<\/p>\n<p>Muito trabalho manual envolve a mudan\u00e7a de um site HTML para um site WordPress, e voc\u00ea pode descobrir que algumas mudan\u00e7as s\u00f3 s\u00e3o poss\u00edveis com um pouco de marca\u00e7\u00e3o CSS.<\/p>\n<p>Al\u00e9m disso, este tutorial n\u00e3o tem nada a ver com a adi\u00e7\u00e3o de conte\u00fado como posts e imagens. Isto pode ser feito manualmente carregando imagens na Biblioteca de M\u00eddia e ajustando elementos como as estruturas URL.<\/p>\n<p>Alguns plugins est\u00e3o por a\u00ed para automatizar a importa\u00e7\u00e3o de conte\u00fado, mas a maioria deles n\u00e3o est\u00e1 atualizada com as novas vers\u00f5es do WordPress. Portanto, sugerimos que voc\u00ea talvez os experimente para ver se eles funcionam para voc\u00ea, mas voc\u00ea n\u00e3o deve esperar muito.<\/p>\n<h2>Convers\u00e3o de HTML para WordPress atrav\u00e9s de um Child Theme<\/h2>\n<p>Este \u00e9, sem d\u00favida, um dos m\u00e9todos mais f\u00e1ceis para converter um site HTML inteiro em um site WordPress. Ele funciona usando qualquer um dos <a href=\"https:\/\/kinsta.com\/blog\/wordpress-free-vs-paid-themes\/\">temas WordPress gratuitos<\/a> j\u00e1 existentes online, para que voc\u00ea possa escolher seu favorito e combin\u00e1-lo com o design do seu site HTML.<\/p>\n<p>No geral, voc\u00ea est\u00e1 usando o tema j\u00e1 criado do WordPress como um Parent Theme. Ent\u00e3o, o site HTML \u00e9 convertido para trabalhar com o WordPress e vinculado ao Parent Theme como um Child Theme. Se voc\u00ea tiver perguntas sobre Parent Theme e Child Theme, por favor <a href=\"https:\/\/kinsta.com\/pt\/blog\/tema-filho-no-wordpress\/\">leia nosso guia sobre o tema aqui<\/a>.<\/p>\n<p>Como explica\u00e7\u00e3o r\u00e1pida, o Parent Theme gerencia a funcionalidade do seu site enquanto o Child Theme \u00e9 constru\u00eddo em cima do Parent Theme. O Parent Theme poderia tecnicamente ficar por conta pr\u00f3pria, mas o Child Theme n\u00e3o pode. Portanto, estamos usando o Child Theme para modificar o design do Parent Theme enquanto mantemos a poderosa funcionalidade que j\u00e1 \u00e9 fornecida no Parent Theme.<\/p>\n<p>Veja como fazer a convers\u00e3o de HTML para WordPress atrav\u00e9s de um Child Theme.<\/p>\n<h3>Escolha um Parent Theme<\/h3>\n<p>A primeira linha de a\u00e7\u00e3o \u00e9 selecionar um tema que voc\u00ea gosta. O tema que voc\u00ea decidir funcionar\u00e1 como seu tema principal, e voc\u00ea o usar\u00e1 como base do design do seu site.<\/p>\n<p>O ideal \u00e9 que voc\u00ea localize um tema que j\u00e1 esteja pr\u00f3ximo em design do visual e da apar\u00eancia do seu antigo site HTML. Outra op\u00e7\u00e3o \u00e9 utilizar uma <a href=\"https:\/\/kinsta.com\/pt\/blog\/frameworks-php-populares\/\">estrutura WordPress<\/a> ou tema inicial, vendo como ambos os <a href=\"https:\/\/kinsta.com\/pt\/blog\/temas-wordpress-mais-rapidos\/\">tipos de temas<\/a> j\u00e1 s\u00e3o utilizados para funda\u00e7\u00f5es de design.<\/p>\n<p>Por exemplo, um tema inicial de qualidade \u00e9 o <a href=\"https:\/\/kinsta.com\/pt\/blog\/twenty-twenty-tema\/\">tema twenty twenty<\/a> ou qualquer um dos temas iniciais padr\u00e3o do WordPress com o nome do ano em que foram feitos. Recomendamos voltar atr\u00e1s nos anos (Twenty Nineteen, Twenty Seventeen, etc.) para ver se algum deles combina melhor com o design do seu site HTML.<\/p>\n<p>Iremos com o <a href=\"https:\/\/kinsta.com\/blog\/twenty-seventeen-theme\/\">tema Twenty Seventeen<\/a> para este tutorial devido \u00e0 sua limpeza e capacidade de combinar muitos designs HTML simples na web.<\/p>\n<p>Independentemente disso, todos esses temas servem como pontos de partida maravilhosos.<\/p>\n<p>Para come\u00e7ar, <a href=\"https:\/\/kinsta.com\/pt\/blog\/como-instalar-um-tema-do-wordpress\/\">instale o tema em seu site 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=\"Ativa\u00e7\u00e3o de um tema WordPress\" width=\"1602\" height=\"823\"><figcaption id=\"caption-attachment-84388\" class=\"wp-caption-text\">Ativa\u00e7\u00e3o de um tema WordPress<\/figcaption><\/figure>\n<p>Voc\u00ea pode ativar o tema se quiser, mas ativar\u00e1 um novo Child Theme mais tarde e s\u00f3 usar\u00e1 o tema inicial como base para o design.<\/p>\n<h3>Fa\u00e7a uma Nova Pasta<\/h3>\n<p>Todos os <a href=\"https:\/\/kinsta.com\/pt\/blog\/temas-wordpress-mais-rapidos\/\">temas do WordPress<\/a> requerem pastas para armazenar seus arquivos do site. Portanto, voc\u00ea deve fazer uma nova pasta para o Child Theme que est\u00e1 sendo criado a partir do site HTML.<\/p>\n<p>Recomendamos dar \u00e0 pasta o nome do seu tema principal e acrescentar &#8220;-child&#8221; no final do nome da pasta.<\/p>\n<p>Por exemplo, neste caso, chamaremos a pasta de &#8220;twentyseventeen-child&#8221;.<\/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=\"Pasta tem\u00e1tica infantil para HTML para WordPress\" width=\"1310\" height=\"795\"><figcaption id=\"caption-attachment-84389\" class=\"wp-caption-text\">Pasta do Child Theme para HTML para WordPress<\/figcaption><\/figure>\n<p>De modo geral, qualquer nome serve, desde que voc\u00ea se lembre do nome da pasta e n\u00e3o acrescente nenhum espa\u00e7o a ela.<\/p>\n<h3>Configure seu stylesheet<\/h3>\n<p>Todos os Child Themes exigem stylesheet que v\u00e3o para a pasta de temas.<\/p>\n<p>Portanto, fa\u00e7a um documento de texto e nomeie-o <strong>style<\/strong><strong>.css<\/strong>. Salve-o na pasta de temas e inclua o seguinte c\u00f3digo nesse arquivo de texto:<\/p>\n<pre class=\" language-css\"><code class=\" language-css\"><span class=\"token comment\">\/*\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*\/<\/span><\/code><\/pre>\n<p>Certifique-se de substituir os elementos que s\u00e3o personalizados em seu site. Voc\u00ea potencialmente precisar\u00e1 modificar coisas como o Nome Tem\u00e1tico, Tema URI, Autor, Template e alguns outros elementos para garantir que ele corresponda a seus pr\u00f3prios nomes de arquivo. \u00c9 semelhante a algumas das etapas da se\u00e7\u00e3o acima chamada &#8220;Convers\u00e3o Manual de um Site HTML Inteiro para WordPress&#8221;, explicando o significado de cada linha.<\/p>\n<p>O mais importante \u00e9 a etiqueta Template. Este deve ter o nome do Parent Theme para que o Child Theme funcione corretamente.<\/p>\n<h3>Crie um arquivo functions.php<\/h3>\n<p>Se voc\u00ea simplesmente usasse o style sheet do site e ativasse o child theme, um site HTML sem qualquer estilo estaria dispon\u00edvel. No entanto, gostar\u00edamos tamb\u00e9m de acrescentar um estilo ao child theme para dar-lhe o visual que queremos que ela tenha.<\/p>\n<p>Todos os estilos ser\u00e3o retirados do parent theme.<\/p>\n<p>Portanto, um arquivo <strong>functions.php<\/strong> \u00e9 necess\u00e1rio para transmitir os estilos do parent theme para o child theme.<\/p>\n<p>Crie um arquivo chamado <strong>functions.php <\/strong>em sua pasta de temas.<\/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\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/12\/function-file-2.png\" alt=\"O arquivo functions.php para HTML para WordPress\" width=\"1309\" height=\"803\"><figcaption id=\"caption-attachment-84397\" class=\"wp-caption-text\">O arquivo functions.php em HTML para WordPress<\/figcaption><\/figure>\n<p>Para ativar o arquivo, adicione uma tag PHP de abertura, junto com o c\u00f3digo que pede ao WordPress para usar o estilo do parent theme:<\/p>\n<pre class=\" language-php\"><code class=\" language-php\"><span class=\"token php language-php\"><span class=\"token delimiter important\">&lt;?php<\/span>\n<span class=\"token keyword\">function<\/span> <span class=\"token function\">child_theme_enqueue_styles<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n\n    <span class=\"token variable\">$parent_style<\/span> <span class=\"token operator\">=<\/span> <span class=\"token single-quoted-string string\">'parent-style'<\/span><span class=\"token punctuation\">;<\/span>\n\n    <span class=\"token function\">wp_enqueue_style<\/span><span class=\"token punctuation\">(<\/span> <span class=\"token variable\">$parent_style<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token function\">get_template_directory_uri<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">.<\/span> <span class=\"token single-quoted-string string\">'\/style.css'<\/span> <span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n    <span class=\"token function\">wp_enqueue_style<\/span><span class=\"token punctuation\">(<\/span> <span class=\"token single-quoted-string string\">'child-style'<\/span><span class=\"token punctuation\">,<\/span>\n        <span class=\"token function\">get_stylesheet_directory_uri<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">.<\/span> <span class=\"token single-quoted-string string\">'\/style.css'<\/span><span class=\"token punctuation\">,<\/span>\n        <span class=\"token keyword\">array<\/span><span class=\"token punctuation\">(<\/span> <span class=\"token variable\">$parent_style<\/span> <span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span>\n        <span class=\"token function\">wp_get_theme<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token operator\">-<\/span><span class=\"token operator\">&gt;<\/span><span class=\"token function\">get<\/span><span class=\"token punctuation\">(<\/span><span class=\"token single-quoted-string string\">'Version'<\/span><span class=\"token punctuation\">)<\/span>\n    <span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token punctuation\">}<\/span>\n<span class=\"token function\">add_action<\/span><span class=\"token punctuation\">(<\/span> <span class=\"token single-quoted-string string\">'wp_enqueue_scripts'<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token single-quoted-string string\">'child_theme_enqueue_styles'<\/span> <span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/span><\/code><\/pre>\n<p>Outro benef\u00edcio deste peda\u00e7o de c\u00f3digo \u00e9 que ele permite que voc\u00ea ajuste o design do site com o seu Child Theme.<\/p>\n<h3>Ative o Novo Child Theme<\/h3>\n<p>Agora \u00e9 hora de ativar o Child Theme.<\/p>\n<p>Uma maneira de ativar o Child Theme \u00e9 adicionar a pasta ao arquivo wp\/conte\u00fado\/temas em seus arquivos WordPress. Isto seria feito usando um <a href=\"https:\/\/kinsta.com\/pt\/blog\/melhores-clientes-ftp\/\">cliente FTP\/SFTP<\/a>.<\/p>\n<p>Voc\u00ea tamb\u00e9m pode zipar a pasta e carregar o tema em <strong><b>Apar\u00eancia<\/b>\u00a0&gt; Temas &gt; Adicionar novo.<\/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=\"Adicionando um tema infantil no WordPress\" width=\"1089\" height=\"658\"><figcaption id=\"caption-attachment-84396\" class=\"wp-caption-text\">Adicionando um Child Theme no WordPress<\/figcaption><\/figure>\n<p>Selecione o bot\u00e3o <strong>Upload Theme.<\/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=\"Carregando um tema infantil no WordPress\" width=\"928\" height=\"463\"><figcaption id=\"caption-attachment-84395\" class=\"wp-caption-text\">Carregando um Child Theme no WordPress<\/figcaption><\/figure>\n<p>Clique em <strong>Choose File <\/strong>e localize o arquivo zip para o Child Theme em seu computador.<\/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=\"Escolhendo o tema crian\u00e7a a ser carregado\" width=\"1310\" height=\"568\"><figcaption id=\"caption-attachment-84394\" class=\"wp-caption-text\">Escolhendo o Child Theme a ser carregado<\/figcaption><\/figure>\n<p>Uma vez carregado, clique no bot\u00e3o <strong>Instalar Agora.<\/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=\"Instalando o tema crian\u00e7a\" width=\"1021\" height=\"387\"><figcaption id=\"caption-attachment-84393\" class=\"wp-caption-text\">Instalando o Child Theme<\/figcaption><\/figure>\n<p>Clique no bot\u00e3o <strong>Ativar.<\/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=\"Ativando o tema da crian\u00e7a\" width=\"929\" height=\"426\"><figcaption id=\"caption-attachment-84392\" class=\"wp-caption-text\">Ativando o Child Theme<\/figcaption><\/figure>\n<p>Agora voc\u00ea deve ver o tema\u00a0Twenty Seventeen Child (ou qualquer outro tema que voc\u00ea usou) ativado como seu 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=\"Detalhes do tema no painel do WordPress\" width=\"1110\" height=\"658\"><figcaption id=\"caption-attachment-84391\" class=\"wp-caption-text\">Detalhes do tema no painel do WordPress<\/figcaption><\/figure>\n<p>Independentemente do m\u00e9todo utilizado para ativar o Child Theme, seu site WordPress deve refletir o Parent Theme . Em outras palavras, \u00e9 uma duplicata exata do Parent Theme.<\/p>\n<p><strong>Nota: <\/strong>\u00c9 poss\u00edvel adicionar uma captura de tela ao seu novo tema em vez de n\u00e3o ter nenhuma pr\u00e9via. Cobrimos como adicionar uma captura de tela ao tema em uma das se\u00e7\u00f5es anteriores chamada &#8220;Convers\u00e3o Manual de um Site HTML Inteiro para WordPress&#8221;.<\/p>\n<h3>Adicionar arquivos HTML<\/h3>\n<p>O objetivo \u00e9 fazer um site que se pare\u00e7a com seu site HTML original, e n\u00e3o com o tema principal.<\/p>\n<p>Portanto, a etapa final envolve a c\u00f3pia do conte\u00fado do seu website HTML para seu novo website WordPress. Na maioria das vezes, voc\u00ea ter\u00e1 que caminhar atrav\u00e9s destas etapas manualmente. J\u00e1 mencionamos isto antes, mas existem alguns plugins que automatizam o processo de transfer\u00eancia de conte\u00fado. Entretanto, esses plugins n\u00e3o est\u00e3o atualizados com as novas vers\u00f5es do WordPress, portanto, use-os por sua pr\u00f3pria conta e risco.<\/p>\n<h2>O que \u00e9 um conversor de HTML para WordPress? (E quais s\u00e3o as op\u00e7\u00f5es?)<\/h2>\n<p>Um conversor de HTML para WordPress toma as etapas acima e simplifica-as ou completa a tarefa para voc\u00ea por completo. Voc\u00ea pode considerar uma ferramenta de convers\u00e3o de HTML para WordPress se n\u00e3o tiver tempo ou experi\u00eancia para fazer a convers\u00e3o manualmente.<\/p>\n<p>Os conversores v\u00eam em muitos estilos diferentes, mas \u00e9 importante lembrar que nem todos eles s\u00e3o alternativas razo\u00e1veis para se passar manualmente pelo processo de convers\u00e3o do HTML para o WordPress.<\/p>\n<p>Os conversores s\u00e3o oferecidos nas seguintes formas:<\/p>\n<ul>\n<li>Conversores de software de terceiros, tanto online como localmente.<\/li>\n<li>Plugins WordPress.<\/li>\n<li>Desenvolvedores humanos reais.<\/li>\n<\/ul>\n<p>Ao observar as op\u00e7\u00f5es de convers\u00e3o, os softwares\/apps de terceiros parecem razo\u00e1veis para trabalhos simples. Voc\u00ea \u00e9 capaz de pegar um arquivo zip dos arquivos HTML do seu site e carreg\u00e1-los para o conversor. A maioria das ferramentas de terceiros dispon\u00edveis funcionam como aplicativos on-line, ent\u00e3o voc\u00ea simplesmente os abre em seu navegador e clica no bot\u00e3o Upload.<\/p>\n<p>Gostamos destas aplica\u00e7\u00f5es para convers\u00f5es menos complicadas. Se voc\u00ea tiver um site HTML b\u00e1sico e quiser rod\u00e1-lo no WordPress, isto pode fazer o truque, mas uma transi\u00e7\u00e3o suave n\u00e3o \u00e9 garantida.<\/p>\n<p>Quanto aos plugins WordPress que convertem HTML para WordPress, voc\u00ea ter\u00e1 dificuldade para localizar plugins que pegam um site HTML inteiro e convertem os arquivos para WordPress. Havia alguns plugins dispon\u00edveis, mas nenhum deles \u00e9 atualizado para trabalhar com as vers\u00f5es mais recentes do WordPress, e voc\u00ea n\u00e3o quer usar um plugin desatualizado.<\/p>\n<p>Entretanto, alguns plugins fornecem os recursos necess\u00e1rios para o upload de arquivos b\u00e1sicos que podem tornar mais f\u00e1cil do que uma transfer\u00eancia FTP ou mexer com o backend de sua conta de hospedagem. Em geral, muitos dos plugins s\u00f3 permitem uploads de arquivos individuais, portanto n\u00e3o \u00e9 a melhor rota para a convers\u00e3o massiva de websites.<\/p>\n<p>Consideramos o \u00faltimo m\u00e9todo (desenvolvedores humanos reais) uma forma de convers\u00e3o de HTML para WordPress porque ele definitivamente automatiza o processo para voc\u00ea, pedindo ajuda de especialistas e tendo uma pessoa para completar o trabalho. Em geral, contratar um desenvolvedor humano para converter seu website HTML oferece a menor chance de voc\u00ea encontrar problemas, e voc\u00ea tem algu\u00e9m com quem falar se algo der errado.<\/p>\n<p><span style=\"color: #43414e;font-family: 'Brandon Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;font-size: 2rem;font-weight: 900\">As melhores op\u00e7\u00f5es de plugins de convers\u00e3o de HTML para WordPress e outras ferramentas<\/span><\/p>\n<p>Como mencionado, os conversores de HTML para WordPress v\u00eam em muitas configura\u00e7\u00f5es diferentes. Voc\u00ea n\u00e3o vai encontrar muitos plugins WordPress designados que n\u00e3o est\u00e3o desatualizados ou n\u00e3o funcionam mais. Entretanto, temos alguns plugins de convers\u00e3o favoritos que completam tarefas de convers\u00e3o menores, juntamente com aplicativos web e op\u00e7\u00f5es de <a href=\"https:\/\/kinsta.com\/pt\/blog\/contrate-um-desenvolvedor-do-wordpress\/\">desenvolvimento manual<\/a> que v\u00eam a calhar para trabalhos mais avan\u00e7ados de convers\u00e3o de HTML para WordPress.<\/p>\n<h3>Pr\u00f3s e contras da utiliza\u00e7\u00e3o de um plugin ou aplicativo de convers\u00e3o automatizada de HTML para WordPress<\/h3>\n<p>Um conversor automatizado de HTML para WordPress parece uma b\u00ean\u00e7\u00e3o para alguns, mas nem sempre \u00e9 a melhor solu\u00e7\u00e3o. D\u00ea uma olhada nos pr\u00f3s e contras abaixo antes de se comprometer com um aplicativo ou plugin que \u00e9 feito para duplicar ou converter HTML.<\/p>\n<h4>Pr\u00f3s<\/h4>\n<ul>\n<li>Ele elimina a necessidade de fazer seus pr\u00f3prios novos arquivos no website, muitas vezes gerando-os para voc\u00ea.<\/li>\n<li>Muitos dos conversores lhe d\u00e3o op\u00e7\u00f5es para quebrar elementos HTML e escolher quais deles ir\u00e3o para os arquivos certos para WordPress.<\/li>\n<li>Voc\u00ea pode fazer um tema a partir de HTML antigo e us\u00e1-lo em v\u00e1rios sites.<\/li>\n<li>Algumas ferramentas requerem apenas uma <a href=\"https:\/\/kinsta.com\/pt\/blog\/o-que-e-uma-url\/\">URL<\/a> para fazer um novo site ou tema.<\/li>\n<li>Outras ferramentas oferecem op\u00e7\u00f5es para <a href=\"https:\/\/kinsta.com\/pt\/blog\/clonar-facilmente-o-seu-site-wordpress\/\">duplicar um site que<\/a> voc\u00ea n\u00e3o possui, proporcionando um ponto de partida para um design que voc\u00ea aprecia.<\/li>\n<\/ul>\n<h4>Contras<\/h4>\n<ul>\n<li>Muitas vezes voc\u00ea ainda fica com trabalho manual para transferir conte\u00fado como posts em blogs e fotos.<\/li>\n<li>O mais prov\u00e1vel \u00e9 que voc\u00ea tenha que descobrir manualmente a <a href=\"https:\/\/kinsta.com\/pt\/blog\/alterar-dominio-wordpress\/\">transfer\u00eancia de links do antigo site.<\/a><\/li>\n<li>Estes conversores nem sempre s\u00e3o mantidos atualizados. Um dos melhores conversores era um plugin WordPress, mas n\u00e3o o sugerimos neste artigo, uma vez que o desenvolvedor n\u00e3o o mant\u00e9m mais.<\/li>\n<li>Voc\u00ea pode descobrir que alguns dos conversores de aplicativos web n\u00e3o conseguem lidar com trabalhos com arquivos maiores.<\/li>\n<\/ul>\n<p>Agora que voc\u00ea tem uma compreens\u00e3o dos benef\u00edcios e desvantagens dos conversores HTML automatizados, vamos dar uma olhada em nossos aplicativos e plugins de conversores automatizados favoritos abaixo.<\/p>\n<h3>WP Site Importorter<\/h3>\n<p>Embora a ferramenta <a href=\"https:\/\/www.wpsiteimporter.com\/\">WP Site Importorter<\/a> extrai e importa todo tipo de conte\u00fado e arquivos de sites antigos ou de terceiros, voc\u00ea pode apostar que um desses elementos envolve HTML. Em resumo, a ferramenta WP Site Importer permite que voc\u00ea transforme qualquer site em um WordPress, extraindo conte\u00fado como imagens, menus e p\u00e1ginas do site HTML e arquivos do site. O WP Site Importer corrige <a href=\"https:\/\/kinsta.com\/pt\/blog\/links-quebrados\/\">links quebrados<\/a> para que voc\u00ea n\u00e3o tenha que ajust\u00e1-los ou adicionar novos manualmente. Ele ret\u00e9m at\u00e9 mesmo as informa\u00e7\u00f5es de SEO constru\u00eddas a partir do site anterior, incluindo meta-descri\u00e7\u00f5es e palavras-chave.<\/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 Importador\" width=\"925\" height=\"791\"><figcaption id=\"caption-attachment-84164\" class=\"wp-caption-text\">WP Site Importador<\/figcaption><\/figure>\n<p>O importador economiza tempo e dinheiro cortando os custos de um desenvolvedor e tornando esta convers\u00e3o de HTML e conte\u00fado mais um processo de um clique. Al\u00e9m disso, ele limpa seu HTML, limpando e reformatando o HTML de origem. Isto torna seus arquivos HTML mais compat\u00edveis com o WordPress e mostra ao Google que voc\u00ea est\u00e1 trabalhando com c\u00f3digo limpo, por sua vez, impulsionando seu <a href=\"https:\/\/kinsta.com\/pt\/?s=seo\">SEO<\/a>.<\/p>\n<p>A ferramenta WP Site Importer funciona como um plugin direto do WordPress, assim voc\u00ea pode baixar o plugin e ativar suas caracter\u00edsticas diretamente do painel de controle.<\/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 Todas as importa\u00e7\u00f5es\" width=\"1045\" height=\"349\"><figcaption id=\"caption-attachment-84107\" class=\"wp-caption-text\">WP Todas as importa\u00e7\u00f5es<\/figcaption><\/figure>\n<p>O plugin <a href=\"https:\/\/wordpress.org\/plugins\/wp-all-import\/\">WP All Import<\/a> \u00e9 uma das ferramentas mais r\u00e1pidas e f\u00e1ceis dispon\u00edveis para o upload de arquivos XML contendo dados HTML. Em geral, o plugin permite migrar o conte\u00fado de um website anterior ou de um website de demonstra\u00e7\u00e3o em potencial constru\u00eddo com HTML simples ou alguns arquivos HTML que voc\u00ea gostaria de duplicar e trazer para o novo website WordPress.<\/p>\n<p>A convers\u00e3o acontece em quatro etapas e voc\u00ea ganha acesso a uma bela interface de arrastar e soltar para gerenciar suas convers\u00f5es e importa\u00e7\u00f5es. O que tamb\u00e9m \u00e9 interessante sobre o plugin WP All Import \u00e9 que ele lida com importa\u00e7\u00f5es de URLs de sites externos. Portanto, voc\u00ea n\u00e3o precisa nem mesmo ter uma senha ou controle sobre um site para transferir sobre esses poucos arquivos e potencialmente renderizar elementos no WordPress a partir desse site.<\/p>\n<p>Uma convers\u00e3o completa do site pode ser assustadora com este plugin, mas vale a pena tentar, especialmente se for um simples arquivo HTML. Al\u00e9m disso, o plugin suporta convers\u00f5es de HTML para elementos como <a href=\"https:\/\/kinsta.com\/pt\/blog\/tutorial-woocommerce\/#new-products\">produtos WooCommerce<\/a> e p\u00e1ginas WordPress. Uma vers\u00e3o premium est\u00e1 dispon\u00edvel para recursos mais avan\u00e7ados, principalmente o suporte premium ao cliente que permite que voc\u00ea pe\u00e7a ajuda ao fazer estas convers\u00f5es.<\/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>O aplicativo online <a href=\"https:\/\/htmltowordpress.io\/\">HTMLtoWordPress.io<\/a> \u00e9 uma das solu\u00e7\u00f5es mais populares para a convers\u00e3o de um arquivo HTML para WordPress. O que \u00e9 excitante na ferramenta HTMLtoWordPress.io \u00e9 que ela oferece principalmente convers\u00f5es para websites completos, websites constru\u00eddos com HTML.<\/p>\n<p>Tudo o que voc\u00ea precisa fazer \u00e9 puxar a p\u00e1gina inicial e carregar seu arquivo HTML zip para uma r\u00e1pida convers\u00e3o. O aplicativo web automatiza totalmente a convers\u00e3o de HTML para WordPress, de modo que n\u00e3o h\u00e1 necessidade de habilidades de codifica\u00e7\u00e3o ou qualquer motivo para mexer com um cliente FTP.<\/p>\n<p>Voc\u00ea tamb\u00e9m pode ver uma pr\u00e9via completa do seu novo site WordPress antes de completar o processo e public\u00e1-lo na Internet. O conte\u00fado e as imagens do seu site tamb\u00e9m s\u00e3o mantidos para o novo site WordPress. Eles s\u00e3o edit\u00e1veis atrav\u00e9s do aplicativo Simple Live Editor, e \u00e9 suposto fazer refer\u00eancia a essas imagens, juntamente com JavaScript e CSS, sem problemas. No geral, parece uma solu\u00e7\u00e3o s\u00f3lida se voc\u00ea tem um ou v\u00e1rios sites HTML que precisam ser convertidos. Como um b\u00f4nus, voc\u00ea pode adicionar classes ao seu HTML para utilizar <a href=\"https:\/\/kinsta.com\/pt\/\">recursos avan\u00e7ados do WordPress<\/a>.<\/p>\n<p><span style=\"color: #43414e;font-family: 'Brandon Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;font-size: 1.25rem;font-weight: 900\">Pinegrow Theme Converter para WordPress<\/span><\/p>\n<p>O <a href=\"https:\/\/pinegrow.com\/theme-converter-for-wordpress\">Pinegrow Theme Converter<\/a> \u00e9 uma ferramenta exclusiva de web design para pegar uma pasta HTML do site e convert\u00ea-la instantaneamente em um tema WordPress completo. O Conversor de Tema carrega seus arquivos e apresenta uma pr\u00e9via do site WordPress em uma interface visual. Ap\u00f3s o upload, voc\u00ea pode clicar em diferentes elementos nas p\u00e1ginas e atribuir a\u00e7\u00f5es inteligentes a cada item. Estes se integram com o WordPress, assim, enquanto voc\u00ea est\u00e1 atribuindo a\u00e7\u00f5es, ele adiciona os recursos corretos do WordPress \u00e0 sua <a href=\"https:\/\/kinsta.com\/pt\/blog\/editar-codigo-wordpress\/\">estrutura e estilo HTML personalizados<\/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=\"Conversor de Tema Pinegrow\" width=\"933\" height=\"581\"><figcaption id=\"caption-attachment-84109\" class=\"wp-caption-text\">Conversor de Tema Pinegrow<\/figcaption><\/figure>\n<p>Uma vez decididas as a\u00e7\u00f5es desejadas e salvos os arquivos, o Pinegrow tem a op\u00e7\u00e3o de exportar o projeto para arquivos <a href=\"https:\/\/kinsta.com\/pt\/blog\/o-que-php\/\">PHP<\/a> padr\u00e3o do WordPress, que podem ser carregados em uma instala\u00e7\u00e3o WordPress normal para test\u00e1-lo na vida real. Al\u00e9m disso, o sistema de importa\u00e7\u00e3o de conte\u00fado garante que voc\u00ea transfira com sucesso sobre os elementos de m\u00eddia como imagens e v\u00eddeos.<\/p>\n<p>Gostamos especialmente das caracter\u00edsticas que permitem que voc\u00ea volte ao Pinegrow e fa\u00e7a edi\u00e7\u00f5es. Tudo que voc\u00ea precisa fazer \u00e9 clicar no bot\u00e3o Atualizar e enviar a nova vers\u00e3o para seu tema WordPress sem nenhuma mudan\u00e7a avan\u00e7ada de codifica\u00e7\u00e3o ou ajuste do site no WordPress.<\/p>\n<p>Isto n\u00e3o \u00e9 um plugin. Na verdade, nenhum plugin WordPress \u00e9 usado para transformar o arquivo HTML em um tema WordPress. O Pinegrow vem como software para download nas vers\u00f5es Mac, Windows e Linux. Desde o belo editor visual at\u00e9 o recurso de atualiza\u00e7\u00e3o imediata, o software Pinegro parece ser uma das melhores op\u00e7\u00f5es para converter um site HTML completo em um tema 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> \u00e9 um conversor gratuito de HTML para WordPress que funciona transformando arquivos de texto simples em sites reais. O projeto \u00e9 hospedado no <a href=\"https:\/\/kinsta.com\/pt\/blog\/que-github\/\">GitHub<\/a> como um download gratuito. Ele apresenta a oportunidade de cortar a necessidade de bancos de dados e comentar modera\u00e7\u00e3o em vez de focar na transfer\u00eancia de conte\u00fado e transfer\u00eancia\/convers\u00e3o de arquivos com HTML, CSS e markdown.<\/p>\n<p>Uma parte interessante sobre o Jekyll \u00e9 que ele atende a projetos HTML orientados a blogs, compilando as configura\u00e7\u00f5es de conte\u00fado para p\u00e1ginas, posts e <a href=\"https:\/\/kinsta.com\/pt\/blog\/permalinks-wordpress\/\">permalinks<\/a> para migrar seu blog e manter, ou criar, layouts e categorias personalizados e muitos outros itens.<\/p>\n<p>Voc\u00ea pode instalar o conversor Jekyll no MacOS, Ubuntu, Windows e at\u00e9 mesmo em outros sistemas operacionais Linux. Em suma, Jekyll \u00e9 um projeto volunt\u00e1rio com v\u00e1rios recursos como temas, plugins e guias para testar seus conhecimentos e ajud\u00e1-lo a transformar um projeto HTML em algo especial.<\/p>\n<p>Gostamos particularmente das integra\u00e7\u00f5es com ferramentas de com\u00e9rcio eletr\u00f4nico como o MemberSpace e formamos aplicativos como o Getform. A lista de integra\u00e7\u00f5es \u00e9 longa, mas \u00e9 uma verdadeira prova de quanto potencial voc\u00ea tem com seu website depois de fazer a convers\u00e3o de HTML para 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=\"Conversor de temas para HTML para WordPress\" width=\"930\" height=\"496\"><figcaption id=\"caption-attachment-84112\" class=\"wp-caption-text\">Conversor de temas para HTML para WordPress<\/figcaption><\/figure>\n<p>O <a href=\"https:\/\/www.themematcher.com\/\">Theme Matcher<\/a> n\u00e3o \u00e9 tanto um conversor de arquivos HTML, mas um extrator de arquivos HTML de sites de terceiros. Ele gera temas WordPress completos depois que voc\u00ea cola uma URL do seu <a href=\"https:\/\/kinsta.com\/pt\/blog\/site-de-portfolio\/\">site pessoal<\/a> ou de um site HTML que voc\u00ea n\u00e3o possui.<\/p>\n<p>A id\u00e9ia por tr\u00e1s deste tipo de conversor e gerador de temas \u00e9 pegar um de seus pr\u00f3prios sites HTML e transform\u00e1-lo em um site WordPress completo ou fazer um tema que seja baseado em um design que voc\u00ea tenha notado em outro lugar online.<\/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=\"Pr\u00e9-visualiza\u00e7\u00e3o do Theme Matcher\" width=\"943\" height=\"914\"><figcaption id=\"caption-attachment-84111\" class=\"wp-caption-text\">Pr\u00e9-visualiza\u00e7\u00e3o do Theme Matcher<\/figcaption><\/figure>\n<p>Por exemplo, voc\u00ea poderia navegar at\u00e9 sua loja on-line favorita e decidir que gostaria de iniciar seu projeto com essa formata\u00e7\u00e3o e estrutura. O Theme Matcher gera um tema completamente novo para seu site, que obviamente precisa mudar devido a quest\u00f5es de direitos autorais, mas serve como um lugar maravilhoso para come\u00e7ar.<\/p>\n<p>O processo funciona copiando e colando uma URL do site no campo Theme Matcher. Pe\u00e7a-lhe para criar um tema para voc\u00ea e selecione o layout do site para converter em conte\u00fado WordPress. Grande parte da convers\u00e3o de HTML para WordPress continua em segundo plano aqui, e \u00e9 importante identificar essas \u00e1reas de conte\u00fado do WordPress para torn\u00e1-lo o mais pr\u00f3ximo poss\u00edvel de um tema WordPress real. Finalmente, voc\u00ea pode fazer o download do tema e carreg\u00e1-lo em seu <a href=\"https:\/\/kinsta.com\/pt\/blog\/sistema-de-gerenciamento-de-conteudo\/\">CMS do<\/a> WordPress.<\/p>\n<p>Se seu site HTML n\u00e3o est\u00e1 atualmente ao vivo, e voc\u00ea n\u00e3o pode colar em uma URL, o Theme Matcher fornece uma maneira de carregar um arquivo zip de sua p\u00e1gina HTML para depois passar pelo mesmo processo.<\/p>\n<h3>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 para WordPress Converter\" width=\"926\" height=\"659\"><figcaption id=\"caption-attachment-84113\" class=\"wp-caption-text\">ImportIntoBlog.com HTML para WordPress Converter<\/figcaption><\/figure>\n<p>O site <a href=\"https:\/\/importintoblog.com\/\">Import Into Blog<\/a> \u00e9 um aplicativo online que agarra o HTML e outros arquivos do seu site ao vivo para convert\u00ea-lo em um site WordPress. V\u00e1rias op\u00e7\u00f5es est\u00e3o dispon\u00edveis, tais como criar um <a href=\"https:\/\/kinsta.com\/pt\/blog\/solucionando-problemas-de-importacao\/\">arquivo XML<\/a> para download <a href=\"https:\/\/kinsta.com\/pt\/blog\/solucionando-problemas-de-importacao\/\">para ser importado<\/a> para seu site WordPress. Voc\u00ea tamb\u00e9m pode considerar o download do resultado final como um tema WordPress para carregar para o WordPress e ver o site completo.<\/p>\n<p>A recupera\u00e7\u00e3o autom\u00e1tica do site est\u00e1 dispon\u00edvel com a ferramenta ImportIntoBlog. Sem mencionar que todos os <a href=\"https:\/\/kinsta.com\/pt\/blog\/wordpress-seo\/#16-create-an-internal-linking-strategy\">links internos<\/a> s\u00e3o reescritos para que v\u00e3o para as p\u00e1ginas corretas em seu novo site. A grande maioria do conte\u00fado do site \u00e9 descoberta automaticamente, e voc\u00ea pode personalizar a apar\u00eancia e o estilo do tema antes de export\u00e1-lo. Em geral, a ferramenta funciona melhor com arquivos HTML est\u00e1ticos ou com uma URL. Ela gerencia arquivos CSS e Javascript e permite que voc\u00ea descubra a hist\u00f3ria completa por tr\u00e1s do seu site e fa\u00e7a com que ele funcione corretamente.<\/p>\n<p>HTML to WordPress Converter<\/p>\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=\"Aplicativo conversor de HTML para WordPress\" width=\"940\" height=\"691\"><figcaption id=\"caption-attachment-84162\" class=\"wp-caption-text\">Aplicativo conversor de HTML para WordPress<\/figcaption><\/figure>\n<p>O <a href=\"https:\/\/www.htmltowordpressconverter.com\/\">HTML to WordPress Converter<\/a> \u00e9 outra solu\u00e7\u00e3o que pega um site HTML e o transforma em um tema WordPress.<\/p>\n<p>H\u00e1 um campo para colar na URL de um site e clicar em um bot\u00e3o Gerar Tema. Voc\u00ea escolhe o conte\u00fado e as \u00e1reas da barra lateral (sidebar) do WordPress para que suas p\u00e1ginas e posts acabem nos locais certos, e voc\u00ea est\u00e1 puxando os dados exatos necess\u00e1rios do site HTML anterior. Parece que todo o seu conte\u00fado deve fazer a transfer\u00eancia. Entretanto, voc\u00ea pode ter que checar novamente com suas fotos e outros elementos de m\u00eddia e completar o upload ocasional atrav\u00e9s do WordPress.<\/p>\n<p>Isto produz um tema e n\u00e3o um site completo. Voc\u00ea precisa ativar seu pr\u00f3prio site WordPress e hosped\u00e1-lo em outro lugar. Voc\u00ea faz o download do tema desta ferramenta, um tema que se parece exatamente com o site HTML de antes. Tenha em mente que alguns elementos n\u00e3o funcionar\u00e3o como voc\u00ea originalmente os tinha, mas faz um trabalho maravilhoso de manter a estrutura e formata\u00e7\u00e3o do seu site a partir de nossos testes.<\/p>\n<p>Aparentemente, os desenvolvedores da ferramenta HTML para WordPress Converter tamb\u00e9m fornecem <a href=\"https:\/\/kinsta.com\/pt\/blog\/css-wordpress\/\">ajustes CSS<\/a> gratuitos se algo n\u00e3o sair do jeito que voc\u00ea queria.<\/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 Ferramenta simples de Parser HTML DOM\" width=\"934\" height=\"251\"><figcaption id=\"caption-attachment-84163\" class=\"wp-caption-text\">PHP Ferramenta simples de Parser HTML DOM<\/figcaption><\/figure>\n<p>O <a href=\"https:\/\/sourceforge.net\/projects\/simplehtmldom\/\">PHP Simple HTML DOM Parser<\/a> completa um processo necess\u00e1rio ao fazer upload de um arquivo HTML para o WordPress. O Parser entra como uma forma de localizar, extrair e alterar qualquer elemento HTML em seu website ou em um arquivo HTML. Desta forma, voc\u00ea pode identificar <a href=\"https:\/\/kinsta.com\/pt\/blog\/erros-mais-comuns-do-wordpress\/\">erros<\/a>, corrigi-los antes de convert\u00ea-los para um site WordPress, ou mesmo usar a ferramenta para modificar os itens HTML que existem em seu site WordPress atual.<\/p>\n<p>Este \u00e9 um download gratuito do site da SourceForge, para que voc\u00ea possa verificar as revis\u00f5es e pedir suporte, se necess\u00e1rio.<\/p>\n<h3>Contrataar de um Desenvolvedor<\/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=\"Aclama\u00e7\u00e3o do servi\u00e7o de convers\u00e3o de HTML para WordPress\" width=\"927\" height=\"567\"><figcaption id=\"caption-attachment-84165\" class=\"wp-caption-text\">Aclama\u00e7\u00e3o do servi\u00e7o de convers\u00e3o de HTML para WordPress<\/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> e <a href=\"https:\/\/acclaim.agency\/html-to-wordpress-conversion-service\">Acclaim<\/a> fornecem servi\u00e7os de convers\u00e3o de HTML para WordPress a pre\u00e7os razo\u00e1veis para aqueles que n\u00e3o querem mexer na conclus\u00e3o de uma convers\u00e3o ou uma das ferramentas automatizadas de cima falha em produzir resultados s\u00f3lidos. A raz\u00e3o de <a href=\"https:\/\/kinsta.com\/pt\/blog\/contrate-um-desenvolvedor-do-wordpress\/\">contratar um desenvolvedor<\/a> faz tanto sentido \u00e0s vezes \u00e9 que voc\u00ea pode acabar economizando tempo e dinheiro no processo, especialmente se for um trabalho f\u00e1cil que voc\u00ea simplesmente n\u00e3o tem o conhecimento para completar.<\/p>\n<p>A parceria com um verdadeiro desenvolvedor significa que voc\u00ea n\u00e3o precisa utilizar nenhuma de suas pr\u00f3prias habilidades t\u00e9cnicas &#8211; ou falta de habilidades t\u00e9cnicas &#8211; para renderizar um novo website a partir dos arquivos HTML. O trabalho \u00e9 delegado a pessoas que sabem o que est\u00e3o fazendo, e \u00e9 muito mais prov\u00e1vel que voc\u00ea seja capaz de encontrar a ajuda certa e fazer perguntas e solicita\u00e7\u00f5es quando comparado a um aplicativo web que pode ter alguns desenvolvedores que poderiam lhe ajudar.<\/p>\n<p>Sem mencionar que isto permite que voc\u00ea solicite qual caracter\u00edstica voc\u00ea gostaria de manter no novo website. E \u00e9 quase uma garantia de que as a\u00e7\u00f5es do website ser\u00e3o realmente transferidas e funcionar\u00e3o como deveriam.<\/p>\n<p>Entendemos que a contrata\u00e7\u00e3o de um HTML para o desenvolvedor do WordPress nem sempre est\u00e1 no or\u00e7amento, mas vale a pena pensar se voc\u00ea estiver com problemas e tiver um pouco de dinheiro para gastar.<\/p>\n<h2>Como converter HTML para WordPress com um aplicativo ou plugin automatizado<\/h2>\n<p>Se voc\u00ea tiver d\u00favidas sobre o uso de um dos conversores automatizados HTML para WordPress listados anteriormente, aqui est\u00e1 um exemplo com o <a href=\"https:\/\/www.wpsiteimporter.com\/\">WP Site Importer<\/a>. Esta \u00e9 uma das solu\u00e7\u00f5es mais respeit\u00e1veis, e \u00e9 um plugin WordPress de terceiros que re\u00fane muitas das caracter\u00edsticas de outros conversores automatizados de HTML para WordPress.<\/p>\n<p>Para iniciar, baixar, instalar e ativar o plugin WP Site Importer em seu painel do WordPress. Voc\u00ea deve baixar o arquivo zip do site do desenvolvedor e inscrever-se para o teste gratuito. H\u00e1 tamb\u00e9m planos premium a considerar. <a href=\"https:\/\/kinsta.com\/pt\/blog\/como-instalar-plugins-no-wordpress\/\">Clique aqui<\/a> se voc\u00ea tiver alguma d\u00favida sobre a instala\u00e7\u00e3o de um plugin WordPress.<\/p>\n<p>O plugin WP Site Importer oferece uma cole\u00e7\u00e3o de ferramentas de importa\u00e7\u00e3o para p\u00e1ginas \u00fanicas e posts, juntamente com sites completos e os elementos adicionais necess\u00e1rios para completar o trabalho, como localiza\u00e7\u00e3o de imagens e modifica\u00e7\u00e3o de links internos.<\/p>\n<p>Para este exemplo, vamos caminhar atrav\u00e9s da maioria das caracter\u00edsticas, come\u00e7ando com uma \u00fanica p\u00e1gina HTML. No painel do WordPress, v\u00e1 para <strong>Importador de sites &gt; Importar p\u00e1gina \u00fanica.<\/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=\"Importa\u00e7\u00e3o de um \u00fanico HTML para uma p\u00e1gina WordPress\" width=\"938\" height=\"564\"><figcaption id=\"caption-attachment-84527\" class=\"wp-caption-text\">Importa\u00e7\u00e3o de um \u00fanico HTML para uma p\u00e1gina WordPress<\/figcaption><\/figure>\n<p>A grande maioria das configura\u00e7\u00f5es padr\u00e3o no plugin est\u00e3o prontas para ir, o que significa que voc\u00ea normalmente n\u00e3o tem que mudar nada. A menos, \u00e9 claro, que voc\u00ea gostaria de ajustar coisas como importar uma p\u00e1gina como um post, ou remover imagens em destaque. Sinta-se \u00e0 vontade para percorrer todas as configura\u00e7\u00f5es do plugin para garantir que elas se ajustem \u00e0s suas necessidades.<\/p>\n<p>Tudo que voc\u00ea tem que fazer para a importa\u00e7\u00e3o de uma \u00fanica p\u00e1gina \u00e9 colar na URL para que o plugin possa ser escaneado.<\/p>\n<p><strong>Nota: <\/strong>Os uploads de arquivos est\u00e3o dispon\u00edveis apenas para convers\u00f5es de v\u00e1rias 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=\"O assistente de p\u00e1gina de importa\u00e7\u00e3o\" width=\"1060\" height=\"854\"><figcaption id=\"caption-attachment-84526\" class=\"wp-caption-text\">O assistente de p\u00e1gina de importa\u00e7\u00e3o<\/figcaption><\/figure>\n<p>Clique no bot\u00e3o <strong>Importar P\u00e1gina <\/strong>para prosseguir.<\/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=\"Clique no bot\u00e3o \"Importar p\u00e1gina\".\" width=\"1009\" height=\"416\"><figcaption id=\"caption-attachment-84525\" class=\"wp-caption-text\">Clique no bot\u00e3o &#8220;Importar p\u00e1gina&#8221;.<\/figcaption><\/figure>\n<p>O plugin informa o que foi bem sucedido e fornece v\u00e1rios links para visualizar as novas p\u00e1ginas do WordPress e edit\u00e1-las, se necess\u00e1rio.<\/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=\"Clique no link 'Pr\u00e9-visualizar'.\" width=\"1038\" height=\"578\"><figcaption id=\"caption-attachment-84524\" class=\"wp-caption-text\">Clique no link &#8216;Pr\u00e9-visualizar&#8217;.<\/figcaption><\/figure>\n<p>Voc\u00ea tamb\u00e9m vai querer transferir qualquer menu do site HTML est\u00e1tico.<\/p>\n<p>Ir para <strong>Site Importer &gt; Importar Menus <\/strong>para isso.<\/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=\"Importa\u00e7\u00e3o de Menus para WordPress\" width=\"909\" height=\"328\"><figcaption id=\"caption-attachment-84523\" class=\"wp-caption-text\">Importa\u00e7\u00e3o de Menus para WordPress<\/figcaption><\/figure>\n<p>A importa\u00e7\u00e3o de um menu \u00e9 semelhante \u00e0 convers\u00e3o de arquivos, uma vez que pede a URL. Voc\u00ea tamb\u00e9m pode definir elementos como a densidade do menu e o tamanho m\u00ednimo do menu.<\/p>\n<p>Clique no <strong>menu Identificar <\/strong>para prosseguir.<\/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=\"O painel 'Import Menu Wizard'.\" width=\"1027\" height=\"631\"><figcaption id=\"caption-attachment-84522\" class=\"wp-caption-text\">O painel &#8216;Import Menu Wizard&#8217;.<\/figcaption><\/figure>\n<p>Cada item do menu agora aparece em uma lista. Voc\u00ea tamb\u00e9m deve ver v\u00e1rios menus se voc\u00ea tiver mais de um em seu site HTML.<\/p>\n<p>Confira os menus que voc\u00ea gostaria de importar e d\u00ea um nome a cada um deles. Clique no bot\u00e3o <strong>Importar Menu.<\/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\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/12\/import-menu.png\" alt=\"Importa\u00e7\u00e3o de um menu\" width=\"975\" height=\"837\"><figcaption id=\"caption-attachment-84520\" class=\"wp-caption-text\">Importa\u00e7\u00e3o de um menu<\/figcaption><\/figure>\n<p>Com o menu WordPress importa, voc\u00ea ainda tem que configurar a localiza\u00e7\u00e3o do menu.<\/p>\n<p>No painel de controle, navegue at\u00e9 <strong>Apar\u00eancia &gt; Menus.<\/strong><\/p>\n<p>Nomeie e crie um menu e salve-o no WordPress. Voc\u00ea j\u00e1 deve ver o menu importado se tudo funcionou como planejado.<\/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=\"Salvar o menu importado\" width=\"1604\" height=\"877\"><figcaption id=\"caption-attachment-84519\" class=\"wp-caption-text\">Salvar o menu importado<\/figcaption><\/figure>\n<p>Clique na guia <strong>Gerenciar Locais <\/strong>e encontre o menu importado no menu suspenso. Voc\u00ea deve colocar esse novo menu no local do menu de sua escolha.<\/p>\n<p>Certifique-se de <strong>salvar as mudan\u00e7as <\/strong>quando estiver pronto.<\/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=\"Alterar a localiza\u00e7\u00e3o do menu, se necess\u00e1rio\" width=\"1033\" height=\"507\"><figcaption id=\"caption-attachment-84518\" class=\"wp-caption-text\">Alterar a localiza\u00e7\u00e3o do menu, se necess\u00e1rio<\/figcaption><\/figure>\n<p>Outra parte da importa\u00e7\u00e3o de um site HTML para o WordPress \u00e9 a localiza\u00e7\u00e3o das imagens. Para completar este processo, v\u00e1 para <strong>Importador de sites &gt; Localizar imagens.<\/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=\"Localiza\u00e7\u00e3o de imagens para convers\u00e3o de HTML para WordPress\" width=\"903\" height=\"427\"><figcaption id=\"caption-attachment-84517\" class=\"wp-caption-text\">Localiza\u00e7\u00e3o de imagens para convers\u00e3o de HTML para WordPress<\/figcaption><\/figure>\n<p>Todas as configura\u00e7\u00f5es padr\u00e3o para a localiza\u00e7\u00e3o da imagem s\u00e3o normalmente boas de se usar.<\/p>\n<p>Clique no bot\u00e3o <strong>Next (Pr\u00f3ximo).<\/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=\"Pressione o bot\u00e3o \"Next\" (Pr\u00f3ximo) para come\u00e7ar\" width=\"1161\" height=\"818\"><figcaption id=\"caption-attachment-84516\" class=\"wp-caption-text\">Pressione o bot\u00e3o &#8220;Next&#8221; (Pr\u00f3ximo) para come\u00e7ar<\/figcaption><\/figure>\n<p>Voc\u00ea ver\u00e1 uma lista das imagens que est\u00e3o sendo transferidas do site anterior.<\/p>\n<p>Selecione os que voc\u00ea deseja localizar e clique no bot\u00e3o <strong>Next.<\/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=\"Veja todas as imagens importadas\" width=\"1609\" height=\"841\"><figcaption id=\"caption-attachment-84515\" class=\"wp-caption-text\">Veja todas as imagens importadas<\/figcaption><\/figure>\n<p>Em segundos, o plugin adiciona cada imagem \u00e0 sua Biblioteca de M\u00eddia WordPress, dando-lhes todas as URLs do novo site. Voc\u00ea pode ir at\u00e9 a Biblioteca de M\u00eddia para garantir que esta transi\u00e7\u00e3o ocorra.<\/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=\"O produto final das imagens localizadas\" width=\"1565\" height=\"840\"><figcaption id=\"caption-attachment-84514\" class=\"wp-caption-text\">O produto final das imagens localizadas<\/figcaption><\/figure>\n<p>Outra parte de uma convers\u00e3o HTML envolve a atualiza\u00e7\u00e3o dos seus links internos. Todas as transfer\u00eancias de websites normalmente resultam em links quebrados e problemas com as estruturas de URL.<\/p>\n<p>Precisamos consert\u00e1-los, ent\u00e3o v\u00e1 para <strong>Importador de Sites &gt; Atualizar Links Internos para <\/strong>come\u00e7ar.<\/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=\"Atualiza\u00e7\u00e3o completa dos links internos\" width=\"918\" height=\"450\"><figcaption id=\"caption-attachment-84513\" class=\"wp-caption-text\">Atualiza\u00e7\u00e3o completa dos links internos<\/figcaption><\/figure>\n<p>A p\u00e1gina seguinte explica como os links antigos ser\u00e3o substitu\u00eddos por vers\u00f5es do novo dom\u00ednio do site, adicionando subdiret\u00f3rios para uma experi\u00eancia fluida do usu\u00e1rio que reside na URL do site WordPress.<\/p>\n<p>Tudo que voc\u00ea precisa fazer \u00e9 clicar no bot\u00e3o para Atualizar Links. O plugin faz todas as convers\u00f5es para voc\u00ea.<\/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=\"Clique no bot\u00e3o 'Atualizar Links'.\" width=\"1329\" height=\"777\"><figcaption id=\"caption-attachment-84512\" class=\"wp-caption-text\">Clique no bot\u00e3o &#8216;Atualizar Links&#8217;.<\/figcaption><\/figure>\n<p>Se voc\u00ea planeja converter um site HTML inteiro (ao contr\u00e1rio de uma p\u00e1gina), navegue para a guia <strong>Importar P\u00e1ginas M\u00faltiplas <\/strong>sob o menu <strong>Importador de Sites.<\/strong><\/p>\n<p>Esta \u00e9 tamb\u00e9m uma op\u00e7\u00e3o maravilhosa para aqueles interessados em carregar arquivos locais do site em vez de copiar em uma URL ao 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 v\u00e1rias p\u00e1ginas ao mesmo tempo\" width=\"949\" height=\"488\"><figcaption id=\"caption-attachment-84511\" class=\"wp-caption-text\">Importar v\u00e1rias p\u00e1ginas ao mesmo tempo<\/figcaption><\/figure>\n<p>O <strong>Assistente de P\u00e1ginas M\u00faltiplas <\/strong>tem campos para colar em uma URL e carregar arquivos HTML do site.<\/p>\n<p>Escolha o que for melhor para o seu trabalho.<\/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=\"Digite a URL para procurar por importa\u00e7\u00e3o\" width=\"1146\" height=\"823\"><figcaption id=\"caption-attachment-84510\" class=\"wp-caption-text\">Digite a URL para procurar por importa\u00e7\u00e3o<\/figcaption><\/figure>\n<p>Como o site HTML \u00e9 convertido e importado, voc\u00ea ver\u00e1 uma lista de URLs puxadas para o seu site WordPress. Voc\u00ea pode remover algumas das p\u00e1ginas da importa\u00e7\u00e3o se n\u00e3o precisar delas. Voc\u00ea tamb\u00e9m tem op\u00e7\u00f5es de importa\u00e7\u00e3o para postagens, definindo-as como n\u00e3o publicadas, e incluindo a imagem em destaque.<\/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=\"O 'Feiticeiro de P\u00e1ginas M\u00faltiplas de Importa\u00e7\u00e3o'.\" width=\"1707\" height=\"805\"><figcaption id=\"caption-attachment-84528\" class=\"wp-caption-text\">O &#8216;Feiticeiro de P\u00e1ginas M\u00faltiplas de Importa\u00e7\u00e3o&#8217;.<\/figcaption><\/figure>\n<p>A etapa final revela a lista completa de p\u00e1ginas web convertidas do site HTML em seu sistema WordPress. Agora voc\u00ea pode clicar no bot\u00e3o <strong>Edit <\/strong>ou <strong>Preview <\/strong>de cada p\u00e1gina para continuar personalizando seu site.<\/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 as p\u00e1ginas importadas e prontas\" width=\"1439\" height=\"714\"><figcaption id=\"caption-attachment-84529\" class=\"wp-caption-text\">Todas as p\u00e1ginas importadas e prontas<\/figcaption><\/figure>\n<p>Lembre-se, uma convers\u00e3o como esta n\u00e3o significa que voc\u00ea ver\u00e1 imediatamente o design exato do seu site HTML. Talvez voc\u00ea mesmo tenha que importar um stylesheet ou mesmo um c\u00f3digo personalizado do site ou das p\u00e1ginas.<\/p>\n\n<h2>Resumo<\/h2>\n<p>A mudan\u00e7a do HTML para o WordPress requer um pouco de trabalho. Mas vale a pena o desafio. Um upload de HTML para WordPress tamb\u00e9m pode ajudar em tarefas menos envolvidas, como <a href=\"https:\/\/kinsta.com\/pt\/blog\/verificacao-do-site-do-google\/\">verificar a propriedade do seu site<\/a> ou implementar um <a href=\"https:\/\/kinsta.com\/pt\/blog\/editar-codigo-wordpress\/\">simples m\u00f3dulo HTML<\/a>.<\/p>\n<p>As possibilidades s\u00e3o abundantes quando se trata de <a href=\"https:\/\/kinsta.com\/pt\/blog\/como-fazer-upload-arquivo-html-wordpress\/\">uploads<\/a> e convers\u00f5es de <a href=\"https:\/\/kinsta.com\/pt\/blog\/como-fazer-upload-arquivo-html-wordpress\/\">arquivos HTML.<\/a> Basta lembrar que normalmente voc\u00ea pode completar grande parte do trabalho com um conversor HTML automatizado. Depois disso, muito provavelmente haver\u00e1 trabalho manual envolvido, mas com a combina\u00e7\u00e3o das ferramentas e <a href=\"https:\/\/kinsta.com\/pt\/aprenda\/\">conhecimentos<\/a> certos, voc\u00ea pode duplicar quase todos os sites HTML que quiser!<\/p>\n<p>Se voc\u00ea tiver alguma d\u00favida sobre o upload de arquivos HTML para WordPress ou sobre a convers\u00e3o de HTML para sites WordPress, informe-nos na se\u00e7\u00e3o de coment\u00e1rios abaixo.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>O upload e convers\u00e3o de HTML para WordPress \u00e9 feito por uma grande variedade de raz\u00f5es. Voc\u00ea pode querer converter um site HTML antigo e est\u00e1tico &#8230;<\/p>\n","protected":false},"author":117,"featured_media":41667,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[130,44],"topic":[1026],"class_list":["post-41662","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-html","tag-webdev","topic-desenvolvimento-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 para WordPress: Guia Detalhado para Upload e Convers\u00e3o de HTML<\/title>\n<meta name=\"description\" content=\"Aprenda como adicionar HTML ao WordPress e converter arquivos HTML para dar vida ao c\u00f3digo em seu site. Cobrimos tudo, desde uploads at\u00e9 a convers\u00e3o.\" \/>\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\/pt\/blog\/html-para-wordpress\/\" \/>\n<meta property=\"og:locale\" content=\"pt_PT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"HTML para WordPress: Um Guia Detalhado para Upload e Convers\u00e3o de HTML\" \/>\n<meta property=\"og:description\" content=\"Aprenda como adicionar HTML ao WordPress e converter arquivos HTML para dar vida ao c\u00f3digo em seu site. Cobrimos tudo, desde uploads at\u00e9 a convers\u00e3o.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/pt\/blog\/html-para-wordpress\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/kinstapt\/\" \/>\n<meta property=\"article:published_time\" content=\"2021-02-19T07:49:29+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-02-14T12:02:41+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2021\/02\/html-to-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=\"Aprenda como adicionar HTML ao WordPress e converter arquivos HTML para dar vida ao c\u00f3digo em seu site. Cobrimos tudo, desde uploads at\u00e9 a convers\u00e3o.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2021\/02\/html-to-wordpress.png\" \/>\n<meta name=\"twitter:creator\" content=\"@salmanravoof\" \/>\n<meta name=\"twitter:site\" content=\"@kinsta_pt\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Salman Ravoof\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tempo estimado de leitura\" \/>\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\/pt\/blog\/html-para-wordpress\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/html-para-wordpress\/\"},\"author\":{\"name\":\"Salman Ravoof\",\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/person\/9cafd2eedd617e640eeea4cf3a5fd987\"},\"headline\":\"HTML para WordPress: Um Guia Detalhado para Upload e Convers\u00e3o de HTML\",\"datePublished\":\"2021-02-19T07:49:29+00:00\",\"dateModified\":\"2025-02-14T12:02:41+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/html-para-wordpress\/\"},\"wordCount\":11926,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/html-para-wordpress\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2021\/02\/html-to-wordpress.png\",\"keywords\":[\"html\",\"webdev\"],\"articleSection\":[\"Melhores Tutoriais WordPress\"],\"inLanguage\":\"pt-PT\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/pt\/blog\/html-para-wordpress\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/html-para-wordpress\/\",\"url\":\"https:\/\/kinsta.com\/pt\/blog\/html-para-wordpress\/\",\"name\":\"HTML para WordPress: Guia Detalhado para Upload e Convers\u00e3o de HTML\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/html-para-wordpress\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/html-para-wordpress\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2021\/02\/html-to-wordpress.png\",\"datePublished\":\"2021-02-19T07:49:29+00:00\",\"dateModified\":\"2025-02-14T12:02:41+00:00\",\"description\":\"Aprenda como adicionar HTML ao WordPress e converter arquivos HTML para dar vida ao c\u00f3digo em seu site. Cobrimos tudo, desde uploads at\u00e9 a convers\u00e3o.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/html-para-wordpress\/#breadcrumb\"},\"inLanguage\":\"pt-PT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/pt\/blog\/html-para-wordpress\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/html-para-wordpress\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2021\/02\/html-to-wordpress.png\",\"contentUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2021\/02\/html-to-wordpress.png\",\"width\":1460,\"height\":730,\"caption\":\"HTML to WordPress\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/html-para-wordpress\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/pt\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Desenvolvimento WordPress\",\"item\":\"https:\/\/kinsta.com\/pt\/topicos\/desenvolvimento-wordpress\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"HTML para WordPress: Um Guia Detalhado para Upload e Convers\u00e3o de HTML\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/pt\/#website\",\"url\":\"https:\/\/kinsta.com\/pt\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Solu\u00e7\u00f5es de hospedagem Premium, r\u00e1pida e segura\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/pt\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-PT\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/pt\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/pt\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/kinstapt\/\",\"https:\/\/x.com\/kinsta_pt\",\"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\/pt\/#\/schema\/person\/9cafd2eedd617e640eeea4cf3a5fd987\",\"name\":\"Salman Ravoof\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\/\/kinsta.com\/pt\/#\/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\/pt\/blog\/author\/salmanravoof\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"HTML para WordPress: Guia Detalhado para Upload e Convers\u00e3o de HTML","description":"Aprenda como adicionar HTML ao WordPress e converter arquivos HTML para dar vida ao c\u00f3digo em seu site. Cobrimos tudo, desde uploads at\u00e9 a convers\u00e3o.","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\/pt\/blog\/html-para-wordpress\/","og_locale":"pt_PT","og_type":"article","og_title":"HTML para WordPress: Um Guia Detalhado para Upload e Convers\u00e3o de HTML","og_description":"Aprenda como adicionar HTML ao WordPress e converter arquivos HTML para dar vida ao c\u00f3digo em seu site. Cobrimos tudo, desde uploads at\u00e9 a convers\u00e3o.","og_url":"https:\/\/kinsta.com\/pt\/blog\/html-para-wordpress\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinstapt\/","article_published_time":"2021-02-19T07:49:29+00:00","article_modified_time":"2025-02-14T12:02:41+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2021\/02\/html-to-wordpress.png","type":"image\/png"}],"author":"Salman Ravoof","twitter_card":"summary_large_image","twitter_description":"Aprenda como adicionar HTML ao WordPress e converter arquivos HTML para dar vida ao c\u00f3digo em seu site. Cobrimos tudo, desde uploads at\u00e9 a convers\u00e3o.","twitter_image":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2021\/02\/html-to-wordpress.png","twitter_creator":"@salmanravoof","twitter_site":"@kinsta_pt","twitter_misc":{"Escrito por":"Salman Ravoof","Tempo estimado de leitura":"66 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/pt\/blog\/html-para-wordpress\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/pt\/blog\/html-para-wordpress\/"},"author":{"name":"Salman Ravoof","@id":"https:\/\/kinsta.com\/pt\/#\/schema\/person\/9cafd2eedd617e640eeea4cf3a5fd987"},"headline":"HTML para WordPress: Um Guia Detalhado para Upload e Convers\u00e3o de HTML","datePublished":"2021-02-19T07:49:29+00:00","dateModified":"2025-02-14T12:02:41+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/pt\/blog\/html-para-wordpress\/"},"wordCount":11926,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/pt\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/pt\/blog\/html-para-wordpress\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2021\/02\/html-to-wordpress.png","keywords":["html","webdev"],"articleSection":["Melhores Tutoriais WordPress"],"inLanguage":"pt-PT","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/pt\/blog\/html-para-wordpress\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/pt\/blog\/html-para-wordpress\/","url":"https:\/\/kinsta.com\/pt\/blog\/html-para-wordpress\/","name":"HTML para WordPress: Guia Detalhado para Upload e Convers\u00e3o de HTML","isPartOf":{"@id":"https:\/\/kinsta.com\/pt\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/pt\/blog\/html-para-wordpress\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/pt\/blog\/html-para-wordpress\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2021\/02\/html-to-wordpress.png","datePublished":"2021-02-19T07:49:29+00:00","dateModified":"2025-02-14T12:02:41+00:00","description":"Aprenda como adicionar HTML ao WordPress e converter arquivos HTML para dar vida ao c\u00f3digo em seu site. Cobrimos tudo, desde uploads at\u00e9 a convers\u00e3o.","breadcrumb":{"@id":"https:\/\/kinsta.com\/pt\/blog\/html-para-wordpress\/#breadcrumb"},"inLanguage":"pt-PT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/pt\/blog\/html-para-wordpress\/"]}]},{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/kinsta.com\/pt\/blog\/html-para-wordpress\/#primaryimage","url":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2021\/02\/html-to-wordpress.png","contentUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2021\/02\/html-to-wordpress.png","width":1460,"height":730,"caption":"HTML to WordPress"},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/pt\/blog\/html-para-wordpress\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/pt\/"},{"@type":"ListItem","position":2,"name":"Desenvolvimento WordPress","item":"https:\/\/kinsta.com\/pt\/topicos\/desenvolvimento-wordpress\/"},{"@type":"ListItem","position":3,"name":"HTML para WordPress: Um Guia Detalhado para Upload e Convers\u00e3o de HTML"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/pt\/#website","url":"https:\/\/kinsta.com\/pt\/","name":"Kinsta\u00ae","description":"Solu\u00e7\u00f5es de hospedagem Premium, r\u00e1pida e segura","publisher":{"@id":"https:\/\/kinsta.com\/pt\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/pt\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-PT"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/pt\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/pt\/","logo":{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/kinsta.com\/pt\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/pt\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/kinstapt\/","https:\/\/x.com\/kinsta_pt","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\/pt\/#\/schema\/person\/9cafd2eedd617e640eeea4cf3a5fd987","name":"Salman Ravoof","image":{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/kinsta.com\/pt\/#\/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\/pt\/blog\/author\/salmanravoof\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts\/41662","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/users\/117"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/comments?post=41662"}],"version-history":[{"count":12,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts\/41662\/revisions"}],"predecessor-version":[{"id":62962,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts\/41662\/revisions\/62962"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/41662\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/41662\/translations\/it"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/41662\/translations\/es"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/41662\/translations\/fr"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/41662\/translations\/nl"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/41662\/translations\/de"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/41662\/translations\/pt"},{"href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/41662\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/media\/41667"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/media?parent=41662"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/tags?post=41662"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/topic?post=41662"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}