Tableless - Desenvolvimento inteligente com Padrões Web

18/01/2011
Wordpress

Criando Sidebar Dinâmica no WordPress

Aprenda a adicionar sidebars e adicione os widgets disponíveis dentro do painel de administração.

Por

O WordPress disponibiliza uma função para criar sidebars de forma dinâmica, onde no painel de administração podemos gerenciar todos os Widgets disponíveis ou Widgets instalados.

Essa função, mais uma vez, sai na frente e contribui para o WordPress ser esse CMS tão poderoso para os desenvolvedores e os usuários que o utilizam.

De início iremos registrar a sidebar. Para isso coloque esse código em functions.php:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
    /* Registando a primeira sidebar*/
    register_sidebar( array(
        'name' => 'Minha Primeira Sidebar',
        'id' => 'minha-primeira-sidebar',
        'description'   => 'Esta é a primeira sidebar do meu site',
        'before_widget' => '<li class="widget-sidebar">', /* Antes da Widget */
        'after_widget' => '</li>', /* Depois da Widget */
        'before_title' => '<h3>', /* Antes do título */
        'after_title' => '</h3>', /* Depois do título */
    ) );

        /* Registando a segunda sidebar*/
    register_sidebar( array(
        'name' => 'Minha Segunda Sidebar',
        'id' => 'minha-segunda-sidebar',
        'description'   => 'Esta é a segunda sidebar do meu site',
        'before_widget' => '<li class="widget-sidebar">', /* Antes da Widget */
        'after_widget' => '</li>', /* Depois da Widget */
        'before_title' => '<h4>', /* Antes do título */
        'after_title' => '</h4>', /* Depois do título */
    ) );

Neste código, registramos nossa sidebar, ou seja, aplicamos os parâmetros que estarão agregados a ela. Os três primeiros parâmetros estão subentendidos, mas você pode definir o valor que quiser. O restante dos parâmetros agregará o que vai está antes e depois do Widget e do Título. Você pode personalizar como quiser, com uma LI ou DIV ou até outra tag que queria retornar.

Retornando a sidebar

Adicione o seguinte código aonde queria que retornasse a sua sidebar:

1
<?php dynamic_sidebar('Minha Primeira Sidebar'); ?>

A função vai agregar o nome da sidebar ou o ID da sidebar de forma muito simples. Para deixar mais completo, vamos adicionar uma condição, só para verificar se a sidebar está ativa. A função is_active_sidebar vai agregar também o nome da sidebar ou o ID dela.

1
2
3
4
5
6
7
8
9
10
11
<?php
    /* Retornando minha primeira sidebar */
       if ( is_active_sidebar('minha-primeira-sidebar') ) {
          dynamic_sidebar('minha-primeira-sidebar');
       }

    /* Retornando minha segunda sidebar */
        if ( is_active_sidebar('minha-segunda-sidebar') ) {
           dynamic_sidebar('minha-segunda-sidebar');
        }
 ?>

Caso tenham dúvidas, verifiquem em http://codex.wordpress.org/Widgets_API

Por Paulo Rodrigues

Paulo Rodrigues é residente de Salvador-BA, especialista em criação de sites e desenvolvimento web desde de 2008. Foi com o desenvolvimento front-end que se apaixonou por esse caminho sem volta, atualmente além de interfaces, Paulo desenvolve para WordPress.

http://www.twitter.com/paulorodriguesw

Veja os outros posts de

  • Pingback: Tweets that mention Criando Sidebar Dinâmica no WordPress | Tableless - Desenvolvimento com Padrões Web -- Topsy.com

  • http://www.ondadigital.com.br João Silva

    vlw pelo tutorial, assim como ajudou me ajudou acredito que possa ser util para muitas pessoas.

  • http://twitter.com/victoraldabalde Victor Aldabalde

    Muito bom! também vi algo muito parecido em http://postedby.me/a18q

  • http://www.twitter.com/paulorodriguesw Paulo Rodrigues

    Victor Aldabalde, o conteúdo é bem parecido, mas para deixar claro, não ripei conteúdo e nem tomei como base esse artigo, a primeira vez que li esse arigo foi agora. Só para deixar bem claro, antes que criem boatos.

    A semelhança deve-se existir, pois eu procuro desenvolver meus artigos em consulta com o Codex do WordPress e também em base do meu conhecimento.

  • http://twitter.com/victoraldabalde Victor Aldabalde

    Eu não quis dizer que você copiou. Apenas disse que já vi :)
    Agora como tu podes ver naquele link, os atributos before, after widget etc. Não são necessários, pois não são obrigatórios. Acho que tu poderia deixar
    isso mais explícito.

    abs

  • joel

    Muito bom, valeu mesmo!!!

  • Kaleb Martins

    Grande Post!!
    Paulo Rodrigues, o que vc acha desta maneira?

    Nenhuma sidebar inserida

    Abraços
    Kaleb Martins

  • http://www.twitter.com/paulorodriguesw Paulo Rodrigues

    Kaleb Martins, não entedi o que você quis dizer. Você seguiu todo o processo do artigo para criar a sidebar? Se sim, abra o painel de adminstração e veja lá em Aparência-> Widgets que vai está lá.

  • Kaleb Martins

    Paulo Rodrigues, desculpa… Mas o código que inseri não deu certo :-(

    Veja o printScreen => http://boamidia.kavala.kinghost.net/sidebar.png

    O que vc acha desta maneira?

    Abraços e mais uma vez ótimo post!
    Kaleb Martins

  • http://www.twitter.com/paulorodriguesw Paulo Rodrigues

    Kaleb, não sei porque o código não pegou, pois aqui está pegando normalmente, testei e está tudo normal. Essa forma que você botou, também está certa, só a condição que é diferente.

    Abraço! ;-)

  • http://migre.me/1NS62 Diego Massarotte

    Mais fácil do que imaginava!
    A próxima vez que trabalharmos com WordPress, iremos utilizar.
    Abrass

  • http://www.classeaflex.com.br Ramon Samudio

    Parabéns!Otimo trabalho.

  • Leti

    Oi Paulo,
    Obrigada pelo artigo está muito bem explicado, porém a função da sidebar deve ser colocado no widgets.php e não no functions.php como vc está mencionando. Tentei primeiro como vc falou e não deu, depois adicionei a função no widgets.php e funcionou beleza.

    Tirando esse detalhe, está muito bem explicado.

    Abraços

  • http://www.ederlima.com.br Eder Lima

    Legal o Tableless entrar com artigos sobre wordpress, eita ferramenta boa pra trabalhar.

    E é normal também dicas simples serem parecidas, principalmente pra quem consulta o codex, eu mesmo trabalho com ele aberto o tempo inteiro, é uma das documentações mais completas que eu conheço.

    Continuem! :D

  • http://www.twitter.com/paulorodriguesw Paulo Rodrigues

    Oi Leti,
    Você pode por sim o código no arquivo functions.php para registrar a sidebar, pois é uma função do tema, testo e uso assim e nunca tive problema. Mesmo assim, muito obrigado pelo elogio.

    Abraço

  • http://torrenteaki.net/ marcelo

    pow cara ate consegui mais quando eu colocava os widgets fica duplicado ai fui em outra site que o codigo parecido com o seu funcionou ok mais valeu pelo tuto um abc!!!

  • Pingback: Iniciando desenvolvimento de sites com WordPress – Parte I | Tableless | Tableless

  • Pingback: Criando Sidebar no WordPress | Paulo Rodrigues