Como Converter HTML Site em WordPress Tema Negócios

Como Converter HTML Site em WordPress Tema Negócios

Muitas empresas ainda dependem de simples sites em HTML para a sua presença online. Esses sites HTML geralmente são estáticos, o que significa que você precisará editar o código para alterar até mesmo um pequeno detalhe no site. Para evitar isso, no entanto, você pode converter seu site HTML para WordPress.

neste tutorial, ensinarei como converter HTML em um tema de negócios do WordPress. Isso mantém todos os elementos HTML intactos e oferece a flexibilidade do WordPress para personalizar qualquer elemento facilmente.

se você está familiarizado com HTML e WordPress, então este tutorial é bom para você. Se você é um novato, tente fazer isso com um site fictício em seu localhost como o XAMPP.

• Conversão de Site em HTML para WordPress
• Que o WordPress arquivos que você precisa
• Configurar CSS, JavaScript e Imagens
• Adicionar funções do WordPress para adicionar a funcionalidade

Conversão de Site HTML para Tema WordPress

Para este tutorial, eu peguei um free HTML de negócios tema a partir de aqui. As técnicas permanecerão as mesmas ao converter qualquer tema de negócios. Se você tiver dúvidas sobre o tema do seu negócio, basta deixar um comentário ou um e-mail, e terei prazer em responder.

vamos seguir em frente. Primeiro, dê uma olhada no seu tema HTML e marque os elementos de cabeçalho, corpo principal e rodapé.

cabeçalho: o cabeçalho incluirá a parte superior da seção.

> Corpo Principal: É uma longa página, então eu zoom para tirar uma screenshot, mas toda a parte central é incluído no corpo principal.

Rodapé: O rodapé secção irá incluir a parte inferior.

Passo 1: Pré-requisitos

espero que você já tenha o WordPress instalado em seu localhost como o XAMPP (ou seja, seu computador). Caso contrário, já cobrimos um guia detalhado para ajudá-lo a instalar e configurar o WordPress localmente.

Passo 2: Crie sua pasta de tema

para este tutorial, estou usando o XAMPP e meu site WordPress está instalado na pasta htdocs. Para criar um tema WordPress, você precisa acessar sua pasta Temas e criar uma nova pasta.
agora, abra a pasta XAMPP > htdocs > pasta WordPress (no meu caso, está testando) > wp-content > temas.

na pasta Temas, você verá todos os seus temas WordPress instalados. Crie uma nova pasta e nomeie seu tema.

Passo 3: Criar Arquivos PHP

A recém-criada pasta de tema está vazio, e é necessário criar alguns arquivos para torná-lo funcional. Para isso, você precisa iniciar seu editor de código (VS Code) e abrir toda a pasta de temas do WordPress (no meu caso, farhan-wordpress-theme).

agora crie os seguintes arquivos essenciais do WordPress para organizar melhor o seu tema.

1. estilo.css (contém detalhes do tema e arquivos CSS)
2. índice.php (serve o conteúdo principal se outros arquivos opcionais não forem declarados)
3. cabeçalho.php (contém os elementos de cabeçalho do tema)
4. rodapé.php (contém os elementos de rodapé do tema)
5. funções.php (contém funções que no tema WordPress)

Passo 4: Copie as pastas CSS, imagens e JavaScript (JS)

do seu tema HTML (baixado acima), copie a pasta assets (pastas CSS, JS e imagens) para a sua nova pasta de temas do WordPress.

Depois de se mudar para a sua nova pasta do tema WordPress, ele será parecido com este:

Passo 5: Activar um Novo Tema WordPress

Agora, você adicionou o importante pastas que são necessárias para qualquer tema do wp. Em seguida, abra seu site WordPress em seu navegador e faça login no seu Painel. Navegue até Aparência > temas e você verá que seu novo tema foi adicionado a esta seção.

Este tema parece vazio. Para adicionar as informações e o banner para o tema recém-criado, abra seu estilo.arquivo css (criado anteriormente) e cole o seguinte código e salve-o (ctrl+s).

/*Theme Name: Farhan WordPress ThemeAuthor: FarhanDescription: Convert HTML to WordPress theme.Version: 1.0*/

para o banner, você precisa adicionar um arquivo de imagem à sua nova pasta de tema. O tamanho da imagem deve ser de 800 por 600 e o nome da imagem deve ser captura de tela (formato png).

depois de adicionar a captura de tela.arquivo png, atualize seu painel wp-admin e o banner da imagem aparecerá.

Agora, você pode visualizar as informações do tema ao clicar no banner.

em seguida, basta clicar em “Ativar”.

Passo 6: Converter Código HTML no Cabeçalho, Índice e Rodapé

O cabeçalho, rodapé e corpo principal são marcados com comentários HTML para facilmente adicionar ao seu PHP WordPress e converter o código.

Agora copie o código do cabeçalho do Índice.html do tema baixado no cabeçalho.arquivo php que você criou na pasta Temas do WordPress. Você precisa copiar de <!DOCTYPE html > até < / header> e salve-o.

