Como converter um site HTML para WordPress grátis? Guia

Publicados: 2015-05-18

No início, todos os sites eram feitos com texto e HTML estático. Não havia WordPress e era necessário converter o site HTML para WordPress ou qualquer outro sistema CMS.

Muitas empresas ainda dependem de sites HTML simples para sua presença online. Esses sites HTML geralmente são de natureza estática. Isso significa que até mesmo alterar um pequeno detalhe no site é feito editando o arquivo de codificação.

Agora, mais de 20 anos depois, a web é um lugar muito diferente. Com mais de 25% da Web , o WordPress está se tornando cada vez mais o sistema de gerenciamento de conteúdo (CMS) preferido do usuário médio.

Os sites são muito mais complexos. Eles fornecem experiências mais ricas e agradáveis ​​para criadores de sites e visitantes. Mudar para o WordPress significa começar de novo e perder todo o tempo, energia e dinheiro investidos no site atual?

Índice

Site HTML

Não importa como seu site está codificado, uma vez que um visitante carrega uma página em seu site, o navegador pega todos os pedaços (server-side includes, imagens de outro diretório, etc.) e os coloca todos juntos em um HTML estático final página.

Mesmo que alguns elementos da página ainda sejam dinâmicos, o código em si está todo junto em um local que pode ser movido para uma página do WordPress que ainda funcionaria. Pode haver algumas exceções, mas para a maioria dos sites, isso seria verdade.

Mesmo se o seu site consistir em somepage.php, que chama um arquivo denominado header.inc, e um arquivo denominado footer.php, quando o usuário visualiza somepage.php em um navegador, o código-fonte resultante está todo em um só lugar , como se foi codificado manualmente como uma página HTML estática.

Este é o tipo de código necessário para converter um site para WordPress. Qualquer pessoa com uma instalação do WordPress e o tema / plug-ins certos pode ter um site moderno com design e funcionalidade avançados.

Migrar do site HTML estático para as etapas iniciais do WordPress

Se você estiver pronto para mudar para o WordPress, a seguir estão quatro etapas a serem consideradas:

1. Analise seu site HTML existente

Verifique se há conteúdo irrelevante ou desatualizado no seu site e, se encontrado, limpe-o. Examine o sistema de navegação atual e pense em como ele pode ser melhorado. Fazer a análise do seu site HTML ajudaria você a decidir quais conteúdos, recursos e funcionalidades devem ser migrados para o WordPress.

Isso dará uma ideia clara sobre quais plug-ins você precisa instalar para obter a mesma funcionalidade na plataforma WordPress.

2. Conheça o WordPress

A instalação do WordPress é um processo bastante fácil. A maioria dos hosts da web oferece instalação com um clique. Se não estiver familiarizado, é bom ler e informar sobre a nova plataforma em que seu site estará trabalhando.

3. Faça um backup do seu site HTML

É altamente recomendável fazer um backup completo de seu site estático para evitar qualquer risco de perda de dados durante a migração.

4. Converter site HTML para WordPress

Supondo que você tenha conhecimento de codificação suficiente e seu site seja pequeno, a melhor opção possível diante de você é dividir o código HTML existente em quatro seções (cabeçalho, rodapé, barra lateral e conteúdo) e, em seguida, copiar o conteúdo de cada seção em seu respectivo arquivo PHP.

No caso de seu site ser grande, você pode tirar proveito de um plug-in de HTML para WordPress, como HTML Import 2 ou contratar alguém para converter HTML em WordPress.

Como converter um site HTML em WordPress Tutorial

Como você escolhe converter seu site HTML estático em um site WordPress, sem dúvida dependerá de sua preferência pessoal, tempo / investimento monetário desejado e nível de habilidade com o código.

Método 1

Com este método para converter um site HTML em WordPress, você manterá o mesmo design e aparência do site.

1. Baixe as páginas HTML de seu host atual. Use WinHTTrack para fazer isso. É uma ótima ferramenta gratuita e muito fácil de usar. Certifique-se de pegar a pasta de imagens também (ou onde quer que você tenha suas imagens no site antigo).

