Quando a Web começou, os sites eram muito burros. Ou seja, nada mais eram do que texto e código HTML estático, sem efeitos extravagantes e pouquíssima interatividade.

Vinte anos depois, os sites são baseados em programação complexa e podem levar semanas e semanas para serem construídos. Eles são repletos de recursos, altamente interativos, mais responsivos, mais bonitos e assim por diante.

Hoje, em vez de escrever o código por conta própria, você pode usar sistemas de gerenciamento de conteúdo que lidam com o código por trás do seu site sozinhos. Tudo o que você precisa fazer é escolher um tema e começar a postar.

O WordPress é um desses CMS, agora usado por milhões em todo o mundo. A melhor parte do WordPress é que é uma plataforma muito flexível. Não requer nenhum conhecimento de codificação para usá-lo e você pode criar os sites mais responsivos e incríveis com ele.

Se você possui um site que não foi atualizado desde a década de 1990, este artigo criado por nossa equipe em wpDataTables o ajudará a converter HTML para WordPress para que você também possa colher os benefícios da tecnologia web moderna.

Continue lendo para saber mais.

Por que você deve converter HTML para WordPress?

As razões pelas quais uma pessoa deve converter HTML para WordPress são bastante diversas. Aqui está uma seleção dos mais importantes:

A conversão para o WordPress oferece controle total sobre cada detalhe do seu site. Sempre que você não gostar de uma parte do seu site, poderá ajustá-lo facilmente ao seu gosto.
Sites WordPress são muito mais fáceis de acessar, gerenciar e manter em comparação com sites HTML estáticos. Esta é uma razão muito importante para fazer uma migração de HTML para WordPress.
Ao converter seu estilo de modelo HTML para WordPress, você terá um tema exclusivo que nenhuma outra pessoa que usa o CMS possui.
O WordPress ajuda na otimização de mecanismos de pesquisa e garantirá que seu site seja descoberto por mais pessoas.
Como desenvolvedor de sites, seu trabalho será reduzido pela metade porque o WordPress lidará com a maioria das atividades que antes consumiam desnecessariamente tempo.

Mudando de HTML estático para WordPress: os métodos

Agora que você tem todos os motivos para converter HTML para WordPress, você pode continuar a aprender como fazê-lo.

Existem dois métodos que você pode escolher: o método manual, que envolve fazer tudo sozinho, do zero; e o método de tema filho, que envolve usar um tema básico do WordPress e ajustá-lo de acordo com suas necessidades.

A escolha de um método depende de sua experiência com codificação, quanto tempo você deseja investir nessa tarefa e também de suas próprias preferências. Cada um desses métodos será apresentado nas seções abaixo, onde você aprenderá como converter HTML para WordPress.

O método manual

1 Crie uma nova pasta de tema

Crie uma nova pasta em sua área de trabalho onde seus arquivos de tema serão armazenados. Nomeie esta pasta como quiser (ela representará o nome do tema). Crie esses arquivos em seu editor de código preferido e deixe-os abertos:

estilo.css
index.php
header.php
sidebar.php
footer.php

2 Copie o código CSS existente para sua nova folha de estilo

Depois de criar os arquivos, você pode continuar copiando seu código CSS. Aqueles que desejam duplicar seus sites e realocá-los para o WordPress terão que exportar e importar o código CSS do site anterior. O CSS é responsável pela aparência do site, então edite o arquivo style.css adicionando as seguintes linhas de código a ele:


/*
Theme Name: Replace with your Theme's name.
Theme URI: Your Theme's URI
Description: A brief description.
Version: 1.0
Author: You
Author URI: Your website address.
*/

Substitua as informações necessárias pelas suas próprias, adicione as linhas CSS restantes e pronto. Não esqueça de salvar o arquivo. Agora você está livre para fechar style.css.

3 Obtenha seu código HTML atual

Vá para o arquivo index.html do seu site e destaque todo o conteúdo desde o início do documento até a tag div class="main". Esta seção precisa ser colada no arquivo header.php que você criou na etapa 1.

Volte para o arquivo index.html e destaque tudo dentro do elemento class="sidebar”. Copie o conteúdo e cole-o no arquivo sidebar.php que você criou. Faça o mesmo para o rodapé, com todo o conteúdo após o elemento da barra lateral.

Para o arquivo index.php, selecione todo o conteúdo que resta após realçá-lo e cole-o no novo arquivo, salve e deixe-o aberto para a próxima etapa.

4 Edite o arquivo index.php

