Imagina que passaste inúmeras horas a criar o design perfeito para o teu site. As cores, os tipos de letra e a disposição estão perfeitos. Mas depois apercebes-te: é estático. Cada alteração, por mais pequena que seja, requer que voltes a mergulhar no código.

Não seria ótimo se o teu sítio Web pudesse ser tão dinâmico como a tua empresa?

É aí que entra o WordPress. Ao converter o teu design HTML num tema WordPress, podes desfrutar da flexibilidade, da personalização e da facilidade de utilização que o WordPress oferece.

Neste tutorial, vamos guiar-te passo a passo pelo processo, garantindo que o teu site não só tem um ótimo aspeto, como também funciona perfeitamente. Se fores um novato, tenta fazer isto com um site fictício no teu servidor local, como o XAMPP.

Preparar o design HTML para conversão

Antes de mergulhar no processo de conversão, é essencial preparar o teu design HTML. Eis alguns passos fundamentais para garantir uma transição suave:

1. Optimiza o teu código HTML

Certifica-te de que o teu código HTML está limpo, bem estruturado e cumpre as normas HTML. Utiliza um validador para verificar a existência de erros e remover elementos desnecessários. Comprime as imagens para melhorar os tempos de carregamento.

2. Estrutura o teu conteúdo

Organiza o teu conteúdo utilizando elementos HTML adequados, como <header>, <nav>, <main> e <footer>. Divide o teu conteúdo em secções claras com títulos para melhorar a legibilidade e a SEO.

3. Considera o design responsivo

Se o teu design HTML ainda não for responsivo, faz os ajustes necessários para garantir que tem um bom aspeto e funciona bem em diferentes dispositivos. Considera a utilização de uma estrutura responsiva, como o Bootstrap, para simplificar o processo.

4. Faz uma cópia de segurança do teu desenho

Cria sempre uma cópia de segurança dos teus ficheiros HTML originais antes de fazeres quaisquer alterações para teres uma rede de segurança no caso de algo correr mal.

Alojamento gerido para WordPress a partir de 11$/mês

Paga apenas pelos recursos que utilizas com os planos pay-as-you-go e obtém excelentes serviços de alojamento na nuvem com vantagens adicionais. Sem custos ocultos.

Experimenta de graça

Métodos de conversão de HTML para WordPress

Existem várias formas de converter o teu site HTML para WordPress. A escolha certa para ti dependerá de factores como o tempo disponível, o orçamento, os conhecimentos de programação e as preferências pessoais.

Método 1: Utilizar uma estrutura de temas do WordPress

A primeira opção é a mais técnica. Envolve a utilização do teu código existente como base para criar os ficheiros do tema WordPress a partir do zero.

1. Criar uma pasta de tema e ficheiros básicos

Para criares o teu tema, começa por criar uma nova pasta e dá-lhe o nome que quiseres para o teu tema. Depois, dentro desta pasta, cria cinco ficheiros: style.css, index.php, header.php, sidebar.php e footer.php.

Mantém estes ficheiros abertos no teu editor de código, porque os vais editar em breve. Se te sentires mais confortável, podes começar por criar estes ficheiros como ficheiros .txt e depois alterar as suas extensões para .php ou .css. Isto irá convertê-los automaticamente para os tipos de ficheiro corretos.

2. Copia o CSS existente para a folha de estilo do WordPress

Concentra-te no ficheiro CSS para começares a criar o teu tema. Se estiveres a mudar de outro site para o WordPress, copia o código CSS do teu site antigo e cola-o no ficheiro style.css que criaste. O CSS é crucial para o aspeto do teu site.

Adiciona o código CSS ao ficheiro style.css para aplicar o teu design. Isto fará com que o teu site WordPress apareça exatamente como pretendes.

/*
Nome do tema: Substitui pelo nome do teu tema.
URI do tema: O URI do teu tema
Descrição: Uma breve descrição.
Versão: 1.0
Autor: Tu
URI do autor: O endereço do teu sítio Web.
*/

Para completar o teu tema, adiciona as informações necessárias sobre o tema que estás a utilizar e inclui as linhas CSS restantes. Depois, guarda e fecha o ficheiro.

3. Separa o teu HTML existente

Agora, tens de dividir o teu documento HTML em diferentes secções, transformando cada uma dessas partes em ficheiros PHP.

Embora isto possa parecer complexo, apenas envolve copiar secções do teu documento HTML e colá-las em diferentes ficheiros PHP.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Site de teste</title>
<meta name="description" content="Descrição do sítio Web">
<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">Título do sítio Web</h1>
<nav>
<ul>
<li><a href="#">item de menu #1</a></li>
<li><a href="#">item de menu #2</a></li>
<li><a href="#">item de menu #3</a></li>
</ul>
</nav>
</header>
</div>

<div class="main-container">
<main class="main wrapper clearfix">
<artigo>
<header class="entry-header">
<h2 class="entry-title">Artigo</h2>
</header>
<p>Teste o texto aqui mesmo...</p>
<h2>Subtítulo</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
<h2>Um submarino</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
</article>
<p>
<h3>A barra lateral aqui</h3>
Etiam ullamcorper lorem dapibus velit suscipit ultrices. 
</aside>
</main> <!-- #main -->
</div> <!-- #main-container -->

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

Como podes ver, é um modelo HTML padrão que inclui um cabeçalho, uma barra lateral e um rodapé. O código que o acompanha é o seguinte:

Se o teu design for diferente, poderás ter de ajustar os passos. No entanto, o processo principal permanecerá o mesmo.

Para continuares a trabalhar no teu tema, abre o ficheiro index.html, que é o ficheiro principal do teu site HTML. Depois, olha para os ficheiros WordPress que acabaste de criar e copia o seguinte código para eles.

3.1. Cabeçalho.php

Tudo no teu ficheiro HTML, desde a área de conteúdo principal <main> ou <div class=”main”>, vai para este ficheiro.

Termina o código fechando </head> copia e cola <?php wp_head();?>. Isto é importante para que muitos plugins do WordPress funcionem corretamente.

<!doctype html>
 
 
 
 
 
 
 
 
 
 
 

 

 
Título do sítio Web
 
 
 

item 1 da navegação

item de navegação #2

item de navegação nº 3

3.2. Barra lateral.php

Todo o conteúdo da secção <aside> deve ser colocado neste ficheiro WordPress.

<p>
 
Barra lateral
 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. In semper consequat est, eu porta velit mollis nec. Curabitur posuere enim eget turpis feugiat tempor. Etiam ullamcorper lorem dapibus velit suscipit ultrices.
</aside>

3.3. Rodapé.php

O passo final é adicionar a informação do rodapé do final da barra lateral ao final do ficheiro. Depois disso, insere <?php wp_footer();?> imediatamente antes da etiqueta </body>, da mesma forma que wp_head foi adicionado no cabeçalho.

  
  
 

 
 
© 2019 O meu site imaginário
 
 
 
 
</html>

4. Liga os teus ficheiros header.php e index.php

Já adicionaste o ficheiro header.php, mas ainda precisas de fazer mais algumas coisas. Basicamente, tens de modificar a chamada na folha de estilos do HTML para corresponder ao formato padrão PHP do WordPress.

No ficheiro header.php, encontra a secção <head> e chama a folha de estilos. Faz algo parecido com isto:

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

Abre o ficheiro index.php recém-criado e vais encontrá-lo vazio. Agora, copia e cola o seguinte código neste ficheiro index.php:

<?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() ):?>
<secção class="entry-meta">
<p>Postado em <?php the_date();?> por <?php the_author();?></p>
</secção>
<?php endif; ?>
<section class="entry-content">
<?php o_conteúdo(); ?>
</secção>
<section class="entry-meta"><?php if ( count( get_the_category() ) ) : ?>
<span class="category-links">
Artigo publicado em: <?php echo get_the_category_list( ', ' ); ?>
</span>
<?php endif; ?></secção>
</article>
<?php endwhile; ?>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

Depois de concluíres estes passos, terás um tema WordPress baseado no teu site HTML original que está pronto para ser carregado no teu site WordPress.

5. Cria uma captura de ecrã e carrega o tema

Cria uma captura de ecrã que represente o aspeto do teu tema. Isto, juntamente com a informação no cabeçalho da tua folha de estilos, dará uma pré-visualização do teu site no painel de controlo do WordPress.

Para criares uma captura de ecrã para o teu tema, abre o teu site num browser e tira uma captura de ecrã. Corta a imagem para 880×660 pixels e guarda-a como screenshot.png. Depois, coloca esta captura de ecrã na tua pasta de temas. Agora, podes carregar o teu novo tema WordPress de duas formas.

O primeiro método consiste em utilizar o FTP para arrastar os ficheiros do tema diretamente para o diretório wp-content/themes. Para isso, não é necessário comprimir os ficheiros num formato zip. Utiliza simplesmente um cliente FTP como o FileZilla para mover a pasta para o diretório wp-content/themes.

Para carregares o teu tema, começa por comprimir toda a pasta do tema num ficheiro .zip. Depois, vai a Appearance → Temas no teu painel de controlo do WordPress.

Clica no botão Adicionar novo.

Clica no botão Carregar tema.

Clica em Escolher ficheiro e encontra o ficheiro .zip que criaste. Seleciona o ficheiro para que apareça no teu painel de controlo do WordPress.

Escolhe o ficheiro do tema e clica em Instalar agora. Isto instalará o tema no teu Web site WordPress.

Clica em Instalar agora depois de carregares o tema. O WordPress confirmará a instalação e mostrará uma mensagem de sucesso. Em seguida, clica no botão Activate (Ativar ) para ativar o novo tema no teu Web site.

Clica no botão Ativar após a instalação. O teu novo tema será agora listado como o tema ativo na lista Temas.

Método 2: Conversão manual através do tema filho

Tal como já foi feito anteriormente, em vez de começares com o teu site existente, podes utilizar um tema WordPress pré-desenhado como base. Vê como:

1. Escolhe um tema adequado

Escolhe um tema que corresponda ao teu design HTML. Procura um tema filho com um esquema e uma estrutura semelhantes aos do teu site atual.

2. Cria uma nova pasta

Terás de criar uma nova pasta de temas. Desta vez, dá à pasta o nome do tema principal em que o teu tema secundário se baseia, adicionando -child como sufixo.

Por exemplo, se o teu tema se chama inshal-wordpress-theme, a pasta deve chamar-se inshal-wordpress-theme-child. Certifica-te de que não existem espaços no nome da pasta.

3. Cria a folha de estilos

Em seguida, cria o ficheiro style.css dentro da pasta e adiciona estas linhas de código:

/*
Nome do tema: inshal-wordpress-theme-child
Tema URI: http://example.com/inshal-wordpress-theme-child/
Descrição: inshal-wordpress-theme Tema infantil
Autor: WPZOOM
Autor URI: http://example.com
Modelo: inshal-wordpress-theme
Versão: 1.0.0
Licença: GNU General Public License v2 ou posterior
Licença URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: uma coluna, barra lateral direita, cabeçalho flexível, pronto para acessibilidade, cores personalizadas, cabeçalho personalizado, menu personalizado, logotipo personalizado, estilo de editor, imagens em destaque, widgets de rodapé, formatos de post, suporte a idiomas rtl, sticky-post, opções de tema, comentários encadeados, pronto para tradução
*/

4. Cria o Functions.php e herda os estilos dos pais

Para utilizar um tema secundário com a folha de estilos e evitar uma página HTML sem estilo, tens de criar um ficheiro functions.php para herdar os estilos do tema principal.

Cria um novo ficheiro chamado functions.php na pasta do teu tema filho.

/*
Nome do tema: inshal-wordpress-theme-child
Tema URI: http://example.com/inshal-wordpress-theme-child/
Descrição: inshal-wordpress-theme Tema infantil
Autor: WPZOOM
Autor URI: http://example.com
Modelo: inshal-wordpress-theme
Versão: 1.0.0
Licença: GNU General Public License v2 ou posterior
Licença URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: uma coluna, barra lateral direita, cabeçalho flexível, pronto para acessibilidade, cores personalizadas, cabeçalho personalizado, menu personalizado, logotipo personalizado, estilo de editor, imagens em destaque, widgets de rodapé, formatos de post, suporte a idiomas rtl, sticky-post, opções de tema, comentários encadeados, pronto para tradução
*/

5. Ativa o tema infantil

Para ativar o teu tema filho, começa por comprimir a pasta do tema num ficheiro .zip. Em seguida, acede ao painel de controlo do WordPress, navega até Aparência → Temas e clica em Adicionar novo.

Clica no botão Escolher ficheiro e carrega o ficheiro .zip.

Depois de carregares o ficheiro .zip, clica no botão Activate (Ativar ).

Nota: Podes arrastar manualmente a pasta para o diretório wp-content/themes.

6. Ajusta o desenho

Para criar um site WordPress que se pareça com o teu site HTML original, o passo final é transferir manualmente o teu conteúdo HTML para o WordPress. Embora existam plug-ins que podem automatizar isso, eles podem não funcionar com as versões mais recentes do WordPress. Por isso, é mais seguro fazê-lo manualmente.

Método 3: Utilizar um plug-in para a conversão de temas

Para importares o teu site HTML para o WordPress, eis o método mais fácil:

1. Instala o plug-in de importação

• O primeiro passo é instalar o HTML Import 2 By Stephanie Leary.
• A forma mais simples de o fazer é ir a Plugins → Adicionar novo no teu painel de controlo do WordPress e procurar o plugin pelo nome.
• Clica em Instalar agora.
• Depois de concluída a instalação, ativa o plugin.

💡 A viso: O plugin pode não ser compatível com as versões mais recentes do WordPress. Não é atualizado há algum tempo. Testei-o com o WordPress 6.x e funcionou bem.

Ficheiros

• Introduz o caminho para onde copiaste os ficheiros existentes.
• Para redireccionamentos, introduz o teu URL antigo.
• Especifica o ficheiro predefinido para diretórios no site antigo, normalmente index.html.
• Introduz as extensões de ficheiro do conteúdo que pretendes importar.
• Se existirem diretórios do site antigo que não queiras importar, indica-os aqui.
• Para que o plugin utilize automaticamente os nomes dos teus ficheiros como novos URLs, marca a caixa apropriada.
• Isto é útil se os teus títulos forem longos, uma vez que o importador normalmente os utiliza para criar a slug.

Conteúdo

• Para configurar isto, seleciona a opção de etiqueta HTML na parte superior. Em seguida, configura a etiqueta nos três campos seguintes:
• Se o teu conteúdo estiver dentro de uma etiqueta como <div id=”main”>, introduz div no primeiro campo, id no segundo campo e main no terceiro campo.

Título e metadados

Esta parte é semelhante à parte do conteúdo anterior. No entanto, trata dos títulos das páginas.

• Começa por especificar como os títulos são marcados no teu modelo HTML para que o plugin os possa importar corretamente.
• Também podes filtrar elementos desnecessários, como o título do sítio, que é frequentemente incluído por predefinição nos temas do WordPress.
• Se os títulos estiverem dentro do conteúdo, podes dar instruções ao importador para os remover para evitar duplicações.
• As restantes definições permitem-te configurar as opções do WordPress para as novas páginas.

Campos personalizados

Se tiveres dados para adicionar aos campos personalizados, podes configurá-los aqui.

Categorias e etiquetas

Aqui, podes escolher categorias, etiquetas e tipos para o conteúdo que importaste. O plugin apresentará as taxonomias existentes no teu site para simplificar este processo.

Ferramentas

Este ecrã lista uma série de ferramentas úteis para importares com êxito de HTML para WordPress.

3. Inicia a importação

• Depois de terminares a configuração, guarda as definições.
• Clica no botão“Importar ficheiros“.
• Em seguida, escolhe se queres importar um diretório de ficheiros ou um único ficheiro para o qual tens de navegar,
• Depois carrega em Submeter.

E estás pronto!

Quando tudo estiver configurado, o teu site WordPress deve apresentar todo o conteúdo existente formatado pelo novo tema.

Resolução de problemas comuns

Durante o processo de conversão de HTML para WordPress, podes encontrar alguns problemas comuns. Apresentamos-te aqui alguns problemas potenciais e soluções:

1. Problemas com o caminho da imagem

Se as tuas imagens não estiverem a ser apresentadas corretamente, verifica novamente os caminhos das imagens nos teus ficheiros de tema do WordPress. Certifica-te de que são relativos ao diretório do tema.

2. Problemas de estilo CSS

Se os teus estilos CSS não forem aplicados corretamente, inspecciona os ficheiros CSS do tema para identificar quaisquer conflitos ou erros. Poderás ter de modificar ou substituir os estilos existentes.

3. Conflitos de plugins

Alguns plugins podem interferir com a funcionalidade do teu tema. Tenta desativar os plug-ins um a um para identificar o culpado e resolver o conflito.

4. Questões sobre a hierarquia dos modelos

Se a hierarquia de modelos do teu tema não estiver a funcionar como esperado, revê a documentação da hierarquia de modelos do WordPress e certifica-te de que os teus ficheiros de modelos são nomeados e colocados corretamente.

Resumo

Converter o teu sítio Web em HTML para um tema WordPress oferece muitas vantagens. Podes personalizá-lo facilmente e geri-lo de forma mais eficiente.

Segue os passos deste tutorial para transformares o teu design HTML estático num site WordPress dinâmico. Antes de começares, optimiza o teu código HTML, estrutura bem o teu conteúdo, concebe-o para diferentes tamanhos de ecrã e faz uma cópia de segurança do teu design.

Se tiveres problemas, consulta a nossa secção de resolução de problemas. Com um pouco de trabalho, podes criar um sítio Web WordPress bonito e funcional que mostra o teu negócio.