Bem vindo ao
Blog da FULL.

Aprenda, crie e cresça seu negócio na internet.

Encontre conteúdos, dicas, tutoriais e novidades sobre as principais ferramentas Wordpress

A melhor folha de dicas do WordPress

Você está em:

A melhor folha de dicas do WordPress

O WordPress está rapidamente se tornando um nome familiar, se ainda não o é. Está em toda parte, essa beleza benigna, alimentando alguns dos melhores sites e aplicativos da web que o mundo já viu. É uma plataforma de CMS e blog de primeira linha que não é apenas incrivelmente versátil, mas também incrivelmente fácil de aprender e usar. Por que mais o WordPress cresceria 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. Na verdade, 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 é executado em duas tecnologias da Web um tanto complicadas conhecidas como PHP e MySQL.

Outras tecnologias que desempenham um papel incluem JavaScript, seu primo próximo jQuery, CSS e HTML. Temas 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 acima mencionadas. Todas essas tecnologias devem trabalhar juntas.

Agora, como iniciante, você pode não entender que, para que a plataforma WordPress, temas e plugins funcionem em uníssono, os desenvolvedores usam um conjunto de códigos padronizados, também conhecidos coletivamente como tags PHP. São esses códigos que estamos descrevendo no post de hoje, mostrando como eles são úteis. Vamos espremer 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!

Anatomia do Tema

anatomia-de-um-tema-wordpress

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

  • header.php – Este arquivo de modelo contém as informações do cabeçalho, que aparecem na seção <head> e antes da tag de abertura <body>. Aqui você adiciona metadados, título do site e link para sua folha de estilo CSS entre outros.
  • index.php  – Este é o modelo de corpo principal para o seu tema WordPress (ou site). Seu único propósito é reunir os outros arquivos incluindo-os usando tags de modelo (mais sobre tags de modelo em breve).
  • 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 template responsável
  • single.php  – Este arquivo de modelo carrega uma única postagem no blog
  • comments.php  – O template responsável pelos comentários
  • 404.php  – O modelo mostrado quando seu leitor encontra o infame erro 404 não encontrado
  • search.php –  Oferece aos seus leitores a chance de encontrar conteúdo em seu site WordPress
  • searchform.php –  Você vai precisar de um formulário de pesquisa para oferecer a funcionalidade acima mencionada, agora não é?
  • archive.php –  Porque encontrar o conteúdo que você publicou em 2008 não deve ser um incômodo
  • functions.php –  Coloque todas as funções especiais e até plugins personalizados aqui. No entanto, para compatibilidade entre temas, é recomendável adicionar código personalizado como plug-ins independentes. Você pode adicionar menus extras, ativar widgets e muito mais. Este arquivo lhe dá muito poder para transformar seu site/tema WordPress da maneira que você quiser.
  • style.css –  Este não é um arquivo de modelo PHP como tal. Mas é o arquivo onde você adiciona seus estilos CSS para controlar a estética. Ele também vem com o cabeçalho de informações do seu tema WordPress.

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

<?php

// Every page will need the contents of the header.php

get_header(); ?>

// Insert main content here, include the loop

<?php

// Include your sidebar

get_sidebar(); ?>

<?php

// The footer hook is used by themes and plugins to load scripts and tracking codes

get_footer(); ?>

Continuando, vamos falar sobre um trecho de código bacana chamado loop .

O laço

Em algumas de nossas séries de posts anteriores, como o popular WordPress Tutorial: How to Create a WordPress Theme from HTML , mencionamos o loop, embora de passagem. Então, o que torna o loop o trecho popular que é? Bem, sem esse pedaço especial de código, você teria que codificar manualmente cada postagem, junto com os trechos, em seu tema WordPress. Você faria isso toda vez que publicasse um novo artigo.

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

O loop é um salva-vidas. Basta lançar o seguinte trecho de código em qualquer lugar em seus arquivos de modelo do WordPress e ele listará todas as postagens que você já criou:

<?php

if ( have_posts() ) :

while ( have_posts() ) :

the_post();

// Post Content here

endwhile;

endif; ?>

Normalmente usamos o loop em index.php para exibir uma lista de posts, mas sinta-se à 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 como achar melhor. Falando em tags, o que está disponível no WordPress?

Incluir tags

wordpress-tags

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:

  • <?php get_header(); ?> – Use isso em index.php para chamar (ou incluir) o arquivo header.php. Ele irá buscar header.php e exibir seu conteúdo em index.php – é disso que se trata incluir um arquivo.
  • <?php get_sidebar(); ?> –  Inclui sidebar.php
  • <?php get_footer(); ?> –  Inclui o arquivo de template footer.php
  • <?php comments_template(); ?> –  Quick Quiz: O que você acha que essa tag include faz?

