wp tema filho

CodexCodex

Contents

1 Estrutura de diretórios

2 Arquivo style.css

3 Arquivo functions.php

4 Arquivo de Modelo

5 Outros arquivos

6 Recursos

Interested in functions, hooks, classes, or methods? Check out the new WordPress Code Reference

pt-br:Temas Filhos

Tema Filho é um tema que herda a funcionalidade de um outro, chamado Tema pai ou tema principal e lhe permite

modificar ou acrescentar a funcionalidade do tema principal. Este artigo mostra como criar um tema filho e explica o

que você pode fazer com ele. Como exemplo de tema principal usamos o WordPress Twenty Fifteen theme

Fazer um tema filho é muito simples. Crie um diretório, coloque dentro um arquivo style.css formatado

corretamente e você tem um tema filho! Com um pouco de compreensão da linguagem HTML e CSS, você pode

modificar totalmente o tema principal sem editar os arquivos do tema original em si. Dessa forma, quando o tema

principal é atualizado, as modificações são preservadas.

Por esta razão, os temas filho são a maneira recomendada de fazer modificações em um tema.

Com uma compreensão básica de PHP, Modelos WordPress e API de Plugin, você pode fazer o tema filho cobrir

virtualmente todos os aspectos de um tema principal e, novamente, sem alterar os arquivos do tema principal.

Estrutura de diretóriosUm tema filho reside em seu próprio diretório no wp-content/themes. O esquema

abaixo mostra a localização de um tema filho, juntamente com o seu tema principal

(exemplo em WordPress Twenty Fifteen theme) em uma estrutura típica diretório

WordPress:

public_html

wp-content

themes (diretório onde ficam os temas)