2. Instale o WordPress em seu novo host da web.

  • Defina sua estrutura de permalink para “Nome da postagem” (/% postname% /)
  • Marque a caixa “Desencorajar mecanismos de pesquisa de indexar este site” (apenas até que tudo seja feito)
  • Instale algum plugin do Modo de Manutenção (se desejar) para que ninguém além de você possa acessar seu novo WordPress.
  • Instale o plugin gratuito do WordPress HTML Import 2. Use-o para “carregar” o site antigo para o seu novo site. Guia do usuário para importar todo o seu diretório de páginas HTML.

3. Carregue o conteúdo que você acabou de baixar na etapa 1 em sua nova estrutura de arquivo de host da web. Coloque-os em uma pasta chamada, por exemplo, “html-files-to-import”. Faça upload de todas as imagens antigas para sua biblioteca de mídia no WordPress em seu novo site.

4. Execute a importação

5. Prepare seu prompt de comando DOS e Excel

  • No prompt do DOS, navegue até onde você colocou seus arquivos HTML (é mais fácil colocá-los em uma pasta chamada “yourwebsite” e colocar essa pasta na unidade C: \). Em seguida, inicie este comando: i. dir> arquivos.txt
  • Abra o arquivo files.txt no Excel.
  • Agora, para o Excel. Essencialmente, você usará algumas funções do Excel, incluindo “concatenar” para renderizar o código “canônico” que você colocará nos arquivos HTML.
  • Coloque o código canônico correspondente em cada arquivo HTML. Você poderia fazer isso, contratá-lo para um terceirizador ou contratar alguém para escrever o código PHP que faria isso automaticamente.

6. Carregue os arquivos HTML em seu host da web . Coloque-os na pasta ROOT (ou seja, na pasta mais alta) do seu novo site. Não se esqueça de enviar a pasta de imagens também para o ROOT.

7. Certifique-se de que tudo ainda funciona no novo site.

8. Desmarque a caixa da Etapa 2 - “Desestimule mecanismos de pesquisa de indexar este site” e desative o plugin HTML Import 2.

9. Altere o DNS em seu registrador.

10. Certifique-se de que o URL do seu site resolva para o IP correto (o seu novo IP, não o antigo) e que TODAS as páginas carreguem corretamente. Você pode ter que esperar algumas horas para que os servidores de nomes sejam atualizados.

11. Você pode remover as páginas HTML antigas depois de um tempo, mas não há necessidade de fazê-lo. Você não será atingido por penalidades de “conteúdo duplicado” porque as referências canônicas cuidam disso.

Você vai querer adicionar redirecionamentos em seu arquivo .htaccess que apontam suas antigas “páginas .html” para suas novas páginas WordPress.

Método 2

Se o seu objetivo é não apenas obter o conteúdo do seu site HTML estático para o WordPress, mas também duplicar o design atual, isso significa que você precisará criar seu tema personalizado.

Envolve apenas a criação de algumas pastas e arquivos, um pouco de copiar e colar e, em seguida, enviar o resultado. Você vai precisar de um editor de código como Sublime ou Notepad ++ e acesso ao diretório do seu site HTML e ao diretório de instalação do seu novo WordPress.

1.Crie uma nova pasta de tema e os arquivos necessários. Em sua área de trabalho, crie uma nova pasta para armazenar seus arquivos de tema. Nomeie-o como você gostaria que seu tema fosse identificado.

Em seguida, crie alguns arquivos (que vão todos para sua nova pasta de tema) em seu editor de código:

  • Style.css
  • Index.php
  • header.php
  • sidebar.php
  • footer.php

2. Copie o CSS existente para uma nova folha de estilo Se você estiver procurando duplicar um design, isso provavelmente significa que você tem pelo menos algum CSS que deseja salvar. Portanto, o primeiro arquivo que você deseja editar é o seu arquivo Style.css.

