WP: Habilitando Widgets

Tutorial Wordpress

Há quem diga que ficar futricando no código "puro" da sidebar é o maior sufoco, principalmente por causa das tags PHP do WP, como o número de posts, categorias, nuvem de tags, etc. Mas o que é Widgets? Widgets é uma maneira prática e fácil para personalizar sua sidebar. Ele permite que o usuário ative funcionalidades no site sem precisar, necessariamente, entender HTML, CSS ou PHP. Mesmo que você não use o Widgets em seu tema, é sempre bom deixar ele ativo para uma eventual instalação de algum plugin que você deseja que funciona apenas quando há o Widgets no blog. Então vamos lá:

1º) Em seu editor de HTML copie e cole este código no functions.php

// sidebars
if ( function_exists('register_sidebar') )
register_sidebar(array(
'before_widget' => '<div>',
'after_widget' => '</div>',
'before_title' => '<h1>',
'after_title' => '</h1>',
));

Caso não funcione, utilize este código abaixo, substituindo pelo de cima.

/// sidebars
if ( function_exists('register_sidebar_widget') )
register_sidebar(array(
'before_widget' => '<div>',
'after_widget' => '</div>',
'before_title' => '<h1>',
'after_title' => '</h1>',
));

Está vendo a tag <h1> e </h1>? Este é o lugar onde você coloca a sua tabela para que seja o título de cada conteúdo de sua sidebar. Pode ser <div>, <p>, <font> ou até mesmo deixar em branco caso queira apenas o nome do título sem enfeites no CSS.

2º) Agora, abra o arquivo sidebar.php e cole este código em qualquer lugar que você deseja que esteja presente a personalização Widgets.

<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?>
<?php endif; ?>

3º) Envie estes dois arquivos para a pasta do tema que está usando em …/wp-content/themes/.

4º) Depois de salvo no tema, vá em Appearance » Widgets e você verá que há vários itens para você usar na sidebar. Arraste os itens que você deseja que estão em Availabe Widgets para a barra lateral da direita em Sidebar 1.

Os itens do Widgets acima variam de acordo com cada blog, dependendo dos plugins usados. Foto apenas ilustrativa. O código ainda funciona para a versão 3.8 do wordpress.

Em seguia é só você abrir o seu blog e ver como que ficou ^^ Você pode usar tanto os códigos normais na sidebar, abrindo com o bloco de notas e editando manualmente, quanto o Widgets, tudo ao mesmo tempo ;D

Veja também...

Almoço no Las Nenas Café Bistrô (Goiânia)
Londres: Fim de tarde em Notting Hill e primeira vez na Starbucks
As ilustrações de Renata Soares

6 Comentário(s)

(6 pelo blog e pelo facebook)
  • Jessica
    16 . 03 . 2014

    Muito obrigada, Aninha <333
    Deu certo!
    Grande beijo!

    Responder

  • Jessica
    15 . 03 . 2014

    Olá Aninha,
    Sabe me dizer como eu faço pra dividir as categorias em duas colunas quando habilito os widgets?
    Beijos!

    Responder

    • Aninha
      Visitar blog
      16 . 03 . 2014

      @Jessica, as categorias no wordpress são apresentadas por padrão como listas dentro de uma ul nas widgets. Na configuração de "before_widget" você pode colocar uma class na Widget com uma configuração de CSS que faça a divisão de colunas, utilizando float left e uma largura de 50% para cada item da lista. No final, para evitar sobreposição de elementos você coloca em "after_widget" uma div com clearfix. Veja o exemplo abaixo:

      register_sidebar(array(
      'before_widget' => '<div class="widget">',
      'after_widget' => '</div><div style="clear:both;"></div>',
      'before_title' => '<h1>',
      'after_title' => '</h1>',

      No CSS:

      /*configurando widgets*/
      .widgets {}
      .widgets ul {margin: 0; padding: 0; list-style:none; width: 100%; position: relative; display: block;}
      .widgets ul li {margin: 0; padding: 0; list-style:none; float:left; wideht: 50%}

      A partir disso você pode ir colocando mais incrementos, como cores, backgrounds, etc. :D
      Espero ter ajudado!

      Responder

  • Amanda Almeida
    Visitar blog
    18 . 02 . 2014

    Oi Ana. Passando só pra agradecer. Eu pensei um pouquinho pra conseguir, mas no fim consegui fazer a sidebar em caixas.
    Abraços,
    Amanda Almeida

    Responder

  • Amanda Almeida
    Visitar blog
    07 . 02 . 2014

    Oi Ana, tudo bem? Eu aqui de novo rsrs. Ana, eu queria saber como colocar os widgest em caixas separadas. Tentei editar no Css o "#sidebar .widget" , mas não aparece as "caixas" na sidebar. Se você puder ajudar vou ficar muito feliz. Obrigada desde já e desculpa e incomodo.

    Responder

    • Aninha
      Visitar blog
      08 . 02 . 2014

      @Amanda Almeida, a parte onde acrescentamos o H1 do título do widget (before_title) você pode colocar uma div aberta antes do H1 para determinar a caixa. Para fecha-la, basta ir em 'after_widget' e acrescentar o final da tag depois do fechamento da div que coloquei de exemplo no código ;)

      Responder