Portillo Design

Como criar Sidebars no WordPress

. Por

Que tal criar uma nova sidebar para o WordPress ao invés de ficar inserindo os widgets diretamente no código?

Erroneamente muitos designers e programadores que se aventuram no WordPress acabam criando ou setando funções, que deveriam ser dinâmicas pelo CMS, diretamente no código. Ou seja, o blogueiro não possui liberdade para remover, modificar ou adicionar widgets para a barra lateral ou a área que deseja manipular.

Por isso, é importante o desenvolvedor (ou designer) que criar o template, gerar a quantidade máxima de área manipulável diretamente pelo CMS, ou seja, sem a necessidade de mexer no código para trocar, digamos, uma widget de lugar.

Por padrão, a grande maioria dos templates vem somente com uma barra lateral. Mas, mesmo que você não seja um programador, você mesmo pode adicionar uma barra com alguns passos simples. Vamos lá!

No Dreamweaver, ou no seu editor favorito, abra o arquivo functions.php do seu template. – Para quem não está familiarizado, os templates ficam armazenados na pasta wp-content>templates, de sua instalação do WordPress. – O arquivo functions.php é responsável por permitir a manipulação de recursos do CMS ao template.

Criando a SideBar

Dependendo do template você vai encontrar várias funções criadas. Tudo o que você precisa fazer é registrar uma sidebar em qualquer lugar, dentro do functions.php, contanto que não atrapalhe outra função ou comando (ou seja, simplesmente coloque depois ou antes de tudo).

/* Registando a primeira sidebar*/
register_sidebar( array(
‘name’ => ‘Barra Lateral Principal’,
‘id’ => ‘barra-principal’,
‘description’   => ‘Esta é a barra lateral superior, onde fica o Perfil’,
‘before_widget’ => ‘<div id=”%1$s” class=”sidebar-topo %2$s”>’, /* Antes da Widget */
‘after_widget’ => ‘</div>’, /* Depois da Widget */
‘before_title’ => ‘<h3>’, /* Antes do título */
‘after_title’ => ‘</h3>’, /* Depois do título */
) );

Por padrão , as sidebars do WordPress são criadas com UL, mas, preferimos usar as tags div para poder facilitar a manipulação da barra lateral pelo CSS, agora vamos entender melhor os termos.

A função register_sidebar, registra uma nova barra lateral, você pode criar QUANTAS BARRAS LATERAIS VOCÊ QUISER! Ela pede que você determine uma array, um conjunto de variáveis que permita criar a sidebar.

‘name’ – Refere-se ao nome de exibição da Sidebar, ou seja, o que o usuário do CMS verá;

‘id’ – É o nome de identificação para o WordPress, é através dele que você setará onde ficará a barra lateral;

‘description’ – Descrição a ser mostrada para o usuário do CMS;

‘before_widget’ – Conteúdo a ser adicionado antes do código do widget. No caso colocamos div, mas você pode colocar o container de sua preferência;

‘after_widget’ –  Conteúdo a ser adicionado após o código do widget;

‘before_title’ – Antes do Título do Wdiget, porém dentro  após o before_widget. Colocamos h3, mas você vai determinar de acordo com as necessidades de seu blog, pode até ser uma div ou um span;

‘after_title’ – Depois do Título do Widget e antes do after_widget.

Sidebar-WordpressRepare que no before_widget registramos em div e em class, alguns códigos específicos. Esses códigos servem para capturarmos informações do blog, para que cada widget tenha uma classe ou id única.  Isso pode ser muito útil quando manipulamos uma quantidade muito grande de widgets, principalmente se eles forem replicados em diferentes posições.

%1$s retorna a id única do Widget adicionado, por exemplo, se você colocou um terceiro widget de texto, ele retornará : <div id=”text-3”>, baseado no exemplo anterior. É uma id que não se repetirá.

%2$s retorna o nome genérico do widget, no caso, independente de quantos widgets de texto você criar, ele retornará: <div class=”sidebar-topo widget_text”>, baseado no exemplo anterior.

Colocando a Sidebar

Agora precisamos colocar a sidebar onde você quer que ela fique. Para isso, simplesmente abra o arquivo referente a onde você quer que fique a sidebar. Pode ser na index, no header, no bottom, ou em uma página única, etc.

Basta inserir o seguinte código:

<?php dynamic_sidebar(‘id_da_minha_barra’);?>

Só.

O resultado vocês podem ver aí ao lado, ou entrando no seu WordPress.

Rodrigo Portillo (163 Posts)

Rodrigo Portillo cria projetos que é simultaneamente funcional e esteticamente agradáveis. Em poucos anos construiu um portfólio impressionante de design digital e desenvolvimento. Ele continua a aprender sobre técnicas de SEO e gerenciamento de conteúdo, mas o seu coração está com o design. Atualmente cursa faculdade de Licenciatura em Computaç˜åo

Uma resposta para “Como criar Sidebars no WordPress”

  1. Fabio Rizzi disse:

    Deu certo, muito bom!

Deixe uma resposta

@portillodesign