Como adicionar áreas de widgets ao WordPress (temas de blocos e clássicos)

Widgets são uma forma popular de adicionar funcionalidade extra, recursos e informações a diferentes locais de sites WordPress. Eles permitem que você coloque qualquer coisa, desde formulários de contato em calendários até listas de suas postagens de blog mais recentes em suas páginas da web.

No entanto, para fazer isso, primeiro você precisa de áreas de widgets – pelo menos em temas clássicos do WordPress. Estas são partes designadas especiais de temas do WordPress onde, se você adicionar widgets a eles no back-end, eles aparecerão no front-end também.

Os temas de bloqueio usando o WordPress Site Editor, por outro lado, não possuem mais áreas de widgets. Aqui, adicionar widgets funciona de forma muito diferente do que antes, o que é motivo suficiente para cobrir todo esse tópico.

A seguir, veremos diferentes maneiras de adicionar widgets ao seu tema WordPress. Falamos sobre como usar áreas widgetizadas e criar novas em temas clássicos, bem como fazer widgets aparecerem em seus temas de blocos.

O que são widgets e como usá-los?

Antes de entrar no assunto mais técnico, vamos primeiro resolver rapidamente sobre o que estamos falando ao usar o termo “widget” em relação ao WordPress. Se você estiver usando um tema sem bloco como o Twenty Twenty-One, você encontrará suas configurações em Aparência > Widgets .

Isso mostra todas as áreas de widgets disponíveis em seu tema atual (aqui, é apenas o rodapé) e os widgets que elas contêm. Tudo visível aqui também corresponde ao front-end do seu site.

Normalmente, as áreas com widgets estarão no rodapé, na barra lateral ou no cabeçalho. No entanto, você também pode colocá-los praticamente em qualquer lugar que desejar (como verá em breve).

Como exibir widgets em seu site

O menu do widget costumava ter uma interface de usuário diferente, mas agora foi convertido para funcionar com o editor de blocos como o restante do WordPress. Portanto, você pode usá-lo como qualquer outra instância do editor WordPress Gutenberg.

Adicione blocos por meio do inseridor de bloco (o botão de adição azul no canto superior esquerdo) ou sua versão menor nas áreas de widget. Você também pode remover blocos da maneira usual e alterar sua aparência e comportamento na barra lateral direita.

Os blocos que você pode usar abrangem as opções usuais. Parágrafos, títulos, tabelas, imagens — tudo é possível.

Normalmente, as áreas de widget são usadas para seções mais dinâmicas onde as informações se atualizam. Você ainda pode encontrá-los na categoria Widgets no inseridor de bloco.

Como você pode ver, eles incluem itens como exibição de arquivos e categorias, uma lista de suas páginas ou as postagens e comentários mais recentes, feeds RSS ou uma barra de pesquisa. Não se esqueça de clicar em Atualizar no canto superior direito para que as alterações feitas aqui se tornem permanentes.

Alternativamente, você encontra todas essas configurações também no WordPress Customizer ( Aparência > Personalizar ) e depois na guia Widgets .

A vantagem aqui é que você pode visualizar como tudo ficará na página diretamente no editor.

Criando novas áreas de widgets em temas clássicos do WordPress

Ok, até aí tudo bem. Decidimos o que são widgets e em que parte dos temas clássicos você pode gerenciá-los.

No entanto, e se você não estiver satisfeito com sua escolha de áreas widgetizadas disponíveis? E se você quiser adicionar widgets em outros locais do seu tema?

Nesse caso, você mesmo deve criá-los, que é o que veremos agora.

1. Registre sua área de widget

A criação de áreas de widgets em um tema do WordPress é um processo de duas etapas. O primeiro passo é registrá-los.

Você faz isso usando a função register_sidebar() dentro de functions.php . Parece algo assim:

 function ns_register_top_banner_widget() { register_sidebar( array( 'name' => 'Top Bar', 'id' => 'top-bar-widgets', 'description' => 'Widgets in this area will appear in a bar at the top of the site.', 'before_widget' => '<div class="widget top-bar-widget">', 'after_widget' => '</div>', 'before_sidebar'=> '<div>', 'after_sidebar'=> '</div>', ) ); } add_action( 'widgets_init', 'ns_register_top_banner_widget' );

Nota: Como muitas alterações de tema, você deve implementar isso na forma de um tema filho.

Algumas explicações sobre as diferentes partes do trecho de código e o que elas significam:

• name — Este é o nome da área do widget que aparecerá no back-end do WordPress.
• id — Você precisa dar um id à área do widget para poder exibi-lo mais tarde.
• description — Costumava aparecer dentro do menu Widgets . Você pode usá-lo para, por exemplo, explicar a localização da barra lateral para outros usuários. No entanto, ele aparecerá apenas para versões do WordPress que não usam o editor de blocos para widgets, portanto, você também pode omiti-lo.
• before_sidebar e after_sidebar — Esses dois parâmetros permitem adicionar marcação HTML antes e depois da área do widget. Dessa forma, por exemplo, você pode envolvê-lo em um contêiner <div> .
• before_widget e after_widget — O mesmo que acima, mas para qualquer widget que apareça nesta área.

