Arquivos CSS - Flutuante

Posts relacionados no WordPress: como arrumar as colunas com CSS

setembro 6th, 2021

O plugin Jetpack para WordPress vem com um módulo de posts relacionados que automaticamente adiciona, ao final da publicação, uma lista de textos similares. É ideal para direcionar leitores para outros posts relevantes dentro do site.

Você pode configurar os posts relacionados tanto como lista ou em colunas/grade. Ao selecionar a grade, o problema aparece.

Por padrão, o Jetpack força cada post relacionado a ocupar 50% do espaço em dispositivos móveis com telas de até 640px. Como são mostrados três posts, um deles é jogado para uma segunda linha e o resultado fica péssimo:

Posts relacionados em uma tela de celular, resultando em uma coluna quebrada — Que tristeza

Há pelo menos duas formas de resolver isso com CSS:

Forçar cada post a ocupar 1/3 da largura de tela não importando a resolução
Tornar a área responsiva ao mostrar uma lista em dispositivos móveis e uma coluna em telas maiores

Escolhi a segunda pela versatilidade.

O código

Para testar o código, abra o WP Admin e vá em Aparência > Personalizar > CSS Adicional. Agora, adicione as seguintes linhas:

/* JP Related Posts: create a list on small screens and columns on larger ones -- https://wp.me/paOFn3-1fR */
.entry-content #jp-relatedposts .jp-relatedposts-grid {
	width: 100%;
	padding: 0;
	margin: 0;
}

.entry-content #jp-relatedposts .jp-relatedposts-grid .jp-relatedposts-post {
	float: none;
	width: 100%;
	padding: 1.5em 0;
	margin-bottom: 0;
}

.entry-content #jp-relatedposts .jp-relatedposts-post-img {
	width: 100%;
	padding: 0;
	margin-bottom: 1em;
}

@media screen and (min-width: 376px) {
  .entry-content #jp-relatedposts .jp-relatedposts-grid {
		display: flex;
		grid-gap: 1em;
  }
}
/* End JP Related Posts */

Em suma, o código faz o seguinte:

Cria uma lista com os posts por padrão ao remover o float e forçar a largura máxima
Arruma os espaçamentos e margens
Transforma a lista em colunas usando flex em telas com largura maior que 375px. Poderia ter usado grid, mas vamos simplificar.

Como o CSS do Jetpack carrega no rodapé do site, você vai precisar especificar o seu código. Neste exemplo, eu usei a classe .entry-content, presente na maioria dos temas. Outra alternativa seria usar o !important, mas é melhor deixá-lo para último caso.

Como resultado, os posts relacionados ficarão parecidos com a imagem abaixo:

Posts relacionados após o código CSS, em uma lista organizada.

Caso o código acima não funcione no seu site, dê um grito. Talvez seja apenas uma questão de mudar algumas partes do CSS.

WooCommerce: como alinhar verticalmente os botões de compra

setembro 14th, 2020

O WooCommerce conta agora com blocos que facilitam a criação de páginas personalizadas de produtos e uma das vantagens ao usar os blocos é a facilidade de alinhar o último elemento (por padrão, o botão) de cada produto listado.

Essa opção, porém, não está disponível para sites ainda utilizando o shortcode [products] Nesse caso, ou você usa um plugin como o Woo Align Buttons ou adiciona um código CSS ao seu site:

/* WooCommerce Products Shortcode: bottom-align buttons -- https://wp.me/paOFn3-TO */
@media screen and (min-width: 768px) {  
  ul.products {
    display: flex;
    flex-wrap: wrap;
  }
   
  ul.products li.product {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
   
  ul.products li.product .button {
    align-self: center;
  }
}

E segue o resultado:

Imagens que trazem paz: botões propriamente alinhados

Caso queira mudar o alinhamento dos botões, mude o valor do align-self para um outro qualquer.

Como esconder o pop-up de login e navegar no Instagram sem uma conta

fevereiro 10th, 2020

Atualização (20/05/21): ainda não entendi a lógica, mas alguns perfis do Instagram são automaticamente redirecionados para a página de login/criação de conta.

A internet, que antes se assemelhava a uma cidade aberta, em que cada cidadão tinha sua própria voz e podia falar e flanar entre iguais, tornou-se um conjunto de grandes condomínios fechados. Cada um deles com regras próprias, que determinam como a informação circula.
No entanto, hoje boa parte da informação na rede é publicada “intramuros”. Não aparece em buscadores e é preciso fazer “login” para acessá-la.
Ronaldo Lemos, em coluna na Folha

(mais…)

Criando colunas condicionais de widgets com o Foundation

outubro 9th, 2015

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' );

view raw

wp-widget-foundation-custom-classes.php

hosted with ❤ by GitHub

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

Tag: CSS

Posts relacionados no WordPress: como arrumar as colunas com CSS

O código

WooCommerce: como alinhar verticalmente os botões de compra

Como esconder o pop-up de login e navegar no Instagram sem uma conta

Criando colunas condicionais de widgets com o Foundation