Tutorial do WordPress: Como criar um tema WordPress a partir de HTML (Parte 1)

  1. 1. Lendo atualmente: Tutorial do WordPress: Como criar um tema WordPress a partir de HTML (Parte 1)
  2. 2. Tutorial do WordPress: Como criar um tema do WordPress a partir de HTML (parte 2)
  3. 3. Uma introdução à anatomia de um tema WordPress

Se você começou com um site HTML (+ CSS), não precisa jogar tudo fora ao mudar para o WordPress. Você pode converter seu HTML em WordPress e executar seu site (agora mais poderoso) na plataforma dinâmica do WordPress.


Ou talvez não seja esse o caso. Talvez você esteja apenas se perguntando como converter o design HTML de um cliente em um tema WordPress completo. Ou talvez você queira aprender a programação básica do WordPress (+ PHP) do lado HTML mais familiar.

Qualquer que seja o motivo de você estar aqui hoje, este tutorial do WordPress apresentará o básico da criação de um tema WordPress a partir de HTML. Você pode seguir este guia para criar seu tema do zero ou acessar o Github e baixar o tema inicial do WPExplorer, que fornece uma “tela vazia” para criar seu tema com todos os arquivos e códigos de modelo necessários para começar. Portanto, se você é uma dessas pessoas que prefere aprender lendo o código, faça o download do tema inicial, pule o guia e veja como as coisas funcionam … Caso contrário, obtenha um editor de código (eu uso e recomendo Bloco de anotações++, ou SublimeText) e um navegador pronto, siga este guia simples até o final.

Nomeando seu tema WordPress

Primeiramente, precisamos atribuir um nome exclusivo ao seu tema, o que não é necessário se você estiver criando um tema apenas para o seu site. Independentemente disso, precisamos nomear seu tema para torná-lo facilmente identificável na instalação.

Pressupostos gerais neste momento:

  • Você tem sua folha de estilo index.html e CSS pronta.
  • Você tem uma instalação do WordPress funcionando com pelo menos um tema, por exemplo Vinte e quatorze
  • Você já criou uma pasta de temas na qual salvará seu novo tema do WordPress ��

Vamos voltar a nomear seu tema WordPress. Abra seu editor de código e copie e cole o conteúdo da sua folha de estilo em um novo arquivo e salve-o como style.css na sua pasta de temas. Adicione as seguintes informações na parte superior do style.css recém-criado:

/ *
Nome do tema: o nome do seu tema
URI do tema: URL do seu tema
Descrição: uma breve descrição do seu tema
Versão: 1.0 ou qualquer outra versão desejada
Autor: Seu nome ou nome de usuário do WordPress.org
Autor URI: seu endereço da web
Tags: Tags para localizar seu tema no repositório de temas do WordPress
* /

Não deixe de fora as tags de comentário (/ *… * /). Salve as alterações. Esta informação informa ao WordPress o nome do seu tema, o autor e outras coisas complementares. A parte importante é o nome do tema, que permite escolher e ativar seu tema através do painel do WP.

Dividindo seu modelo HTML em arquivos PHP

Este tutorial supõe ainda que você tenha seu modelo HTML organizado da esquerda para a direita: cabeçalho, conteúdo, barra lateral e rodapé. Se você tem um design diferente, pode ser necessário jogar um pouco com o código. É divertido e super fácil.

O próximo passo envolve a criação de quatro arquivos PHP. Usando seu editor de código, crie index.php, header.php, sidebar.php e footer.php e salve-os na pasta do tema. Todos os arquivos estão vazios neste momento, portanto, não espere que eles façam qualquer coisa. Para fins ilustrativos, estou usando os seguintes arquivos index.html e CSS stylesheet:

INDEX.HTML




Como converter um modelo HTML para o tema WordPress - WPExplorer



Esta é a seção do cabeçalho. Coloque seu logotipo e outros detalhes aqui.

Esta é a principal área de conteúdo.

E este é o rodapé.

CSS STYLESHEET

