Um guia para o desenvolvimento de temas infantis WordPress

Há vários motivos pelos quais os desenvolvedores do WordPress estão começando a usar temas filhos. Eles oferecem a oportunidade de personalizar um layout exclusivo sobre outro tema existente. Isso é perfeito para iniciantes que querem brincar com a construção de seus próprios temas.

Além disso, muitos designs premium lançarão novas atualizações ao longo do tempo. Se você estiver fazendo alterações nos arquivos principais do tema, elas serão sobrescritas durante a execução de uma atualização, mas os temas filhos serão separados e ordenadamente ocultos. Isso significa que você pode criar temas premium existentes e economizar muito tempo no processo.

Neste guia, quero apresentar os conceitos básicos da construção de um tema infantil do WordPress e por que é uma boa ideia.

Começando

Temas infantis não são tão difíceis quanto podem parecer. Os benefícios de trabalhar com um tema pai significam que você não precisa escrever todo o HTML / CSS do zero. Um tema filho usará automaticamente todos os arquivos de modelo que você incluir, como sidebar.php ou footer.php. Mas se eles estão faltando, então seu tema filho vai puxar os mesmos arquivos de seu pai.

Essa funcionalidade oferece uma enorme liberdade para personalizar modelos já existentes. Também é ótimo para retocar áreas em seu site para eventos especiais, como adicionar padrões de design para o Natal ou Ano Novo..

Seus arquivos necessários

Você só precisa de uma única folha de estilo .css para configurar um tema filho no WordPress. Você também precisa criar um novo diretório no / wp-content / themes pasta que abrigará o tema do seu filho. Preste atenção que você não são criando esta pasta dentro do tema pai, mas junto com ela no mesmo diretório de temas.

Os desenvolvedores geralmente incluem um arquivo functions.php e screenshot.png na mesma pasta do seu novo arquivo CSS. A captura de tela é exibida no painel de administração do WordPress e o arquivo de tema de funções pode ser usado para várias alterações de back-end.

Mas, por enquanto, devemos nos concentrar na folha de estilos principal. Isso é comumente chamado style.css e inclui um cabeçalho de comentário com informações meta-chave. Isso é importante porque o seu tema só será exibido como filho se você incluir o nome do diretório do pai. Abaixo está um comentário de cabeçalho de exemplo:

 / * Nome do Tema: URI do tema Twenty Eleven Child: http: //example.com/ Descrição: Tema infantil para o design do Twenty Eleven Autor: Jake Rocheleau Autor URI: http: //www.hongkiat.com/blog/ Template: twentyeleven Versão: 0.1 * /

O valor para modelo deve ser o nome do diretório para o tema pai acompanhado. Além disso, todas as outras tags devem ser familiares ao tema padrão do WordPress.

Embora todos os modelos PHP pais sejam utilizados, o style.css do pai original não ser importado automaticamente. Se você quiser trabalhar com os estilos originais, terá que incluí-lo no topo do documento style.css do seu filho. Abaixo está um exemplo incluindo o tema do WP Twenty Eleven.

 @import url ("… /twentyeleven/style.css");

Configurando novos estilos

Aplicar regras CSS ao seu tema é tão fácil quanto editar o original. Se você souber quais elementos você precisa segmentar, use os mesmos seletores em seu próprio tema filho.

Poderíamos demonstrar com algumas mudanças realmente fáceis de links e parágrafos. Eu usei o código do tema original do Twenty Eleven para segmentar os diferentes elementos. Às vezes, é necessário usar um seletor mais específico para substituir o design mais antigo.

 corpo preenchimento: 0 1.4em;  #page margin: 1.667em auto; max-width: 900px;  a color: # 5281df; text-decoration: nenhum; família-fonte: Calibri, Tahoma, Arial, sans-serif;  a: foco, a: ativo, a: hover text-decoration: underline;

Nessas alterações, reduzi o tamanho geral do corpo e também removi alguns preenchimentos das bordas. Todos esses seletores podem ser encontrados listados no documento .css original. É notável que eu também estou alterando algumas propriedades para todos os links de âncora que incluem uma pilha de fontes e uma escolha de cor diferentes.

As coisas importantes

O CSS tem uma declaração especial para marcar a prioridade acima de outros estilos. A sintaxe é exibida como !importante começando com o ponto de exclamação e terminando no final da sua propriedade CSS. Isso é necessário se você tiver estilos em cascata de um tema pai que estão substituindo suas próprias regras personalizadas.

 um color: # 5281df! importante; text-decoration: nenhum; família-fonte: Calibri, Tahoma, Arial, sans-serif;

