HTML para WordPress: Um Guia Detalhado para Upload e Conversão de HTML

O upload e conversão de HTML para WordPress é feito por uma grande variedade de razões. Você pode querer converter um site HTML antigo e estático e executá-lo no sistema de gerenciamento de conteúdo do WordPress. Há também a possibilidade de que você simplesmente precise de um lugar para armazenar ou compartilhar um arquivo HTML, e o WordPress fornece uma solução viável para ambos.

A mudança do HTML para o WordPress muitas vezes parece intimidante ou improdutiva. Estamos aqui para guiá-lo através do processo para garantir que você aprenda as ferramentas necessárias para converter arquivos HTML e completar uma conversão por conta própria.

O HTML é uma linguagem de marcação simples, e o WordPress, embora poderoso e repleto de recursos, é bastante simples e intuitivo. Portanto, a conversão entre HTML e WordPress também não deve parecer uma tarefa fácil.

Continue lendo para aprender mais sobre o básico de HTML para conversões do WordPress, juntamente com as situações do mundo real em que você pode considerar tal movimento.

Principais razões para fazer upload ou conversão de HTML para WordPress

Se você está se perguntando por que você pode converter ou carregar HTML para o WordPress em primeiro lugar, dê uma olhada nos seguintes exemplos para entender as razões para completar uma tarefa como esta.

• Converter um antigo site HTML para ser executado no sistema WordPress. Talvez o design antigo seja um de seus favoritos ou você simplesmente não quer passar pelo trabalho de redesigning. Isto também é importante para manter sua imagem de marca.
• Converter uma única página web HTML ou blog e publique em seu site WordPress atual. Isto é particularmente útil se seu tema atual não tiver um layout de página personalizado que você deseja.
• Alterar um modelo de website HTML para um formato temático que pode ser instalado no WordPress.
• Fazer o upload de um arquivo de verificação HTML, comprovando a propriedade do seu website para um mecanismo de busca ou outro serviço.
• Armazenar um arquivo HTML em seu site para uso posterior.
• Gerar um link para esse arquivo para que você possa compartilhá-lo ou fazer com que os usuários baixem o arquivo para seus próprios computadores.
• Gerar um componente de design HTML em uma página do WordPress ou postar, como uma caixa de autor personalizado ou um formulário de assinatura por e-mail.
• Combine seu tema WordPress com um design de site HTML que você encontrou on-line, mas não tem acesso.

Como você pode ver, as razões para adicionar um arquivo HTML ao WordPress variam de acordo com seus objetivos. Às vezes o processo é bastante simples, como carregar um arquivo HTML em um post ou página de um blog WordPress. Outras vezes, há um longo processo de conversão de um website HTML inteiro com dezenas de arquivos e trabalhos paralelos que devem ser completados, como transferir o conteúdo do website junto com o HTML.

Para este guia sobre conversão e upload de HTML para WordPress, começaremos com o básico (como carregar um arquivo HTML para WordPress), depois passaremos aos requisitos mais profundos para duplicação ou conversão de sites HTML completos para funcionar no sistema WordPress.

Finalmente, falaremos sobre os prós e os contras dos conversores HTML automatizados e quais ferramentas estão disponíveis no mercado.

Continue lendo para saber mais sobre os conceitos básicos da conversão de HTML para WordPress, bem como as situações da vida real em que você pode considerar tal conversão.

Como fazer o upload de um arquivo HTML para WordPress

O primeiro passo para aprender como transformar um arquivo HTML em uma página do WordPress ou site completo é visualizar como funciona o processo de upload do arquivo HTML.

Vá a este guia para uma análise aprofundada sobre como carregar um arquivo HTML para o WordPress.

Daremos a você um rápido resumo desse processo abaixo para garantir que você esteja no caminho certo enquanto avançamos para outras etapas mais abaixo neste artigo.

Há três métodos para fazer upload de um arquivo HTML para o WordPress:

1. Através do painel de controle do WordPress.
2. Com um cliente FTP.
3. Usando o cPanel.

O upload de um arquivo HTML para o painel de controle do WordPress é feito na Biblioteca de Mídia. Cobriremos algumas das rotas a serem seguidas nos tutoriais abaixo, mas tenha em mente que o upload de um arquivo através do painel de controle do WordPress pode ser feito em uma página, artigo, ou diretamente através da Biblioteca de Mídia.

Um cliente FTP (como o FileZilla) faz o link para os arquivos ao vivo do seu site WordPress, juntamente com os arquivos em seu computador. Isto permite que você transfira arquivos locais para os arquivos do site hospedado, desde que você faça login no cliente FTP com suas credenciais de hospedagem SFTP.

Finalmente, um cPanel de hospedagem oferece acesso a um gerenciador de arquivos online. Ele funciona muito como um cliente FTP, dando-lhe o controle de todos os mesmos arquivos. A principal diferença é que o cPanel é uma aplicação web online, exigindo que você carregue seus arquivos para o cPanel ao invés de transferi-los instantaneamente de um ambiente local para um site ao vivo em um cliente FTP.

Cada método tem seus prós e contras. A hospedagem de WordPress da Kinsta não oferece uma experiência cPanel, portanto é melhor carregar arquivos HTML menores que você deseja armazenar ou compartilhar através do painel de controle do WordPress.

Um cliente FTP/SFTP é o método escolhido para criar um website inteiramente novo a partir de um website HTML estático. A razão para isto é porque um Cliente FTP/SFTP fornece uma quantidade incrível de controle sobre os arquivos do seu site e pode transferir qualquer coisa de arquivos de mídia para pastas HTML diretamente do seu computador.

Como adicionar código HTML a uma página WordPress ou Artigo

Há alguns métodos para carregar um arquivo HTML diretamente em um artigo ou página do WordPress. O primeiro é o processo de realmente carregar um arquivo HTML zip ou TXT como um elemento de mídia. Este método funciona de forma semelhante ao upload de uma imagem para o gerenciador de mídia, exceto que você está fazendo isso através de uma página ou artigo , e é um arquivo HTML em vez de uma foto.

Você pode querer completar este método para ter um link para as pessoas baixarem o arquivo HTML ou acessar o arquivo você mesmo no backend do seu site.

Outra opção é colar um bloco HTML em uma página ou artigo para adicionar alguns elementos de design. Por exemplo, você pode ter um formulário de inscrição personalizado feito apenas para esta página que você gostaria de inserir com um pequeno pedaço de HTML.

Ambos os métodos têm propósitos e processos diferentes para alcançar os resultados finais.

Para carregar um arquivo HTML para um artigo ou página, siga estes passos.

Ir para Páginas > Todas as páginas no painel do WordPress. Se você gostaria de começar com uma página em branco, vá para Páginas > Adicionar novo.

Escolha a página onde você gostaria de fazer o upload do arquivo HTML. Você também pode clicar no botão Adicionar nova página se você estiver fazendo uma página nova.

Estes passos são praticamente os mesmos para adicionar arquivos HTML aos artigos do WordPress. Estamos simplesmente passando por como fazer isso com uma página WordPress. Se você gostaria de usar um artigo em seu lugar, vá para Artigos > Todos os Artigos ou Artigos > Adicionar Novo.

Esta parte depende se você está usando o Editor de Blocos Gutenberg ou o Editor do WordPress Clássico.

No Gutenberg, você pode encontrar o botão de sinal + e clicar sobre ele para procurar um novo bloco de construção visual. Procure o bloco de Arquivo, que você pode digitar no campo de busca ou percorrer a lista de blocos para localizar.

Selecione o bloco Arquivo para colocá-lo em sua página ou postagem.

Nota: Se você estiver usando o Editor WordPress clássico, basta clicar no botão Add Media e carregar seu arquivo HTML usando-o. Ele cria um link para o seu arquivo para que as pessoas façam o download no frontend do seu site.