twentyten (diretório do nosso tema principal exemplo, WordPress Twenty Fifteen theme

twentyten-child (diretório do nosso tema filho, pode ser qualquer nome)

style.css (arquivo necessário em um tema filho, deve ser style.css)

Este diretório deve conter no mínimo o arquivo style.css, e no máximo qualquer outros arquivo que seja

Codex tools: Log in

pt-br:Temas Filhos « WordPress Codex http://codex.wordpress.org/pt-br:Temas_Filhos

1 de 6 10-07-2015 09:49

necessário.

Style.css (obrigatório)1.

Functions.php (opcional)2.

Os arquivos de modelo (opcional)3.

Outros arquivos (opcional)4.

Arquivo style.cssÉ o único arquivo obrigatório em um tema filho. Ele fornece as informações de cabeçalho, através da qual

WordPress reconhece o tema filho, e o arquivo style.css do tema principal.

Como acontece com qualquer tema WordPress, o cabeçalho de informação deve estar no início do arquivo, a única

diferença é que no arquivo do tema filho a linha Template: é necessária, de modo que o WordPress saiba qual é o

tema pai.

Aqui está um exemplo de cabeçalho de informações para arquivo style.css de um tema filho.

/*Theme Name: Twenty Ten FilhoTheme URI: http: //example.com/Description: Tema filho para o Twenty TenAuthor: Seu nome aquiAuthor URI: http: //exemplo.com/sobre/Template: twentytenVersion: 0.1.0*/

Uma rápida explicação de cada linha:

Theme Name. (Obrigatório) Nome do tema filho

Theme URI. (Opcional) Site do autor do tema filho

Description. (Opcional) Um descrição sobre o tema filho

Author URI. (Opcional) Site do autor

Author. (Opcional) Nome do autor

Template. (Obrigatório) Nome do diretório do tema principal

NOTA. Você tem que mudar para um tema diferente e voltar para o tema filho quando modificar essa linha.

Version. (Opcional) Versão do tema filho Ex.: 0.1, 1.0, etc.

A parte depois do fechamento */ no cabeçalho funciona como um arquivo de estilo regular. É onde você coloca as

regras de estilo que deseja aplicar ao WordPress.

Note que o estilo de um tema filho substitui o estilo do tema principal completamente. O arquivo de estilo do

tema pai não será lido. Então, se você simplesmente deseja modificar algumas coisas no estilo e layout de um dos

arquivos do tema principal, ao invés de fazer algo novo a partir do zero, você tem que importar explicitamente o


2 de 6 10-07-2015 09:49

estilo do tema principal e depois adicionar as suas modificações. O exemplo a seguir mostra como usar a regra

@import para fazer isso.

Exemplo de um tema filho básico

Nosso tema principal para este exemplo é WordPress Twenty Fifteen theme. Nós gostamos de quase tudo nele, exceto

a cor do título do site, que queremos mudar de preto para verde. Usando um tema filho, tudo o que temo a fazer é

seguir três passos simples:

Crie um novo diretório nowp-content/themes, e nomeie para WordPress Twenty Fifteen theme(ou qualquer coisa

que quiser).

1.

Salve o código abaixo em um arquivo chamado style.css, e salve o arquivo no novo diretório.2.

Vá para o Painel > Aparência > Temas e ative o novo tema, o WordPress Twenty Fifteen theme Filho.3.

/*Theme Name: Twenty Ten ChildDescription: Tema filho para Twenty Ten theme Author: Seu nomeTemplate: twentyten*/

@import url("../twentyten/style.css");

#site-title a { color: #009900;}

Aqui está o que o código acima faz, passo a passo:

/* abre o cabeçalho com informações do tema filho.1.

Theme Name: declara o nome do tema filho.2.

Description: descreve o que o tema é. (Opcional, pode ser omitido.)3.

Author: declara o nome do autor. (Opcional, pode ser omitido.)4.

Template: declara o pai do tema filho, ou seja, o diretório do tema cujos modelos o tema filho usa.5.

*/ fecha o cabeçalho com informações do tema filho.6.

@import regra para trazer estilo do tema pai.7.

#site-title a define a cor verde para o nome do site, substituindo a regra correspondente do tema pai.8.

Nota sobre a regra @import

Não deve haver outras regras CSS acima de@import. Se você colocar outras regras acima, esta será invalidada e o

estilo do tema pai, não será importado.

Arquivo functions.phpAo contrário de style.css, o arquivo functions.php de um tema filho não substitui o arquivo do tema pai. Em vez

disso, é carregado ao mesmo tempo.Especificamente, ele é carregado antes do arquivo do functions.php


3 de 6 10-07-2015 09:49

pai.

Dessa forma, o functions.php de um tema filho oferece um método inteligente e livre de problemas de modificar a

funcionalidade de um tema principal. Digamos que você deseja adicionar uma função PHP para o seu tema. A forma

mais rápida seria a abertura de seu functions.php e colocar a função lá. Mas isso não é inteligente: A próxima vez

que seu tema é atualizado, a função irá desaparecer. A forma inteligente: você pode criar um tema filho, adicionar

um arquivo functions.php nele e adicionar a função para esse arquivo. A função vai fazer exatamente o mesmo

trabalho com a vantagem de que não será afetado por futuras atualizações do tema principal.

A estrutura do arquivo functions.php é simples: Uma tag de abertura do PHP na parte superior, uma tag de

fechamento PHP, na parte inferior e, entre eles, seus blocos de PHP. Nele você pode colocar tantas ou nenhuma

função, como você desejar. O exemplo abaixo mostra um arquivo functions.php fundamental que faz uma coisa

simples: Adiciona um link para do favicon no cabeçalho head das páginas:

function favicon_link() { echo '<link rel="shortcut icon" type="imagem/x-icon" href="/favicon.ico" />' . "\n";}add_action('wp_head', 'favicon_link');

Dica para desenvolvedores de temas

O fato do arquivo functions.php do tema filho ser carregado primeiro permite fazer com que as funções de usuário

do seu tema seja "plugável" - isto é, substituível por um tema filho - ao declará-los condicionalmente. Por exemplo:

if (!function_exists('theme_special_nav')) { function theme_special_nav() { // Fazer isso e aquilo etc }}

Dessa forma, um tema filho pode substituir uma função PHP do tema pai, simplesmente declarando-o novamente.

Incluindo Arquivos para Manter a Ordem

Quando incluir arquivos no functions.php de uma tema filho, para mantê-lo legível você precisará usar a constante

STYLESHEETPATH em vez de TEMPLATEPATH mais tipicamente vistos.

require_once( STYLESHEETPATH . '/path/to/file/in/child/theme.php' );

Arquivo de ModeloOs Arquivos de Modelo de um tema filho se funcionam como style.css: eles substituem os arquivos do tema

principal. Um tema filho pode substituir qualquer arquivo do tema pai, basta utilizar um arquivo com o mesmo


4 de 6 10-07-2015 09:49

nome. (Nota:index.php pode ser substituído somente em WordPress 3.0 e superior).

Novamente, esse recurso do WordPress permite modificar os modelos de um tema pai sem realmente editar os arquivos dele, de modo que suas modificações sejam preservados quando o tema principal é atualizado.

Aqui estão alguns exemplos de casos de uso de arquivos de modelo em um tema filho:

Para adicionar um modelo que não é oferecido pelo tema pai (por exemplo, um modelo para uma página de

sitemap, ou para páginas de coluna única, que estará disponível para selecionar na tela de edição de páginas

Para adicionar um modelo mais específico, por exemplo, um arquivo tag.php para mostrar a lista de postagens

sobre tags.

Para substituir um modelo do pai (por exemplo, fazer a sua própria home.php e substituir o arquivo do tema pai.

Outros arquivosAlém de style.css, functions.php e arquivos do modelo como index.php,single.php etc um tema filho pode usar

qualquer tipo de arquivo de temas, contanto que o arquivo esteja corretamente ligado. Por exemplo, um tema filho

pode usar ícones e imagens que estão vinculadas a partir da sua folha de estilo, arquivos JavaScript etc.

RecursosThematic - Sobre o tema Thematic no site da Comunidade WordPress Brasil.

Codex WordPress BrasilA documentação do WordPress em Português do Brasil.Todas as comunidades lusófonas também são bem-vindas! Adicione {{Codex-pt}} em seus artigos.

Category:

Codex-pt

Home Page

WordPress Lessons

Getting Started

Working with

WordPress

Design and Layout

Advanced Topics

Troubleshooting

Developer Docs

About WordPress

Codex


5 de 6 10-07-2015 09:49

Resources

Community portal

Current events

Recent changes

Random page

Help

About

Blog

Hosting

Jobs

Support

Developers

Get Involved

Learn

Showcase

Plugins

Themes

Ideas

WordCamp

WordPress.TV

BuddyPress

bbPress

WordPress.com

Matt

Privacy

License / GPLv2

Follow Follow @WordPress@WordPress

933 milCurtirCurtir

>10mil


6 de 6 10-07-2015 09:49

wp tema filho

Documents