Seu próprio sidebar: Como criar seu próprio sidebar para adicionar os widgets

“Poxa o template que estou utilizando é perfeito mas gostaria que o footer tivesse 3 colunas uma para incluir widget como de imagem do logo, posts mais recentes e imagem outras informações”

Esta é uma das utilidades de se criar um sidebar. Para este caso, vamos utilizar o grid system do Bootstrap para organizar as colunas, e em cada coluna vamos inserir um sidebar, para que em “Aparência > Widgets” possamos atribuir para estas areas os nossos widgets.

Antes de começar algumas dicas:
– Chamar register_sidebar() várias vezes para registrar um número de barras laterais é preferível a usar register_sidebars() para criar um grupo de uma só vez, porque permite que você atribua um nome exclusivo a cada barra lateral (por exemplo: “Barra lateral direita”, “Barra lateral esquerda” ”). Embora esses nomes apareçam apenas na interface administrativa, é uma prática recomendada nomear cada barra lateral especificamente, dando ao usuário administrativo uma ideia do contexto para o qual cada barra lateral será usada.
-Os valores padrão before/after são destinados a temas que geram uma sidebar marcada como uma lista com títulos h2. Esta é a convenção que recomendamos para todos os temas e qualquer tema construído desta maneira pode simplesmente registrar as barras laterais sem se preocupar com as tags before/after . Se, por alguma razão convincente, um tema não puder ser marcado dessa maneira, essas tags deverão ser especificadas ao registrar barras laterais. Recomenda-se copiar os atributos id e class textualmente para que uma chamada sprintf interna possa funcionar e os estilos CSS possam ser aplicados a widgets individuais.

Neste exemplo estamos criando sidebars para o template que acompanha o WordPress Twenty Nineteen.

Este trecho será inserido no function.php do template.

function twentynineteen_widgets_init() {

	register_sidebar(
		array(
			'name'          => __( 'Footer - Coluna 1', 'twentynineteen' ),
			'id'            => 'sidebar-1',
			'description'   => __( 'Add widgets here to appear in your footer.', 'twentynineteen' ),
			'before_widget' => '<section id="%1$s" class="widget %2$s">',
			'after_widget'  => '</section>',
			'before_title'  => '<h2 class="widget-title">',
			'after_title'   => '</h2>',
		)
	);
	register_sidebar(
		array(
			'name'          => __( 'Footer - Coluna 2', 'twentynineteen' ),
			'id'            => 'sidebar-2',
			'description'   => __( 'Add widgets here to appear in your footer.', 'twentynineteen' ),
			'before_widget' => '<section id="%1$s" class="widget %2$s">',
			'after_widget'  => '</section>',
			'before_title'  => '<h2 class="widget-title">',
			'after_title'   => '</h2>',
		)
	);
	register_sidebar(
		array(
			'name'          => __( 'Footer - Coluna 3', 'twentynineteen' ),
			'id'            => 'sidebar-3',
			'description'   => __( 'Add widgets here to appear in your footer.', 'twentynineteen' ),
			'before_widget' => '<section id="%1$s" class="widget %2$s">',
			'after_widget'  => '</section>',
			'before_title'  => '<h2 class="widget-title">',
			'after_title'   => '</h2>',
		)
	);

}
add_action( 'widgets_init', 'twentynineteen_widgets_init' );


Neste momento já teremos no template as novas areas, para utilizar é só arrastar o widget que quer para elas.

Agora vamos chamar essa area no nosso template, para este caso vamos colocar no footer.php.

<footer>
    <div class="row">
		<div class="col-md-4">
			<?php if ( is_active_sidebar('sidebar-1') ) {
				dynamic_sidebar('sidebar-1');
			} ?>
		</div>
		<div class="col-md-4">
			<?php if ( is_active_sidebar('sidebar-2') ) {
				dynamic_sidebar('sidebar-2');
			} ?>
		</div>
		<div class="col-md-4">
			<?php if ( is_active_sidebar('sidebar-3') ) {
				dynamic_sidebar('sidebar-3');
			} ?>
		</div>
	</div>
</footer>

Muito bem, se ficou com alguma dúvida ou tem alguma sugestão comenta aí em baixo.

Deixe um comentário