Para o bloco Gutenberg, o módulo Arquivo deve mostrar um botão Upload. Clique no botão Upload e localize o arquivo HTML desejado em seu computador. Estes são geralmente armazenados como arquivos TXT, coleções de arquivos TXT em uma pasta, ou em arquivos ZIP.

Uma vez carregado em seu site, o arquivo é revelado como um link. Qualquer usuário pode agora vir ao seu site e clicar no link dessa página ou postar para ver o arquivo HTML e até mesmo baixá-lo para seu próprio computador.

Além disso, esse arquivo é armazenado em sua biblioteca de mídia, assim você pode ir à biblioteca para obter o URL do arquivo a qualquer momento e colocá-lo em qualquer outro lugar que você desejar. Você também pode simplesmente usar o WordPress como armazenamento para o arquivo.

Se você quiser armazenar o arquivo apenas no WordPress e não tiver um link para download para todos os seus usuários clicarem, basta apagar o link criado na página ou no artigo.

Você pode ver um erro que lhe diz que o tipo de arquivo não é permitido por razões de segurança. Isto é bastante comum, portanto, dê uma olhada neste guia para remover esse erro e permitir a maioria dos tipos de arquivo em sua biblioteca de mídia WordPress. Em geral, o processo envolve tanto a edição do seu arquivo wp-config.php quanto o uso de um plugin para eliminar o erro.

Adicione o código HTML ao design de sua página ou artigo

Como mencionado anteriormente, uma das razões pelas quais você pode considerar adicionar um arquivo HTML a uma página ou artigo é para tornar um desenho simples naquela página ou artigo.

O método anterior é mais para armazenar arquivos HTML no WordPress e adicionar um link para que as pessoas os baixem.

Esta é uma solução mais funcional, visto que você tem a oportunidade de copiar e colar ou fazer seu próprio código HTML para coisas como formulários, caixas de autor, banners e muito mais.

Vá para a página ou artigo de sua escolha e escolha a seção que você gostaria de colocar o pedaço de código HTML.

Clique no sinal + para ver a seleção de blocos. Encontre o bloco HTML personalizado, digitando-o no campo de busca ou rolando pela lista de blocos.

Escolha o bloco HTML personalizado para inseri-lo na página ou no artigo.

Esse bloco fornece um campo de código simples e em branco para você colar ou digitar, qualquer que seja o código HTML que você tenha disponível.

Vou colar em um formulário de contato direto com um campo de e-mail e um botão Submit para este tutorial em particular.

Uma vez que você tenha o código HTML no bloco, clique no botão Atualizar ou Publicar para que ele seja renderizado no frontend de sua página ou artigo.

Se você for ao frontend da página ou ao artigo, o HTML deve fazer seu trabalho e revelar qualquer design ou funcionalidade que você estava tentando adicionar ao layout.

Neste caso, você pode ver o formulário onde solicito um e-mail e também tenho um botão Enviar.

O processo e o resultado não são muito diferentes no Editor WordPress clássico, exceto que você não usará um bloco de Gutenberg de arrastar e soltar. Em vez disso, navegue até a aba Texto em seu editor (em vez da aba Visual) e cole o código HTML onde você quiser que ele apareça na página.

Como fazer o upload de um arquivo de verificação HTML para o WordPress

Outro motivo pelo qual você pode querer carregar HTML no WordPress é para requisitos de otimização 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údo com a ajuda de análises e relatórios que fazem o check-in de problemas e correções para esses problemas.

No entanto, o Google não pode assumir que você é o proprietário de um site aleatório simplesmente porque você afirma que é. É aí que entra em jogo um arquivo de verificação HTML.

Simplificando, o Google fornece um arquivo HTML que você deve carregar em seu site. Somente o proprietário do site deve ter acesso aos arquivos do site, portanto o Google usa isso como uma forma de garantir que você não esteja tentando controlar as ferramentas de webmaster de outra pessoa.

O arquivo de verificação HTML carregado envia então uma mensagem ao Google indicando que o arquivo foi adicionado àquele domínio e que você é, de fato, o proprietário.

É prudente aprender sobre o upload de um arquivo de verificação HTML, já que o Google e os mecanismos de busca não são os únicos serviços que lhe pedem para verificar sua identidade ou propriedade com arquivos como estes. Alguns plugins, diretórios e plugins de terceiros também querem garantir que você não seja um intruso.

Razões para o upload de um arquivo de verificação HTML

• Para verificar se você possui um website para ferramentas de otimização para mecanismos de busca.
• Ao provar a propriedade de certos diretórios on-line.
• Se você precisar de um link para uma integração ou plugin de terceiros, você precisa descobrir se você realmente mantém a propriedade do seu site.

Como você pode ver, este arquivo HTML pode vir de diferentes fontes. Normalmente você não precisa saber nada sobre o conteúdo do arquivo HTML, mas apenas que ele é utilizado para enviar aquele pingback ao serviço para indicar que você tem controle sobre os arquivos do site.

Dito isto, nossa demonstração de carregar um arquivo de verificação HTML para o WordPress envolverá o Console de Busca do Google, visto que essa é uma das razões mais comuns para o uso de um arquivo de verificação.

Para começar, registre seu site no Google. Isto é feito indo para a ferramenta Google Search Console. Clique no botão Start Now e faça o login em sua conta Google ou registre uma conta no Google.

Uma vez conectado ao Console de Busca do Google, você poderá ver uma lista de propriedades que você gerenciou ou testou no passado. Por outro lado, você pode ver uma lista vazia.

Independentemente disso, vá para a aba Search Property no canto superior esquerdo do painel de controle.

No menu suspenso, selecione a opção Adicionar propriedade para seguir em frente. Isto permite adicionar seu website como propriedade administrada no Console de Busca do Google.

A próxima janela popup pede que você selecione um tipo de propriedade. A opção Domínio permite que você verifique todas as URLs em todos os subdomínios. Esta é muitas vezes a maneira mais fácil de verificar uma página, mas requer verificação DNS – que é encontrada em sua conta de hospedagem.

No entanto, estamos atualmente falando de uploads de arquivos HTML, então caminharemos através da opção de prefixo URL, que é um método antigo, porém ainda confiável, para verificar se você possui um website. Além disso, este método ajuda a identificar URLs específicas sob o endereço que você digita.

Portanto, pegue a URL do seu site e cole no campo Prefixo da URL.

Clique no botão Continuar.

Agora o Console de Busca do Google solicita que você verifique a propriedade do site.

Existem vários outros métodos de verificação, mas este é o que utiliza o upload de um arquivo HTML.

Clique no botão que lhe pede para fazer o download do arquivo.

Salve esse arquivo HTML em seu computador em uma pasta que você se lembrará.

O próximo passo é enviar o arquivo para o site WordPress que você colou anteriormente no Console de Busca do Google.

Como mencionado anteriormente, há três opções para carregar um arquivo HTML para o WordPress.

O primeiro método, fazer o upload através do painel de controle, é definitivamente uma opção viável. Muitas pessoas ainda são desviadas quando surge um erro comum ao fazer upload de um arquivo HTML para a Biblioteca de Mídia. Por causa disso, muitas vezes é mais rápido fazer seus uploads com um cliente FTP. Se, no entanto, você planeja fazer o upload para o painel do WordPress, e você vê o erro “Sorry, This File Type is Not Permitted”, use este guia para corrigir o problema.

Agora você tem as outras duas soluções: usar um cliente FTP/SFTP ou fazer o upload para o cPanel a partir de sua conta de hospedagem.

O cPanel não é uma má escolha para alguns hosts, mas novamente, Kinsta não oferece um cPanel. Portanto, vamos nos concentrar principalmente no upload do arquivo HTML através de um cliente FTP/SFTP. Os passos detalhados estão descritos no artigo acima, mas aqui está uma rápida recapitulação para guiá-lo em seu caminho.

Para começar, baixe FileZilla em seu computador. Você também pode tentar outros clientes FTP/SFTP.

Nota: Recomendamos que você faça um backup do seu site antes deste processo. É incomum causar problemas com um site durante a transferência de arquivos via FTP/SFTP, mas isso é absolutamente possível. Você não quer que seu site seja bloqueado ou perca dados, então crie um arquivo de backup do site.

Abra o cliente FTP/SFTP e digite suas credenciais de FTP/SFTP para se conectar ao host da web.

As credenciais exigidas incluem o seguinte:

• Host
• Nome de usuário
• Senha
• Porta

Onde você encontra as credenciais para seu site WordPress?

Eles normalmente estão localizados no painel de controle do seu host, de modo que você mesmo pode alcançá-los ou procurá-los.

Kinsta tem um caminho fácil para localizar as credenciais FTP/SFTP indo até a guia Sites em seu painel de hospedagem Kinsta e selecionando seu site desejado.

Sob a aba Info, procure a área SFTP/SSH. Copie sobre as credenciais correspondentes para o cliente FTP/SFTP.

Por exemplo, você pode ver os itens Host, Nome de usuário, Senha e Porta, todos bem organizados na Kinsta.

Cole esses elementos no cliente FTP/SFTP e clique no botão Quickconnect.

Se você vir um erro, é mais provável que seja porque o FileZilla não respeita o protocolo SFTP, mas sim o protocolo FTP. Para corrigir isso, vá para File > Site Manager. Adicione um novo site no FileZilla e selecione SFTP. Cole as credenciais de hospedagem nessa área e tente se conectar novamente.

Após a conexão com seu host, todos os arquivos do site WordPress aparecem para modificação.

Localize o arquivo raiz do seu site, que contém pastas como wp-content e wp-admin.

Encontre o arquivo de verificação HTML (neste caso, renomeei para encontrá-lo mais facilmente) sob a área que mostra os arquivos do seu computador. Por exemplo, você pode vê-lo em Downloads, se for para lá que seus downloads da Internet estão indo.

Arraste esse arquivo para o arquivo raiz do seu site. Tudo isso é feito no cliente FTP/SFTP.

O upload deve levar apenas alguns segundos.

Uma vez que esteja nos arquivos do seu site, você pode voltar à página de Verificação do Google e verificar se está registrando que você é o proprietário do site. Uma mensagem de sucesso deve aparecer no Console de Busca do Google, e vários recursos se abrirão para você otimizar e analisar a saúde do seu site.

Conversão manual de um site HTML inteiro para WordPress

Para converter um site HTML para WordPress, você pode usar um plugin/app, converter manualmente seus arquivos ou utilizar um Child Theme e transferir sobre os arquivos HTML para esse Child Theme.

A primeira é a conversão manual desse HTML para fazer um tema WordPress.

Alguns dizem que é o mais assustador dos métodos, mas outros o preferem, já que você ganha controle total sobre o processo e não precisa confiar em aplicativos ou plugins que às vezes podem não ser confiáveis. Siga os passos abaixo para completar manualmente uma conversão completa do HTML para o site WordPress.

Crie uma pasta para seu tema e adicione os arquivos de tema padrão

Em seu computador, crie uma pasta para salvar todos os arquivos básicos do seu tema. Chame a pasta do que quiser, de preferência dando-lhe um nome que você possa lembrar.

Crie os seguintes arquivos temáticos básicos:

• style.css
• index.php
• header.php
• sidebar.php
• footer.php

Sinta-se à vontade para abri-los em seu editor de código ou texto, pois você os editará no futuro. A partir de agora, não há necessidade de adicionar nenhum código aos arquivos. Simplesmente deixe-os na pasta.

Nota: Você pode começar criando-os como arquivos TXT. Se você então mudar a extensão do arquivo como .txt para .php ou .txt para .css, seu computador ajustará automaticamente para o formato de arquivo correto. Por exemplo, adicionar uma extensão .css transforma o arquivo em uma Style Sheet em Cascata.

Transfira o CSS atual do seu site WordPress para a nova Pasta

Você já deve ter um tema instalado em seu site WordPress atual. Caso contrário, vá em frente e instale um tema para ajudar com esta parte.

Você usará o CSS do tema atual como alicerce, construindo sobre isso no arquivo style.css com os arquivos do seu site HTML.

Portanto, copie o cabeçalho do stylesheet do seu site WordPress para o novo arquivo style.css.

Deve ser algo parecido com isto:

/*
Theme Name: Twenty Seventeen
Theme URI: https://wordpress.org/themes/twentyseventeen/
Author: the WordPress team
Author URI: https://wordpress.org/
Description: Twenty Seventeen brings your site to life with header video and immersive featured images. With a focus on business sites, it features multiple sections on the front page as well as widgets, navigation and social menus, a logo, and more. Personalize its asymmetrical grid with a custom color scheme and showcase your multimedia content with post formats. Our default theme for 2017 works great in many languages, for any abilities, and on any device.
Version: 2.4
Requires at least: 4.7
Requires PHP: 5.2.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentyseventeen
Tags: one-column, two-columns, right-sidebar, flexible-header, accessibility-ready, custom-colors, custom-header, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, post-formats, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/

Neste caso, o site em uso tem o tema Twenty Seventeen. Se você estiver usando um tema diferente, você verá algumas variações no cabeçalho do stylesheet.

Agora é hora de substituir os elementos do antigo tema por informações sobre seu novo tema.

Para fazer isso, troque o seguinte:

• Nome do tema: Sinta-se livre para chamar seu tema como desejar, mas não é uma má idéia nomeá-lo da mesma forma que a sua pasta de temas.
• Tema URI – Você pode usar a URL principal do seu site para isso.
• Autor – Digite seu nome aqui, ou qualquer nome que você queira usar.
• Autor URI – Faça deste um link para sua página inicial.
• Descrição – Você pode fazer uma descrição do seu tema para aparecer na administração do seu site WordPress.

Deixe tudo o resto como está. A maioria dos outros elementos como a Licença e as Tags são apenas para se você planeja publicar o novo tema na pasta de temas WordPress.

Lembre-se, o que você acabou de colar e editar é o cabeçalho do seu tema.

Encontre o CSS existente em seu site HTML. Copie e cole este CSS após o cabeçalho no novo arquivo style.css.

Salve e feche o arquivo style.css.

Pegue seu HTML atual e divida-o em peças

O WordPress geralmente usa PHP para extrair itens como arquivos e códigos, e mídia 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.

Isto pode parecer intimidante, mas tudo o que é necessário é dividir seu documento HTML em várias partes, transformando cada uma dessas partes em arquivos PHP.

Cada arquivo HTML terá um aspecto diferente, mas isso ajuda a obter um exemplo visual. Portanto, vamos exibir alguns modelos de sites HTML para demonstrar.

O código a seguir é uma ótima opção para cruzar referências com seu próprio arquivo HTML. É uma página web HTML simples com um cabeçalho, itens de menu, subtítulos, uma barra lateral (sidebar) e um rodapé (footer). Você pode encontrar um código similar em seu próprio arquivo index.html.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Test Site</title>
<meta name="description" content="Website description">
<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="style.css">
</head>

<body>
<div class="header-container">
<header class="wrapper clearfix">
<h1 class="title">Website Title</h1>
<nav>
<ul>
<li><a href="#">menu item #1</a></li>
<li><a href="#">menu item #2</a></li>
<li><a href="#">menu item #3</a></li>
</ul>
</nav>
</header>
</div>

<div class="main-container">
<main class="main wrapper clearfix">
<article>
<header class="entry-header">
<h2 class="entry-title">Article</h2>
</header>
<p>Test text right here..</p>
<h2>Subheading</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
<h2>A Sub</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
</article>
<aside>
<h3>Sidebar here</h3>
<p>Etiam ullamcorper lorem dapibus velit suscipit ultrices. </p>
</aside>
</main> <!-- #main -->
</div> <!-- #main-container -->

<div class="footer-container">
<footer class="wrapper">
<p class="footer-credits">© 2019 My Test Site</p>
</footer>
</div>
</body>
</html>

O seguinte modelo é mais um exemplo para basear suas próprias estratégias.

 

Como você pode ver, o arquivo index.html deste arquivo é um pouco mais complicado, mas ainda familiar na forma como está estruturado.

Ambos os exemplos incluem cabeçalhos, áreas de conteúdo, barras laterais e rodapés.

O mais provável é que você tenha um projeto diferente. Por causa disso, você terá que ajustar os passos cobertos abaixo.

Cada passo em frente envolve editar e adicionar a cada um dos novos arquivos WordPress que você criou anteriormente. Dito isto, mantenha o arquivo index.html do seu site HTML aberto. Você estará usando este passo em frente.

O arquivo header.php

Em seu arquivo HTML aberto, procure por tudo no início do arquivo e no final com a área de conteúdo principal. A área de conteúdo principal é normalmente representada com uma <div class="main">ou<main> tag.

Copie e cole esta seção do arquivo HTML em seu novo arquivo header.php.

Depois disso, encontre onde diz </head>.

Logo antes disso, cole no seguinte:

<?php wp_head();?>

Este pedaço de código é importante para que a maioria dos plugins WordPress funcionem.

O arquivo sidebar.php

Procure a seção <aside> em seu arquivo index.html.

Tudo dentro das etiquetas <aside> e </aside>, incluindo as próprias etiquetas à parte, deve ser copiado para o novo arquivo sidebar.php.

A partir de nosso arquivo de exemplo, parece algo parecido com isto:

<aside>
<h3>Sidebar here</h3>
<p>Etiam ullam corper lorem dapibus velit suscipit ultrices. </p>
</aside>

O arquivo de footer.php

Se você tiver um site HTML simples, você pode ter apenas suas informações de rodapé (footer) para transferir. Outros sites são um pouco mais complicados. Independentemente disso, não é uma má idéia terminar com a modificação do rodapé (footer), visto que é um dos principais blocos de construção que compõem os arquivos do site WordPress.

No arquivo index.html, encontrar e copiar todos os códigos após a tag </aside> barra lateral (sidebar).

Mais uma vez, você pode ter mais conteúdo após a seção da barra lateral (sidebar), mas é possível para sites HTML mais simples, apenas para ter o rodapé (footer) para lidar com isso.

Em nosso exemplo, o rodapé (footer) é algo parecido com isto:

</main> <!-- #main -->
</div> <!-- #main-container -->

<div class="footer-container">
<footer class="wrapper">
<p class="footer-credits">© 2020 My Test Site</p>
</footer>
</div>
</body>
</html>

Mas não tão rápido. Depois de colar esse código de rodapé (footer) no novo arquivo de footer.php, adicione o arquivo <?php wp_footer();?> snippet bem antes do </corpo> colchete. Isto ajuda o rodapé (footer) a funcionar corretamente com o WordPress.

Você pode ver um exemplo do código <?php wp_footer();?> colado no arquivo de rodapé (footer) abaixo.

</main> <!-- #main -->
</div> <!-- #main-container -->
<div class="footer-container">
<footer class="wrapper">
<p class="footer-credits">© 2020 My Test Site</p>
</footer>
</div>
<?php wp_footer();?>
</body>
</html>

Certifique-se de salvar todos esses novos arquivos em sua pasta de temas. Por exemplo, depois de colar este código de rrodapé (footer) no arquivo footer.php, você deve clicar no botão Salvar em seu editor e fechá-lo.

Agora que os arquivos básicos estão prontos, feche o arquivo index.html original do seu site HTML.

Vincule seus arquivos header.php e index.php ao WordPress

Você já o adicionou ao arquivo header.php, mas ainda precisa tomar medidas adicionais. Essencialmente, você quer modificar o chamado stylesheet a partir do HTML que está lá dentro agora mesmo para o formato padrão PHP do WordPress.

De volta ao arquivo header.php, encontre a seção <head>.

Estamos procurando o stylesheet. É algo parecido com isto:

<link rel="stylesheet" href="style.css">

Elimine esta e substitua com o seguinte:

<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/style.css" type="text/css" media="all" />

Isso é tudo que você tem que fazer com o arquivo header.php. O stylesheet está agora trabalhando com o formato WordPress, e não HTML.

Vá em frente e salve e feche o arquivo header.php.

Em seguida, abra o arquivo index.php (não o arquivo index.html que você estava usando antes, mas o novo arquivo index.php).

Neste momento, o arquivo index.php está vazio.

Pegue o seguinte código e o copie e cole no novo arquivo index.php. Deixe o espaço entre as duas primeiras linhas. Isso está lá por uma razão, que você verá em breve.

Estas linhas funcionam como chamadas para seus outros arquivos do site, incluindo header.php, sidebar.php, e footer.php.

<?php get_header(); ?>

<?php get_sidebar(); ?>
<?php get_footer(); ?>

O espaço aberto na segunda linha é reservado para o que chamamos de The Loop, ou um processo dinâmico no WordPress que roda em segundo plano para adicionar novos posts ao seu site. Essencialmente, é deixar o WordPress saber que mais conteúdo ainda está por vir e que ele deve usar o The Loop para adicionar esse conteúdo. Saiba mais sobre o The Loop aqui.

Para adicionar The Loop, cole o seguinte código no espaço que você deixou no arquivo index.php antes (logo abaixo de <?php get_header(); ?>).

<?php while ( have_posts() ) : the_post(); ?>
<article class="<?php post_class(); ?>" id="post-<?php the_ID(); ?>">
<h2 class="entry-title"><?php the_title(); ?></h2>
<?php if ( !is_page() ):?>
<section class="entry-meta">
<p>Posted on <?php the_date();?> by <?php the_author();?></p>
</section>
<?php endif; ?>
<section class="entry-content">
<?php the_content(); ?>
</section>
<section class="entry-meta"><?php if ( count( get_the_category() ) ) : ?>
<span class="category-links">
Posted under: <?php echo get_the_category_list( ', ' ); ?>
</span>
<?php endif; ?></section>
</article>
<?php endwhile; ?>

O resultado deve ser o seguinte:

<?php get_header(); ?>
<?php while ( have_posts() ) : the_post(); ?>
<article class="<?php post_class(); ?>" id="post-<?php the_ID(); ?>">
<h2 class="entry-title"><?php the_title(); ?></h2>
<?php if ( !is_page() ):?>
<section class="entry-meta">
<p>Posted on <?php the_date();?> by <?php the_author();?></p>
</section>
<?php endif; ?>
<section class="entry-content">
<?php the_content(); ?>
</section>
<section class="entry-meta"><?php if ( count( get_the_category() ) ) : ?>
<span class="category-links">
Posted under: <?php echo get_the_category_list( ', ' ); ?>
</span>
<?php endif; ?></section>
</article>
<?php endwhile; ?>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

Vá em frente e salve o arquivo index.php. Você também pode fechar o arquivo agora.

Com isso feito, um tema WordPress baseado em seu site HTML original está pronto para ser carregado no WordPress.

Faça o upload do novo tema para o WordPress

O último passo é carregar o tema em seu site WordPress. Uma opção é simplesmente zipar a pasta do site e carregá-lo na seção Tema WordPress sem adicionar uma captura de tela do seu site para referência.

Embora seu tema ainda funcione da mesma maneira sem uma captura de tela de referência, recomendamos a criação de uma captura de tela para que seja mais fácil para você organizar seus temas e entender qual deles está realmente ativo em seu website.

Por captura de tela, entendemos a pequena visualização que aparece para todos os temas instalados em seu painel do WordPress. Mesmo os que não estão ativos têm screenshots. É um requisito ter uma captura de tela se você planeja fazer o upload do seu tema para a Biblioteca de Temas do WordPress.

Você pode não estar carregando seu tema publicamente, mas uma captura de tela ajuda na gestão do seu próprio tema. Como você pode ver, é bastante difícil dizer como é o tema se não houver uma prévia da tela disponível. O tema Twenty Seventeen Child não tem uma captura de tela, portanto, é apenas uma imagem em branco. Isso pode confundir muitos no futuro.

Para adicionar uma captura de tela, abra o antigo site HTML em um navegador e pegue uma captura de tela da página inicial com qualquer ferramenta de recorte ou software de captura de tela que você tenha disponível.

Abra seu software favorito de edição de imagem e corte a captura de tela para 880×660 pixels. Isto garantirá que a captura de tela não seja esticada ou desproporcional quando adicionada ao WordPress.

Salve a versão editada da captura de tela em sua nova pasta de tema. Ela não precisa ir em nenhuma pasta especial – basta colocá-la diretamente na pasta de temas ao lado dos outros arquivos como header.php e footer.php.

Agora, você tem duas opções para carregar o novo tema do WordPress para o WordPress.

A primeira é arrastando esses arquivos para a pasta wp-content/temas via FTP. Se você seguir este caminho, não há necessidade de zipar o arquivo. Basta usar um cliente FTP como o FileZilla e arrastar a pasta normal para a pasta wp-content/temesmes.

A outra opção é carregar uma versão zipada no painel de controle do WordPress.

Para começar, comprima a pasta de temas inteira em um arquivo zip.

Em seguida, no painel do WordPress, vá para Appearance > Themes.

Clique no botão Adicionar novo.

Selecione o botão Upload Theme.

Clique em Choose File e procure o arquivo zipado em seu computador. Selecione o arquivo para que ele apareça no painel do WordPress.

Clique em Instalar Agora para processar o arquivo no WordPress.

O WordPress deve lhe dizer que o pacote está sendo instalado e que ele é instalado com sucesso.

Clique no botão Ativar para concluir o trabalho.

Agora o tema, com sua captura de tela, aparece na lista de Temas como o tema Ativo. Você pode ir para o frontend do seu site WordPress para ver agora uma versão WordPress do seu site HTML original.

Tenha em mente que nenhuma conversão de HTML para WordPress é a mesma. Você pode descobrir que o seu é um pouco mais complexo do que o que acabamos de passar. Em geral, várias outras ações precisam ser tomadas para obter uma duplicata exata do seu site HTML.

Por exemplo, você terá que adicionar áreas widget e comentários e até mesmo ajustar o título e descrição do seu blog para que sejam modificáveis no WordPress.

Muito trabalho manual envolve a mudança de um site HTML para um site WordPress, e você pode descobrir que algumas mudanças só são possíveis com um pouco de marcação CSS.

Além disso, este tutorial não tem nada a ver com a adição de conteúdo como posts e imagens. Isto pode ser feito manualmente carregando imagens na Biblioteca de Mídia e ajustando elementos como as estruturas URL.

Alguns plugins estão por aí para automatizar a importação de conteúdo, mas a maioria deles não está atualizada com as novas versões do WordPress. Portanto, sugerimos que você talvez os experimente para ver se eles funcionam para você, mas você não deve esperar muito.

Conversão de HTML para WordPress através de um Child Theme

Este é, sem dúvida, um dos métodos mais fáceis para converter um site HTML inteiro em um site WordPress. Ele funciona usando qualquer um dos temas WordPress gratuitos já existentes online, para que você possa escolher seu favorito e combiná-lo com o design do seu site HTML.

No geral, você está usando o tema já criado do WordPress como um Parent Theme. Então, o site HTML é convertido para trabalhar com o WordPress e vinculado ao Parent Theme como um Child Theme. Se você tiver perguntas sobre Parent Theme e Child Theme, por favor leia nosso guia sobre o tema aqui.

Como explicação rápida, o Parent Theme gerencia a funcionalidade do seu site enquanto o Child Theme é construído em cima do Parent Theme. O Parent Theme poderia tecnicamente ficar por conta própria, mas o Child Theme não pode. Portanto, estamos usando o Child Theme para modificar o design do Parent Theme enquanto mantemos a poderosa funcionalidade que já é fornecida no Parent Theme.

Veja como fazer a conversão de HTML para WordPress através de um Child Theme.

Escolha um Parent Theme

A primeira linha de ação é selecionar um tema que você gosta. O tema que você decidir funcionará como seu tema principal, e você o usará como base do design do seu site.

O ideal é que você localize um tema que já esteja próximo em design do visual e da aparência do seu antigo site HTML. Outra opção é utilizar uma estrutura WordPress ou tema inicial, vendo como ambos os tipos de temas já são utilizados para fundações de design.

Por exemplo, um tema inicial de qualidade é o tema twenty twenty ou qualquer um dos temas iniciais padrão do WordPress com o nome do ano em que foram feitos. Recomendamos voltar atrás nos anos (Twenty Nineteen, Twenty Seventeen, etc.) para ver se algum deles combina melhor com o design do seu site HTML.

Iremos com o tema Twenty Seventeen para este tutorial devido à sua limpeza e capacidade de combinar muitos designs HTML simples na web.

Independentemente disso, todos esses temas servem como pontos de partida maravilhosos.

Para começar, instale o tema em seu site WordPress.

Você pode ativar o tema se quiser, mas ativará um novo Child Theme mais tarde e só usará o tema inicial como base para o design.

Faça uma Nova Pasta

Todos os temas do WordPress requerem pastas para armazenar seus arquivos do site. Portanto, você deve fazer uma nova pasta para o Child Theme que está sendo criado a partir do site HTML.

Recomendamos dar à pasta o nome do seu tema principal e acrescentar “-child” no final do nome da pasta.

Por exemplo, neste caso, chamaremos a pasta de “twentyseventeen-child”.

De modo geral, qualquer nome serve, desde que você se lembre do nome da pasta e não acrescente nenhum espaço a ela.

Configure seu stylesheet

Todos os Child Themes exigem stylesheet que vão para a pasta de temas.

Portanto, faça um documento de texto e nomeie-o style.css. Salve-o na pasta de temas e inclua o seguinte código nesse arquivo de texto:

/*
 Theme Name:   Twenty Seventeen Child
 Theme URI:    http://examplesite.com/twenty-seventeen-child/
 Description:  Twenty Seventeen Child Theme
 Author:       Jane Doe
 Author URI:   http://examplesite.com
 Template:     twentyseventeen
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
 Text Domain:  twenty-seventeen-child
*/

