Ao longo do ano, uma das melhores plataformas de código aberto como o WordPress ganhou enorme popularidade em termos de seu CMS simples e flexível, que se tornou muito mais fácil para o usuário. Já se foi o tempo em que você precisava de um mestre de codificação para construir seu site de negócios.
Felizmente, agora vivemos em uma era altamente tecnológica, onde existem dezenas de frameworks que nos fornecem excelentes plataformas de sistema de gerenciamento de conteúdo.
O principal é, claro, o WordPress.
Nós, como uma empresa de desenvolvimento de software, recebemos muitos pedidos onde os clientes querem mudar de HTML para WordPress para ter um melhor controle do CMS.
Então, neste blog, vamos deixar você saber como você pode converter seu site HTML estático para WordPress, você deve ter algum conhecimento básico de HTML, CSS e PHP.
Existem três maneiras de fazer essa conversão, mas neste blog, vamos mostrar a maneira manual de fazer isso para que você tenha uma ideia de quais mudanças você fez e como elas estão sendo refletidas.
1. Conversão manual do HTML para WordPress
2. Converter HTML por meio de um tema filho do WordPress
3. Importação de conteúdo HTML para WordPress usando um plug-in
Conversão manual de HTML para WordPress
Etapa 1: crie uma nova pasta de tema e arquivos básicos
A primeira coisa que você deve fazer é criar uma pasta de temas em sua área de trabalho ou em qualquer diretório de seu computador. Você pode nomeá-lo como quiser que o seu tema seja chamado.
Depois disso, vá para qualquer um dos seus editores de código e crie alguns arquivos de texto e nomeie-os da seguinte maneira:
e) estilo.css
ii) index.php
iii) cabeçalho.php
iv) barra lateral.php
v) rodapé.php
Etapa 2: Copiar CSS existente para uma nova folha de estilo
Para a próxima etapa; você terá que copiar a codificação CSS do seu site HTML existente em uma folha de estilo do WordPress.
Agora, antes de copiar o CSS HTML, abra style.css e cole o seguinte:
/*Theme Name: Twenty TwentyTheme
URI: https://wordpress.org/themes/twentytwenty
Author: John DoeAuthor
URI: https://wordpress.org/
Description: Twenty Twenty
themeVersion: 1.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Tags: black, orange, brown, white, tan, yellow, light, one-column, two-columns, right-sidebar, flexible-width, custom-header, custom-menu, editor-style, featured-images, microformats, post-formats, rtl-language-support, sticky-post, translation-ready
Text Domain: twentytwenty*/Este é o cabeçalho da folha de estilo, você terá que copiar toda a linha de código incluindo o comentário /*…..*/
A seguir, a descrição dos detalhes desta linha de código:
✔Nome do Tema: Isso pode ser o que você quiser
✔URL do tema: Endereço do site ou informações da página inicial
✔Autor: Pode ser o seu nome
✔URL do autor: Pode ser como está conforme adicionamos acima ou você pode adicionar um link para sua página inicial ou o que quer que faça sentido.
✔Descrição: Opcional, pode ser como está ou você pode adicionar qualquer descrição que desejar. Ele aparecerá no backend do WordPress.
✔Versão: É basicamente a sua versão do tema. Como não é um tema de publicação, você pode começar com 1.0 aqui.
✔Licença, URI de licença e tags: Obrigatório apenas se você for enviar o tema para o diretório do WordPress para que outros possam usar. Se você está guardando para si mesmo, não se preocupe com isso. Mantenha como está.
Quando terminar de adicionar o acima em seu arquivo style.css; copie e cole o CSS do seu site HTML existente neste arquivo. Salve o arquivo e feche-o.
Relacionado: Melhores plug-ins WordPress para aprimoramento de sites
Etapa 3: separe seu HTML existente
No WordPress, para acessar as informações do banco de dados, o PHP é usado. Como resultado, seu código HTML existente que reside em index.html deve ser separado em partes, para que o CMS do WordPress possa combiná-los corretamente.
Para conseguir isso, você terá que copiar partes do documento HTML original em arquivos diferentes que você criou na primeira etapa.
Primeiro, abra o arquivo index.html, depois vá até o arquivo WordPress recém-criado:
cabeçalho.php:
Desde o início do seu arquivo HTML até a área de conteúdo principal, ou seja, ou vai para o arquivo header.php. Então, copie e cole o código logo antes de mostrar copiar e colar a seguir
Sidebar.php
Verifique novamente seu arquivo index.html; encontrar e pesquisar ou e observe a tag de fechamento . Agora, tudo que está dentro desta seção, copie e cole dentro do arquivo sidebar.php; salvar e fechar.
footer.php
Agora, tudo o que resta do final da barra lateral (ou seja, ) até o final do arquivo index.html deve haver informações de rodapé. Isso será adicionado a este arquivo. Depois disso, antes do colchete de fechamento tag copiar e colar a seguir
Salve o arquivo
Quando terminar de usar o arquivo index.html, salve e feche-o também
Leia também: Deve usar a extensão Magento 2 para funcionalidade adicional
Etapa 4: finalize seus arquivos header.php e index.php para WordPress
Agora, os passos finais que você deve seguir para header.php e index.php são os seguintes formatos:
Procure o link em seu seção semelhante a esta:
<link rel=”stylesheet” href=”style.css”>Substitua o link pelo link abaixo:
<link rel=”stylesheet” href=”<?php
echo get_template_directory_uri(); ?>/style.css” type=”text/css” media=”all” />Agora salve e feche o arquivo header.php.
Em seu arquivo index.php; digite o seguinte, exatamente assim:
<?phpget_header(); ?>
<?php get_sidebar(); ?>
<?php get_footer(); ?>Certifique-se de que o espaço entre as duas linhas de código acima esteja como está, uma após a outra. Isso ocorre porque você irá colar o código de loop abaixo (https://codex.wordpress.org/The_Loop)
O ciclo começa aqui:
<?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><!--endpost 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><!--endentry-->
<div class="post-footer">
<div class="comments">
<?php comments_popup_link( 'Leave a Comment', '1 Comment', '% Comments'); ?>
</div>
</div><!--endpost footer-->
</div><!--endpost-->
<?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><!--endnavigation-->
<?php else: ?>
<?php endif; ?>Depois disso, salve e feche o arquivo. O tema básico está pronto.
Etapa 5: envie seu novo tema
Para fazer upload do seu tema, execute as seguintes etapas:
1. Crie um arquivo zip da sua pasta
2. Vá para o WordPress
3. Selecione Aparência-> Tema-> clique em Adicionar Novo no topo
4. Clique em Carregar tema.
5. Faça upload do seu arquivo zip e clique em Instalar agora.
Depois de fazer isso, você pode ativar facilmente o seu tema.
Estas são as etapas básicas que devem ser executadas se você estiver mudando seu site HTML para um tema WordPress manualmente. Embora ainda haja muito trabalho a ser feito para migrar completamente o conteúdo de HTML para WordPress em termos de páginas.
Se você seguiu nosso blog como um guia para a migração de HTML para WordPress, seja bem-vindo a bordo, você se juntou a uma das maiores comunidades de código aberto CMS do mundo.
Serviços de desenvolvimento web
Você está procurando uma empresa de desenvolvimento web confiável? Nossos desenvolvedores web altamente qualificados nos permitem entregar serviços de desenvolvimento web orientados a resultados. Entre em contato com nossa equipe para entender como podemos ajudá-lo a atingir seus objetivos de negócios.