da mesma forma, Copie sobre o rodapé e os elementos do corpo principal do Índice.html em rodapé.php e índice.php, respectivamente.

para o rodapé, Copie do rodapé< > (no meu caso, há um nome de classe definido na tag do rodapé, portanto, não fique confuso) até </html> no rodapé.arquivo php e salve-o.

em seguida, copie todo o código depois de </cabeçalho> marca e o <rodapé> índice.php e salve-o.

Adicionar função do WordPress get_header() na parte superior e get_footer() no final do índice.arquivo php.

o get_header () é uma função interna que chama no cabeçalho.php e da mesma forma, get_footer() é uma função que chama rodapé.pai.

adicione o seguinte código na parte superior do Índice.arquivo php e salve-o.

<?php get_header(); ?>

Para chamar um rodapé, inserir o seguinte código no final do índice.código php e salve-o.

<?php get_footer(); ?>

Agora, visite o seu site, e você verá algo como isto.

Passo 7: Configuração de CSS

O fato de que o tema parece estranho é porque os arquivos CSS não são aplicadas para o tema.

você já copiou a pasta CSS do tema HTML para a pasta Tema WordPress. Agora, você precisa chamar esses arquivos CSS para concluir a aparência do tema.

lembre — se de que os nomes de seus arquivos CSS podem diferir-portanto, verifique novamente antes de realizar este processo.

você encontrará suas folhas de estilo CSS no cabeçalho.arquivo php, portanto, você precisa procurar por “rel=”stylesheet” ” CTRL+f.

Depois disso, remova o Google font folhas de estilo, porque não precisamos delas. Agora, eu só preciso registrar a folha de estilo CSS real, ou seja, <link rel = “folha de estilo”href=” assets/css/style-starter.css”>.

o WordPress não entende a estrutura regular da folha de estilo CSS; é por isso que preciso enfileirar e registrar a folha de estilo CSS. Vá para as funções.arquivo php e adicione o seguinte código.

<?phpfunction add_css(){ wp_register_style('first', get_template_directory_uri() . '/assets/css/style-starter.css', false,'1.1','all'); wp_enqueue_style( 'first');}add_action('wp_enqueue_scripts', 'add_css');

o wp_register_style ajudará você a registrar sua folha de estilo CSS.

o get_template_directory_uri (). ‘/href ‘ é usado para obter o caminho atual do diretório do modelo. Ele concatenará o caminho atual com o respectivo arquivo. Então, aqui, você precisa definir a localização do seu arquivo CSS (href). Você pode ver como eu defini o caminho desse arquivo CSS: get_template_directory_uri() . ‘/assets / css / style-starter.css’.

agora, podemos remover o link da folha de estilo CSS do cabeçalho.arquivo php e substituí-lo com o seguinte código e salvar o arquivo.

<?php wp_head(); ?>

o wp_head () é um gancho WordPress essencial que é definido sob a seção <head> </head> do cabeçalho.pai.

Quando você visitar o seu site WordPress, você irá notar que os arquivos CSS são, na verdade, enfileirados para o seu novo tema WordPress, mas ainda assim, o projeto não está em ordem. É porque você ainda não configurou os scripts JS.

No cabeçalho.php, tenho uma folha de estilo CSS e registrei-a apenas em funções.pai. Mas e se você tiver várias folhas de estilo? Nesse caso, você precisa definir wp_register_style() para cada folha de estilo. Não te preocupes! Você pode dar um exemplo da próxima etapa, onde tenho vários scripts JS. O processo é o mesmo, então ele irá limpar suas consultas e ajudá-lo a entender como você fará esse trabalho.

Passo 8: Configure JavaScript

o tema HTML com o qual você está trabalhando está usando JavaScript e no rodapé.arquivo php, arquivos JavaScript já estão sendo chamados no formato HTML. Para executar esses arquivos JS, tudo que você precisa fazer é seguir as mesmas ações que você executou na etapa anterior.

abra o rodapé.arquivo php e procure por “< script src = ” por “CTRL + f”. Isso o ajudará a encontrar todos os arquivos JS que você possui. No meu caso, eu tenho cinco, e aqui eu preciso registrar e enqueue todos eles.

em seguida, você precisa abrir suas funções.arquivo php e cole o seguinte código:

function add_script(){ wp_register_script('js-script', get_template_directory_uri() . '/assets/js/jquery-3.3.1.min.js', array ( 'jquery' ), 1.1, true); wp_enqueue_script( 'js-script'); wp_register_script('change', get_template_directory_uri() . '/assets/js/theme-change.js', array ( 'jquery' ), 1.1, true); wp_enqueue_script( 'change'); wp_register_script('popup', get_template_directory_uri() . '/assets/js/jquery.magnific-popup.min.js', array ( 'jquery' ), 1.1, true); wp_enqueue_script( 'popup'); wp_register_script('carousel', get_template_directory_uri() . '/assets/js/owl.carousel.js', array ( 'jquery' ), 1.1, true); wp_enqueue_script( 'carousel'); wp_register_script('bootstrap', get_template_directory_uri() . '/assets/js/bootstrap.min.js', array ( 'jquery' ), 1.1, true); wp_enqueue_script( 'bootstrap');}add_action('wp_enqueue_scripts', 'add_script');

