isto vai ser um tutorial divertido onde nós inspecionamos como criar o seu próprio tema WordPress a partir do zero. Na verdade, vamos começar com absolutamente zero arquivos e zero linhas de código. A única maneira de entender como os temas WordPress funcionam, é realmente saltar em um nível baixo e fazer tudo sozinho. Sim, é tentador evitar isso, porque você pode fazer WordPress fazer tudo para você, sem qualquer compreensão do código que o alimenta., Isto pode ser PHP, JavaScript, CSS ou mesmo o HTML básico. Até o final deste passo a passo WordPress Tema tutorial, você vai entender como tudo se encaixa e como dobrar WordPress à sua vontade com facilidade.

Há tantos temas livres disponíveis para você quando você está executando um site WordPress. Além dos temas livres, você também pode optar por pagar um prémio para temas WordPress feitos profissionalmente que olhar grande e tem características fantásticas. Então, por que aprender a criar seu próprio tema do zero?, A resposta é que não importa qual tema você está usando, vai chegar um momento em que você quer fazer alterações simples para o seu site. Algumas dessas alterações podem ser capazes de ser acomodados por um plugin simples ou widget. Muitas vezes, no entanto, faz mais sentido para entender o que é que você quer mudar, como mudar isso, e evitar transformar o seu site WordPress em uma confusão de plugins e add-ons que se tornam difíceis. Com apenas um pouco de conhecimento de nível de fundação, você estará confiante em modificar o seu tema, ou simplesmente construir o seu próprio a partir do zero., Você saberá que Arquivo Editar, e que código adicionar ou modificar para criar o seu resultado desejado.

Passo 1: Crie uma pasta para guardar os seus ficheiros de tema.

Se vamos estar construindo temas, precisamos saber onde os arquivos que compõem um tema WordPress vivem em uma instalação WordPress. Isto é muito fácil. Sabemos que uma instalação WordPress tipicamente tem um diretório raiz chamado wordpress. Aqui está como nosso diretório raiz se parece na tempestade PHP.,

Este diretório contém os seguintes arquivos e pastas:

Arquivos

Pastas

• wp-admin
• wp-content
• wp-includes

A pasta que mais nos interessa agora é o wp-pasta de conteúdo. Dentro da pasta de conteúdo wp está uma pasta chamada temas. Sabe para que serve esta pasta? Sim, isso mesmo! É a pasta que detém um ou mais temas que você gostaria de usar com o seu site WordPress., Nesta pasta de temas encontramos três pastas adicionais de twentyfifteen, twentyxteen, e twentyseventeen. Estas pastas contêm os três temas que WordPress navios com por padrão. Observe abaixo que há também uma pasta chamada customtheme. Vá em frente e criar essa pasta, bem como em sua instalação, pois é aqui que vamos criar o nosso tema WordPress a partir do zero.

Step 2: Create style.css e índice.php em sua pasta tema personalizado

Agora sabemos onde os arquivos tema WordPress estão no sistema de arquivos., Também criamos uma nova pasta chamada customtheme em nossa pasta de temas. Agora vamos criar dois arquivos vazios neste diretório. Um deles chama-se index.php e o outro é chamado de estilo.Forum.

vamos agora povoar estes arquivos com o mínimo que precisamos para obter um novo tema em WordPress.

style.CSS

WordPress realmente lê os comentários que você coloca no estilo.ficheiro css. É aqui que você especifica informações específicas sobre o tema que você está construindo.

o estilo.,css é um arquivo de stylesheet (CSS) necessário para cada tema WordPress. Ele controla a apresentação (design visual e layout) das páginas do site.

no nosso excerto aqui simplesmente atribuímos um nome de tema, o autor, o URI, e o número de versão do nosso tema.,

índice.,php

neste ficheiro, só queremos enviar algo para a tela para provar que o nosso tema personalizado está a funcionar.

Ótimo Trabalho! Acredite ou não, você criou o seu primeiro tema WordPress.,

Passo 3: Activar o tema do Painel do WordPress

neste ponto, podemos visitar o nosso Painel do WordPress e navegue até a Aparência>Temas e eis que vemos o novo tema, temos criado.

Podemos clicar em “detalhes do tema” para perfurar o nosso tema personalizado e descobrir que a informação que tínhamos introduzido no estilo.o ficheiro css funcionou. Podemos ver que eles tem um nome de personaltheme, com a versão 1.0, pelo autor Vegibit, e um link para o URI que tínhamos fornecido. Muito fixe.,