Existem outros parâmetros que você pode usar com register_sidebar() . Você pode aprender mais sobre eles na documentação. No entanto, para o nosso propósito, o acima é suficiente.

Uma vez presente em functions.php e com o arquivo salvo, a área do widget já aparecerá no back-end do WordPress.

2. Gerando Áreas de Widget em Seu Tema WordPress

Embora você já possa ver a área de widgets no painel, colocar quaisquer blocos ou widgets lá não terá nenhum efeito. Isso ocorre porque ainda não há nenhuma marcação que diga ao tema para exibir o que você adicionar a ele.

Isso acontece por meio da função dynamic_sidebar() . Por exemplo, para exibir a área de widget que você criou acima em qualquer lugar do seu tema, você pode usar esta função:

 <?php dynamic_sidebar( 'top-bar-widgets' ); ?>

Observe como o código contém o mesmo id da área do widget criada anteriormente para exibi-lo.

Embora o acima funcione, muitas vezes faz sentido usar um snippet um pouco mais complexo:

 <?php if ( is_active_sidebar( 'top-bar-widgets' ) ) : ?> <?php dynamic_sidebar( 'top-bar-widgets' ); ?> <?php endif; ?>

O código acima primeiro verifica se a área do widget em questão possui algum widget e o adiciona à página somente se for o caso. Ele também contém mais algumas marcações, como classes e IDs HTML, para facilitar a personalização da saída via CSS.

Isso deixa apenas as perguntas, onde você coloca essa marcação?

A resposta: Em qualquer lugar em seus arquivos de tema onde você deseja que a área do widget apareça. Normalmente, isso está dentro de arquivos de modelo de página, como page.php ou single.php . No entanto, você também pode adicioná-lo a algo como header.php ou footer.php . Para tomar uma decisão, ajuda se você conhece a hierarquia do modelo e entende como os temas funcionam.

Neste caso, para o tema Twenty Twenty-One, colocamos dentro do header.php logo após a abertura da página.

Com o código definido, quando agora colocarmos um widget dentro da área recém-criada, ele aparecerá no site no local pretendido.

Alternativa: Use WordPress Hooks para exibir áreas de widgets

Em vez de adicionar o trecho de código diretamente aos seus modelos de página e arquivos de tema, você também pode obter a mesma saída usando WordPress Hooks.

Estes são pequenos pedaços de código colocados em locais estratégicos dentro dos arquivos mencionados que você pode usar para dizer ao WordPress para executar funções naquele mesmo lugar sem colocar fisicamente o código lá. Em vez disso, você pode colocar as funções em questão dentro de functions.php . Fazer isso tem a vantagem de ser possível gerenciar todas as suas áreas widgetizadas a partir de um único local.

Como seria isso para o nosso caso?

Veja como colocar uma área de widget usando um gancho do WordPress:

 function ns_output_top_banner_widget() { if ( is_active_sidebar( 'top-bar-widgets' ) ) : dynamic_sidebar( 'top-bar-widgets' ); endif; } add_action( 'wp_body_open', 'ns_output_top_banner_widget' );

O tema Twenty Twenty-One tem um gancho chamado wp_body_open() dentro de seu arquivo de cabeçalho. Conectando-se a ele, podemos exibir a área do widget no mesmo local sem modificar o próprio arquivo.

Como mencionado, o trecho de código vai dentro functions.php do seu tema (filho). Esse método é especialmente adequado para temas que contêm muitos ganchos, como o Genesis Framework.

Como adicionar widgets em temas de blocos

Até agora, falamos apenas sobre como criar áreas de widgets em temas clássicos. No entanto, e os temas de bloco, que – afinal – provavelmente se tornarão o padrão de fato para temas do WordPress.

Aqui, como o Editor do site funciona de maneira muito diferente, você realmente não tem áreas de widgets. Você também notará que o menu Aparência > Widgets não existe.

No entanto, você ainda pode adicionar widgets, conteúdo e outros elementos ao seu tema usando princípios semelhantes aos descritos acima.

Inserir modelos de página e partes de modelo

A primeira coisa a notar aqui é que você fica muito menos limitado na colocação de widgets com o editor de blocos. Como você não está limitado a áreas de widgets pré-configuradas, pode colocar qualquer elemento da página praticamente onde desejar.

No entanto, você ainda pode usar blocos como widgets em temas clássicos usando modelos de página e partes de modelo. Acesse-os em seu bloco através do menu no Editor do Site à esquerda (clique no logotipo do WordPress no canto superior esquerdo para abri-lo).

Isso fornece uma lista de modelos de página disponíveis em seu site. Eles geralmente variam de modelos de página sobre arquivo até a página 404.

É semelhante ao que você encontraria se desse uma olhada nos arquivos de tema em um tema clássico.

Em Template Part s, por outro lado, você encontra modelos para partes do seu site, como cabeçalho, rodapé ou seção de comentários.

