Esta lição do tutorial do tema WordPress para iniciantes continua adicionando o código básico necessário para a configuração do tema. Aprendemos a adicionar suportes a temas e, como resultado, a funcionalidade de imagem em destaque do WordPress é ativada. Nesta lição, também corrigiremos o título da primeira página aplicando nosso primeiro filtro.
Trabalharemos principalmente no functions.phparquivo que adicionamos na lição anterior. No final, adicionaremos o código para a saída de imagens em destaque dentro de nossos modelos.
Configuração do tema
Todos os temas precisam de algum código para configurá-lo, dizendo ao WordPress para ativar determinadas funcionalidades. Isso inclui a ativação de menus, widgets, tradução e assim por diante. Isso geralmente é feito em uma “função de tema de configuração", geralmente ligada a um gancho convenientemente chamado after_setup_theme. Para algumas coisas específicas, precisamos usar o gancho de inicialização do WordPress chamado init.
Escrevendo o código de configuração de tema necessário paraafter_setup_theme
Vamos configurar uma “função de tema de configuração” em nosso functions.php, ligado a after_setup_theme:
add_action('after_setup_theme', 'wptutorial_setup_theme');
function wptutorial_setup_theme() {
}Dentro desta função, adicionaremos várias funções de configuração comuns e úteis para temas do WordPress. Por favor, coloque todas as partes de código a seguir dentro de sua função de configuração.
Primeiro, precisamos definir uma largura máxima de imagens e incorporações (como vídeos). Isso garante que, quando os autores inserem imagens grandes nas postagens, as imagens permaneçam dentro de uma certa largura. Eu configurei para 840 pixels (porque quero espaço para a barra lateral), mas você pode ajustar isso ao seu gosto.
$GLOBALS['content_width'] = 840;Também devemos informar ao WordPress que o tema é traduzível e onde pode procurar os arquivos de tradução. Entrarei na tradução do tema WordPress em detalhes na próxima etapa desta série de tutoriais de temas.
load_theme_textdomain('wptutorial', get_stylesheet_directory(). '/lang');Observe o uso de uma nova função para obter o diretório do seu tema, get_stylesheet_directory(). Isso é muito semelhante ao get_stylesheet_directory_uri()que encontramos na última etapa, mas aqui precisamos do caminho relativo, não da URL.
Em seguida, precisamos adicionar alguns “suportes de tema”, que está ativando a funcionalidade do WordPress que não está ativada como padrão.
Isso foi um monte de add_theme_supportchamadas! Como o nome indica, add_theme_supportdiz ao WordPress para ativar recursos que não são ativados por padrão. Por exemplo, imagens em destaque (‘pós-miniaturas’), suporte para tags HTML5 e recurso de logotipo personalizado do WordPress no Personalizador (ajuste a imagem de logotipo desejada, se desejar!).
Existem muitos outros recursos interessantes, então recomendo que você dê uma olhada na documentação do add_theme_support. Por exemplo, há um relativamente novo, title-tag, que lida com a tag de título. Eu a deixei de fora neste tutorial, pois já adicionamos a tag de título header.phpmanualmente.
Lembre-se de que, se você adicionar suporte para title-tag, deverá remover a tag de título do arquivo de cabeçalho para evitar a duplicação de tags de título.
Finalmente, adicionamos alguns add_theme_supportpara o novo Gutenberg no WordPress. Adicionaremos suporte para seções amplas, ativando a funcionalidade de estilos de bloco e suporte para incorporações responsivas:
add_theme_support('wp-block-styles');
add_theme_support('align-wide');
add_theme_support('responsive-embeds');O resultado final
Aqui está a função de configuração final em nosso functions.php:
Depois de salvar, agora você poderá adicionar imagens em destaque às postagens no admin! Vamos adicionar mais uma correção de tema em nosso functions.phpantes de adicionarmos imagens em destaque aos nossos modelos; lembre-se que wp_titleem nosso header.phppadrão não pode ecoar nada no frontpage? Vamos consertar isso.
Adicionando um filtro awp_title
Vamos adicionar nossa primeira função de modificação de filtro adequada, usando add_filter(). O filtro que vamos usar tem o mesmo nome da função que usamos para o WordPress buscar dinamicamente o título da página; wp_title. O que vamos corrigir é garantir que o título não fique vazio na página inicial – o que é padrão no WordPress. Quando estiver na página inicial, queremos que ela seja preenchida com o nome do site WordPress.
Lembre-se de sempre retornar a variável filtrada em suas funções de filtro! Todos os filtros modificam uma variável, e se você não retornar nada, a variável fica indefinida. Isso pode causar muitos problemas. Para mais detalhes sobre filtros, dê uma olhada no meu post explicando tudo sobre ganchos e filtros.
Saber quando personalizar o título
Só queremos personalizar a variável title se estivermos na primeira página. Para todas as outras páginas, queremos deixá-lo em paz (basta devolvê-lo como está). Mas como sabemos quando estamos na primeira página?
Podemos tirar proveito das tags condicionais do WordPress, que são um monte de funções úteis que retornam true ou false com base em uma condição. Estes são mais comumente usados para perguntar se estamos em uma determinada página ou modelo. Podemos simplesmente perguntar “Estamos na primeira página?”. Se este método retornar true, somente então modificaremos a variável title.
Vale a pena notar que existem duas tags condicionais para a página inicial, ou seja, is_home()e is_front_page().Estas diferem dependendo da sua configuração de “Leitura” – se sua página inicial está ou não mostrando as postagens mais recentes ou está definida como uma página fixa. Se você seguir este tutorial com uma nova instalação do WordPress com a configuração padrão, você usará is_front_page().
Obtendo o nome do site WordPress
Agora sabemos qual filtro usar e como garantir que só mudemos o título se estivermos no lugar certo. Mas qual deveria ser o título? Normalmente, o título da página inicial seria o nome do seu site WordPress. Mas como obtemos essa informação?
Para recuperar informações sobre a instalação atual do WordPress, usamos a bloginfo()função. Como parâmetro pedimos para retornar o nome do site, o que é feito configurando o parâmetro para ‘ name‘. E porque este é um filtro e precisamos devolvê-lo, não echo, usamos seu método irmão get_bloginfo(). A chamada bloginfo()sempre ecoará a saída.
add_filter('wp_title', 'wptutorial_title_filter');
function wptutorial_title_filter($title) {
if (is_front_page()) {
return get_bloginfo('name');
}
return $title;
}Se você atualizar sua página inicial, verá que o nome do seu site aparece na <title>tag (e na guia do navegador)! Nosso filtro afeta apenas a página inicial, portanto, quaisquer outras páginas, como postagem única, ainda devem retornar o mesmo que antes; o título da postagem.
Saída de imagens em destaque em arquivos de modelo
Anteriormente, quando configuramos os suportes do tema, adicionamos suporte para imagens em destaque. Com isso ativado, agora podemos produzir essas imagens em nossos modelos. Vamos fazer isso agora!
Abra index.phpe encontre um lugar para eles dentro do loop. Eu escolhi colocá-lo após o título, mas cabe a você onde você quer. Você usa a função the_post_thumbnail()para produzir a imagem. É recomendável primeiro verificar se a postagem ainda definiu uma imagem em destaque, o que fazemos usando has_post_thumbnail().
Se sua postagem não tiver uma imagem em destaque, você não verá nada sendo exibido após o título. No entanto, se você definir uma imagem em destaque em uma de suas postagens, the_post_thumbnail()geraria uma <img>tag com a imagem escolhida. Esta função aceita alguns parâmetros adicionais. Por exemplo, você pode definir qual tamanho de imagem deseja usar e controlar os atributos adicionados à imagem. Como de costume, encorajo você a dar uma olhada rápida na documentação e ajustar ao seu gosto.
Documentação sobre os métodos usados
- add_action
- load_theme_textdomain
- get_stylesheet_directory
- add_theme_support
- add_filter
- is_front_page
- get_bloginfo
- has_post_thumbnail
- the_post_thumbnail