Certifique-se de substituir os elementos que são personalizados em seu site. Você potencialmente precisará modificar coisas como o Nome Temático, Tema URI, Autor, Template e alguns outros elementos para garantir que ele corresponda a seus próprios nomes de arquivo. É semelhante a algumas das etapas da seção acima chamada “Conversão Manual de um Site HTML Inteiro para WordPress”, explicando o significado de cada linha.

O mais importante é a etiqueta Template. Este deve ter o nome do Parent Theme para que o Child Theme funcione corretamente.

Crie um arquivo functions.php

Se você simplesmente usasse o style sheet do site e ativasse o child theme, um site HTML sem qualquer estilo estaria disponível. No entanto, gostaríamos também de acrescentar um estilo ao child theme para dar-lhe o visual que queremos que ela tenha.

Todos os estilos serão retirados do parent theme.

Portanto, um arquivo functions.php é necessário para transmitir os estilos do parent theme para o child theme.

Crie um arquivo chamado functions.php em sua pasta de temas.

Para ativar o arquivo, adicione uma tag PHP de abertura, junto com o código que pede ao WordPress para usar o estilo do parent theme:

<?php
function child_theme_enqueue_styles() {

    $parent_style = 'parent-style';

    wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array( $parent_style ),
        wp_get_theme()->get('Version')
    );
}
add_action( 'wp_enqueue_scripts', 'child_theme_enqueue_styles' );