Clique em qualquer um deles para abrir no editor. Como alternativa, você também pode fazer alterações em seus modelos e peças de modelo por meio do Editor de modelo. Essa é uma versão ligeiramente reduzida do Editor do Site que você pode abrir através do editor de página normal. Basta abrir a página desejada, clicar no nome do modelo em Modelo e, em seguida , Editar modelo .

Você também pode escolher outro modelo no editor suspenso.

Adicionando Novos Elementos/Widgets

Se você sabe como funcionam os modelos de página, provavelmente entende que qualquer alteração feita aqui afetará não apenas uma única página, mas cada parte do conteúdo do seu site que usa o modelo de página ou a parte do modelo. Portanto, todos os elementos de página que você adicionar a eles aparecerão em todos os lugares do site onde estiverem ativos.

Por exemplo, você pode adicionar um widget de postagem mais recente à parte do modelo de rodapé.

Se você fizer isso e salvar, ele também aparecerá no front-end do site para todas as páginas em que esta parte do modelo estiver presente.

Se você pensar sobre isso, não é muito diferente de como funcionam as áreas clássicas de widgets. Eles também são simplesmente uma maneira de adicionar elementos e conteúdo da página para que sejam reproduzidos no mesmo local em todo o site.

A única diferença aqui é que não há necessidade de editar arquivos. Em vez disso, você pode fazer tudo no editor visual, o WordPress cria e modifica os arquivos para você.

Criando Novas “Áreas de Widget” nos Temas de Bloco do WordPress

Então, como você cria novas áreas de widgets em temas de blocos?

A resposta é: você realmente não. No entanto, o equivalente mais próximo disso é a criação de novos modelos de página e partes de modelo. Isso permite que você adicione conteúdo que aparecerá apenas em partes limitadas do seu site.

Vamos ver um exemplo para tornar as coisas mais claras. Digamos que você queira fazer a mesma coisa que fizemos manualmente no topo. No passado, você teria que registrar uma área de widget e adicionar o código para exibi-la. Com o Site Editor, você pode conseguir a mesma coisa. Só que neste caso é muito mais fácil.

Uma possibilidade é criar uma nova peça de modelo. Para isso, no menu Partes do modelo no editor, clique no ícone de adição na parte superior.

No menu que aparece, dê um nome (por exemplo, “Cabeçalho com barra superior”) e escolha o tipo (neste caso, Cabeçalho , é claro) e comece a editar. Preencha-o com quaisquer elementos de página, widgets e conteúdo que você precisa ou deseja.

Quando terminar, você ainda precisa atribuí-lo ao modelo de página em que deseja que apareça.

Para isso, vá até esse modelo (neste caso, Home ) e encontre o cabeçalho existente. Clique nele, depois nos três pontos para abrir o menu e escolha Substituir cabeçalho .

Isso abrirá um menu com peças e padrões de modelo disponíveis em seu site.

Escolha o que você acabou de criar para inseri-lo e salve o modelo de página. Se você agora voltar para o front-end do seu site, verá o cabeçalho recém-criado ao vivo na página (e somente lá).

Como adicionar novos widgets/blocos

A questão final que resta ao falar sobre como criar widgets e áreas de widgets em temas de bloco é como adicionar mais opções de widgets. Afinal, por padrão, você está limitado a apenas algumas opções. Felizmente, existem diferentes maneiras de adicionar mais.

Por um lado, você pode instalar plug-ins de bloco do Gutenberg, muitos dos quais contêm diferentes blocos de widgets, como formulários, mapas ou carrosséis.

Além disso, você também tem a possibilidade de instalar blocos singulares com funcionalidade de widget. Para isso, primeiro clique no insersor de blocos dentro do WordPress Site Editor.

Depois de aberto, digite um termo de pesquisa para o tipo de bloco que você está procurando no campo na parte superior. Além de quaisquer opções já presentes em seu site, o editor também pesquisará o diretório de blocos do WordPress e mostrará as opções de adequação.

Se algo soa como o que você está procurando, basta clicar no bloco em questão para instalá-lo em seu site e inseri-lo na página na posição atual. Coloque-o no modelo de página ou parte do modelo onde deseja que apareça e salve. Em seguida, admire-o no front-end do seu site.

A propósito, você sempre pode remover blocos singulares que instalou no menu Plugins , caso não precise mais deles.

Widgetizing WordPress Themes não é tão difícil

Adicionar widgets e áreas de widgets no WordPress é uma habilidade importante para exibir uma ampla gama de recursos e informações em seu site. Eles ajudam a tornar seu site mais interativo, informativo e utilizável.

Em temas clássicos, a abordagem para criar áreas de widgets é um pouco mais técnica. Você precisa de um entendimento rudimentar da arquitetura de arquivos do WordPress e sentir-se confortável com um editor de código e fazer ajustes no código PHP. Em temas de blocos, por outro lado, você pode fazer o mesmo apenas com o cursor do mouse.

O que é importante ter em mente é que os princípios são os mesmos, apenas a implementação é diferente. Agora que você sabe como se faz, use esse conhecimento para melhorar seu site!

O que é um widget obrigatório que você gostaria de colocar em seus sites? Você está usando um tema clássico ou de bloco para implementá-lo? Deixe-nos saber nos comentários!