E agora o momento da verdade! Vá em frente e clique em “Ativar” no novo personaltheme e, em seguida, visite o site. Não vai ganhar nenhum Webby awards, mas nós temos um bom começo em um novo tema personalizado!

Step 4: Add Code to Output The Post Title and Post Text

we’ve take the liberty to populate a couple of example posts in the database so we can work with that data during this tutorial. Neste momento, o nosso tema só produz o tema personalizado!, para a página quando visitamos o nosso site, não importa quantas mensagens estão na base de dados. Passemos agora a buscar alguns dados da base de dados, e transmiti-los para a página. Especificamente, queremos obter o título do Post e o conteúdo do Post de todos os posts e visualizá-los na página inicial. Vamos tentar agora. Primeiro vamos ver o que temos para posts no painel WordPress.

alavancando o laço WordPress

Agora podemos falar um pouco sobre o laço WordPress. O laço WordPress é realmente o motor que faz o WordPress correr., É através deste loop, que os desenvolvedores tema verificar para posts e exibi-los na página conforme necessário. Se segue o formato a seguir. Se o banco de dados tem posts, vamos loop sobre eles enquanto ainda há posts, caso contrário, vamos deixar o usuário saber que não há posts. Parece isto em código PHP.,

Notice that the Loop makes use of two functions in it’s most basic form. Estes são have_ posts () e the_post (). A função have_ posts () faz apenas uma coisa. Ele diz – lhe se há algum posts na base de dados para fazer um loop sobre., Esta função retornará ou true ou false e é isso. Se ele retorna true, então há posts disponíveis para circular. Se ele retorna false, então não há posts para circular. A outra função, the_post () não devolve nada. É trabalho é obter WordPress pronto para posts de saída. Especificamente, ele recupera o próximo post, configura o post, define o in_the_loop propriedade true., Até agora, nossa página ainda não vai fornecer qualquer informação sobre nossos posts blog, mas podemos atualizar isso agora em nosso índice.ficheiro php.Ok, fixe. Agora temos feito uso de duas funções adicionais WordPress, the_title() e the_content(). Na maioria das vezes, essas funções são usadas dentro do loop e o que eles fazem é buscar o Título e o conteúdo de cada post como o loop itera sobre cada um no banco de dados. Assim, à medida que o loop corre, ele vai se deparar com o primeiro post., At that time the_title() function will output the title of the post to the page and the_content () will output the body of that post to the page. No próximo loop estas funções irão de novo obter o próximo título e conteúdo e enviá-los para a página. Então, com estes no lugar, devemos agora ver algumas informações sobre nossos posts sendo enviados para a tela. Vamos tentar! Visitamos http://wordpresstutorial.dev e vemos que funciona!,

Step 5: Adicione um Link para cada Post

e sobre a ligação a cada post individual para que possamos ver um post sobre ele próprio, em vez de como parte de apenas a página inicial. Podemos fazer isso muito facilmente, novamente com funções especiais que o WordPress fornece. Para esta tarefa, podemos fazer uso da função the_permalink (). Podemos atualizar nosso Código assim:

Agora, podemos clicar em cada título individual do post, e navegar para uma página que tem apenas esse post. Muito fixe!,

Passo 6: Adicionar um cabeçalho e rodapé ao tema personalizado

o Título e o conteúdo do Post são centrais para a criação de um bom tema. Quase tão importante é ter uma seção de cabeçalho e rodapé de seu tema. Estas seções conteriam o conteúdo que é sempre visível em todas as páginas do site. Estas seções estão acima e abaixo do conteúdo do post. Para fazer isso, você adivinhou, vamos fazer uso de funções especiais fornecidas pelo WordPress para obter o cabeçalho e obter o rodapé. Já vês um padrão a começar a desenvolver-se?, Quase tudo que você pode fazer como um desenvolvedor tema no WordPress já foi feito para você, através destas funções personalizadas. Então você vai descobrir que vale a pena memorizar essas funções comumente usadas no desenvolvimento de tema WordPress. Vamos em frente e adicionar as funções get_header() e get_ footer() para o nosso arquivo de tema agora.

! Podemos ver que o nosso tema personalizado agora tem uma área de cabeçalho, bem como uma área de rodapé., No cabeçalho é o nome e a marca do site, enquanto no rodapé vemos o texto familiar, WordPress Tutorial é orgulhosamente alimentado por WordPress. Estas são as opções predefinidas do cabeçalho e rodapé ao usar estas funções. E quando queremos ter um cabeçalho e rodapé personalizados? É para já!

de 2 Ficheiros temáticos para 4

