Categorias
Web

Criando colunas condicionais de widgets com o Foundation

Widgets podem ser incômodos quando devem funcionar como colunas de informação. Pense em um rodapé que, por sua escolha, acomode também uma área de widgets. Você pode definir que o seu rodapé tratará 4 widgets em colunas, declarando cada um deles com 25% do tamanho total da sua área. Basta que ninguém adicione um quinto elemento ou, pior, remova um desses widgets, deixando aquela irregularidade desgraçada na tela. Você pode também usar uma biblioteca como o Masonry (o tema Twenty Thirteen usava ela, não?), mas será que seria necessário? Obviamente, existem formas mais suaves de se fazer isso.

Resolvi abordar o Foundation aqui pela oportunidade atual. Pretendo porém, num próximo artigo, mostrar como é possível fazer esses condicionais sem depender de um framework como ele ou o Bootstrap.

Basicamente, o que a solução faz é adicionar classes específicas aos widgets (usando a global $wp_registered_widgets) que atendam a determinadas condições. Ao contar o número de widgets em uma sidebar – que chamo aqui de widget areas –, adicionamos uma série de outras classes que irão controlar o posicionamento dos widgets. A única exceção fica por conta da minha única sidebar de verdade, chamada de sidebar-main: nela, widgets em colunas não são necessários.

Você pode até mesmo definir que, em uma certa sidebar, seus widgets fiquem com colunas de tamanhos diferentes. No meu caso, não exemplificado no gist abaixo, acabei jogando essa assimetria quando minha sidebar possuía apenas dois widgets. Assim, a primeira coluna ficou com uma largura maior (.medium-8) e a segunda preencheu o resto do grid do Foundation (.medium-4). O resultado é interessante justamente por fugir dos blocos de informação com tamanhos idênticos .

Um pequeno detalhe: esta solução irá, a princípio, gerenciar layouts em coluna quando o número de widgets na área for de no máximo seis, sem incluir o 5º. Para números maiores que seis, os widgets ficarão em sua própria linha. Isso, claro, também pode ser melhorado.

<?php
/**
* Loop through widget areas and add custom classes for each one of them
*
* @link http://colourstheme.com/2015/03/add-class-to-first-and-last-widget/ Reference #1
* @link https://gist.github.com/slobodan/6156076 Reference #2
*/
function fltnt_add_widget_custom_classes() {
global $wp_registered_widgets;
// Find those widgets
$sidebars = wp_get_sidebars_widgets();
if ( empty ( $sidebars ) ) {
return;
}
// Loop through each widget area
foreach ( $sidebars as $sidebar_id => $widgets ) {
// Our main sidebar doesn't need additional classes
if ( 'sidebar-main' == $sidebar_id ) {
continue;
}
// Get the number of widgets on the sidebar
$number_of_widgets = count( $widgets );
foreach ( $widgets as $i => $widget_id ) {
$widget_classes = '';
$widget_position = ( $i + 1 );
// Add a class for widget position
$widget_classes .= ' widget-position-' . $widget_position;
// Add a class for the total number of widgets in this widget area
$widget_classes .= ' widget-count-' . $number_of_widgets;
// Add first widget class
if ( 1 == $widget_position ) {
$widget_classes .= ' widget-first';
}
// Add last widget class
if ( $number_of_widgets == $widget_position ) {
$widget_classes .= ' widget-last';
}
// Add specific Foundation classes for layouts with, respectively, 6, 4, 3 or 2 columns
if ( 6 == $number_of_widgets ) {
$widget_classes .= ' medium-2';
}
elseif ( 4 == $number_of_widgets ) {
$widget_classes .= ' medium-3';
}
elseif ( 3 == $number_of_widgets ) {
$widget_classes .= ' medium-4';
}
elseif ( 2 == $number_of_widgets ) {
$widget_classes .= ' medium-6';
}
else {
$widget_classes .= ' medium-12';
}
// Add Foundation columns
$widget_classes .= ' columns';
// Save new classes into global $wp_registered_widgets
$wp_registered_widgets[$widget_id]['classname'] .= $widget_classes;
}
}
}
add_action( 'init', 'fltnt_add_widget_custom_classes' );

 

Talvez com os Block Grids também seja possível de fazer a brincadeira. A conferir.

Categorias
Web

A Featured Page Widget, um plugin para destacar páginas

A tela de edição e o widget já aplicado em uma sidebar
A tela de edição e o widget já aplicado em uma sidebar

Não contente com os dois ou três plugins de páginas destacadas disponíveis no repositório do WordPress – um deles chega a ter uma página de opções, que heresia –, então resolvi publicar o meu, baseado num código exaustivamente reutilizado em projetos em que trabalhei.

O plugin A Featured Page Widget nada mais é do que um widget que, basicamente, destaca uma página na sua sidebar ou em qualquer outra área registrada para esse fim, mostrando seu resumo e sua imagem destacada. Há apenas algumas opções:

  • Título do widget: se estiver vazio, será usado o título da página destacada;
  • Página: uma lista das páginas publicadas para seleção;
  • Tamanho da imagem: a lista dos tamanhos de imagem registrados no tema, havendo a opção de não mostrar thumbnail;
  • Texto do link: o texto mostrado no link que levará o usuário para a página. O padrão, em português, é Continue lendo. Se vazio, o link não será mostrado.

Você pode fazer o download do A Featured Page Widget no repositório oficial de plugins do WordPress ou também através do GitHub. Críticas e sugestões são muito apreciadas!

A gente sempre tem uns códigos legais que fica com preguiça de publicar. Que isso sirva de lição, crianças, para vocês e para mim.