Como personalizar um tema criado sobre um modelo básico BuddyPress

Escrito por vail joy | Traduzido por vinícius albuquerque
  • Compartilhar
  • Tweetar
  • Compartilhar
  • Pin
  • E-mail
Como personalizar um tema criado sobre um modelo básico BuddyPress
Como roupas, os temas permitem que você "vista" o seu site sem alterar os arquivos de base (Thomas Northcut/Lifesize/Getty Images)

Os temas BuddyPress permitem que web designers de todos os níveis de competência tenham flexibilidade para criar modelos e visuais mantendo a integridade do sistema. Esse método possibilita atualizações do framework e dos arquivos do modelo básico utilizado sem, contudo, afetar o visual do seu site. Os temas construídos sobre o modelo básico podem ser facilmente personalizados, da mesma forma que um tema comum do WordPress é criado do zero ou modificado, através do painel Aparência.

Nível de dificuldade:
Moderadamente fácil

Outras pessoas estão lendo

Instruções

  1. 1

    Crie uma nova pasta no computador com o nome que você desejar dar ao tema ("MeuTemaBP", por exemplo). Copie o arquivo "style.css" do tema que deseja personalizar, cole nessa pasta e abra-o em um editor de texto ou de HTML. Se estiver começando do zero, crie um arquivo no programa de edição e copie o seguinte cabeçalho nele:

    / Theme Name: MeuTemaBP Template: bp-default /

    O "Theme Name" corresponde ao nome que escolher para o tema; o "Template" está definido como "bp-default" para que o WordPress use a estrutura do BuddyPress em qualquer parte que você não tenha alterado nos arquivos do tema. Salve o novo arquivo na pasta do tema com o nome "style.css".

  2. 2

    Abra a pasta do BuddyPress em clique duas vezes em "_inc" e depois em "css". Abra os arquivos "default.css" e "adminbar.css" no editor. Copie o conteúdo dos dois e cole abaixo do cabeçalho no "style.css" que você criou.

  3. 3

    Edite os arquivos de acordo com a aparência desejada para o tema. Se não estiver certo sobre quais partes do arquivo editar, utilize o navegador Opera ou instale o plugin FireBug no Firefox para ativar a inspeção de código no menu do navegador. Carregue o BuddyPress no navegador, utilizando o tema que está sendo personalizado. Clique com o botão direito no elemento que desejar alterar, como um link, área, imagem ou menu. Uma janela exibirá o código HTML e o CSS que corresponder ao elemento selecionado. Além disso, o elemento será ressaltado na página para facilitar a seleção. Desse modo pode-se encontrar e editar facilmente os seletores e classes correspondentes no "style.css".

  4. 4

    Personalize a estrutura do tema copiando arquivos individuais de outros temas ou do próprio framework na pasta do seu tema. Por exemplo: abra a pasta do BuddyPress e clique duas vezes em "bp-themes", e depois em "bp-default". Abra o arquivo "header.php" no editor. Pode-se adicionar ou remover classes de CSS, HTML, tags do Wordpress ou do BuddyPress. Salve cada arquivo alterado com o nome original na pasta do seu tema.

  5. 5

    Envie o tema modificado para o servidor web, colocando-o na pasta "wp-content/themes". Acesse o painel administrativo do WordPress e ative o seu tema na seção "Aparência > Temas". Atualize a página inicial para ver as alterações. Agora será possível fazer ajustes e adaptações futuras vendo-os em ação imediatamente utilizando o "Inspecionar elemento" e o editor do WordPress, em "Aparência > Editor".

Dicas & Advertências

  • É possível criar um tema BuddyPress usando CSS próprio e design inteiramente personalizado. Não há exigências para usar estilos do BuddyPress. Porém, é melhor se familiarizar com as tags desse framework, pois são necessárias para que seu tema funcione corretamente.
  • Não copie o arquivo "functions.php" para a pasta do seu tema, pois isso resultará em conflitos e erro de página branca quando o tema for ativado. Pode-se criar um arquivo "functions.php" em branco, para funções personalizadas, mas cada função deve ter nome diferente das contidas no arquivo original.

Não perca

Filtro:
  • Geral
  • Artigos
  • Slides
  • Vídeos
Mostrar:
  • Mais relevantes
  • Mais lidos
  • Mais recentes

Nenhum artigo disponível

Nenhum slide disponível

Nenhum vídeo disponível