até agora, neste tutorial, temos dois ficheiros que vivem na nossa pasta de temas personalizados (que em si está na pasta Temas). Esses arquivos são estilo.css e índice.pai. Neste momento, vamos precisar de adicionar mais arquivos para avançar mais., Vá em frente e crie dois novos arquivos na pasta customtheme. Estes ficheiros serão convenientemente chamados de cabeçalho.php e footer.pai.

Agora, o que estes ficheiros vão fazer é substituir o padrão do cabeçalho e rodapé layouts fornecidos por padrão quando você chamar o get_header() e get_footer() funções. Na verdade, se refrescarmos o nosso site, parece que o cabeçalho e o rodapé desapareceram. Isto é porque nós não adicionamos nenhuma marcação para esses arquivos ainda. Só para grins, configure os arquivos assim para testar isso.cabeçalho

.,php

footer.,php

Working with header.,php

nosso exemplo acima funcionou muito bem, e nos mostra como este arquivo funciona no seu nível mais básico. Cabecalho.php arquivo é realmente muito importante no entanto, então não vamos gloss sobre os detalhes dele muito rapidamente! Aqui é onde você inclui o código que todas as páginas em seu site vai precisar de acesso de uma forma ou de outra. Para começar, todas as páginas HTML terão um doctype. Você especificaria isso neste arquivo. Além disso, todas as páginas terão uma tag html de abertura, Uma seção de cabeça, e uma tag body de abertura. Tudo isto pode ir no cabeçalho.ficheiro php., Vamos rapidamente adicionar algumas dessas coisas que todas as páginas web faria uso. Vamos fazer uso de algumas novas funções WordPress aqui também. Estes serão language_attributes (), bloginfo () e body_class ().cabeçalho

.php

Se recarregarmos a página e depois vermos a fonte da Página no nosso navegador, podemos ter uma ideia do que estas funções estão a fazer. Destacamos as linhas que têm saída que veio dessas funções abaixo:

novamente, podemos ver o uso muito liberal de funções WordPress ao desenvolver seus próprios temas no WordPress., Na verdade, ainda não escrevemos nenhum código personalizado. Estamos simplesmente aprendendo o que as várias funções WordPress pode nos oferecer, e, em seguida, colocá-los para trabalhar em nosso tema personalizado.

Including wp_head ()

wp_head() is kind of a special function when you’re working with WordPress Themes. Não é tão simples como todos os outros que vimos até agora. O objetivo desta função é finalizar o resultado na seção <head> do seu cabeçalho.ficheiro php., Na verdade, ele deve ir imediatamente antes do fechamento </head> tag. Isto torna-se importante quando você começa a adicionar vários plugins para o seu site. Imprime scripts ou dados na etiqueta da cabeça na extremidade dianteira. É uma boa prática incluir sempre wp_head() nos seus temas como muitos outros plugins podem contar com essa gancho para adicionar estilos, scripts, ou elementos meta para o <head> área do site. Vamos adicioná-lo como tal aqui: cabeçalho

.php

completar o rodapé.,php

acabamos de adicionar o básico do que precisamos no cabeçalho.ficheiro php. Vamos dar a volta ao pé.ficheiro php. São algumas coisas que precisamos de fazer. Lembra-te disso na nossa cabeçada.arquivo php temos a abrir tags html e body. Esses têm de ser fechados a dada altura. Rodape.php file é o lugar perfeito para fazer isso. Então, vamos adicionar fechamento </html> e <corpo> tags, além de fazer uma chamada para o wp_footer() função.
footer.,php

Alterar Informações de Site No Painel Do WordPress

Você pode estar se perguntando por que tinha para fazer uso de todas estas fantasia funções para construir o nosso tema. Por exemplo, quando quisemos listar o nome e o slogan do nosso site, fizemos uso da função bloginfo() passando parâmetros de nome e descrição., A razão para isso é porque geralmente, você nunca quer codificar esses valores em seu site. Isto é informação que pode mudar. Além disso, se você disponibilizar o seu tema ao público, eles terão seu próprio nome e tagline para o seu site. Eles devem ser capazes de simplesmente visitar o painel de controle de administração no WordPress e atualizar suas configurações gerais para ver estes dados povoar automaticamente.

fazendo o Link do título do Site para a página inicial

a maioria dos temas irá oferecer a capacidade de clicar no texto do título do site, e direcionar o Usuário para a página inicial do site., Desta forma, não importa onde o usuário pode estar no site, eles podem sempre clicar no texto do título e voltar para a página principal do site. Vamos adicionar esse link agora no cabeçalho.pai.

