No início (da web) todos os sites foram feitos apenas com texto e HTML estático. Agora, porém, mais de 20 anos depois, a web é um lugar muito diferente. Os sites da web são muito mais complexos. Eles fornecem experiências mais ricas e agradáveis para os criadores e visitantes do site.
Isto é em grande parte graças a projetos de código aberto como o WordPress. Que, nos últimos dez anos mais ou menos, tem tido sucesso em sua missão principal de democratizar a publicação online (e muito mais no processo) para que qualquer pessoa com um WordPress instalado e o tema/plugins certos possa ter um site moderno com design e funcionalidade avançados. Sem codificação – nem mesmo HTML!-required.
É por isso que para usuários ávidos de WordPress como eu, é quase difícil acreditar que em 2018 alguém ainda possa estar operando um site HTML estático ao invés de um site WordPress com um tema e plugins. Mas o fato é que ainda há uma quantidade significativa de sites ativos somente em HTML por aí. (Ou HTML com um pouco de CSS.)
Granted, esses proprietários de sites podem ter boas razões para não atualizar ou converter. Talvez o conteúdo do site deles nunca mude e a simples formatação e design já existente seja útil? Ou talvez seja menos incómodo do que preocupar-se em manter um site WordPress actualizado? Ambas são razões válidas (entre outras). Primeiros exemplos de, “Não conserte o que não está quebrado”
No entanto, tenho a sensação de que estas podem não ser a principal razão de alguns (talvez muitos) não terem dado o salto. A mais óbvia é que eles simplesmente não sabem como converter seu site HTML em um site WordPress. Especialmente sem perder conteúdo ou precisar fazer formatação excessiva página por página.
Felizmente, como muitas vezes acontece com o WordPress, há uma série de maneiras de resolver este problema. Eu compilei algumas opções abaixo.
Subscrição ao nosso canal no Youtube
As suas opções para converter um site HTML estático para um site WordPress
Como você escolhe converter o seu site HTML estático em um site WordPress sem dúvida dependerá da sua preferência pessoal, do tempo desejado/ investimento monetário e do nível de habilidade com o código. Você terá que ser você a decidir qual é o melhor para você, mas com os resumos abaixo você deverá ser capaz de decidir rapidamente e pular diretamente 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 baseado no seu site HTML estático atual.
Isso exigirá que você entre no seu código. Você terá que acessar seu diretório atual do site via FTP e usar seu código existente como um ponto de partida. A partir daí, você precisará criar os arquivos necessários para um tema do WordPress e copiar bits de código do código do WordPress. Isto é bastante simples e direto se você tiver alguma experiência com HTML, CSS e um pouco de PHP.
2. Instale um tema pré-fabricado e simplesmente migre seu conteúdo.
Esta é provavelmente a melhor opção na interseção de simplicidade e valor. Assumindo que você já tem hospedagem para seu site atual, você só precisará gastar dinheiro se você optar por comprar um tema premium. O plugin que vamos usar para importar conteúdo está disponível gratuitamente no oficial do WordPress Plugin Repository.
3. Pagar para ter um serviço de conversão de HTML para WordPress recria seu site.
Esta é a solução mais fácil, pois não requer que você faça muito de tudo. No entanto, não vai fazer muito para familiarizá-lo com o WordPress e o custo vai variar, dependendo de quem você escolher para contratar. Eu não vou cobrir esta opção nas seções abaixo porque se esta é a rota que você está interessado, você pode simplesmente fazer uma busca rápida por provedores de serviços e eles vão cuidar do resto.
Preparando para conversão de HTML para WordPress
Não importa qual rota você decida tomar abaixo, há algumas coisas que você vai querer fazer antes de mergulhar em.
A primeira é escolher um plano de hospedagem. Você vai querer olhar as opções que estão lá fora e decidir sobre um pacote que melhor se adapte às suas necessidades. Ou talvez você gostaria de criar uma instalação local do WordPress em seu lugar? Você sempre pode migrá-lo para um serviço de hospedagem mais tarde.
Após ter escolhido, você precisará instalar o WordPress e fazer login no WP Admin. Este é o ponto em que nossos dois caminhos possíveis dividem.
Convertendo seu site HTML estático para WordPress
Se seu objetivo não é apenas obter seu conteúdo do seu site HTML estático no WordPress, mas também duplicar seu design atual, isto significa que você precisará criar seu próprio tema personalizado. Felizmente, isso não é tão assustador quanto poderia parecer no início. Isso envolve apenas a criação de algumas pastas e arquivos, um pouco de copiar e colar, e depois carregar o resultado.
Você vai precisar de um editor de código como Sublime ou Notepad++ e acesso tanto ao diretório do seu site HTML quanto ao seu novo diretório de instalação do WordPress.
Passo 1: Crie uma nova pasta de temas e arquivos necessários
Na sua área de trabalho, crie uma nova pasta para manter seus arquivos de temas. Dê-lhe o nome que quiser que o seu tema seja nomeado.
Próximo, crie alguns ficheiros (que vão todos para a sua nova pasta de temas) no seu editor de código. Não faça nada com eles ainda. Apenas deixe-os abertos para edição posterior.
- Style.css
- Index.php
- header.php
- sidebar.php
- footer.php
Passo 2: Cópia do CSS existente na nova folha de estilo
Se você está procurando duplicar um design, isso provavelmente significa que você tem pelo menos algum CSS que você quer salvar. Então o primeiro arquivo que você vai querer editar é o seu arquivo Style.css.
Para começar, adicione o seguinte ao topo do seu arquivo.
/*Theme Name: Replace with your Theme's name.Theme URI: Your Theme's URIDescription: A brief description.Version: 1.0Author: YouAuthor URI: Your website address.*/
Após esta seção simplesmente cole o seu CSS existente abaixo. Salve e feche o arquivo.
Passo 3: Separe seu HTML atual
Antes de entrarmos no terceiro passo, deixe-me dar uma nota rápida sobre como o WordPress funciona. O 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 dizer ao WordPress qual parte do conteúdo do seu site deve ser exibida e onde.
Então, quando eu digo que vamos “cortar” seu HTML existente, o que estamos realmente fazendo é simplesmente cortar e colar partes do seu código existente nos diferentes arquivos que acabamos de criar, para que o WordPress saiba onde exibi-los.
Aqui vamos.
Primeiro, abra o arquivo index.html do seu site atual. Destaque tudo desde o topo do arquivo até a tag div class=”main” de abertura. Copie e cole esta seção no seu arquivo header.php, salve e feche.
Segundo, volte para o seu arquivo index.html. Destaque o elemento de lado class=”sidebar” e tudo que estiver dentro dele. Copie e cole esta secção no seu ficheiro sidebar.php, guarde e feche.
Terceiro, no seu ficheiro index.html seleccione tudo depois da sua barra lateral e copie e cole no seu ficheiro index.php, guarde e feche.
Finalmente, no seu ficheiro index.html, seleccione tudo o que resta (esta deve ser a secção de conteúdo principal) e cole no seu ficheiro index.php. Guarde, mas não feche ainda.
Pode fechar agora o seu ficheiro index.html e passar para os passos finais. Quase pronto!
Passo 4: Finalize o seu ficheiro index.php
De modo a finalizar o ficheiro index.php do seu novo tema você precisa de ter a certeza que pode chamar a outra secção (para além do conteúdo principal) que está alojada nos outros ficheiros que criou. Ou seja, junte novamente os elementos que acabámos de “cortar”.
No topo do seu ficheiro index.php, coloque a seguinte linha de php.
<?php get_header(); ?>
Então, no fundo do seu ficheiro index.php, coloque estas linhas de php.
<?php get_sidebar(); ?><?php get_footer(); ?>
E finalmente, temos de adicionar o que se chama The Loop. Esta é a parte principal do php que o WordPress usa para exibir o conteúdo do seu post para os visitantes. Então o passo final na criação do arquivo index.php do seu novo tema é adicionar o código abaixo dentro da seção de conteúdo.
<?php if ( have_posts() ) : ?><?php while ( have_posts() ) : the_post(); ?> <div <?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. O seu tema está agora terminado! Tudo o que resta é carregá-lo em seu site WordPress.
Passo 5: Carregue seu novo tema
Agora que você tenha criado seus arquivos de temas e os tenha todos armazenados dentro de sua nova pasta de temas, você vai precisar acessar seu novo diretório de instalação do WordPress.
Colocar sua nova pasta de temas dentro de /wp-content/themes/. Depois navegue de volta para WP Admin > Aparência > Temas e o seu novo tema criado deve aparecer lá. Vá em frente e ative-o!
Tudo o que falta fazer neste momento é preencher o seu novo site WordPress com o conteúdo do seu antigo site. Siga junto com a seção abaixo (pulando a parte sobre o uso de um tema pré-criado) para ver como isso é feito.
Usando um Tema Pré-Criado para WordPress e Importando Conteúdo HTML
Se os passos acima parecerem muito intensos ou demorados para você, então fique tranquilo, há outra maneira. Ao invés de converter qualquer design com o qual você esteja trabalhando agora mesmo em um tema WordPress, você pode tirar proveito de qualquer um dos milhares de temas disponíveis no mercado WordPress mais amplo.
Existem temas livres e há temas premium. Antes de decidir qual é o melhor para você, você pode querer ler sobre quais temas são projetados para atender às suas necessidades e navegar por categoria temática aqui no Elegant Themes e em outros lugares.
Após ter escolhido um tema que você gosta (e ter seu pacote de arquivos compactados baixado) você vai querer voltar para WP Admin > Aparência > Temas > Adicionar novo e instalar/ativar seu novo tema do WordPress.
Após isso ser feito, você terá um novo site do WordPress e um novo tema – mas pouco mais. Quando você pré-visualizar seu site, ele estará vazio de conteúdo e provavelmente parecerá um pouco chato. Tudo bem, porque a seguir vamos importar o conteúdo do seu antigo site.
Em WP Admin vá para Plugins > Add New e procure por um plugin chamado HTML Import 2 por Stephanie Leary. Uma vez que este plugin esteja 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!
Após isto você terá todo o seu conteúdo antigo vivendo no WordPress e formatado pelo seu novo tema. Ou, se você criou seu próprio tema acima, seu site deve ser parecido com ele antes – apenas rodando no WordPress.
Em Conclusion
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. Seja bem-vindo! É um lugar divertido com muitos desenvolvedores, designers, bloggers, DIYers e mais – todos construindo, jogando e criando com temas/plugins para WordPress e WordPress.
Se você “pegou o bug do WordPress” o site oficial do WordPress.org está cheio de temas úteis, plugins e outros recursos. Se você gostaria de ajustar ainda mais seus arquivos de temas, explore o Codex para obter dicas, truques e variações aparentemente intermináveis.