você pode ver que a estrutura de código é a mesma que você fez anteriormente na parte de configuração CSS. Mas aqui, você usará wp_register_script em vez de style. Você registra e enqueue cada arquivo JS na mesma função.

Agora, você pode remover todos os links de script JS (eu tenho cinco) do rodapé.arquivo php, em seguida, cole a seguinte linha de código no final do código (acima </body> tag) e salve o arquivo.

<?php wp_footer(); ?>

Agora abra seu site no seu navegador, e você irá notar que o novo tema WordPress está funcionando bem, mas ainda assim, ele tem algumas imagens em falta.

Passo 9: Configurar Imagens

Este processo é simples, e aqui, você precisa definir o caminho das imagens.

primeiro, abra seu índice.arquivo php e procure por “< img src = ” por “CTRL + f”. Isso o ajudará a encontrar todos os arquivos de imagem que você possui. No meu caso, eu tenho oito, e aqui eu preciso do caminho para todos eles.

Para dar um caminho para imagens; adicione o seguinte código PHP dentro de src marcas e salve o arquivo.

<img src="<?php echo get_template_directory_uri().'/assets/images/p1.jpg'; ?>" alt="" class="img-fluid radius-image" /><img src="<?php echo get_template_directory_uri().'/assets/images/p2.jpg'; ?>" alt="" class="img-fluid radius-image" /><img src="<?php echo get_template_directory_uri().'/assets/images/p3.jpg'; ?>" alt="" class="img-fluid radius-image" /><img src="<?php echo get_template_directory_uri().'/assets/images/p4.jpg'; ?>" alt="" class="img-fluid radius-image" /><img src="<?php echo get_template_directory_uri().'/assets/images/p5.jpg'; ?>" alt="" class="img-fluid radius-image" /><img src="<?php echo get_template_directory_uri().'/assets/images/p6.jpg'; ?>" alt="" class="img-fluid radius-image" />

Agora, o tema será semelhante ao HTML tema e buscar todas as imagens.

mas, não terá recursos do WordPress, como alterar o título do site e o menu de navegação do WordPress.

Passo 10: habilite o título personalizado no WordPress

se você entrar no painel de administração do WordPress e alterar o título do site, ele não afetará o título do site. Para habilitar esse recurso, você pode usar a função integrada do WordPress bloginfo() com o parâmetro “nome” entre as tags de Título no cabeçalho.arquivo php e salve o arquivo.

<?php bloginfo( 'name' ); ?>

E, da mesma forma, você precisa usar o WordPress built-in função bloginfo() com o parâmetro “nome” entre o h1 tags no cabeçalho.arquivo php e salve o arquivo.

<?php bloginfo( 'name' ); ?>

Agora, o tema vai buscar o título que você defina Configurações de sistema -> Geral> Título do Site dentro do WP-admin painel.

Passo 11: Adicionar WordPress Menu de Navegação no WordPress

Quando você visita o WordPress admin do seu site e navegue à Aparência, você não vai ver uma opção de Menu.

você precisa habilitar o Menu primeiro adicionando a seguinte linha de código nas funções.arquivo php.

add_theme_support( 'menus' );

isso habilitará a funcionalidade do Menu em seu tema, mas precisa de alguma configuração para gerenciar menus do seu painel WP.

primeiro, Encontre onde está o menu de navegação do tema HTML e substitua-o usando a função integrada do WordPress wp_nav_menu(); você pode ler mais sobre esta função aqui.

neste tema, o cabeçalho.php contém o menu de navegação.

Localizar as seguintes linhas de código:

<ul class="navbar-nav mx-lg-auto"><li class="nav-item active"><a class="nav-link" href="index.html">Home <span class="sr-only">(current)</span></a></li><li class="nav-item @@about__active"><a class="nav-link" href="about.html">About</a></li><li class="nav-item @@contact__active"><a class="nav-link" href="contact.html">Contact</a></li></ul>

Substituir linhas acima com:

<?php wp_nav_menu( array( 'menu_class' => 'navbar-nav mx-lg-auto', 'container' => 'ul', )); ?>

o Seu WordPress menu aparecerá, então, no seu tema e adicione flexibilidade ao seu WordPress tema negócios.

Encerramento!

espero que este artigo tenha ajudado você a entender como converter um modelo ou site HTML em um tema WordPress. Este é um tutorial detalhado onde abordei onze etapas para demonstrar o processo.

se você tiver alguma dúvida e dúvida, sinta-se à vontade para perguntar a qualquer momento na seção de comentários abaixo.