Outro benefício deste pedaço de código é que ele permite que você ajuste o design do site com o seu Child Theme.

Ative o Novo Child Theme

Agora é hora de ativar o Child Theme.

Uma maneira de ativar o Child Theme é adicionar a pasta ao arquivo wp/conteúdo/temas em seus arquivos WordPress. Isto seria feito usando um cliente FTP/SFTP.

Você também pode zipar a pasta e carregar o tema em Aparência > Temas > Adicionar novo.

Selecione o botão Upload Theme.

Clique em Choose File e localize o arquivo zip para o Child Theme em seu computador.

Uma vez carregado, clique no botão Instalar Agora.

Clique no botão Ativar.

Agora você deve ver o tema Twenty Seventeen Child (ou qualquer outro tema que você usou) ativado como seu tema principal.

Independentemente do método utilizado para ativar o Child Theme, seu site WordPress deve refletir o Parent Theme . Em outras palavras, é uma duplicata exata do Parent Theme.

Nota: É possível adicionar uma captura de tela ao seu novo tema em vez de não ter nenhuma prévia. Cobrimos como adicionar uma captura de tela ao tema em uma das seções anteriores chamada “Conversão Manual de um Site HTML Inteiro para WordPress”.

Adicionar arquivos HTML

O objetivo é fazer um site que se pareça com seu site HTML original, e não com o tema principal.

Portanto, a etapa final envolve a cópia do conteúdo do seu website HTML para seu novo website WordPress. Na maioria das vezes, você terá que caminhar através destas etapas manualmente. Já mencionamos isto antes, mas existem alguns plugins que automatizam o processo de transferência de conteúdo. Entretanto, esses plugins não estão atualizados com as novas versões do WordPress, portanto, use-os por sua própria conta e risco.

O que é um conversor de HTML para WordPress? (E quais são as opções?)

Um conversor de HTML para WordPress toma as etapas acima e simplifica-as ou completa a tarefa para você por completo. Você pode considerar uma ferramenta de conversão de HTML para WordPress se não tiver tempo ou experiência para fazer a conversão manualmente.

Os conversores vêm em muitos estilos diferentes, mas é importante lembrar que nem todos eles são alternativas razoáveis para se passar manualmente pelo processo de conversão do HTML para o WordPress.

Os conversores são oferecidos nas seguintes formas:

• Conversores de software de terceiros, tanto online como localmente.
• Plugins WordPress.
• Desenvolvedores humanos reais.

Ao observar as opções de conversão, os softwares/apps de terceiros parecem razoáveis para trabalhos simples. Você é capaz de pegar um arquivo zip dos arquivos HTML do seu site e carregá-los para o conversor. A maioria das ferramentas de terceiros disponíveis funcionam como aplicativos on-line, então você simplesmente os abre em seu navegador e clica no botão Upload.

Gostamos destas aplicações para conversões menos complicadas. Se você tiver um site HTML básico e quiser rodá-lo no WordPress, isto pode fazer o truque, mas uma transição suave não é garantida.

Quanto aos plugins WordPress que convertem HTML para WordPress, você terá dificuldade para localizar plugins que pegam um site HTML inteiro e convertem os arquivos para WordPress. Havia alguns plugins disponíveis, mas nenhum deles é atualizado para trabalhar com as versões mais recentes do WordPress, e você não quer usar um plugin desatualizado.

Entretanto, alguns plugins fornecem os recursos necessários para o upload de arquivos básicos que podem tornar mais fácil do que uma transferência FTP ou mexer com o backend de sua conta de hospedagem. Em geral, muitos dos plugins só permitem uploads de arquivos individuais, portanto não é a melhor rota para a conversão massiva de websites.

Consideramos o último método (desenvolvedores humanos reais) uma forma de conversão de HTML para WordPress porque ele definitivamente automatiza o processo para você, 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ê encontrar problemas, e você tem alguém com quem falar se algo der errado.

As melhores opções de plugins de conversão de HTML para WordPress e outras ferramentas

Como mencionado, os conversores de HTML para WordPress vêm em muitas configurações diferentes. Você não vai encontrar muitos plugins WordPress designados que não estão desatualizados ou não funcionam mais. Entretanto, temos alguns plugins de conversão favoritos que completam tarefas de conversão menores, juntamente com aplicativos web e opções de desenvolvimento manual que vêm a calhar para trabalhos mais avançados de conversão de HTML para WordPress.

Prós e contras da utilização de um plugin ou aplicativo de conversão automatizada de HTML para WordPress

Um conversor automatizado de HTML para WordPress parece uma bênção para alguns, mas nem sempre é a melhor solução. Dê uma olhada nos prós e contras abaixo antes de se comprometer com um aplicativo ou plugin que é feito para duplicar ou converter HTML.

Prós

• Ele elimina a necessidade de fazer seus próprios novos arquivos no website, muitas vezes gerando-os para você.
• Muitos dos conversores lhe dão opções para quebrar elementos HTML e escolher quais deles irão para os arquivos certos para WordPress.
• Você pode fazer um tema a partir de HTML antigo e usá-lo em vários sites.
• Algumas ferramentas requerem apenas uma URL para fazer um novo site ou tema.
• Outras ferramentas oferecem opções para duplicar um site que você não possui, proporcionando um ponto de partida para um design que você aprecia.

Contras

• Muitas vezes você ainda fica com trabalho manual para transferir conteúdo como posts em blogs e fotos.
• O mais provável é que você tenha que descobrir manualmente a transferência de links do antigo site.
• Estes conversores nem sempre são mantidos atualizados. Um dos melhores conversores era um plugin WordPress, mas não o sugerimos neste artigo, uma vez que o desenvolvedor não o mantém mais.
• Você pode descobrir que alguns dos conversores de aplicativos web não conseguem lidar com trabalhos com arquivos maiores.

Agora que você tem uma compreensão dos benefícios e desvantagens dos conversores HTML automatizados, vamos dar uma olhada em nossos aplicativos e plugins de conversores automatizados favoritos abaixo.

WP Site Importorter

Embora a ferramenta WP Site Importorter extrai e importa todo tipo de conteúdo e arquivos de sites antigos ou de terceiros, você pode apostar que um desses elementos envolve HTML. Em resumo, a ferramenta WP Site Importer permite que você transforme qualquer site em um WordPress, extraindo conteúdo como imagens, menus e páginas do site HTML e arquivos do site. O WP Site Importer corrige links quebrados para que você não tenha que ajustá-los ou adicionar novos manualmente. Ele retém até mesmo as informações de SEO construídas a partir do site anterior, incluindo meta-descrições e palavras-chave.

O importador economiza tempo e dinheiro cortando os custos de um desenvolvedor e tornando esta conversão de HTML e conteúdo mais um processo de um clique. Além disso, ele limpa seu HTML, limpando e reformatando o HTML de origem. Isto torna seus arquivos HTML mais compatíveis com o WordPress e mostra ao Google que você está trabalhando com código limpo, por sua vez, impulsionando seu SEO.

A ferramenta WP Site Importer funciona como um plugin direto do WordPress, assim você pode baixar o plugin e ativar suas características diretamente do painel de controle.

WP All Import

O plugin WP All Import é uma das ferramentas mais rápidas e fáceis disponíveis para o upload de arquivos XML contendo dados HTML. Em geral, o plugin permite migrar o conteúdo de um website anterior ou de um website de demonstração em potencial construído com HTML simples ou alguns arquivos HTML que você gostaria de duplicar e trazer para o novo website WordPress.

A conversão acontece em quatro etapas e você ganha acesso a uma bela interface de arrastar e soltar para gerenciar suas conversões e importações. O que também é interessante sobre o plugin WP All Import é que ele lida com importações de URLs de sites externos. Portanto, você não 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.

Uma conversão completa do site pode ser assustadora com este plugin, mas vale a pena tentar, especialmente se for um simples arquivo HTML. Além disso, o plugin suporta conversões de HTML para elementos como produtos WooCommerce e páginas WordPress. Uma versão premium está disponível para recursos mais avançados, principalmente o suporte premium ao cliente que permite que você peça ajuda ao fazer estas conversões.

HTMLtoWordPress.io

O aplicativo online HTMLtoWordPress.io é uma das soluções mais populares para a conversão de um arquivo HTML para WordPress. O que é excitante na ferramenta HTMLtoWordPress.io é que ela oferece principalmente conversões para websites completos, websites construídos com HTML.

Tudo o que você precisa fazer é puxar a página inicial e carregar seu arquivo HTML zip para uma rápida conversão. O aplicativo web automatiza totalmente a conversão de HTML para WordPress, de modo que não há necessidade de habilidades de codificação ou qualquer motivo para mexer com um cliente FTP.

Você também pode ver uma prévia completa do seu novo site WordPress antes de completar o processo e publicá-lo na Internet. O conteúdo e as imagens do seu site também são mantidos para o novo site WordPress. Eles são editáveis através do aplicativo Simple Live Editor, e é suposto fazer referência a essas imagens, juntamente com JavaScript e CSS, sem problemas. No geral, parece uma solução sólida se você tem um ou vários sites HTML que precisam ser convertidos. Como um bônus, você pode adicionar classes ao seu HTML para utilizar recursos avançados do WordPress.

Pinegrow Theme Converter para WordPress

O Pinegrow Theme Converter é uma ferramenta exclusiva de web design para pegar uma pasta HTML do site e convertê-la instantaneamente em um tema WordPress completo. O Conversor de Tema carrega seus arquivos e apresenta uma prévia do site WordPress em uma interface visual. Após o upload, você pode clicar em diferentes elementos nas páginas e atribuir ações inteligentes a cada item. Estes se integram com o WordPress, assim, enquanto você está atribuindo ações, ele adiciona os recursos corretos do WordPress à sua estrutura e estilo HTML personalizados.

Uma vez decididas as ações desejadas e salvos os arquivos, o Pinegrow tem a opção de exportar o projeto para arquivos PHP padrão do WordPress, que podem ser carregados em uma instalação WordPress normal para testá-lo na vida real. Além disso, o sistema de importação de conteúdo garante que você transfira com sucesso sobre os elementos de mídia como imagens e vídeos.

Gostamos especialmente das características que permitem que você volte ao Pinegrow e faça edições. Tudo que você precisa fazer é clicar no botão Atualizar e enviar a nova versão para seu tema WordPress sem nenhuma mudança avançada de codificação ou ajuste do site no WordPress.

Isto não é um plugin. Na verdade, nenhum plugin WordPress é usado para transformar o arquivo HTML em um tema WordPress. O Pinegrow vem como software para download nas versões Mac, Windows e Linux. Desde o belo editor visual até o recurso de atualização imediata, o software Pinegro parece ser uma das melhores opções para converter um site HTML completo em um tema WordPress.

Jekyll

Jekyll é um conversor gratuito de HTML para WordPress que funciona transformando arquivos de texto simples em sites reais. O projeto é hospedado no GitHub como um download gratuito. Ele apresenta a oportunidade de cortar a necessidade de bancos de dados e comentar moderação em vez de focar na transferência de conteúdo e transferência/conversão de arquivos com HTML, CSS e markdown.

Uma parte interessante sobre o Jekyll é que ele atende a projetos HTML orientados a blogs, compilando as configurações de conteúdo para páginas, posts e permalinks para migrar seu blog e manter, ou criar, layouts e categorias personalizados e muitos outros itens.

Você pode instalar o conversor Jekyll no MacOS, Ubuntu, Windows e até mesmo em outros sistemas operacionais Linux. Em suma, Jekyll é um projeto voluntário com vários recursos como temas, plugins e guias para testar seus conhecimentos e ajudá-lo a transformar um projeto HTML em algo especial.

Gostamos particularmente das integrações com ferramentas de comércio eletrônico como o MemberSpace e formamos aplicativos como o Getform. A lista de integrações é longa, mas é uma verdadeira prova de quanto potencial você tem com seu website depois de fazer a conversão de HTML para WordPress.

Theme Matcher

O Theme Matcher não é tanto um conversor de arquivos HTML, mas um extrator de arquivos HTML de sites de terceiros. Ele gera temas WordPress completos depois que você cola uma URL do seu site pessoal ou de um site HTML que você não possui.

A idéia por trás deste tipo de conversor e gerador de temas é pegar um de seus próprios sites HTML e transformá-lo em um site WordPress completo ou fazer um tema que seja baseado em um design que você tenha notado em outro lugar online.

Por exemplo, você poderia navegar até sua loja on-line favorita e decidir que gostaria de iniciar seu projeto com essa formatação e estrutura. O Theme Matcher gera um tema completamente novo para seu site, que obviamente precisa mudar devido a questões de direitos autorais, mas serve como um lugar maravilhoso para começar.

O processo funciona copiando e colando uma URL do site no campo Theme Matcher. Peça-lhe para criar um tema para você e selecione o layout do site para converter em conteúdo WordPress. Grande parte da conversão de HTML para WordPress continua em segundo plano aqui, e é importante identificar essas áreas de conteúdo do WordPress para torná-lo o mais próximo possível de um tema WordPress real. Finalmente, você pode fazer o download do tema e carregá-lo em seu CMS do WordPress.

Se seu site HTML não está atualmente ao vivo, e você não pode colar em uma URL, o Theme Matcher fornece uma maneira de carregar um arquivo zip de sua página HTML para depois passar pelo mesmo processo.

Import Into Blog

O site Import Into Blog é um aplicativo online que agarra o HTML e outros arquivos do seu site ao vivo para convertê-lo em um site WordPress. Várias opções estão disponíveis, tais como criar um arquivo XML para download para ser importado para seu site WordPress. Você também pode considerar o download do resultado final como um tema WordPress para carregar para o WordPress e ver o site completo.

A recuperação automática do site está disponível com a ferramenta ImportIntoBlog. Sem mencionar que todos os links internos são reescritos para que vão para as páginas corretas em seu novo site. A grande maioria do conteúdo do site é descoberta automaticamente, e você pode personalizar a aparência e o estilo do tema antes de exportá-lo. Em geral, a ferramenta funciona melhor com arquivos HTML estáticos ou com uma URL. Ela gerencia arquivos CSS e Javascript e permite que você descubra a história completa por trás do seu site e faça com que ele funcione corretamente.

HTML to WordPress Converter

O HTML to WordPress Converter é outra solução que pega um site HTML e o transforma em um tema WordPress.

Há um campo para colar na URL de um site e clicar em um botão Gerar Tema. Você escolhe o conteúdo e as áreas da barra lateral (sidebar) do WordPress para que suas páginas e posts acabem nos locais certos, e você está puxando os dados exatos necessários do site HTML anterior. Parece que todo o seu conteúdo deve fazer a transferência. Entretanto, você pode ter que checar novamente com suas fotos e outros elementos de mídia e completar o upload ocasional através do WordPress.

Isto produz um tema e não um site completo. Você precisa ativar seu próprio site WordPress e hospedá-lo em outro lugar. Você 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ão funcionarão como você originalmente os tinha, mas faz um trabalho maravilhoso de manter a estrutura e formatação do seu site a partir de nossos testes.