Para começar, adicione o seguinte ao início do seu arquivo.

 / *
 Nome do tema: substitua pelo nome do seu tema.
 URI do tema: o URI do seu tema
 Descrição: uma breve descrição.
 Versão: 1.0
 Autor: Você
 URI do autor: o endereço do seu site.
 * /

Após esta seção, cole apenas o CSS existente abaixo. Salve e feche o arquivo.

3. Separe seu HTML atual

Aí vem o processo de recortar e colar partes do código existente nos diferentes arquivos que você criou.

  • Primeiro, abra o arquivo index.html do seu site atual. Destaque tudo, desde o início do arquivo até a tag de abertura div class = ”main” . Copie e cole esta seção em seu arquivo header.php , salve e feche.
  • Volte para o seu arquivo index.html . Destaque o elemento class = ”sidebar” ao lado e tudo dentro dele. Copie e cole esta seção em seu arquivo sidebar.php , salve e feche.
  • Em seu index.html selecione tudo após sua barra lateral e copie e cole em seu arquivo footer.php , salve e feche.
  • Em seu arquivo index.html , selecione tudo o que resta (esta deve ser a seção de conteúdo principal) e cole em seu arquivo index.php . Salve, mas não feche ainda. No entanto, você pode fechar o arquivo index.html agora e prosseguir para as etapas finais. Quase pronto!

4. Finalize o arquivo Index.php

Para finalizar o arquivo index.php do seu novo tema, você precisa ter certeza de que ele pode chamar a outra seção (além do conteúdo principal) que está alojada nos outros arquivos que você criou.

Bem no topo do seu arquivo index.php, coloque a seguinte linha de php.

<?php get_header(); ?>

Então, bem no final do seu arquivo index.php, coloque essas linhas de php.

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

Agora você tem “The Loop”. Este é o bit principal de php que o WordPress usa para exibir o conteúdo de sua postagem aos visitantes. Portanto, a etapa final na criação do arquivo index.php do seu novo tema é adicionar o código abaixo na seção de conteúdo.

<?php if ( have_posts() ) : ?>
<?php while ( have_posts() ) : the_post(); ?> ( have_posts() ) : the_post(); ?>
<div id= "post-<?php the_ID(); ?>" <?php post_class(); ?>> <?php post_class(); ?>>
<div class = "post-header" >
<div class = "date" ><?php the_time( 'M j y' ); ?></div> ); ?></div>
<h2><a href= "<?php the_permalink(); ?>" rel= "bookmark" title= "Permanent Link to <?php the_title_attribute(); ?>" ><?php the_title(); ?></a></h2> ><?php the_title(); ?></a></h2>
<div class = "author" ><?php the_author(); ?></div> ><?php the_author(); ?></div>
</div><!-- post header--> end post header-->
<div class = "entry clear" >
<?php if ( function_exists( 'add_theme_support' ) ) the_post_thumbnail(); ?> ) ) the_post_thumbnail(); ?>
<?php the_content(); ?>
<?php edit_post_link(); ?>
<?php wp_link_pages(); ?> </div>
<!-- end entry-->
<div class = "post-footer" >
<div class = "comments" ><?php comments_popup_link( 'Leave a Comment' , '1 Comment' , '% Comments' ); ?></div> ); ?></div>
</div><!-- end post footer-->
</div><!-- end post-->
<?php endwhile ; /* rewind or continue if all posts have been fetched */ ?>
<div class = "navigation index" >
<div class = "alignleft" ><?php next_posts_link( 'Older Entries' ); ?></div> ); ?></div>
<div class = "alignright" ><?php previous_posts_link( 'Newer Entries' ); ?></div> ); ?></div>
</div><!-- end navigation-->
<?php else : ?>
<?php endif ; ?> ; ?>

Salve seu index.php e feche. Seu tema acabou! Tudo o que resta é fazer o upload para o seu site WordPress.

5. Carregue o seu novo tema

Agora você armazenará os arquivos de tema criados em sua nova pasta de temas. Instale o WordPress.

