Convertendo modelos HTML em temas WordPress

Embora a tecnologia da web tenha percorrido um longo caminho, ainda existem sites criados exclusivamente com HTML. Se você possui um deles, deve estar se perguntando como pode converter um modelo HTML em um tema do WordPress.

Felizmente, você tem várias opções à sua disposição, se quiser converter esses arquivos HTML para o WordPress. As técnicas disponíveis variam de conversões manuais práticas a parcerias com especialistas que podem lidar com todo o trabalho pesado.

Neste artigo, abordaremos quatro abordagens diferentes para conversão de modelo HTML. Para cada um, forneceremos instruções e recursos que podem ajudá-lo a trazer um site baseado em HTML para o WordPress. Há muito o que cobrir, então vamos mergulhar de cabeça!

Convertendo HTML manualmente

A primeira opção quando se trata de conversão é a abordagem manual. Como esse é um processo bastante prático, você precisará garantir acesso aos arquivos do site original e do novo.

Normalmente, você usará um aplicativo Secure File Transfer Protocol (SFTP) para essa finalidade. Depois de acessar seu site, você pode prosseguir com as etapas a seguir.

Etapa 1: criar uma pasta de tema

Primeiro, você precisará criar uma pasta para armazenar seus novos arquivos de tema e rotulá-la com o nome do seu novo tema. Usando seu editor de código, você pode criar cinco arquivos específicos:

• estilo.css
• index.php
• header.php
• rodapé.php
• sidebar.php

Por enquanto, você pode deixar esses arquivos em branco e salvá-los na pasta que acabou de criar.

Etapa 2: copie e cole seu CSS existente

Sua próxima prioridade é personalizar o arquivo Cascading Style Sheet (CSS). É aqui que você delineará todos os diferentes elementos de estilo do seu site.

No topo, é uma boa prática adicionar algumas informações sobre o arquivo. Na verdade, quando se trata de WordPress, existem alguns elementos que são necessários para que o tema seja apresentado no Diretório de Temas.

Abaixo dessas informações, você desejará colar quaisquer estilos CSS existentes do site original que deseja transferir para o novo tema.

Passo 3: Separe HTML Existente

Em seu site original, o código HTML que designa seu cabeçalho, rodapé, barra lateral e áreas de conteúdo principal provavelmente está em seu arquivo index.html . Agora, você precisará dividir cada um desses elementos nos novos arquivos que criou para o seu tema WordPress.

Por exemplo, no arquivo index.html do site original, você pode localizar a primeira tag <div> com a classe 'main'. Tudo o que precede esta tag pode ser copiado e colado em seu novo arquivo header.php .

Você repetirá esse processo para as tags 'sidebar' e 'footer'. Copie o código contido em cada um desses elementos e cole-o nos respectivos arquivos PHP.

Agora, o que resta é a parte principal do arquivo index.html . Isso é o que compõe o layout do conteúdo principal do seu site baseado em HTML. Você precisará copiar o código restante e colá-lo em seu novo arquivo index.php .

Etapa 4: configurar seu arquivo index.php

Sua próxima etapa é garantir que seu novo arquivo de índice possa localizar os arquivos necessários para permitir que seu tema exiba a estrutura e o estilo de seu site. Para conseguir isso, você usará tags de modelo do WordPress. Eles são usados ​​para dizer ao tema para recuperar os arquivos de cabeçalho, rodapé e barra lateral.

Por exemplo, você pode fazer com que seu modelo exiba o arquivo de cabeçalho que você criou usando a seguinte tag:

get_header();

Você o colocará em seu arquivo de modelo index.php ou nas páginas subseqüentes onde deseja que o cabeçalho apareça. O mesmo se aplica ao seu rodapé.

Há outra parte importante do seu novo modelo que você também precisa entender. Isso é chamado de loop do WordPress – um trecho de código PHP que diz ao template para puxar as postagens. Também pode ser personalizado para controlar quantas postagens são exibidas.

Etapa 5: faça o upload do seu novo tema

Agora que seu novo tema está pronto para ação, você precisará colocar sua pasta no diretório wp-themes/content/ do seu site:

Depois de fazer o upload dos arquivos, você pode fazer login no painel do WordPress e navegar até Aparência > Temas. Aqui, você verá seu novo tema listado e poderá clicar em Ativar e começar a usá-lo.

Importando conteúdo HTML com um plug-in

