Adicionar várias áreas de widgets

Esta é uma dúvida comum no fórum, como adicionar mais áreas de widgets a um tema?

Não há limites em quantas áreas de widgets um tema pode ter, então podemos criar áreas distintas para cada categoria, para páginas de resultados de procura etc. A única desvantagem é gerenciar tantas áreas, mas ainda assim, é melhor do que editar arquivos manualmente.

Como fazer

Cada área deve ser registrada no arquivo functions.php do tema. Isso deve ser feito assim (você pode pular esta explicação e simplesmente copiar o código logo mais):

  • Cria-se uma função, por exemplo meus_widgets
  • Adiciona-se uma ação add_action (a tarefa para o WordPress)
  • A ação é executar a função, no caso meus_widgets, quando widgets são iniciados no WordPress, isso através do filtro widgets_init
  • Dentro da função meus_widgets está a criação das áreas de widgets através de register_sidebar, isso quer dizer que pode ter outras coisas por lá, como outras funções, etc.

É um pouco estranho o nome dessa função, desde que não serve apenas para barras laterais (sidebars), mas para qualquer parte do layout, como rodapé, cabeçalho etc. Exemplo de como fica o código:

function meus_widgets() {
 
        //aqui começa a area Traduz
	register_sidebar( array( //Registrando a area Traduz
		'name' => 'Traduz', //nome da area
		'id' => 'traduz-widget-area', //id css da area
                'description' => 'Aqui ficam listas de feeds', //uma descrição breve 
		'before_widget' => '<li id="%1$s" class="widget-container %2$s">', //tag html que vem antes
		'after_widget' => '</li>', //tag html que vem depois
		'before_title' => '<h3 class="widget-title">', //tag html antes do titulo
		'after_title' => '</h3>', //tag html depois do titulo
	) );
        //aqui termina a area Traduz
 
  }
 
add_action( 'widgets_init', 'meus_widgets' );

Para cada área, você deve criar um bloco com as informações necessárias, você pode omitir algumas informações como description, que é a descrição que aparece no painel. O item name não pode ser omitido!

Se estiver modificando um tema, lembre-se de fazer as modificações através de um tema filho, e também use as informações do tema para criar as outras áreas, como a before_widget, after_widget etc, estas informações determinam a aparência da área de widgets, então ao usar as mesmas informações do tema, você faz com que suas novas áreas tenham a mesma aparência das áreas nativas.

Adicionar várias áreas de widgets é um artigo sobre widgets Como adicionar áreas de widgets ao tema widgets Sem categoria http://dianakcury.com/sem-categoria-pt/adicionar-varias-areas-de-widgets#commentsDiana K. Cury http://dianakcury.com/wordpress/wp-content/themes/di3554/img/card.png

8 ideias sobre “Adicionar várias áreas de widgets

  1. foradamodablog

    Olá Diana, quero muito mudar a área dos meus widgets ou fazer uma nova, eles ficam no final da página, acho que se chama footer, e eu queria eles no lado direito da página…acho que esse teu tutorial ensina isso, mas não entendo muito. Isso é simples de se fazer? Obrigado.

  2. Elcy Alves

    Oi Diana, tudo bem? Olha, eus ou iniciante em WordPress e fiquei com uma dúvida sobre este post… No caso desta linha de código: “”, o que significa (%1$s, %2$s)??? E como posso adicionar classe a esta função?

  3. Diego Ernani

    Como criar uma área no meio do site para colocar um carrossel de notícias ou foto, ou agenda de show por exemplo.
    Esta área ocupa toda largura do site e ficará exatamente no centro. Isso é bastante usado. Só vejo tutoriais para lateral, topo e rodapé mas mostrando como ficará um widget flutuante ou no centro nunca vi. Site de notícias tem muitos widgets como é feito a parte de posicionamento deles? Obrigado.

    1. Diana Autor do post

      Olá,
      Depende de como o tema está estruturado, pode ser preciso criar um tema filho para então se reorganizar o layout da página. Também é possível criar um filtro que injete o código do carrossel ou slider, depois do conteúdo, depois do loop principal etc.

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *