Convertendo sites HTML em sites WordPress

No início (da web) todos os sites eram feitos com nada além de texto e HTML estático. Agora, porém, mais de 20 anos depois, a web é um lugar muito diferente. Os sites são muito mais complexos. Eles fornecem experiências mais ricas e agradáveis ​​para criadores de sites e visitantes.

Isso se deve em grande parte a projetos de código aberto como o WordPress. Que, nos últimos dez anos ou mais, teve sucesso em sua missão principal de democratizar a publicação online (e muito mais no processo) para que qualquer pessoa com uma instalação do WordPress e o tema / plug-ins certos possa ter um site moderno com design avançado e funcionalidade. Nenhuma codificação - nem mesmo HTML! - necessária.

É por isso que para usuários ávidos de WordPress como eu, é quase difícil acreditar que em 2018 alguém ainda possa operar um site HTML estático em vez de um site WordPress com um tema e plug-ins. Mas o fato é que ainda há uma quantidade significativa de sites ativos apenas em HTML por aí. (Ou HTML com um pouco de CSS.)

É verdade que esses proprietários de sites podem ter bons motivos para não atualizar ou converter. Talvez o conteúdo do site nunca mude e a formatação e design simples já implementados sejam úteis? Ou talvez seja menos incômodo do que se preocupar em manter um site WordPress atualizado? Ambos são motivos válidos (entre outros). Exemplos principais de “Não conserte o que não está quebrado”.

No entanto, tenho a sensação de que essa pode não ser a razão principal de alguns (talvez muitos) não terem dado o salto. O mais óbvio é que eles simplesmente não sabem como converter seu site HTML em um site WordPress. Especialmente sem perder conteúdo ou precisar fazer uma formatação excessiva página a página.

Felizmente, como costuma ser o caso com o WordPress, há várias maneiras de resolver esse problema. Compilei algumas opções abaixo.

Inscreva-se no nosso canal no Youtube

Suas opções para converter um site HTML estático em um site WordPress

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. Você terá que decidir o que é melhor para você, mas com os resumos abaixo você deve ser capaz de decidir rapidamente e pular direto para as informações mais relevantes neste post para sua situação específica.

Existem três opções principais:

1. Crie manualmente um tema WordPress com base em seu site HTML estático atual.

Isso exigirá que você entre em seu código. Você terá que acessar o diretório do site atual via FTP e usar o código existente como ponto de partida. A partir daí, você precisará criar os arquivos necessários para um tema do WordPress e copiar trechos de código do códice do WordPress. Isso é bastante simples e direto se você tiver alguma experiência com HTML, CSS e um pouco de PHP.

2. Instale um tema predefinido e simplesmente migre seu conteúdo.

Esta é provavelmente a melhor opção na intersecção de simplicidade e valor. Supondo que você já tenha hospedagem para seu site atual, você só precisará gastar dinheiro se optar por comprar um tema premium. O plug-in que usaremos para importar conteúdo está disponível gratuitamente no repositório oficial de plug-ins do WordPress.

3. Pagar para ter um serviço de conversão de HTML para WordPress recriar seu site.

Esta é a solução mais fácil, pois não requer que você faça muita coisa. No entanto, isso não ajudará muito a se familiarizar com o WordPress e o custo irá variar dependendo de quem você escolher contratar. Não vou cobrir esta opção nas seções abaixo porque se esta é a rota de seu interesse, você pode simplesmente fazer uma busca rápida por prestadores de serviço e eles cuidarão do resto.

Preparação para a conversão de HTML para WordPress

Não importa qual rota você decida seguir abaixo, há algumas coisas que você deve fazer antes de mergulhar.

O primeiro é escolher um plano de hospedagem. Você vai querer examinar as opções disponíveis e decidir sobre o pacote que melhor se adapta às suas necessidades. Ou talvez você queira criar uma instalação local do WordPress em vez disso? Você sempre pode migrá-lo para um serviço de hospedagem posteriormente.

Depois de escolher, você precisará instalar o WordPress e fazer login no WP Admin. Este é o ponto em que nossos dois caminhos possíveis se dividem.

Convertendo manualmente seu site HTML estático para WordPress

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 próprio tema personalizado. Felizmente, isso não é tão assustador quanto pode parecer à primeira vista. 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.

Etapa 1: crie uma nova pasta de tema e arquivos necessários

Em sua área de trabalho, crie uma nova pasta para armazenar seus arquivos de tema. Dê o nome que quiser para o seu tema.

Em seguida, crie alguns arquivos (que vão todos para sua nova pasta de tema) em seu editor de código. Não faça nada com eles ainda. Apenas deixe-os abertos para futuras edições.

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

Etapa 2: copie o CSS existente para uma nova folha de estilo

Se você está 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 no início do seu arquivo.