Acima copiei minhas alterações originais e editei a cor do texto âncora com uma cláusula importante. Isso terá precedência sobre todos os outros estilos da mesma profundidade de seleção. Elementos mais definidos (como #access li: hover> a) normalmente manterão seus próprios estilos, a menos que cor ainda era herdado do nosso seletor original. Neste caso, nosso tema pai não configura uma propriedade font-family em links de âncora, então, como tal, não nos deparamos com nenhum problema de herança.

Se você está tendo problemas para fazer as alterações, tente exibir uma dessas marcas importantes no final da declaração de propriedade. Esta não é uma solução perfeita para todos os problemas de herança, mas é útil com muito mais freqüência do que você imagina.

Clonando functions.php

Ao contrário da folha de estilo principal, o tema filho importará as funções do pai automaticamente. Isso significa que você não precisa copiar qualquer código PHP para ativá-lo em seu novo tema. No entanto, se você quiser redefinir algumas das funções, você pode criar outras functions.php e escrever em seu novo código com quaisquer alterações..

Como exemplo, construí uma função que analisa alguns arquivos JavaScript quando o modelo é iniciado. Isso removerá quaisquer versões mais antigas dos scripts jQuery e SWFObject, ao mesmo tempo em que adicionará as versões mais recentes ao wp_head área.

 // fila arquivos js para função load mytheme_js () if (is_admin ()) return; wp_deregister_script ('jquery'); wp_register_script ('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'); wp_enqueue_script ('jquery'); wp_deregister_script ('swfobject'); wp_register_script ('swfobject', 'http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js'); wp_enqueue_script ('swfobject');  add_action ('init', mytheme_js);

Gostaria de salientar que se você está importando o código do pai functions.php, então você terá que usar um nome de função diferente. Caso contrário, o PHP irá dar um erro fatal e você terá que FTP para o servidor para corrigir o erro.

Trabalhando com arquivos de tema

A categoria mais ampla de temas é criar layouts personalizados e tipos de página. Por padrão, seu tema filho herdará todos os arquivos de tema de seus pais. Mas você tem a opção de criar novos arquivos de tema filho e o WP registrará esses como o modelo 'principal'.

Por exemplo arquivo.php e index.php são usados para exibir os arquivos de postagem e a tela da página inicial, respectivamente. Se houver alterações que você gostaria de fazer que exigem edições no HTML, seria mais seguro clonar os arquivos principais e editá-los no diretório de temas do filho..

Modelos de página personalizada

Enquanto estamos falando de arquivos de modelo, também quero apresentar uma funcionalidade do WordPress com a qual muitos não estão familiarizados. Você pode criar páginas e postar modelos que serão selecionáveis no painel do administrador ao criar novos conteúdos. Mesmo se o tema pai não tiver o novo arquivo de modelo personalizado, o WordPress ainda usará o filho no lugar de um page.php ou single.php.

Primeiro crie um novo arquivo chamado page-offer.php. Este será um “oferta especial” página promocional que é temática diferente de todas as outras. Aqui você pode copiar o código da sua página original ou até construir o tema inteiramente do zero. O único código que precisamos informar ao WordPress sobre esse novo modelo é uma configuração de comentário no PHP.

Outra alternativa para esse método é criar páginas personalizadas com o nome do número de identificação exclusivo. Então, ao invés de carregar o padrão arquivo.php para páginas de autor você poderia criar um arquivo como autor-ID.php onde ID é o número de identificação exclusivo do WordPress do usuário. Embora este sistema seja mais exigente, você precisará criar um novo arquivo de modelo para cada um dos autores em seu site.

Torna-se mais útil se você puder combinar essas duas técnicas com outros arquivos de modelo. Nomeadamente categorias e tags funcionam bem usando seus próprios arquivos de tema. Além disso, se você vincular anexos em seu conteúdo, convém considerar os diferentes layouts de modelo possíveis para cada tipo de mime. Eu incluí a hierarquia de modelos abaixo para um simples anexo de imagem JPEG:

image.php
jpeg.php
image_jpeg.php
attachment.php

Ferramentas úteis do WordPress

O próprio WordPress tem um sistema de plugins versátil que pode gerenciar muitas personalizações. Como os temas infantis são tão novos, não há um grande ataque de lançamentos de terceiros (ainda). No entanto, existem algumas ferramentas que você pode verificar para tornar o seu tempo de desenvolvimento um pouco mais curto.

Uma menção óbvia é o plugin One-Click Child Theme construído e testado para a última versão do WordPress 3.x. Adiciona um link de menu ao seu administrador “Temas” seção para construir automaticamente um filho usando seu tema ativo no momento. Isso é fantástico se você não quer mexer com o FTP e está procurando brincar com algumas idéias novas.

Se você planeja editar esses arquivos dentro do painel de administração, você também apreciará um realce de sintaxe mais claro. Isso não é oferecido no WordPress por padrão, mas você pode instalar o Advanced Code Editor para algumas funcionalidades muito melhoradas. Isso torna o wading por blocos de código PHP e HTML / CSS muito mais gerenciável.

Recursos adicionais

Juntamente com todas as dicas deste guia, quero compartilhar um conjunto de links importantes para desenvolvedores de temas. Já existem tantos artigos excelentes e temas infantis gratuitos que você pode conferir para estudar mais a fundo esse assunto. Eu adicionei uma coleção maravilhosa destes recursos abaixo:

8 Vinte e Onze Temas Infantis
WordPress Online Codex »Temas Infantis
Como construir um tema infantil do WordPress usando ganchos e filtros
Algumas palavras sobre temas infantis
Como criar, modificar e usar temas filho no WordPress

Conclusão

Espero que o processo de criação de temas infantis do WordPress seja mais claro para você depois de ler este artigo. Eu tentei explicar como os temas filhos podem herdar modelos CSS e PHP de um pai. Além disso, é muito simples manipular arquivos específicos e criar seus próprios temas exclusivos.