Construindo um Tema Filho
Codex → Temas no BuddyPress → Construindo um Tema Filho
A criação de próprio tema BuddyPress é extremamente simples, graças à funcionalidade Tema pai-Tema filho disponível no BuddyPress. Este guia passo-a-passo irá ajudá-lo a construir seu próprio tema personalizado. Os temas do BuddyPress incluem mais modelos do que um tema WordPress padrão, no entanto, estes modelos seguem exatamente a mesma estrutura dos modelos WordPress.
Porque tema filho? Não basta criar um tema novo?
Construir um tema filho é a maneira mais fácil e mais resistente a atualizações futuras do BuddyPress. Você pode tirar proveito da funcionalidade de um tema existente e fazer ajustes para que atenda às suas próprias necessidades. Ao estender o tema padrão BuddyPress, você herda todos os modelos, JS, AJAX e se desejar, o CSS, tudo ao mesmo tempo preservando os arquivos core pb-default do tema. Quando novas versões do BuddyPress forem liberadas, com o tema padrão atualizado, o tema irá atualizar automaticamente junto com ele!
Você pode substituir qualquer modelo do tema pai simplesmente (1) copiando o arquivo para seu tema filho e fazendo os ajustes que quiser ou (2) criando um arquivo de modelo com o mesmo nome no diretório do tema filho. Você também pode adicionar seu próprio CSS, JS e recursos AJAX.
Vamos começar a construir
O tema BuddyPress padrão não está localizado no diretório do WordPress em /wp-content/themes/. Ele é armazenado na pasta do plugin BuddyPress para que possa ser atualizado junto com o plugin. O WordPress sabe onde está, mesmo que o seu próprio tema é em /wp-content/themes/.
O primeiro passo é criar uma pasta com nome único para o novo tema em /wp-content/themes. Para este exemplo, o tema é chamado de “dusk“. Nesta nova pasta, crie um arquivo chamado “style.css“. Este arquivo será a folha de estilos do tema filho.
Abra “style.css” e adicione o seguinte código no início, substituindo os detalhes necessários com os seu próprios:
Nota: os “rótulos” Theme Name, Author etc deve estar examente como no exemplo e não devem ser traduzidos
/* Theme Name: BuddyPress Dusk Theme URI: http://example.org/themes/dusk/ Description: Dark theme for BuddyPress. Version: 1.0 Author: John Doe Author URI: http://example.org/ Template: bp-default Tags: buddypress, two-column, grey, dark */
Observe o item Template:, ele diz ao WordPress que queremos usar o tema padrão do BuddyPress (bp-default) como o tema pai e herdar todos os modelos a partir dele. Observe também Tags: buddypress. Isto informa que você está usando um tema que suporta o BuddyPress e assim não será exibido um aviso na área administrativa.
Salve o arquivo, e neste ponto, vamos ativar o novo tema!
Na área de administração do WordPress, em Aparência, você vai ver seu novo tema na lista de temas. Vá em frente e ative o novo tema.
Verifique agora a página inicial do site. Você vai perceber que não há nenhum estilo. Apenas o texto em uma página branca, possivelmente com uma imagem de cabeçalho desconfigurada. Isso é ótimo, é exatamente o que queremos por enquanto. Isso significa que o seu tema novo filho está funcionando corretamente e herdando todos os arquivos de modelo. Se você clicar em alguns links a navegação funciona normalmente, mas o site está sem nenhum estilo.
Herdando o CSS
Neste ponto, você tem uma decisão importante a fazer, você pode começar a escrever o seu próprio CSS do zero, ou pode herdar o CSS do tema padrão e trabalhar a partir dele. Se você vai fazer um projeto radicalmente novo tema, pode querer começar do nada, mas se você simplesmente quer mudar o esquema de cores e talvez alterar o layout um pouco, é recomendável herdar o CSS que já está pronto.
Se decidir herdar o CSS, você vai precisar adicionar as seguintes linhas ao seu arquivo “style.css” ( logo abaixo do comentário do cabeçalho):
/* Inherit the default theme styles */ <a href="https://buddypress.org/community/members/import/" rel="nofollow">@import</a> url( ../../plugins/buddypress/bp-themes/bp-default/_inc/css/default.css ); /* Inherit the default theme adminbar styles */ <a href="https://buddypress.org/community/members/import/" rel="nofollow">@import</a> url( ../../plugins/buddypress/bp-themes/bp-default/_inc/css/adminbar.css );
Depois de adicionar estas linhas, atualize a página inicial novamente. Você vai perceber que o site agora está usando o estilo do tema padrão. Isso é perfeito, agora pode começar a fazer ajustes de design em seu próprio tema, adicionando seus próprios estilos CSS abaixo desta linha. Se decidiu não herdar o CSS, então você pode simplesmente começar a adicionar seus próprios estilos logo abaixo do comentário do cabeçalho.
Substituindo e adicionar arquivos de modelo
Por padrão, o tema filho vai herdar todos os arquivos de modelo no tema pai. E se quiser alterar algum do HTML embora? A maioria das mudanças de design e layout podem ser feitas por CSS, mas se você realmente precisa mudar alguma coisa na estrutura, então você pode substituir arquivos de modelo.
Como exemplo, vamos substituir o arquivo de modelo header.php. O primeiro passo é ir até a pasta do plugin BuddyPress (geralmente wp-content/plugins/buddypress/) e em seguida, para a pasta bp-themes/bp-default. Nesta pasta você verá o arquivo header.php, copie este arquivo e cole-o diretamente na pasta do seu tema filho (junto do arquivo style.css). Agora só fazer as edições no HTML e estas serão refletidas em seu tema filho. O arquivo header.php do seu tema filho substituirá o arquivo do tema pai.
Você pode fazer isso com qualquer arquivo de modelo do tema pai. No entanto, se você deseja substituir um arquivo de modelo que está em uma subpasta, você também deve recriar a subpasta em seu tema filho.
functions.php
Há uma exceção à regra de substituição de modelos – o arquivo functions.php. Se você criar um arquivo functions.php vazio em seu tema filho, o arquivofunctions.php do tema pai ainda será carregado. Isso permitirá que herde as funções existentes, mas também as suas próprias funções. Você deve se certificar que suas funções no tema filho tenham um nome único, caso contrário vão entrar em conflito com o pai.
Isso é realmente tudo o que é precio para a criação de temas filhos! Espero que tenha achado este guia útil e lembre-se que se construir e usar temas desta forma, as atualização BuddyPress serão muito fáceis e seguras.