/*
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.
*/

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

Etapa 3: separe seu HTML atual

Antes de entrarmos na etapa três, deixe-me dar uma nota rápida sobre como o WordPress funciona. WordPress usa PHP para chamar e recuperar pedaços de dados de seu banco de dados subjacente. Cada arquivo que estamos usando neste pequeno tutorial é projetado para informar ao WordPress qual parte do conteúdo do seu site deve ser exibida e onde.

Então, quando digo que vamos "cortar" o seu HTML existente, o que estamos realmente fazendo é simplesmente recortar e colar partes do seu código existente nos diferentes arquivos que acabamos de criar, para que o WordPress saiba onde exibir eles.

Aqui vamos nós.

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.

Em segundo lugar, 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.

Terceiro, em seu index.html selecione tudo após sua barra lateral e copie e cole em seu arquivo footer.php , salve e feche.

Finalmente, 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!

Etapa 4: finalizar seu 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. Ou, em outras palavras, junte os elementos que acabamos de “cortar”.

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(); ?>

E, finalmente, temos que adicionar o que é chamado de 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(); ?>
  <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
    <div class="post-header">
       <div class="date"><?php the_time( 'M j y' ); ?></div>
       <h2><a href="<?php the_permalink(); ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
       <div class="author"><?php the_author(); ?></div>
    </div><!--end post header-->
    <div class="entry clear">
       <?php if ( function_exists( 'add_theme_support' ) ) 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><!--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 class="alignright"><?php previous_posts_link( 'Newer Entries' ); ?></div>
    </div><!--end navigation-->
<?php else : ?>
<?php endif; ?>

Salve seu index.php e feche. Seu tema está concluído! Tudo o que resta é fazer o upload para o seu site WordPress.

Etapa 5: envie seu novo tema

Agora que você criou seus arquivos de tema e os tem armazenados em sua nova pasta de temas, você precisará acessar o diretório de instalação do novo WordPress.

Coloque sua nova pasta de tema dentro de / wp-content / themes / . Em seguida, navegue de volta para WP Admin> Aparência> Temas e seu tema recém-criado deve aparecer lá. Vá em frente e ative-o!

Tudo o que resta a fazer neste ponto é preencher seu novo site WordPress com o conteúdo do seu site antigo. Siga a seção abaixo (pulando a parte sobre o uso de um tema predefinido) para ver como isso é feito.

Usando um tema WordPress pré-criado e importando conteúdo HTML

Se as etapas acima parecerem muito intensas ou demoradas para você, fique tranquilo, há outra maneira. Em vez de converter qualquer design com o qual esteja trabalhando agora em um tema WordPress, você pode aproveitar qualquer um dos milhares de temas disponíveis no mercado WordPress mais amplo.

Existem temas gratuitos e existem temas premium. Antes de decidir qual é o melhor para você, leia sobre quais temas são projetados para atender às suas necessidades e navegue por categoria de tema aqui em Elegant Themes e em outros lugares.

Depois de escolher um tema que você gosta (e ter seu pacote de arquivo compactado baixado), você vai querer voltar para WP Admin> Aparência> Temas> Adicionar novo e instalar / ativar seu novo tema WordPress.

Depois de fazer isso, você terá um novo site e tema WordPress - mas pouco mais. Quando você visualiza seu site, ele estará vazio de conteúdo e provavelmente terá uma aparência meio chata. Tudo bem, porque a seguir vamos importar o conteúdo do seu site antigo.

Em WP Admin, acesse Plugins> Add New e procure por um plugin chamado HTML Import 2 de Stephanie Leary. Assim que este plugin estiver instalado e ativado, siga seu prático guia do usuário para importar todo o seu diretório de páginas HTML. Completo com imagens!

Depois disso, você terá todo o seu conteúdo antigo no WordPress e formatado de acordo com o seu novo tema. Ou, se você criou seu próprio tema acima, seu site deve se parecer com o que era antes - apenas rodando em WordPress.

Para concluir

Se você usou este post como um guia para migrar seu site para o WordPress, então você acabou de se juntar a uma das maiores comunidades de código aberto do mundo. Receber! É um lugar divertido com muitos desenvolvedores, designers, blogueiros, DIYers e muito mais - todos construindo, jogando e criando com WordPress e temas / plug-ins do WordPress.

Se você “detectou o bug do WordPress”, o site oficial do WordPress.org está repleto de temas úteis, plug-ins e outros recursos. Se você quiser ajustar ainda mais seus arquivos de tema, explore o Codex para obter dicas, truques e variações aparentemente intermináveis.

E, claro, esperamos que você continue para bater um papo nos comentários abaixo e se inscrever para mais postagens no blog no futuro.

Miniatura do artigo via Max Griboedov / shutterstock.com