WordPress.org (Português)
Idiomas: বাংলা • Inglês • Español • 日本語 한국어 • Português do Brasil • Русский • 中文 (简体) •中文 (繁體) • (Adicione seu idioma)
Este artigo é sobre o desenvolvimento de temas para WordPress. Se você deseja saber mais sobre como instalar e usar temas, consulte Usando temas. Este tópico difere de Usando temas porque ele discute os aspectos técnicos de escrever código para construir seus próprios Temas, em vez de como ativar Temas ou onde obter novos Temas.
Por que Temas WordPress
Temas WordPress são arquivos que funcionam juntos para criar o design e a funcionalidade de um site WordPress. Cada tema pode ser diferente, oferecendo muitas opções para os proprietários de sites mudarem instantaneamente a aparência do site.
Você pode querer desenvolver temas WordPress para seu próprio uso, para um projeto cliente ou para enviar para o diretório de temas do WordPress. Por que mais você deve criar um tema do WordPress?
- Para criar uma aparência exclusiva para o seu site WordPress.
- Para aproveitar as vantagens de modelos, tags de modelo e o loop do WordPress para gerar resultados e visuais diferentes para o site.
- Para fornecer modelos alternativos para recursos específicos do site, como como páginas de categoria e páginas de resultados de pesquisa.
- Para alternar rapidamente entre dois layouts de site ou para aproveitar as vantagens de um tema ou alternador de estilo para permitir que os proprietários de sites alterem a aparência do seu site.
Um tema WordPress também tem muitos benefícios.
- Ele separa os estilos de apresentação e arquivos de modelo dos arquivos de sistema para que o site seja atualizado sem mudanças drásticas na apresentação visual de o site.
- Permite a personalização da funcionalidade do site exclusiva para esse tema.
- Permite mudanças rápidas do design visual e layout de um site WordPress.
- Isso elimina a necessidade de um proprietário de site WordPress típico ter que aprender CSS, HTML e PHP para ter um site atraente.
Por que você deve criar seu próprio tema WordPress? Essa é a verdadeira questão.
- É uma oportunidade de aprender mais sobre CSS, HTML e PHP.
- É uma oportunidade de colocar sua experiência com CSS, HTML e PHP para funcionar.
- É criativo.
- É divertido (na maioria das vezes).
- Se você o lançar ao público, você pode se sentir bem por ter compartilhado e devolvido algo à comunidade WordPress (ok, direito de se gabar)
Padrões de desenvolvimento de tema
Temas WordPress devem ser codificado usando os seguintes padrões:
- Use PHP bem estruturado e sem erros e HTML válido. Consulte Padrões de codificação do WordPress.
- Use CSS limpo e válido. Consulte Codificação CSS Padrões.
- Siga as diretrizes de design em Design e layout do site.
Anatomia de um tema
Os temas do WordPress vivem em subdiretórios do diretório de temas do WordPress (wp-content / themes / por padrão) que não pode ser movido diretamente usando o arquivo wp-config.php. O subdiretório do Tema contém todos os estilos do Tema. eet arquivos, arquivos de modelo e arquivo de funções opcionais (functions.php), arquivos JavaScript e imagens. Por exemplo, um tema denominado “teste” residiria no diretório wp-content / themes / test /. Evite usar números para o nome do tema, pois isso impede que ele seja exibido na lista de temas disponíveis.
O WordPress inclui um tema padrão em cada nova instalação. Examine os arquivos no tema padrão com cuidado para ter uma ideia melhor de como construir seus próprios arquivos de tema.
Para obter um guia visual, consulte este infográfico sobre anatomia do tema do WordPress.
WordPress Os temas geralmente consistem em três tipos principais de arquivos, além de imagens e arquivos JavaScript.
- A folha de estilo chamada style.css, que controla a apresentação (design visual e layout) das páginas do site.
- Arquivos de modelo WordPress que controlam a maneira como as páginas do site geram as informações de seu banco de dados WordPress para serem exibidas no site.
- O arquivo de funções opcionais (functions.php) como parte dos arquivos de tema do WordPress.
Vejamos individualmente.
Temas filho
O tema mais simples possível é um tema filho que inclui apenas um style.css arquivo, além de quaisquer imagens. Isso é possível porque é um filho de outro tema que atua como seu pai.
Para um guia detalhado dos temas filhos, consulte Temas filhos. Folha de estilo
Além das informações de estilo CSS para o seu tema, style.css fornece detalhes sobre o tema na forma de comentários. A folha de estilo deve fornecer detalhes sobre o tema na forma de comentários. Não há dois temas podem ter os mesmos detalhes listados em seus cabeçalhos de comentários, pois isso causará problemas na caixa de diálogo de seleção de tema. Se você criar seu próprio tema copiando um existente, certifique-se de alterar esta informação primeiro.
O seguinte é um exemplo das primeiras linhas da folha de estilo, chamadas de cabeçalho da folha de estilo, para o tema “Vinte e Treze”:
NB: O nome usado para o Autor é sugerido ser o mesmo nome de usuário do wordpress.org do autor do tema, embora também possa ser o nome real do autor. A escolha é o autor do tema.
Observe a lista de tags usadas para descrever o tema. Elas permitem que o usuário encontre seu tema usando o filtro de tags. Você pode encontrar uma lista completa no Manual de revisão de temas .
As linhas do cabeçalho do comentário em style.css são necessárias para que o WordPress seja capaz de identificar o tema e exibi-lo no painel de administração em Design > Temas como uma opção de tema disponível junto com quaisquer outros temas instalados.
Diretrizes da folha de estilo
- Siga os padrões de codificação CSS ao criar seu CSS.
- Use CSS válido quando possível. Como exceção, use prefixos específicos do fornecedor para aproveitar as vantagens dos recursos do CSS3.
- Minimize os hacks de CSS. A exceção óbvia é o suporte específico para navegadores, geralmente versões do IE. Se possível, separe os hacks de CSS em seções separadas ou arquivos separados.
- Todos os elementos HTML possíveis devem ser estilizados por seu tema (a menos que seja um tema filho), tanto no conteúdo da página / postagem quanto em co conteúdo do comentário.
- Tabelas, legendas, imagens, listas, citações em bloco, etc.
- Você pode incluir uma folha de estilo de impressão com media = “print” ou adicionar um bloco de mídia de impressão em sua folha de estilo principal.
Arquivo de funções
Um tema pode, opcionalmente, usar um arquivo de funções, que reside no subdiretório do tema e é denominado functions.php. Este arquivo age basicamente como um plugin e, se estiver presente no tema que você está usando, é carregado automaticamente durante a inicialização do WordPress (tanto para páginas de administração quanto para páginas externas). Usos sugeridos para este arquivo:
- Enfileirar folhas de estilo e scripts de tema. Consulte wp_enqueue_scripts.
- Ative os recursos do tema, como barras laterais, menus de navegação, miniaturas de postagem, formatos de postagem, cabeçalhos personalizados, fundos personalizados e outros.
- Defina as funções usadas em vários arquivos de modelo de seu tema.
- Configure um menu de opções, dando aos proprietários do site opções de cores, estilos e outros aspectos do seu tema.
O tema padrão do WordPress contém funções. arquivo php que define muitos desses recursos, então você pode querer usá-lo como modelo. Visto que functions.php funciona basicamente como um plugin, a lista Function_Reference é o melhor lugar para obter mais informações sobre o que você pode fazer com este arquivo.
Nota para decidir quando adicionar funções a functions.php ou para um plugin específico: você pode achar que precisa que a mesma função esteja disponível para mais de um tema pai. Se for esse o caso, a função deve ser criada em um plugin em vez de em functions.php para o tema específico. Isso pode incluir tags de modelo e outras funções específicas. As funções contidas nos plug-ins serão vistas por todos os temas.
Arquivos de modelo
Os modelos são arquivos de origem PHP usados para gerar as páginas solicitadas pelos visitantes e são produzidos como HTML. Os arquivos de modelo são compostos de HTML, PHP e tags de modelo do WordPress.
Vejamos os vários modelos que podem ser definidos como parte de um tema.
O WordPress permite que você defina modelos separados para os vários aspectos do seu site. Não é essencial, no entanto, ter todos esses arquivos de modelo diferentes para que seu site funcione totalmente. Os modelos são escolhidos e gerados com base na hierarquia de modelos, dependendo de quais modelos estão disponíveis em um determinado tema.
Como um tema desenvolvedor, você pode escolher a quantidade de personalização que deseja implementar usando modelos. Por exemplo, em um caso extremo, você pode usar apenas um arquivo de modelo, denominado index.php, como modelo para todas as páginas geradas e exibidas pelo site. o uso mais comum é fazer com que diferentes arquivos de modelo gerem resultados diferentes, para permitir a personalização máxima.
Lista de arquivos de modelo
Aqui está a lista dos arquivos de tema reconhecidos pelo WordPress. Claro, seu tema pode conter qualquer outra folha de estilo, imagem ou arquivo. Apenas lembre-se de que o a seguir tem um significado especial para WordPress – consulte Hierarquia de modelo para obter mais informações.
style.css A folha de estilo principal. Isso deve ser incluído com o seu tema e deve conter o cabeçalho de informações para o seu tema. rtl.css A folha de estilo rtl. Isso será incluído automaticamente se a direção do texto do site for da direita para a esquerda. Isso pode ser gerado usando o plugin RTLer. Index.php O modelo principal. Se o seu tema fornece seus próprios modelos, index.php deve estar presente. comments.php O modelo de comentários. front-page.php O modelo de página inicial. home.php O modelo de página inicial, que é a página inicial por padrão.Se você usar uma página inicial estática, este é o modelo para a página com as últimas postagens. single.php O modelo de postagem única. Usado quando uma única postagem é consultada. Para este e todos os outros modelos de consulta, index.php é usado se o modelo de consulta não estiver presente. single- {post-type} .php O modelo de postagem única usado quando uma única postagem de um tipo de postagem personalizada é consultada. Por exemplo, single-book.php seria usado para exibir postagens únicas do tipo de postagem personalizado chamado “livro”. index.php é usado se o modelo de consulta para o tipo de postagem personalizado não estiver presente. page.php O modelo de página. Usado quando uma página individual é consultada. category.php O template de categoria. Usado quando uma categoria é consultada. tag.php O modelo de tag. Usado quando uma tag é consultada. taxonomy.php O modelo de termo. Usado quando um termo em uma taxonomia customizada é consultado. author.php O template do autor. Usado quando um autor é consultado. date.php O modelo de data / hora. Usado quando uma data ou hora é consultada. Ano, mês, dia, hora, minuto, segundo. archive.php O modelo de arquivo. Usado quando uma categoria, autor ou data é consultada. Observe que esse modelo será substituído por category.php, author.php e date.php para seus respectivos tipos de consulta. search.php O modelo de resultados da pesquisa. Usado quando uma pesquisa é realizada. anexo.php Modelo de anexo. Usado ao visualizar um único anexo. image.php Modelo de anexo de imagem. Usado ao visualizar um único anexo de imagem. Se não estiver presente, attach.php será usado. 404.php O modelo 404 não encontrado. Usado quando o WordPress não consegue encontrar uma postagem ou página que corresponda à consulta.
Esses arquivos têm um significado especial em relação ao WordPress porque são usados como substitutos para index.php, quando disponível, de acordo com a Hierarquia de Template, e quando a Tag Condicional correspondente retorna true. Por exemplo, se apenas uma única postagem está sendo exibida, a função is_single () retorna “true” e, se houver um arquivo single.php no Tema ativo, esse modelo é usado para gerar a página.
Modelos básicos
No mínimo, um tema WordPress consiste em dois arquivos:
- style.css
- index.php
Ambos os arquivos vão para o diretório Theme. O arquivo de modelo index.php é muito flexível. Ele pode ser usado para incluir todas as referências ao cabeçalho, barra lateral, rodapé, conteúdo, categorias, arquivos, pesquisa, erro e qualquer outra página criada no WordPress.
Ou pode ser dividido em um modelo modular arquivos, cada um assumindo parte da carga de trabalho. Se você não fornecer outros arquivos de modelo, o WordPress pode ter arquivos ou funções padrão para realizar seus trabalhos. Por exemplo, se você não fornecer um arquivo de modelo searchform.php, o WordPress terá uma função padrão para exibir o formulário de pesquisa.
Arquivos de modelo típicos incluem:
- comentários. php
- comments-popup.php
- footer.php
- header.php
- sidebar.php
Usando esses arquivos de modelo, você pode colocar tags de modelo no arquivo mestre index.php para incluir esses outros arquivos onde deseja que apareçam na página final gerada.
Aqui está um exemplo do incluir uso:
<?php get_sidebar(); ?><?php get_footer(); ?>
Os arquivos padrão para algumas funções de modelo podem estar obsoletos ou não estarem presentes, e você deve fornecer esses arquivos em seu tema. A partir da versão 3.0, os arquivos padrão obsoletos estão localizados em
wp-includes/theme-compat. Por exemplo, você deve fornecer header.php para a função get_header () funcionar com segurança, e comments.php para a função comments_template ().Para mais informações sobre como esses vários modelos funcionam e como gerar diferentes Para obter mais informações sobre eles, leia a documentação dos Modelos.
Modelos de página personalizados
Os arquivos que definem cada modelo de página são encontrados no diretório Temas. Para criar um novo modelo de página personalizado para uma página, você deve criar um arquivo. Vamos chamar nosso modelo de primeira página para nossa página snarfer.php. No topo do arquivo snarfer.php, coloque o seguinte:
<?php/*Template Name: Snarfer*/?>
O acima o código define este arquivo snarfer.php como o modelo “Snarfer”. Naturalmente, “Snarfer” pode ser substituído por quase qualquer texto para alterar o nome do modelo de página. Este nome de modelo aparecerá no Editor de temas como o link para editá-lo arquivo.
O arquivo pode ter quase qualquer nome com uma extensão .php (consulte nomes de arquivo de tema reservados para nomes de arquivo que você não deve usar; esses são nomes de arquivo especiais que o WordPress reserva para fins específicos).
O que segue as cinco linhas de código acima depende de você. O resto do código que você escrever controlará como as páginas que usam o modelo de página Snarfer serão exibidas. Consulte Tags de modelo para obter uma descrição das várias funções de modelo do WordPress você pode usar para este propósito. Você pode achar mais conveniente copiar algum outro modelo (talvez page.php ou index.php) para snarfer.php e então adicione as cinco linhas de código acima ao início do arquivo.Dessa forma, você só terá que alterar o código HTML e PHP, ao invés de criar tudo do zero. Exemplos são mostrados abaixo. Depois de criar um modelo de página e colocá-lo no diretório do seu tema, ele estará disponível como uma escolha quando você criar ou editar uma página. (Observação: ao criar ou editar uma página, a opção Modelo de página não aparece a menos que há pelo menos um modelo definido da maneira acima.)
Arquivos de modelo baseados em consulta
O WordPress pode carregar diferentes modelos para diferentes tipos de consulta. Existem duas maneiras de fazer isso: como parte da hierarquia de modelo incorporada e por meio do uso de tags condicionais dentro do loop de um arquivo de modelo.
Para usar a hierarquia de modelo, você basicamente precisa fornecer arquivos de modelo para fins especiais, que será usado automaticamente para sobrescrever index.php. Por exemplo, se o seu Tema fornece um modelo chamado category.php e uma categoria está sendo consultada, category.php será carregado em vez de index.php. Se category.php não estiver presente, index.php é usado normalmente.
Você pode ser ainda mais específico na Hierarquia de modelo fornecendo um f ile chamado, por exemplo, category-6.php – este arquivo será usado em vez de category.php ao gerar a página para a categoria cujo número de ID é 6. (Você pode encontrar os números de ID da categoria em Manage > Categorias se você estiver conectado como administrador do site no WordPress versão 2.3 e inferior. No WordPress 2.5, a coluna ID foi removida dos painéis de administração. Você pode localizar o id da categoria clicando em “Editar categoria” e procurando o valor cat_ID na barra de endereço do URL. A aparência será “… categories.php? Action = edit & cat_ID = 3” onde “3” é o id da categoria). Para obter uma visão mais detalhada de como esse processo funciona, consulte Modelos de categoria.
Se o seu tema precisar ter ainda mais controle sobre quais arquivos de modelo são usados do que o fornecido na hierarquia de modelo, você pode usar o Condicional Tag. A Tag Condicional basicamente verifica se alguma condição particular é verdadeira, dentro do Loop do WordPress, e então você pode carregar um modelo específico ou colocar algum texto específico na tela, com base nessa condição.
Para exemplo, para gerar uma folha de estilo distinta em uma postagem encontrada apenas em uma categoria específica, o código pode ser assim:
Ou, usando uma consulta, pode ser assim:
<?php$post = $wp_query->post;if ( in_category( "9" ) ) { get_template_part( "single2" );} else { get_template_part( "single1" );}?>Em ambos os casos, este código de exemplo fará com que diferentes modelos sejam usados, dependendo da categoria da postagem específica exibida. As condições de consulta não se limitam a categorias, no entanto, consulte o artigo Tags condicionais para ver todas as opções.
Definindo modelos personalizados
É possível usar o sistema de plug-ins do WordPress para definir modelos adicionais que são mostrados com base em seus próprios critérios personalizados. Este recurso avançado pode ser realizado usando o gancho de ação “template_include”. Mais informações sobre a criação de plug-ins podem ser encontradas na referência da API de plug-ins.
Incluindo arquivos de modelo
Para carregar outro modelo (diferente de cabeçalho, barra lateral, rodapé, que têm comandos incluídos predefinidos como get_header ()) em um template, você pode usar get_template_part (). Isso torna mais fácil para um tema reutilizar seções de código.
Fazendo referência a arquivos de um modelo
Ao fazer referência a outros arquivos dentro do mesmo tema, evite URIs e caminhos de arquivo embutidos em código. Em vez disso, faça referência aos URIs e aos caminhos de arquivo com bloginfo (): consulte Referenciando arquivos de um modelo.
Observe que os URIs usados na folha de estilo são relativos à folha de estilo, não à página que faz referência à folha de estilo. Por exemplo, se você incluir um diretório / imagens em seu tema, precisará apenas especificar este diretório relativo no CSS, como:
h1 { background-image: url(images/my-background.jpg);}Plugin API Hooks
Ao desenvolver temas, é bom ter em mente que seu tema deve ser configurado para que funcione bem com quaisquer plug-ins do WordPress que os usuários possam decidir instalar. Os plug-ins adicionam funcionalidade ao WordPress por meio de “Ação Ganchos “(consulte API de plug-in para obter mais informações).
A maioria dos ganchos de ação está dentro do código PHP do WordPress, portanto, seu tema não precisa ter nenhuma tag especial para funcionar. Mas algumas ações Os ganchos precisam estar presentes em seu tema, para que os plug-ins exibam informações diretamente em seu cabeçalho, rodapé, barra lateral ou no corpo da página. Aqui está uma lista de tags de modelo de ganchos de ação especiais que você precisa incluir:
wp_enqueue_scripts Usado no arquivo de funções do tema. Usado para carregar scripts externos e folhas de estilo. wp_head () Vai no < head > elemento de um tema, em header.php. Exemplo de uso de plugin: adicionar código JavaScript. wp_footer () Vai em footer.php, logo antes da tag de fechamento < / body >. Exemplo de uso de plugin: insira o código PHP que precisa ser executado depois de todo o resto, na parte inferior do rodapé.Muito comumente usado para inserir código de estatísticas da web, como o Google Analytics. wp_meta () Normalmente vai no < li > Meta < / li > seção do menu ou barra lateral de um Tema; modelo sidebar.php. Exemplo de uso de plug-in: inclui um anúncio giratório ou uma nuvem de tags. Comment_form () Vai em comments.php diretamente antes do arquivo ” tag de fechamento s (< / div >). Exemplo de uso de plug-in: exibe uma visualização do comentário.
Para um exemplo de uso do mundo real, você encontrará esses ganchos de plug-in incluídos nos modelos padrão do tema.
API de personalização do tema
A partir do WordPress 3.4, um novo O recurso de personalização de tema está disponível por padrão para quase todos os temas do WordPress. A página de administração da Personalização do tema é preenchida automaticamente com opções para as quais um tema declara suporte com add_theme_support () ou usando a API de configurações e permite que os administradores vejam visualizações não permanentes das alterações feitas em tempo real.
Os desenvolvedores de tema e plug-in interessados em adicionar novas opções à página de Personalização de Tema de um tema devem consultar a documentação na API de Personalização de Tema. Tutoriais adicionais na API de Personalização de Tema estão disponíveis no site Ottopress.com.
Dados não confiáveis
Você deve escapar do conteúdo gerado dinamicamente em seu tema, especialmente o conteúdo que é gerado para atributos HTML. Conforme observado nos Padrões de codificação do WordPress, o texto que entra nos atributos deve ser executado por meio de esc_attr () para que um único ou aspas duplas não encerram o valor do atributo e invalidam o XHTML e causam um problema de segurança. Os locais comuns a serem verificados são os atributos title, alt e value.
Existem algumas tags de modelo especiais para casos comuns em que A saída segura é necessária. Um desses casos envolve a saída de um título de post para um atributo title usando the_title_attribute () em vez de the_title () para evitar uma vulnerabilidade de segurança. Aqui está um exemplo de escape correto para o atributo title de um link de título de postagem ao usar texto traduzível:
<a href="<?php the_permalink(); ?>" title="<?php sprintf( __( "Permanent Link to %s", "theme-name" ), the_title_attribute( "echo=0" ) ); ?>"><?php the_title(); ?></a>
Translation Support / I18n
Para garantir uma transição suave para a localização de idioma, use as funções i18n baseadas em gettext do WordPress para envolver todo o texto traduzível nos arquivos de modelo. Isso torna mais fácil para os arquivos de tradução conectar e traduzir os rótulos, títulos e outros textos de modelo em o idioma atual do site. Veja mais em WordPress Localization e I18n para WordPress Developers.
Classes de tema
Implemente as seguintes tags de modelo para adicionar atributos de classe gerados pelo WordPress a elementos de corpo, postagem e comentário. Para pós-aulas, aplique-se apenas aos elementos do The Loop.
- body_class ()
- post_class ()
- comment_class ()
Lista de verificação do arquivo de modelo
Ao desenvolver um tema, verifique seus arquivos de modelo em relação aos seguintes padrões de arquivo de modelo.
Cabeçalho do documento (header.php)
- Use o DOCTYPE adequado.
- A tag de abertura < html > deve incluir language_attributes ( ).
- O elemento < meta > conjunto de caracteres deve ser colocado antes de todo o resto, incluindo o < title > elemento.
- Use bloginfo () para definir o < meta > charset e elementos de descrição.
- Use wp_title () para definir o < título . Veja por quê.
- Use links de feed automáticos para adicionar links de feed.
- Adicione uma chamada para wp_head () antes de < / head de fechamento tag >. Os plug-ins usam este gancho de ação para adicionar seus próprios scripts, folhas de estilo e outras funcionalidades.
- Não vincule as folhas de estilo do tema no modelo de cabeçalho. Use o gancho de ação wp_enqueue_scripts em uma função de tema.
Aqui está um exemplo de uma área de cabeçalho compatível com HTML5 formatada corretamente:
Menus de navegação (header.php )
- A navegação principal do Tema deve suportar um menu personalizado com wp_nav_menu ().
- Os menus devem suportar títulos de link longos e uma grande quantidade de itens de lista. Esses itens não devem quebrar o design ou layout.
- Os itens do submenu devem ser exibidos corretamente. Se possível, suporte estilos de menu suspenso para itens de submenu. Os menus suspensos permitem mostrar a profundidade do menu em vez de apenas mostrar o nível superior.
- O tema deve ser widgetized tão completamente quanto possível. Qualquer área no layout que funciona como um widget (nuvem de tag, blogroll, lista de categorias) ou pode aceitar widgets (barra lateral) deve permitir widgets.
- Conteúdo que aparece em áreas widgetizadas por padrão (codificado na barra lateral, por exemplo) deve desaparecer quando os widgets são habilitados em Appearance > Widgets.
Rodapé (footer.php)
- Use a chamada wp_footer () para aparecer antes de fechar a tag body.
<?php wp_footer();