Coloque sua nova pasta de tema dentro de / wp-content / themes / . Navegue até WP Admin> Aparência> Temas e você deverá ver o tema recém-criado lá. Ative-o! Tudo o que resta a fazer neste ponto é preencher seu novo site WordPress com o conteúdo do seu site antigo.

6. Copie o conteúdo do site HTML para o WordPress

Em WP Admin vá para Plugins> Add New. Procure um plugin chamado HTML Import 2 de Stephanie Leary. Assim que este plugin estiver instalado e ativado, siga seu guia do usuário para importar todo o seu diretório de páginas HTML. Depois disso, seu site deve ficar como antes, apenas rodando no WordPress.

Usando o tema WordPress existente para converter site HTML (método mais fácil)

Se as etapas acima parecerem muito intensas ou demoradas, há outra maneira. Esta é a maneira mais fácil.

Em vez de converter o design HTML existente para ter a mesma aparência no WordPress, você pode aproveitar qualquer um dos milhares de temas disponíveis no mercado WordPress.

Existem temas gratuitos e temas premium. Depois de escolher um tema que você gosta (e ter seu pacote de arquivo compactado baixado), instale / ative seu novo tema WordPress.

Depois de fazer isso, você terá um novo site e tema WordPress. Ao visualizar seu site, ele estará vazio. É hora de importar o conteúdo e finalizar o processo de conversão do site HTML para o site WordPress.

Em WP Admin, vá para Plugins> Adicionar Novo e procure por um plugin chamado HTML Import 2. Siga o guia do usuário para importar todo o seu diretório de páginas HTML. Depois disso, você terá todo o seu conteúdo antigo, mas uma nova aparência.

4 Converta HTML para WordPress com o Theme Matcher

Você também pode usar o Theme Matcher. Oferece conversão automática de HTML para WordPress. Basta entrar em seu site e selecionar a área apropriada. O Theme Matcher obtém imagens, estilos e layout do seu site existente.

Converter site de HTML em site de WordPress com correspondência de tema

5 Serviço de conversão de HTML para WordPress

HTML para WordPress converte seus designs HTML em temas WordPress sem a necessidade de escrever uma única linha de PHP.

Você pode escolher o plano de serviço onde eles irão converter seu site HTML estático para WordPress. Esta opção pode aumentar o preço. Você também pode escolher a opção Conversor, que é significativamente mais barata.

Serviço de conversão de HTML para WordPress

A conversão é totalmente automatizada e a funcionalidade do tema pode ser estendida apenas adicionando classes de conversor com o prefixo “wp-” em seu HTML.

O conversor cria modelos para cada arquivo HTML e faz referência a seus ativos e preenche todas as funções php necessárias. Use Bootstrap, Webflow, Dreamweaver ou qualquer ferramenta / estrutura com a qual você já se sinta confortável para criar sites. Desde que o site seja feito em HTML, você pode convertê-lo em um tema.

O que precisa ser feito após a migração?

Assim que a conversão for concluída, você precisará fazer algumas coisas para dar o toque final ao seu site WordPress.

  • Instale os plug-ins necessários - para turbinar seu novo site WordPress com as mesmas funcionalidades do site HTML, instale os plug-ins que achar úteis.
  • Verifique e corrija links quebrados - Verifique se há links quebrados em seu site (erros 404) e, se encontrados, corrija-os.
  • Configure uma página de erro 404 personalizada - Adicione uma página de erro 404 personalizada para levar seus visitantes a seções relevantes de seu site WordPress, caso eles tentem acessar qualquer URL que não exista.
  • Links de redirecionamento - para informar aos mecanismos de pesquisa que o conteúdo do seu site foi movido para um novo endereço da web, configure redirecionamentos 301. Para este propósito, você pode usar o Redirecionamento 301 Simples.
  • Habilite a indexação do mecanismo de pesquisa : Vá para “ Configurações -> Leitura ” no painel do WordPress e marque “ Permitir que os mecanismos de pesquisa indexem este site ” para que seu site seja indexado pelos mecanismos de pesquisa.
  • Gerar e enviar Sitemap XML : Para garantir que seu site seja incluído nos resultados do mecanismo de pesquisa o mais rápido possível, crie um sitemap XML e envie-o ao Google.

