Os Widgets são elementos que adicionam muita flexibilidade ao WordPress, permitindo adicionar conteúdo customizado em determinadas áreas sem ter ficar editando o tema.

Embora os Widgets serem mais comuns em barra laterais ou rodapés, podemos colocá-los em qualquer área como cabeçalhos, antes ou depois do conteúdo, etc. Também é possível inserir qualquer conteúdo desejado, embora seja mais frequentemente utilizado para adicionar widgets de caixa de pesquisa, posts recentes, categorias ou algum conteúdo fornecido por um plugin instalado. Podemos colocar virtualmente qualquer coisa adicionando um widget HTML personalizado.

Neste post vamos criar um template filho do Twenty Nineteen(que vem na instalação) que é um tema bastante simples, e adicionar algumas áreas de widget nele.

Então vamos lá!

Criando um tema filho no WordPress

Uma prática interessante para quando você vai precisar de alterações em um tema de terceiros, você deve criar um tema filho e nele realizar as alterações. Isso deve ser feito pois se o tema de terceiros for atualizado e você realizou alterações diretamente nele as suas alterações serão perdidas.

Então para criar um tema filho devemos criar uma pasta no diretório wp-content/themes/ , com o nome que quisermos para o tema, no meu caso irei utilizar boteco_widgets, e criar o arquivo de CSS style.css, importando dentro dele o style.css do tema original/pai.

/*
Theme Name:     Boteco Widget
Theme URI: 
Description:    Tema de exemplo . Filho do tema Twenty Nineteen.
Author:         Rodrigo Aramburu
Author URI:     https://www.botecodigital.info/
Template:       twentynineteen
Version:        0.1
*/

@import url( '../twentynineteen/style.css');

Pronto, agora é só ir no menu “Aparência > Temas” e ativar o tema Boteco Widget ele deve ficar completamente igual ao tema pai.

Registrando um Widget no tema

Antes de adicionar um widget em nosso tema devemos registrá-lo no aquivo functions.php. No tema filho que estamos criando ainda não temos este arquivo então será necessário criá-lo.

Uma vez criado o arquivo functions.php criamos dentro dele uma função para inicializar nossos widgets, neste caso iremos utilizar o criativo nome de boteco_register_widgets() e adicionar ao método add_action($tag_action , $function_to_add) que adiciona uma função ao core do WordPress para ser chamada em um ponto especifico da execução.