Outra maneira de lidar com esse processo é usar um plug-in para transferir conteúdo de seu antigo site baseado em HTML. Infelizmente, existem muito poucas ferramentas disponíveis compatíveis com versões recentes do WordPress. Você pode conferir uma avaliação gratuita do WP Site Importer, no entanto:

Este plug-in pode escanear todo o seu site e catalogar o conteúdo móvel. Funciona melhor se o seu HTML estiver bem organizado e 'limpo' para começar. Você também poderá importar conteúdo como menus e links.

Usando um tema filho

Outra maneira de mover seu site HTML para o WordPress é com um tema filho. Ele tem a mesma funcionalidade básica e estilo do tema pai, mas você poderá preservar quaisquer ajustes e personalizações que fizer, mesmo se atualizar o tema pai.

Etapa 1: escolha um tema

Existem muitos temas gratuitos bem construídos para escolher no Diretório de Temas do WordPress. Depois de selecionar um que você goste, você precisará instalá-lo para que seus arquivos estejam disponíveis no diretório de arquivos do seu site:

No entanto, você não precisa ativar esse tema pai.

Etapa 2: crie uma pasta para seu tema filho

Em seguida, você precisará acessar seus arquivos com um aplicativo FTP e criar uma nova pasta em seu diretório wp-content/themes . Este arquivo deve ter o mesmo nome do seu tema pai, com “-child” adicionado ao final.

Por exemplo, se você for criar um tema filho para o Twenty Nineteen, poderá criar uma pasta chamada twentynineteen-child:

Essa configuração significa que seu tema filho poderá extrair funções e estilos do tema pai automaticamente, depois de configurar o restante dos arquivos de tema necessários.

Etapa 3: configurar uma folha de estilo

Seu próximo passo será configurar seu arquivo style.css . O WordPress requer algumas informações específicas na folha de estilo para fazer o relacionamento do tema pai-filho funcionar. Você também pode colar informações de estilo adicionais de seus arquivos HTML originais, se necessário.

Etapa 4: configurar um arquivo Function.php

Agora que você tem basicamente dois temas com os quais está trabalhando, precisará informar ao WordPress que seu tema filho depende do CSS do pai. Para isso, você pode usar a chamada PHP wp_enqueue_style() .

Você primeiro criará um arquivo function.php e o colocará na pasta do seu tema filho. Este é o arquivo onde você executará a função enqueue que explica as dependências e a hierarquia do tema.

Passo 5: Ative seu tema filho

Depois de carregar esses novos arquivos no servidor do seu site, você pode voltar ao painel do WordPress e navegar até Aparência > Temas . Lá, você deve ver seu tema filho pronto para usar.

Clique em Ativar no seu tema filho para defini-lo como o tema do seu site. Então você está pronto para começar a copiar o conteúdo do seu site HTML para o seu novo site WordPress.

Compre um serviço de conversão de sites

Se você não tiver tempo ou recursos para realizar uma conversão sozinho, também pode consultar um serviço de conversão. Além disso, se você precisar de mais recursos ou assistência para migrar outros conteúdos do WordPress, aqui na WP Engine oferecemos muitas soluções e recursos para migração e conversão.

1. Contrate WPGeeks

HireWPGeeks é uma opção de conversão de serviço completo. Ele cuidará de todo o trabalho pesado e você terá um site WordPress flexível, responsivo e baseado em tema, completo com todo o seu conteúdo. Você terá que entrar em contato com a empresa para obter uma cotação, mas pode planejar seus serviços a partir de $ 89.

2. Soluções FantasTech

FantasTech Solutions é outro serviço de conversão de HTML para WordPress. Ele anuncia conversões altamente profissionais de HTML em modelos de tema WordPress sofisticados e bem codificados. Você deve ter em mente que os custos começam em $ 297 para uma página. As páginas adicionais custam a partir de US$ 147 cada, com preços exatos dependendo da complexidade.

Personalize sua experiência no site com o WP Engine

Pode parecer um grande empreendimento, mas converter seu site HTML para WordPress pode abrir muitas outras oportunidades. Com essa plataforma altamente flexível e extensível, você se tornará mais ágil e poderá implantar novos conteúdos rapidamente.

Aqui no WP Engine, acreditamos que os recursos de desenvolvedor certos podem causar um grande impacto em seus projetos. Além de soluções inovadoras, oferecemos planos e níveis de preços para qualquer orçamento!