Modelo de tags de informações do blog

Há outra categoria de tags de modelo que chamaremos simplesmente de tags bloginfo. Eles desempenham um papel, que é buscar informações sobre seu site WordPress do banco de dados. Essas são principalmente as informações que você alimenta em seu site WordPress em sua área de administração por meio do  Perfil e  configurações do usuário -> Geral. Depois que as informações forem recuperadas de seus bancos de dados, essas tags serão exibidas da mesma forma em seu site à medida que você as colocar.

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

  • <?php bloginfo(‘nome’); ?>  – Isso exibe o título do seu blog/site WordPress
  • <?php bloginfo(‘url’); ?> –  Esta tag de modelo exibe a URL do seu blog
  • <?php bloginfo(‘descrição’); ?>  – Isso exibe a descrição, ou melhor, o slogan, do seu blog.
  • <?php bloginfo(‘charset’); ?>  – Exibe o conjunto de caracteres usado para codificar seu site. O padrão é UTF-8
  • <?php bloginfo(‘stylesheet_url’); ?>  – Isso mostra o URL para a folha de estilo CSS do seu tema ativo
  • <?php bloginfo(‘versão’); ?>  – Exibe a versão do WordPress que você está usando
  • <?php bloginfo(‘idioma’); ?>  – Exibe o idioma do WordPress
  • <?php bloginfo(‘rss_url’); ?>  – Exibe o URL para o feed RSS 0.92
  • <?php bloginfo(‘rss2_url’); ?> –  Exibe o URL para o feed RSS 2.0

Existem várias outras tags bloginfo que você pode usar para aprimorar seu tema WordPress. Agora, sobre aquela pequena modificação no bloginfo sobre a qual falamos alguns segundos atrás. Até agora, usamos  <?php bloginfo(); ?>. Vamos modificar isso para: <?php $bloginfo = get_bloginfo ($show, $filter); ?> . Permita-me detalhar os parâmetros:

  • $show  – Esta é a palavra-chave que você usa para nomear as informações que deseja recuperar do banco de dados. Exemplos incluem ‘nome’, ‘url’, ‘descrição’, ‘admin_email’ etc.
  • $filter –  Isso apenas permite que você filtre as informações recuperadas. Por padrão, é definido como ‘raw’, 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. Não se preocupe com isso no momento embora.

Aqui está um exemplo: vamos supor que queremos buscar e exibir seu slogan (descrição do site) que vai como “Melhores Temas WordPress Premium”, primeiro recuperaríamos essas informações usando esta tag…

<?php $site_description = get_bloginfo( ‘description’ ); ?>

…que carrega a descrição do site para  $site_description. Para exibir a descrição do seu site em seu site, use isto:

<?php echo ‘Your tagline is: ‘. esc_html( $site_description ); ?>

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

Nota: Existem muitos outros tipos de  tags de modelo que permitem que você alcance muito mais com seu site WordPress. Eles são classificados em vários conjuntos, ou seja  , tags gerais, tags de autor, tags de miniatura de postagem, tags de categoria e  tags de link , entre outras . Você pode até usá-los dentro do loop, então sim, você deve se divertir.

Folha de estilo do tema

Mencionamos 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. Como tal, dois temas não devem ter os mesmos detalhes em seus cabeçalhos de folha de estilo. Aqui está um exemplo de um cabeçalho de folha de estilo:

/*

Theme Name: Your Theme Name

Theme URI: https://www.yoursite.com/yourtheme

Author: Your Name

Author URI: https://www.yoursite.com/

Description: This WordPress theme is 100% responsive blah blah…

Version: 1.0

License: GNU General Public License V2 or later

License URI: http://www.gnu.org/licenses/gpl-2.0.html

Tags: gold, one-column, left-sidebar, responsive-grid, etc

Text Domain: yourthemename

*/

Esta informação vem primeiro (ou no topo) em style.css. Fora isso, certifique-se de que você:

Pensamentos finais

Esta folha de dicas é apenas um recurso rápido que ajudará você a começar à medida que aprende o desenvolvimento de temas do 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. Claro, você precisa continuar aprendendo o desenvolvimento de temas WordPress e, para isso, recomendamos o WordPress Codex , 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. Adoraríamos descobrir onde ou como você aprende sobre o WordPress. Até a próxima!

Aprenda com a FULL.

Junte-se a mais de 50 mil pessoas que recebem em primeira mão as principais ferramentas e tecnologia para desenvolvimento web

plugins premium WordPress
O meu carrinho
🎁 Faltam 300,00 para liberar o Cupom Secreto
O seu carrinho está vazio.

Parece que ainda não tomou uma decisão.