function boteco_register_widgets(){

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

Dentro da função boteco_register_widgets(), registraremos nossas áreas através da função register_sidebar.

register_sidebar( array(
    'name' => 'Depois do Conteúdo do sSingle',
    'id' => 'single-depois-conteudo',
    'before_widget' => '<div id="%1$s" class="widget %2$s">',
    'after_widget' => '</div>',
    'before_title' => '<h4 class="widgettitle">',
    'after_title' => '</h4>'
));

A função recebe vários parâmetros vamos a eles:

  • name: Nome ou titulo da área que será mostrado na área administrativa, então coloque um texto bem descritivo.
  • id: Identificador único da área.
  • before_widget: Marcação que será adicionada antes do conteúdo do widget. Os %1$s e %2$s representam o id e a classe do widget adicionado, é aconselhável que seja mantido pois muitos plugins que podem ser adicionados ao um widget os utilizam.
  • after_widget: Marcação que será adicionada depois do conteúdo do widget.
  • before_title: Marcação que será adicionada antes do titulo do widget.
  • after_title: Marcação que será adicionada depois do titulo do widget.

Uma vez registrado devemos adicionar a área no tema.

if( is_active_sidebar( 'single-depois-conteudo' ) ){
    dynamic_sidebar( 'single-depois-conteudo' );
}

Utilizamos a função is_active_sidebar, que recebe como parâmetro o id do widget registrado para determinar se o widget está em uso ou não. Se sim é chamada a função dynamic_sidebar para exibi-lo. Pronto basicamente é isso.

Agora repetimos este dois passos para quantos widgets, queremos inserir em nosso template.

function boteco_register_widgets(){
    register_sidebar( array(
        'name' => 'Antes do Conteúdo do Single',
        'id' => 'single-antes-conteudo',
        'before_widget' => '<div id="%1$s" class="widget %2$s">',
        'after_widget' => '</div>',
        'before_title' => '<h4 class="widgettitle">',
        'after_title' => '</h4>'
    ));
    register_sidebar( array(
        'name' => 'Depois do Conteúdo do Single',
        'id' => 'single-depois-conteudo',
        'before_widget' => '<div id="%1$s" class="widget %2$s">',
        'after_widget' => '</div>',
        'before_title' => '<h4 class="widgettitle">',
        'after_title' => '</h4>'
    ));
    register_sidebar( array(
        'name' => 'Antes do Conteúdo do Page',
        'id' => 'page-antes-conteudo',
        'before_widget' => '<div id="%1$s" class="widget %2$s">',
        'after_widget' => '</div>',
        'before_title' => '<h4 class="widgettitle">',
        'after_title' => '</h4>'
    ));
    register_sidebar( array(
        'name' => 'Depois do Conteúdo do Page',
        'id' => 'page-depois-conteudo',
        'before_widget' => '<div id="%1$s" class="widget %2$s">',
        'after_widget' => '</div>',
        'before_title' => '<h4 class="widgettitle">',
        'after_title' => '</h4>'
    ));
}

No nosso painel administrativo os widgets ficarão assim.

Painel administrativo de Widget do WordPress com novos widgets adicionados.
Painel administrativo de Widget do WordPress com novos widgets adicionados.

Agora criamos um arquivo single.php e inserimos os widgets que registramos para ele.

<?php
get_header();
?>
	<div class="wrap">
	<div id="primary" class="content-area">
		<main id="main" class="site-main">
		

			<?php

			// Start the Loop.
			while ( have_posts() ) :
				the_post();

				if( is_active_sidebar( 'single-antes-conteudo' ) ){
					dynamic_sidebar( 'single-antes-conteudo' );
				}

				get_template_part( 'template-parts/post/content', get_post_format() );
				
				if( is_active_sidebar( 'single-depois-conteudo' ) ){
					dynamic_sidebar( 'single-depois-conteudo' );
				}

				if ( is_singular( 'attachment' ) ) {
					// Parent post navigation.
					the_post_navigation(
						array(
							/* translators: %s: Parent post link. */
							'prev_text' => sprintf( __( '<span class="meta-nav">Published in</span><span class="post-title">%s</span>', 'twentynineteen' ), '%title' ),
						)
					);
				} elseif ( is_singular( 'post' ) ) {
					// Previous/next post navigation.
					the_post_navigation(
						array(
							'next_text' => '<span class="meta-nav" aria-hidden="true">' . __( 'Next Post', 'twentynineteen' ) . '</span> ' .
								'<span class="screen-reader-text">' . __( 'Next post:', 'twentynineteen' ) . '</span> <br/>' .
								'<span class="post-title">%title</span>',
							'prev_text' => '<span class="meta-nav" aria-hidden="true">' . __( 'Previous Post', 'twentynineteen' ) . '</span> ' .
								'<span class="screen-reader-text">' . __( 'Previous post:', 'twentynineteen' ) . '</span> <br/>' .
								'<span class="post-title">%title</span>',
						)
					);
				}

				// If comments are open or we have at least one comment, load up the comment template.
				if ( comments_open() || get_comments_number() ) {
					comments_template();
				}

			endwhile; // End the loop.
			?>

		</main><!-- #main -->
	</div><!-- #primary -->
        </div>

<?php
get_footer();

Pegamos praticamente o mesmo código do tema pai, somente adicionamos nas 15, 16 e 17 o nosso primeiro widget do documento e nas linhas 21, 22 e 23 o segundo, ficando o conteúdo, inserido através de get_template_part() entre eles.

Agora vejamos onde ficaram os widgets em uma página de um post.

Exemplo de post com os widget criados
Exemplo de post com os widgets criados

Os widgets são bastante simples de colocar em funcionamento, tanto em um tema filho quanto em um criado por você mesmo, falando nisso você pode ver o básico do básico de como criar seu próprio tema em Criando um tema para WordPress – parte 1 e Criando um tema para WordPress – parte 2.

O fonte do nosso pequeno exemplo pode ser baixado aqui.

Era isso t++ pessoal.