Para finalizar seu arquivo index.php, copie estas linhas de código e cole-as na parte superior do documento:

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

O arquivo ainda não está concluído porque você precisa criar um loop de postagem, que representa algum código PHP que o WordPress precisa para exibir corretamente as postagens ou artigos do blog do seu site. Adicione as seguintes linhas de código na seção de conteúdo do arquivo:

Feito isso, salve o arquivo, feche-o e passe para a próxima etapa.

5 Carregue seu novo tema

Quando a pasta do seu tema estiver pronta, você precisa carregá-la para o seu site e concluir a conversão de HTML para WordPress. Para fazer isso, navegue até a pasta onde você instalou o WordPress e coloque a pasta que você acabou de criar em /wp-content/themes/.

Vá para a página WP Admin, Appearance e depois Themes para ver se o nome do tema aparece na lista ou não. Se isso acontecer, você fez tudo corretamente e pode ativá-lo. Se isso não acontecer, leia atentamente todas as etapas sobre como converter HTML para WordPress novamente.

Há também este guia de vídeo útil da Traversy Media que você deve conferir:

Usando um tema filho do WordPress

Se as etapas mencionadas na etapa anterior parecerem muito complicadas para o seu nível, este é um método que requer menos conhecimento na área de codificação. É mais fácil de gerenciar e levará menos tempo também.

Para converter HTML para WordPress mais rapidamente, você pode usar um tema filho de um tema existente. Os temas filho são nomeados dessa maneira porque são criados em um segundo tema, que é o pai.

1 Escolha o tema

Em primeiro lugar, escolha um tema adequado ao seu design HTML. Procure um tema filho que seja semelhante ao seu site existente. Procure a estrutura que ele possui, para que você não precise se aprofundar muito na codificação.

Você deve optar por um tema inicial porque eles contam com linhas de código muito básicas.

2 Crie uma nova pasta de tema

Assim como no caso anterior, você terá que criar uma nova pasta de temas. A única diferença é que você nomeará a pasta da mesma forma que o tema pai no qual seu tema filho é baseado e adicionará o sufixo “-child” a ela.

Por exemplo, se o seu tema se chama Twenty Nine, você chamará a pasta de “twentynine-child”. Certifique-se de não adicionar espaços no nome.

3 Configure uma nova folha de estilo

Em seguida, crie o arquivo style.css dentro da pasta e adicione estas linhas de código:


/*
Theme Name: Twenty Nineteen Child
Theme URI: http://example.com/twenty-nineteen-child/
Description: Twenty Nineteen Child Theme
Author: John Doe
Author URI: http://example.com
Template: twentynineteen
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-nineteen-child
*/

Lembrando que este é um exemplo. Você terá que substituir as informações pelas suas. Salve o arquivo após terminar.

4 Crie o arquivo functions.php

Depois de ter o arquivo style.css, você pode ativar o tema como está. No entanto, para melhorar a aparência e o funcionamento do site, você terá que usar as funções e estilos do tema pai. Para isso, você precisa criar o arquivo functions.php.

Use estas linhas de código e salve o arquivo:


/*
Theme Name: Twenty Nineteen Child
Theme URI: http://example.com/twenty-nineteen-child/
Description: Twenty Nineteen Child Theme
Author: John Doe
Author URI: http://example.com
Template: twentynineteen
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-nineteen-child
*/

5 Ative o tema filho

Finalmente, você precisa ativar o tema. Compacte a pasta e adicione-a ao WordPress navegando até o menu Aparência, Temas e clique em “Adicionar novo”. Carregue o arquivo compactado lá. Outra opção seria arrastar a pasta em wp-content/themes.

Em Fechamento

Você precisará de um pouco de paciência para converter HTML para WordPress, mas certamente vale a pena. Mesmo que o processo exija um pouco de sua atenção, você terminará com um site verdadeiramente único que é muito mais conveniente de gerenciar de todos os pontos de vista.

Se você seguir os passos apresentados neste artigo com atenção, nada pode dar errado, então não se preocupe! Se, no entanto, você tiver algum problema, não hesite em verificar os fóruns de suporte da comunidade WordPress. Há muitos usuários lá que ficariam felizes em ajudá-lo.

Se você gostou de ler este artigo sobre converter HTML para WordPress, você deve conferir este sobre o salário do desenvolvedor do WordPress.

Também escrevemos sobre alguns assuntos relacionados, como melhor editor de código, treinamento em WordPress, bibliotecas JavaScript e extensões Brackets.

Fonte de gravação: wpdatatables.com