Aparentemente, os desenvolvedores da ferramenta HTML para WordPress Converter também fornecem ajustes CSS gratuitos se algo não sair do jeito que você queria.

PHP Simple HTML DOM Parser

O PHP Simple HTML DOM Parser completa um processo necessário 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ê pode identificar erros, corrigi-los antes de convertê-los para um site WordPress, ou mesmo usar a ferramenta para modificar os itens HTML que existem em seu site WordPress atual.

Este é um download gratuito do site da SourceForge, para que você possa verificar as revisões e pedir suporte, se necessário.

Contrataar de um Desenvolvedor

WP Geeks, WP Online Support e Acclaim fornecem serviços de conversão de HTML para WordPress a preços razoáveis para aqueles que não querem mexer na conclusão de uma conversão ou uma das ferramentas automatizadas de cima falha em produzir resultados sólidos. A razão de contratar um desenvolvedor faz tanto sentido às vezes é que você pode acabar economizando tempo e dinheiro no processo, especialmente se for um trabalho fácil que você simplesmente não tem o conhecimento para completar.

A parceria com um verdadeiro desenvolvedor significa que você não precisa utilizar nenhuma de suas próprias habilidades técnicas – ou falta de habilidades técnicas – para renderizar um novo website a partir dos arquivos HTML. O trabalho é delegado a pessoas que sabem o que estão fazendo, e é muito mais provável que você seja capaz de encontrar a ajuda certa e fazer perguntas e solicitações quando comparado a um aplicativo web que pode ter alguns desenvolvedores que poderiam lhe ajudar.

Sem mencionar que isto permite que você solicite qual característica você gostaria de manter no novo website. E é quase uma garantia de que as ações do website serão realmente transferidas e funcionarão como deveriam.

Entendemos que a contratação de um HTML para o desenvolvedor do WordPress nem sempre está no orçamento, mas vale a pena pensar se você estiver com problemas e tiver um pouco de dinheiro para gastar.

Como converter HTML para WordPress com um aplicativo ou plugin automatizado

Se você tiver dúvidas sobre o uso de um dos conversores automatizados HTML para WordPress listados anteriormente, aqui está um exemplo com o WP Site Importer. Esta é uma das soluções mais respeitáveis, e é um plugin WordPress de terceiros que reúne muitas das características de outros conversores automatizados de HTML para WordPress.

Para iniciar, baixar, instalar e ativar o plugin WP Site Importer em seu painel do WordPress. Você deve baixar o arquivo zip do site do desenvolvedor e inscrever-se para o teste gratuito. Há também planos premium a considerar. Clique aqui se você tiver alguma dúvida sobre a instalação de um plugin WordPress.

O plugin WP Site Importer oferece uma coleção de ferramentas de importação para páginas únicas e posts, juntamente com sites completos e os elementos adicionais necessários para completar o trabalho, como localização de imagens e modificação de links internos.

Para este exemplo, vamos caminhar através da maioria das características, começando com uma única página HTML. No painel do WordPress, vá para Importador de sites > Importar página única.

A grande maioria das configurações padrão no plugin estão prontas para ir, o que significa que você normalmente não tem que mudar nada. A menos, é claro, que você gostaria de ajustar coisas como importar uma página como um post, ou remover imagens em destaque. Sinta-se à vontade para percorrer todas as configurações do plugin para garantir que elas se ajustem às suas necessidades.

Tudo que você tem que fazer para a importação de uma única página é colar na URL para que o plugin possa ser escaneado.

Nota: Os uploads de arquivos estão disponíveis apenas para conversões de várias páginas.

Clique no botão Importar Página para prosseguir.

O plugin informa o que foi bem sucedido e fornece vários links para visualizar as novas páginas do WordPress e editá-las, se necessário.

Você também vai querer transferir qualquer menu do site HTML estático.

Ir para Site Importer > Importar Menus para isso.

A importação de um menu é semelhante à conversão de arquivos, uma vez que pede a URL. Você também pode definir elementos como a densidade do menu e o tamanho mínimo do menu.

Clique no menu Identificar para prosseguir.

Cada item do menu agora aparece em uma lista. Você também deve ver vários menus se você tiver mais de um em seu site HTML.

Confira os menus que você gostaria de importar e dê um nome a cada um deles. Clique no botão Importar Menu.

Com o menu WordPress importa, você ainda tem que configurar a localização do menu.

No painel de controle, navegue até Aparência > Menus.

Nomeie e crie um menu e salve-o no WordPress. Você já deve ver o menu importado se tudo funcionou como planejado.

Clique na guia Gerenciar Locais e encontre o menu importado no menu suspenso. Você deve colocar esse novo menu no local do menu de sua escolha.

Certifique-se de salvar as mudanças quando estiver pronto.

Outra parte da importação de um site HTML para o WordPress é a localização das imagens. Para completar este processo, vá para Importador de sites > Localizar imagens.

Todas as configurações padrão para a localização da imagem são normalmente boas de se usar.

Clique no botão Next (Próximo).

Você verá uma lista das imagens que estão sendo transferidas do site anterior.

Selecione os que você deseja localizar e clique no botão Next.

Em segundos, o plugin adiciona cada imagem à sua Biblioteca de Mídia WordPress, dando-lhes todas as URLs do novo site. Você pode ir até a Biblioteca de Mídia para garantir que esta transição ocorra.

Outra parte de uma conversão HTML envolve a atualização dos seus links internos. Todas as transferências de websites normalmente resultam em links quebrados e problemas com as estruturas de URL.

Precisamos consertá-los, então vá para Importador de Sites > Atualizar Links Internos para começar.

A página seguinte explica como os links antigos serão substituídos por versões do novo domínio do site, adicionando subdiretórios para uma experiência fluida do usuário que reside na URL do site WordPress.

Tudo que você precisa fazer é clicar no botão para Atualizar Links. O plugin faz todas as conversões para você.

Se você planeja converter um site HTML inteiro (ao contrário de uma página), navegue para a guia Importar Páginas Múltiplas sob o menu Importador de Sites.

Esta é também uma opção maravilhosa para aqueles interessados em carregar arquivos locais do site em vez de copiar em uma URL ao vivo.

O Assistente de Páginas Múltiplas tem campos para colar em uma URL e carregar arquivos HTML do site.

Escolha o que for melhor para o seu trabalho.

Como o site HTML é convertido e importado, você verá uma lista de URLs puxadas para o seu site WordPress. Você pode remover algumas das páginas da importação se não precisar delas. Você também tem opções de importação para postagens, definindo-as como não publicadas, e incluindo a imagem em destaque.

A etapa final revela a lista completa de páginas web convertidas do site HTML em seu sistema WordPress. Agora você pode clicar no botão Edit ou Preview de cada página para continuar personalizando seu site.

Lembre-se, uma conversão como esta não significa que você verá imediatamente o design exato do seu site HTML. Talvez você mesmo tenha que importar um stylesheet ou mesmo um código personalizado do site ou das páginas.

Resumo

A mudança do HTML para o WordPress requer um pouco de trabalho. Mas vale a pena o desafio. Um upload de HTML para WordPress também pode ajudar em tarefas menos envolvidas, como verificar a propriedade do seu site ou implementar um simples módulo HTML.

As possibilidades são abundantes quando se trata de uploads e conversões de arquivos HTML. Basta lembrar que normalmente você pode completar grande parte do trabalho com um conversor HTML automatizado. Depois disso, muito provavelmente haverá trabalho manual envolvido, mas com a combinação das ferramentas e conhecimentos certos, você pode duplicar quase todos os sites HTML que quiser!

Se você tiver alguma dúvida sobre o upload de arquivos HTML para WordPress ou sobre a conversão de HTML para sites WordPress, informe-nos na seção de comentários abaixo.