#wrap {margin: 0 auto; largura: 95%; margem superior: -10 px; altura: 100%;}
.cabeçalho {largura: 99,8%; borda: 1px sólido # 999; altura: 135px;}
.conteúdo {largura: 70%; borda: 1 px sólido # 999; margem superior: 5 px;}
.barra lateral {flutuar: direita; margem superior: -54px; largura: 29%; borda: 1px sólido # 999;}
.rodapé {width: 99.8%; border: 1px solid # 999; margin-top: 10px;}

Você pode pegar os dois códigos se não tiver nada para trabalhar. Apenas copie e cole no seu editor de código, salve-o, crie os quatro arquivos PHP que mencionamos e prepare-se para a próxima parte. Abra seu recém-criado (e vazio) header.php. Entre na sua instalação existente do WordPress, navegue até Aparência – >> Editor e aberto header.php. Copie todo o código entre o e cole-o no seu arquivo header.php. A seguir, o código que obtive do arquivo header.php no tema Twenty Fourteen:




<?php wp_title( '|', true, 'right' ); ?>




Então abra seu index.html e copie o código do cabeçalho (ou seja, o código no

) ao seu header.php logo abaixo do tags como mostrado abaixo:




<?php wp_title( '|', true, 'right' ); ?>







Esta é a seção do cabeçalho. Coloque seu logotipo e outros detalhes aqui.

Então adicione…

… em qualquer lugar entre tags no arquivo header.php para vincular sua folha de estilo. Lembre-se também de colocar o e abrindo tags no header.php, como mostrado acima. Salve todas as alterações.

Copie a segunda seção (ou seja,.

de index.html para o recém-criado index.php , e adicione…

… no topo e …


… até o fundo absoluto. Essas três linhas buscam os header.php, sidebar.php e footer.php (nessa ordem) e os exibem no index.php, que reúne seu código novamente. Salve todas as alterações. Neste ponto, seu arquivo index.php deve se parecer com:



Em seguida, copie o conteúdo das seções da barra lateral e do rodapé no seu index.html para sidebar.php e footer.php, respectivamente.

Adicionando postagens

Seu modelo HTML está prestes a se transformar em um tema WordPress. Só precisamos adicionar suas postagens. Se você tem postagens no seu blog, como as exibia no tema “HTML-to-WordPress” personalizado? Você usa um tipo especial de função PHP conhecida como Ciclo. O Loop é apenas um código especializado que exibe suas postagens e comentários onde quer que você o coloque.

Agora, para exibir suas postagens no seção de conteúdo do modelo index.php, copie e cole o seguinte código entre o diretório

e

tags como mostrado abaixo:

>

Isso cuidará de suas postagens. Fácil como ABC. Nesta conjuntura (e usando os arquivos de amostra fornecidos neste tutorial), seu header.php deve ficar assim:




<?php wp_title( '|', true, 'right' ); ?>




Seu sidebar.php deve ficar assim:

Seu footer.php deve ficar assim:

E este é o rodapé

Você notou o fechamento e tags no rodapé? Não esqueça de incluir também.

Seu style.css deve ser algo como isto:

/ *
Nome do Tema: Criando Tema WordPress a partir de HTML
URI do tema: http://wpexplorer.com
Descrição: este tema mostra como criar temas WordPress do HTML
Versão: 1.0
Autor: Freddy for @WPExplorer
URI do autor: http://WPExplorer.com/create-wordpress-theme-html-1/
Tags: wpexplorer, tema personalizado, HTML para WordPress, criar tema para WordPress
* /
corpo {
família de fontes: arial, helvetica, verdana;
tamanho da fonte: 0.8em;
largura: 100%;
altura: 100%;
}

.cabeçalho {
cor de fundo: # 1be;
margem esquerda: 14%;
topo: 0;
largura da borda: 0.1em;
cor da borda: # 999;
estilo de borda: sólido;
largura: 72%;
altura: 250 px;
}

.conteúdo {
cor de fundo: # 999;
margem esquerda: 14%;
margem superior: 5 px;
flutuar: esquerda;
largura: 46%;
largura da borda: 0.1em;
cor da borda: # 999;
estilo de borda: sólido;
}

.Barra Lateral {
cor de fundo: # 1d5;
margem direita: 14%;
margem superior: 5 px;
flutuador: direito;
largura da borda: 0.1em;
cor da borda: # 999;
estilo de borda: sólido;
superior: 180 px;
largura: 23%;
}

.rodapé {
cor de fundo: vermelho;
margem esquerda: 14%;
flutuar: esquerda;
margem superior: 5 px;
largura: 72%;
altura: 50px;
largura da borda: 0.1em;
cor da borda: # 999;
estilo de borda: sólido;
}

E seu index.php deve ser semelhante a:





Novamente – isso é baseado no site da esquerda para a direita, com um layout de cabeçalho, conteúdo, barra lateral e rodapé. Você está seguindo? Todos os cinco arquivos devem ser salvos na sua pasta de temas. Nomeie a pasta como desejar e compacte-a em um arquivo ZIP usando o WinRar ou um programa equivalente. Carregue seu novo tema para a instalação do WordPress, ative-o e veja o tema convertido em ação!

Isso foi fácil, certo? Você pode estilizar seu tema da maneira que desejar, mas a maioria dos recursos que adoramos no WordPress ainda estão inativos desde que… este tutorial aborda os conceitos básicos de conversão de modelos HTML em WordPress e deve ser de grande valor para você como iniciante. No próximo tutorial, elevaremos as coisas um pouco mais e brincaremos com outros aspectos da programação do WordPress (como Arquivos de modelo e Tags de modelo), que permitem transformar seus modelos HTML da maneira que desejar. Fique ligado!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map