Esta li\u00e7\u00e3o do tutorial do tema WordPress para iniciantes continua adicionando o c\u00f3digo b\u00e1sico necess\u00e1rio para a configura\u00e7\u00e3o do tema. Aprendemos a adicionar suportes a temas e, como resultado, a funcionalidade de imagem em destaque do WordPress \u00e9 ativada. Nesta li\u00e7\u00e3o, tamb\u00e9m corrigiremos o t\u00edtulo da primeira p\u00e1gina aplicando nosso primeiro filtro.<\/p>\n
Trabalharemos principalmente no Todos os temas precisam de algum c\u00f3digo para configur\u00e1-lo, dizendo ao WordPress para ativar determinadas funcionalidades. Isso inclui a ativa\u00e7\u00e3o de menus, widgets, tradu\u00e7\u00e3o e assim por diante. Isso geralmente \u00e9 feito em uma “fun\u00e7\u00e3o de tema de configura\u00e7\u00e3o", geralmente ligada a um gancho convenientemente chamado Vamos configurar uma “fun\u00e7\u00e3o de tema de configura\u00e7\u00e3o” em nosso Dentro desta fun\u00e7\u00e3o, adicionaremos v\u00e1rias fun\u00e7\u00f5es de configura\u00e7\u00e3o comuns e \u00fateis para temas do WordPress. Por favor, coloque todas as partes de c\u00f3digo a seguir dentro de sua fun\u00e7\u00e3o de configura\u00e7\u00e3o.<\/p>\n Primeiro, precisamos definir uma largura m\u00e1xima de imagens e incorpora\u00e7\u00f5es (como v\u00eddeos). Isso garante que, quando os autores inserem imagens grandes nas postagens, as imagens permane\u00e7am dentro de uma certa largura. Eu configurei para 840 pixels (porque quero espa\u00e7o para a barra lateral), mas voc\u00ea pode ajustar isso ao seu gosto.<\/p>\n Tamb\u00e9m devemos informar ao WordPress que o tema \u00e9 traduz\u00edvel e onde pode procurar os arquivos de tradu\u00e7\u00e3o. Entrarei na tradu\u00e7\u00e3o do tema WordPress em detalhes na pr\u00f3xima etapa<\/a> desta s\u00e9rie de tutoriais de temas.<\/p>\n Observe o uso de uma nova fun\u00e7\u00e3o para obter o diret\u00f3rio do seu tema, Em seguida, precisamos adicionar alguns “suportes de tema”, que est\u00e1 ativando a funcionalidade do WordPress que n\u00e3o est\u00e1 ativada como padr\u00e3o.<\/p>\n Isso foi um monte de Existem muitos outros recursos interessantes, ent\u00e3o recomendo que voc\u00ea d\u00ea uma olhada na documenta\u00e7\u00e3o do add_theme_support<\/a>. Por exemplo, h\u00e1 um relativamente novo, Lembre-se de que, se voc\u00ea adicionar suporte para Finalmente, adicionamos alguns Aqui est\u00e1 a fun\u00e7\u00e3o de configura\u00e7\u00e3o final em nosso Depois de salvar, agora voc\u00ea poder\u00e1 adicionar imagens em destaque \u00e0s postagens no admin! Vamos adicionar mais uma corre\u00e7\u00e3o de tema em nosso Vamos adicionar nossa primeira fun\u00e7\u00e3o de modifica\u00e7\u00e3o de filtro adequada, usando Lembre-se de sempre retornar<\/strong> a vari\u00e1vel filtrada em suas fun\u00e7\u00f5es de filtro! Todos os filtros modificam uma vari\u00e1vel, e se voc\u00ea n\u00e3o retornar nada, a vari\u00e1vel fica indefinida. Isso pode causar muitos problemas. Para mais detalhes sobre filtros, d\u00ea uma olhada no meu post explicando tudo sobre ganchos e filtros<\/a>.<\/p>\n S\u00f3 queremos personalizar a vari\u00e1vel title se estivermos na primeira p\u00e1gina. Para todas as outras p\u00e1ginas, queremos deix\u00e1-lo em paz (basta devolv\u00ea-lo como est\u00e1). Mas como sabemos quando estamos na primeira p\u00e1gina?<\/p>\n Podemos tirar proveito das tags condicionais do WordPress<\/a>, que s\u00e3o um monte de fun\u00e7\u00f5es \u00fateis que retornam true ou false com base em uma condi\u00e7\u00e3o. Estes s\u00e3o mais comumente usados \u200b\u200bpara perguntar se estamos em uma determinada p\u00e1gina ou modelo. Podemos simplesmente perguntar “Estamos na primeira p\u00e1gina?”. Se este m\u00e9todo retornar true, somente ent\u00e3o modificaremos a vari\u00e1vel title.<\/p>\n Vale a pena notar que existem duas tags condicionais para a p\u00e1gina inicial, ou seja, Agora sabemos qual filtro usar e como garantir que s\u00f3 mudemos o t\u00edtulo se estivermos no lugar certo. Mas qual deveria ser o t\u00edtulo? Normalmente, o t\u00edtulo da p\u00e1gina inicial seria o nome do seu site WordPress. Mas como obtemos essa informa\u00e7\u00e3o?<\/p>\n Para recuperar informa\u00e7\u00f5es sobre a instala\u00e7\u00e3o atual do WordPress, usamos a Se voc\u00ea atualizar sua p\u00e1gina inicial, ver\u00e1 que o nome do seu site aparece na 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!<\/p>\n Abra Se sua postagem n\u00e3o tiver uma imagem em destaque, voc\u00ea n\u00e3o ver\u00e1 nada sendo exibido ap\u00f3s o t\u00edtulo. No entanto, se voc\u00ea definir uma imagem em destaque em uma de suas postagens, functions.php<\/code>arquivo que adicionamos na li\u00e7\u00e3o anterior<\/a>. No final, adicionaremos o c\u00f3digo para a sa\u00edda de imagens em destaque dentro de nossos modelos.<\/p>\nConfigura\u00e7\u00e3o do tema<\/h2>\n
after_setup_theme<\/code>. Para algumas coisas espec\u00edficas, precisamos usar o gancho de inicializa\u00e7\u00e3o do WordPress chamado init<\/code>.<\/p>\nEscrevendo o c\u00f3digo de configura\u00e7\u00e3o de tema necess\u00e1rio para
after_setup_theme<\/code><\/h3>\nfunctions.php<\/code>, ligado a after_setup_theme<\/code>:<\/p>\nadd_action('after_setup_theme', 'wptutorial_setup_theme');\nfunction wptutorial_setup_theme() {\n\u00a0\n}<\/code><\/pre>\n$GLOBALS['content_width'] = 840;<\/code><\/pre>\nload_theme_textdomain('wptutorial', get_stylesheet_directory(). '\/lang');<\/code><\/pre>\nget_stylesheet_directory()<\/code>. Isso \u00e9 muito semelhante ao get_stylesheet_directory_uri()<\/code>que encontramos na \u00faltima etapa, mas aqui precisamos do caminho relativo, n\u00e3o da URL.<\/p>\nadd_theme_support('automatic-feed-links');\nadd_theme_support('post-thumbnails');\nadd_theme_support('html5', [\n 'search-form',\n 'comment-form',\n 'comment-list',\n 'gallery',\n 'caption',\n]);\nadd_theme_support('custom-logo', [\n 'height' => 100,\n 'width' => 300,\n 'flex-width' => true,\n 'flex-height' => false,\n]);\nadd_theme_support('customize-selective-refresh-widgets');<\/code><\/pre>\nadd_theme_support<\/code>chamadas! Como o nome indica, add_theme_support<\/code>diz ao WordPress para ativar recursos que n\u00e3o s\u00e3o ativados por padr\u00e3o. Por exemplo, imagens em destaque (‘p\u00f3s-miniaturas’), suporte para tags HTML5 e recurso de logotipo personalizado do WordPress no Personalizador (ajuste a imagem de logotipo desejada, se desejar!).<\/p>\ntitle-tag<\/code>, que lida com a tag de t\u00edtulo. Eu a deixei de fora neste tutorial, pois j\u00e1 adicionamos a tag de t\u00edtulo header.php<\/code>manualmente.<\/p>\ntitle-tag<\/code>, dever\u00e1 remover a tag de t\u00edtulo do arquivo de cabe\u00e7alho para evitar a duplica\u00e7\u00e3o de tags de t\u00edtulo.<\/p>\nadd_theme_support<\/code>para o novo Gutenberg no WordPress. Adicionaremos suporte para se\u00e7\u00f5es amplas, ativando a funcionalidade de estilos de bloco e suporte para incorpora\u00e7\u00f5es responsivas:<\/p>\nadd_theme_support('wp-block-styles');\nadd_theme_support('align-wide');\nadd_theme_support('responsive-embeds');<\/code><\/pre>\nO resultado final<\/h3>\n
functions.php<\/code>:<\/p>\nadd_action('after_setup_theme', 'wptutorial_setup_theme');\nfunction wptutorial_setup_theme() {\n $GLOBALS['content_width'] = 840;\n \/\/ Make your theme ready for translation\n load_theme_textdomain('wptutorial', get_stylesheet_directory(). '\/lang');\n \/\/ Add theme support for WordPress functionality\n add_theme_support('automatic-feed-links');\n add_theme_support('title-tag');\n add_theme_support('post-thumbnails');\n add_theme_support('html5', [\n 'search-form',\n 'comment-form',\n 'comment-list',\n 'gallery',\n 'caption',\n ]);\n add_theme_support('custom-logo', [\n 'height' => 100,\n 'width' => 300,\n 'flex-width' => true,\n 'flex-height' => false,\n ]);\n add_theme_support('customize-selective-refresh-widgets');\n \/\/ Add theme support for Gutenberg specific functionality\n add_theme_support('wp-block-styles');\n add_theme_support('align-wide');\n add_theme_support('responsive-embeds');\n}<\/code><\/pre>\nfunctions.php<\/code>antes de adicionarmos imagens em destaque aos nossos modelos; lembre-se que wp_title<\/code>em nosso header.php<\/code>padr\u00e3o n\u00e3o pode ecoar nada no frontpage? Vamos consertar isso.<\/p>\nAdicionando um filtro a
wp_title<\/code><\/h2>\nadd_filter()<\/code>. O filtro que vamos usar tem o mesmo nome da fun\u00e7\u00e3o que usamos para o WordPress buscar dinamicamente o t\u00edtulo da p\u00e1gina; wp_title<\/code>. O que vamos corrigir \u00e9 garantir que o t\u00edtulo n\u00e3o fique vazio na p\u00e1gina inicial \u2013 o que \u00e9 padr\u00e3o no WordPress. Quando estiver na p\u00e1gina inicial, queremos que ela seja preenchida com o nome do site WordPress.<\/p>\nSaber quando personalizar o t\u00edtulo<\/h3>\n
is_home()<\/code>e is_front_page().<\/code>Estas diferem dependendo da sua configura\u00e7\u00e3o de “Leitura” \u2013 se sua p\u00e1gina inicial est\u00e1 ou n\u00e3o mostrando as postagens mais recentes ou est\u00e1 definida como uma p\u00e1gina fixa. Se voc\u00ea seguir este tutorial com uma nova instala\u00e7\u00e3o do WordPress com a configura\u00e7\u00e3o padr\u00e3o, voc\u00ea usar\u00e1 is_front_page()<\/code>.<\/p>\nObtendo o nome do site WordPress<\/h3>\n
bloginfo()<\/code>fun\u00e7\u00e3o. Como par\u00e2metro pedimos para retornar o nome do site, o que \u00e9 feito configurando o par\u00e2metro para ‘ name<\/code>‘. E porque este \u00e9 um filtro e precisamos devolv\u00ea-lo, n\u00e3o echo, usamos seu m\u00e9todo irm\u00e3o get_bloginfo()<\/code>. A chamada bloginfo()<\/code>sempre ecoar\u00e1 a sa\u00edda.<\/p>\nadd_filter('wp_title', 'wptutorial_title_filter');\nfunction wptutorial_title_filter($title) {\n if (is_front_page()) {\n return get_bloginfo('name');\n }\n return $title;\n}<\/code><\/pre>\n<title><\/code>tag (e na guia do navegador)! Nosso filtro afeta apenas a p\u00e1gina inicial, portanto, quaisquer outras p\u00e1ginas, como postagem \u00fanica, ainda devem retornar o mesmo que antes; o t\u00edtulo da postagem.<\/p>\nSa\u00edda de imagens em destaque em arquivos de modelo<\/h2>\n
index.php<\/code>e encontre um lugar para eles dentro do loop. Eu escolhi coloc\u00e1-lo ap\u00f3s o t\u00edtulo, mas cabe a voc\u00ea onde voc\u00ea quer. Voc\u00ea usa a fun\u00e7\u00e3o the_post_thumbnail()<\/code>para produzir a imagem. \u00c9 recomend\u00e1vel primeiro verificar se a postagem ainda definiu uma imagem em destaque, o que fazemos usando has_post_thumbnail()<\/code>.<\/p>\n...\n <h2><a href=\"<?php the_permalink(); ?>\" title=\"<?php the_title(); ?>\"><?php the_title(); ?><\/a><\/h2>\n <?php if (has_post_thumbnail()) {\n the_post_thumbnail();\n } ?>\n <?php the_excerpt(); ?>\n...<\/code><\/pre>\nthe_post_thumbnail()<\/code>geraria uma <img><\/code>tag com a imagem escolhida. Esta fun\u00e7\u00e3o aceita alguns par\u00e2metros adicionais. Por exemplo, voc\u00ea pode definir qual tamanho de imagem deseja usar e controlar os atributos adicionados \u00e0 imagem. Como de costume, encorajo voc\u00ea a dar uma olhada r\u00e1pida na documenta\u00e7\u00e3o<\/a> e ajustar ao seu gosto.<\/p>\nDocumenta\u00e7\u00e3o sobre os m\u00e9todos usados<\/h2>\n