O WordPress está rapidamente se tornando um nome familiar, se ainda não o estiver. Está em toda parte, essa beleza benigna, potenciando alguns dos melhores sites e aplicativos da web que o mundo já viu. É uma plataforma de CMS e blog de estréia que não é apenas incrivelmente versátil, mas também incrivelmente fácil de aprender e usar. Por que mais o WordPress aumentaria em popularidade a cada dia que passa?


Mas o que você vê na superfície quando configura e inicia o WordPress é apenas uma pequena fração do que acontece nos bastidores. De fato, a bela interface do usuário que todos nós amamos não é nada comparado ao tumulto da atividade nos bastidores. O que quero dizer é que o WordPress roda em duas tecnologias da Web um tanto complicadas, conhecidas como PHP e MySQL.

Outras tecnologias que desempenham um papel incluem o JavaScript, o primo próximo jQuery, CSS e HTML. Os temas do WordPress (e até plugins) são escritos principalmente em PHP e dependem de bancos de dados MySQL para serem executados. Eles também dependem das tecnologias da web mencionadas acima. Todas essas tecnologias devem trabalhar juntas.

Agora, como iniciante, talvez você não entenda que, para que a plataforma, os temas e os plugins do WordPress funcionem em uníssono, os desenvolvedores usam um conjunto de códigos padronizados, conhecidos coletivamente como tags PHP. São esses códigos que descrevemos na postagem de hoje, mostrando como eles são úteis. Vamos dar alguns exemplos em algum lugar aqui para uma boa medida, então prepare-se para se divertir em sua jornada de construção de temas!

Tema Anatomia

anatonmy-of-a-wordpress-theme

Um tema WordPress é simplesmente nada além de vários arquivos PHP vinculados. Ele vem com um arquivo de folha de estilo CSS responsável pela aparência do seu tema (e site). De volta ao básico, um tema WordPress é apenas um par de arquivos PHP. Acima está um instantâneo de uma grande tuts + cheatsheet para a anatomia de um tema WordPress. Para criar um tema para WordPress, você precisará dos seguintes arquivos:

  • header.php– Este arquivo de modelo contém as informações do cabeçalho que aparecem dentro do seção e antes da abertura tag. Aqui você adiciona metadados, título do site e link para sua folha de estilo CSS, entre outros.
  • index.php – Este é o modelo do corpo principal do seu tema (ou site) do WordPress. Seu único objetivo é reunir os outros arquivos incluindo-os usando tags de modelo (mais sobre tags de modelo em um momento).
  • sidebar.php – Esta é a sua seção da barra lateral. Você pode colocar widgets, categorias, menus extras, formulário de pesquisa e qualquer outra coisa que desejar
  • footer.php – Esta é a seção de rodapé. Adicione suas informações de direitos autorais, links RSS, widgets, links, ícones sociais etc.
  • page.php – Sempre que você cria uma página em seu site baseado em WordPress, este é o modelo responsável
  • single.php – Este arquivo de modelo carrega uma única postagem no blog
  • comments.php – O modelo responsável por eles comenta
  • 404.php – O modelo mostrado quando o leitor encontra o infame erro 404 não encontrado
  • search.php –  Oferece a seus leitores a chance de encontrar conteúdo em seu site WordPress
  • searchform.php – Você precisará de um formulário de pesquisa para oferecer a funcionalidade mencionada acima, agora não?
  • archive.php – Porque encontrar conteúdo que você publicou em 2008 não deve ser um aborrecimento
  • functions.php – Coloque todas as funções especiais e até plugins personalizados aqui. Para compatibilidade entre temas, no entanto, é recomendável adicionar código personalizado como plug-ins independentes. Você pode adicionar menus extras, ativar widgets e muito mais. Esse arquivo oferece muito poder para transformar seu site / tema do WordPress da maneira que você desejar.
  • style.css – Este não é um arquivo de modelo PHP como tal. Mas é o arquivo em que você adiciona seus estilos CSS para controlar a estética. Ele também vem com o cabeçalho de informações para o seu tema WordPress.

Sem dúvida, você pode criar um tema com menos modelos, mas não recomendamos criar um hábito. Afinal, você só precisa dos 10 arquivos acima para criar um tema padrão do WP. Treze não é uma figura grande, agora é? Em poucas palavras, seu index.php pode ser algo como:



// Insira o conteúdo principal aqui, inclua o loop



Seguindo em frente, vamos falar sobre um snippet de código bacana chamado o laço.

O laço

Em algumas de nossas séries de postagens anteriores, como o popular Tutorial do WordPress: Como criar um tema WordPress a partir de HTML, mencionamos o loop, embora de passagem. Então, o que torna o loop o snippet popular que é? Bem, sem esse trecho de código especial, você teria que codificar manualmente cada post, juntamente com os trechos, no seu tema WordPress. Você faria isso toda vez que publicasse um novo artigo.

O esforço e o tempo que você desperdiçaria deixariam você azul e rígido. A impressão de carbono que você deixaria para trás – depois de trabalhar até a morte – abriria um buraco do tamanho de doze estádios ianques na camada de ozônio. Bem, estou exagerando os fatos (ou a falta deles), mas você enlouquecia se codificasse cada postagem no seu site WordPress manualmente.

O loop é um salva-vidas. Basta jogar o seguinte snippet de código nos arquivos de modelo do WordPress e ele listará todas as postagens que você já criou:

Geralmente usamos o loop no index.php para exibir uma lista de postagens, mas fique à vontade para experimentar; adicione-o onde quiser listar suas postagens. Além disso, adicione tags HTML e PHP personalizadas dentro do loop para personalizar suas postagens conforme achar necessário. Falando em tags, o que está disponível no WordPress?

Incluir tags

tags wordpress

As tags de inclusão de modelo são simplesmente códigos PHP que você usa em qualquer arquivo de modelo para incluir (ou melhor, chamar) outros arquivos de modelo da sua pasta de temas do WordPress. Aqui está o que estamos falando:

  • – Use isso em index.php para chamar (ou incluir) o arquivo header.php. Ele irá buscar o header.php e exibir seu conteúdo em index.php – é sobre isso que inclui um arquivo.
  • – Inclui sidebar.php
  • – Inclui o arquivo de modelo footer.php
  • – Questionário rápido: O que você acha que isso inclui a tag?

Template Bloginfo Tags

Há outra categoria de tags de modelos que simplesmente chamaremos de tags de informações do blog. Eles desempenham um papel, que é buscar informações sobre o seu site WordPress no banco de dados. Essas são principalmente as informações que você alimenta no seu site WordPress na sua área de administração via Perfil de usuárioConfigurações -> Geral. Depois que as informações forem recuperadas de seus bancos de dados, essas tags serão exibidas no mesmo site em que você as coloca.

Você pode modificar levemente a estrutura do bloginfo, para que, em vez de apenas exibir as informações recuperadas, possa usá-las (as informações) em outro lugar no seu código PHP. Quão conveniente? Mais sobre aquilo em um momento. Aqui estão as tags de informações de blog mais comuns:

  •  – Isso exibe o título do seu blog / site WordPress
  • – Essa tag de modelo exibe o URL do seu blog
  •  – Isso exibe a descrição, ou melhor, o slogan do seu blog.
  •  – Exibe o conjunto de caracteres usado para codificar seu site. O padrão é UTF-8
  •  – Isso mostra o URL da folha de estilo CSS do seu tema ativo
  •  – Exibe a versão do WordPress que você está usando
  •  – Exibe o idioma do WordPress
  •  – Exibe o URL do feed RSS 0,92
  • – Exibe URL para o feed RSS 2.0

Existem vários outros tags bloginfo você pode usar para aprimorar seu tema WordPress. Agora, sobre a pequena modificação de informações do blog de que falamos alguns segundos atrás. Até agora, estamos usando Vamos modificar isso para: . Permita-me detalhar os parâmetros:

  • $ show  Essa é a palavra-chave usada para nomear as informações que você deseja recuperar do banco de dados. Os exemplos incluem ‘nome’, ‘url’, ‘descrição’, ‘admin_email’ etc.
  • $ filter – Isso apenas permite filtrar as informações recuperadas. Por padrão, é definido como “bruto”, o que significa apenas que o valor de $ show é retornado como está. Definir isso como ‘display’ fará com que o valor de $ show seja passado pela função wptexturize () primeiro. No entanto, não se preocupe com isso no momento.

Aqui está um exemplo: suponha que queremos buscar e exibir seu slogan (descrição do site) que seja como “Melhores temas premium para WordPress”, primeiro recuperaríamos essas informações usando essa tag …

… Que carrega a descrição do site para $ site_description. Para exibir a descrição do seu site, use o seguinte:

Isso lhe dá: Seu slogan é: Melhores Temas Premium para WordPress

Nota: Existem muitos outros tipos de tags de modelo que permitem alcançar muito mais com o seu site WordPress. Eles são classificados em vários conjuntos, a saber tags gerais, tags de autor, postar tags em miniatura, tags de categoria, e ligação Tag entre outros. Você pode até usá-los dentro do loop, então sim, você deve se divertir.

Folha de estilo do tema

Mencionamos o style.css anteriormente. Novamente, por que o arquivo style.css é importante? Em primeiro lugar, fornece detalhes sobre o seu tema. Essas informações vão para o cabeçalho da folha de estilo, que ajuda a identificar o tema durante a seleção na área de administração. Dessa forma, dois temas não devem ter os mesmos detalhes nos cabeçalhos da folha de estilo. Aqui está um exemplo de cabeçalho de folha de estilo:

/ *
Nome do tema: Nome do seu tema
URI do tema: https://www.yoursite.com/yourtheme
Autor: Seu nome
Autor URI: https://www.yoursite.com/
Descrição: este tema WordPress é 100% responsivo, blá, blá...
Versão: 1.0
Licença: Licença Pública Geral GNU V2 ou posterior
URI da licença: http://www.gnu.org/licenses/gpl-2.0.html
Tags: ouro, uma coluna, barra lateral esquerda, grade responsiva, etc
Domínio de texto: yourthemename
* /

Esta informação vem em primeiro lugar (ou no topo) em style.css. Fora isso, verifique se você:

Pensamentos finais

Esta folha de dicas é apenas um recurso rápido que o ajudará a começar a aprender o desenvolvimento do tema WordPress. Usando as tags e os snippets que compartilhamos aqui, você pode desenvolver rapidamente um tema padrão e aprimorá-lo sem suar a camisa. Obviamente, você precisa continuar aprendendo o desenvolvimento do tema WordPress e, para isso, recomendamos o Codex WordPress, tuts+, Threehouse e ThemeShaper entre outros recursos respeitáveis.

Fora isso, sinta-se à vontade para compartilhar suas dicas, truques, trechos ou qualquer outra coisa que você tenha em mente nos comentários abaixo. Gostaríamos de descobrir onde ou como você aprende sobre o WordPress. Até a próxima!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me