Passo 7: adicionar uma função.arquivo php para o seu tema

neste ponto, temos quatro arquivos em nosso tema personalizado. São índices.php, estilo.css, cabeçalho.php e footer.pai. Provavelmente o próximo arquivo mais importante que precisamos ter são as funções.ficheiro php.

as funções.PHP arquivo em WordPress faz muitas coisas para o seu tema. É o arquivo onde você coloca código para modificar o comportamento padrão do WordPress., Quase se consegue pensar nas funções.o php como uma forma de um plugin para o WordPress com alguns pontos-chave:

• não requer único texto do Cabeçalho
• Armazenados na pasta que contém arquivos de seu tema
• é Executada somente quando o ativo tema do diretório
• se Aplica somente para o tema atual
• Pode chamar funções do PHP, as funções do WordPress, ou funções personalizadas

Uma coisa que temos mal em nosso tema, é o melhor estilo! Vamos criar uma função em nossas funções.ficheiro php para incluir o estilo.ficheiro css no nosso tema., Eis como podemos alcançar esse objectivo.

Esta peça de código irá incluir ou tornar activa a folha de estilo do nosso tema personalizado. Agora você pode estar se perguntando Por que estamos usando uma função personalizada, quando parece que podemos tão facilmente ligar manualmente para a folha de estilo nós mesmos no cabeçalho.ficheiro php. Bem, isto resume-se a fazer um pouco mais de trabalho à frente para um maior retorno do teu esforço mais tarde. À medida que os temas ficam mais complexos e mais ativos são adicionados, você ficará feliz em ter esta função que pode lidar com todo o trabalho pesado para você.,agora é hora de fazer as coisas parecerem um pouco mais bonitas. Primeiro, vamos adicionar uma embalagem <div> com uma classe de recipiente. A abertura <div> estará no cabeçalho.php, while the closing <div> will be in footer.pai. Também vamos embrulhar a saída de post no índice.php with an<article> tag that has a class of post. Isto vai dar-nos aulas para atacar no nosso estilo.,arquivo css para que possamos definir a largura da página, entre outras coisas. Também vamos adicionar um estilo melhor ao estilo.css nesta etapa.

Passo 8: Adicione algum estilo ao seu tema

cabeçalho.php
Adding an opening <div > to the header.ficheiro php.rodapé.php
Adding a closing </div> to the footer.ficheiro php.

índice.PHP
embrulhando o resultado da publicação com um id

artigo> tag

estilo.,css
finalmente, adicionamos algumas melhorias de estilo CSS para fazer o tema parecer um pouco mais agradável.

Quando visitamos o nosso site de teste agora no navegador, podemos ver que o tema WordPress que desenvolvemos passo a passo neste tutorial está olhando muito bom!

WordPress Theme Development Tutorial Step By Step Summary

Let’s review everything that we’ve learned in this basic step by step WordPress Theme tutorial for beginners., Aprendemos a criar o nosso primeiro tema personalizado no WordPress, fazendo nossa própria pasta ao lado da pasta Temas de nossa instalação WordPress. Nesta pasta, adicionamos diferentes arquivos que correspondem a diferentes seções de seu site. Em nosso tutorial, nós começamos com os mínimos nua que você deve ter em um tema WordPress. No futuro, você adicionaria muitos mais arquivos a esta pasta do que o que nós cobrimos. Vamos rever cada arquivo que criamos neste tutorial, e o que eles fizeram por nós.estilo

• .,css este arquivo é onde você adiciona alguns comentários css para que o WordPress saiba algumas informações sobre o seu tema personalizado. Ele também contém o estilo css personalizado que você vai aplicar ao seu tema.
• índice.php este ficheiro controla o html e o resultado geral do seu tema. É o arquivo principal usado para transmitir dados em sua página inicial.
• cabeçalho.,o php Permite que você especificar uma área para ter informações importantes sobre o seu site <head> área bem como incluindo a abertura <html> <corpo> e ,<div class=”container”> tags.rodapé.php o rodapé irá fechar todas as marcas de abertura que indicar na área do cabeçalho, para além de lhe dar um lugar para chamar a função wp_ Shooter ().
• funções.,php permite que você chame funções, tanto PHP e built-in WordPress, e para definir suas próprias funções, a fim de mudar os comportamentos padrão do WordPress

então lá você tem! Nós fomos capazes de criar um tema WordPress personalizado totalmente funcional com apenas 5 arquivos. Isso nos dá o conhecimento de nível de Fundação para construir temas e funções WordPress mais avançados. Bom Trabalho!