WordPress x HTML - PRÓS E CONTRAS

O lançamento de um site de negócios não é um processo fácil. Um dos maiores dilemas é escolher um site HTML estático ou usar o WordPress.

WordPress - o WordPress é considerado um CMS (Sistema de Gerenciamento de Conteúdo). Versão HTML simplificada para usuários não técnicos adicionarem e modificarem coisas em seus sites.

Os sites CMS geralmente são dinâmicos, o que significa que não há restrições quanto à frequência com que você altera seu conteúdo. Você pode mudar tudo, desde imagens a textos inteiros.

A interface é muito simples e amigável, e ninguém precisa de nenhum treinamento especial para aprendê-la. O mercado de CMS é altamente competitivo, mas o WordPress sempre vence a concorrência.

Outra coisa a lembrar antes de começar é que há uma diferença significativa do WordPress.com para o WordPress.org porque o último é um CMS de código aberto. O WordPress.com, por outro lado, funciona como um serviço de hospedagem de blogs.

Vantagens de usar o WordPress:

  • Ele fornece milhares de plug-ins para adicionar ao site a funcionalidade que está faltando.
  • Uma modificação é possível a qualquer momento e ninguém o está limitando.
  • Em comparação com a configuração do HTML, o WordPress leva muito menos tempo para ser configurado.

Desvantagens de usar WordPress:

  • Você não pode simplesmente configurar e esquecer. Requer atenção em tempo integral e atualização constante de software, plug-ins e temas.
  • Os hackers atacarão sites mal protegidos e não atualizados. Você corre o risco de que seu site não funcione se você não acompanhar as atualizações.
  • WordPress é fácil, mas não tanto para iniciantes. Existem muitos tutoriais online e materiais abrangentes para ajudá-lo a superar a curva de aprendizado.

Sites estáticos em HTML - Antes não existiam modelos, e a única maneira de fazer um site era contratar um profissional de programação para fazer isso por você.

Portanto, todos os sites foram construídos como HTML estático (Hyper Text Markup Languages). O objetivo era ter um site. Não modificar o conteúdo ou o layout, pois seria necessário contratar o desenvolvedor HTML novamente.

Em sites HTML, o conteúdo é armazenado em arquivos estáticos, o que torna incrivelmente difícil modificá-lo.

Vantagens do site HTML:

  • Depois que o site fica online, você não precisa atualizá-lo ou fazer backup. Na maioria das vezes, nada precisa ser alterado nesse site.
  • Os sites em HTML são básicos e fáceis de configurar.
  • Seu tamanho e o fato de usarem menos recursos do que os sites dinâmicos oferecem uma vantagem de velocidade significativa em comparação com os sites dinâmicos, fazendo com que carreguem muito mais rápido.

Desvantagens do site HTML:

Você precisa ser profissional em linguagens de marcação. Caso contrário, você não poderá fazer nenhuma atualização significativa em seu site. Contratar um desenvolvedor web repetidamente custará caro, mesmo que seu site seja muito pequeno ou exiba apenas informações triviais.

Outra desvantagem importante é que você não pode adicionar plug-ins , o que significa que está enfrentando uma grave falta de funcionalidade.

Como converter HTML para WordPress Resumo

Quer precise de mais do seu site ou crie um novo com um modelo em mente, o processo de conversão pode parecer bastante complicado para um novato. Paciência e conhecimento permitirão que você faça o que precisa com certo nível de sucesso.

Depois que seu site estiver no ar, você pode se orgulhar de saber que aprendeu a fazer algo novo e foi capaz de aplicar esse conhecimento ao seu site.

Espero que pelo menos um dos métodos acima tenha ajudado você a converter um site HTML para WordPress. Se você tiver qualquer outro método ou tutorial, me avise. Você já converteu HTML em WordPress e quais são suas experiências com isso?