Caixa do Autor


Discuta o seu projeto

Sobre nós

Somos o parceiro Microsoft Gold com presença nos Estados Unidos e na Índia. Somos um provedor de serviços de TI dinâmico e profissional que atende empresas e startups, ajudando-as a enfrentar os desafios da economia global. Oferecemos serviços na área de Consultoria e implementação de CRM, Desenvolvimento de aplicações, Desenvolvimento de aplicações mobile, Desenvolvimento Web e Desenvolvimento Offshore.

converter manualmente html para tema wordpress

Como converter HTML manualmente para um tema WordPress?

By Mayank Pandey / 5 de março de 2021

15 de março de 2021
Como converter HTML manualmente para um tema WordPress?

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

converter manualmente html para tema 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) sidebar.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:

header.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.

[sc name = "Desenvolvimento Web"]

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

converter manualmente html para tema 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) sidebar.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:

header.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.

3 2 votos
Artigo Avaliação
Subscrever
Receber por
convidado
0 Comentários
Comentários em linha
Ver todos os comentários
0
Adoraria seus pensamentos, por favor, comente.x