Posts relacionados no WordPress: como arrumar as colunas com CSS

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:

  1. Forçar cada post a ocupar 1/3 da largura de tela não importando a resolução
  2. 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.

Como compartilhar a tela no Zoom no modo apresentador do PowerPoint

O Zoom rapidamente se tornou ferramenta indispensável para o trabalho remoto. Por sorte, existe uma forma de compartilhar uma apresentação ao mesmo tempo em que você lê as notas no PowerPoint, sem a necessidade de um segundo monitor.

Os passos abaixo são para Mac, mas o processo deve ser o mesmo para Windows:

  1. Abra sua apresentação no PowerPoint
  2. Clique em Apresentação de Slides
  3. Clique em Modo de Exibição do Apresentador
  4. Abra o Zoom e, dentro de uma reunião, clique em Compartilhar Tela
  5. No painel que abrirá, selecione a aba Avançar (que deveria ser Avançado, imagino eu)
  6. Clique em Parte da tela e então no botão Compartilhar Tela. Ao fazer isso, o Zoom mostrará uma borda redimensionável de cor verde.
  7. Volte para para sua apresentação no PowerPoint (ainda no modo apresentador) e encaixe essa borda do Zoom na seção da sua tela onde está a apresentação, deixando tanto o próximo slide quanto as notas de fora.

E abaixo, um vídeo em inglês que explica o processo:


Observação: esses passos devem funcionar tanto em Windows quanto em MacOS. Porém, usuários Windows podem ter acesso ao modo apresentador de uma forma ainda mais rápida.

Photopea

Hoje eu aprendi sobre o Photopea, que é basicamente um editor de imagens ao estilo do Photoshop que roda diretamente do navegador. Eu já usava o Pixlr, que recentemente teve dados de seus usuários vazados, então bom saber que há outros serviços parecidos.

WooCommerce: como alinhar verticalmente os botões de compra

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.

Baita mão na roda

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.

Gerenciando pedidos via WhatsApp com o GoomerGo

Com o coronavírus comendo solto, estabelecimentos comerciais também precisaram se adaptar ao mundo online. Como o mundo do comércio eletrônico não é algo fácil de se domar, empreendedores estão se virando com as ferramentas do dia-a-dia: redes sociais e/ou WhatsApp.

O problema é que essas ferramentas não são as ideais, e qualquer pedido tem a enorme chance de virar uma conversa de vários minutos:

Qual o cardápio? Quanto custa o produto? Quanto é o frete? Posso retirar no local? Até que horas vocês ficam abertos?

Quando se tem somente dois ou três pedidos, o processo até flui. O problema é quando são 30. Ou 50.

Pra quem precisa entrar rapidamente na internet sem gastar dinheiro ou tempo com implementação, uma dica é o GoomerGo, um serviço bem bacana que encontrei esses dias num restaurante do meu bairro. Gratuito, ele ajuda a criar um site, listar produtos, escolher formas de entrega, adicionar horário de atendimento e gerar um pedido bem formatadinho, mandado via WhatsApp para o telefone da empresa:

Você faz o pedido através do site e o restaurante recebe um resumo dele diretamente no telefone

Obviamente, você ainda gerencia os pedidos através de uma ferramenta que não foi feita pra isso. Porém, a vantagem é cortar o papo desnecessário, gerar um pedido completo e permitir que seu tempo seja gasto em coisas mais importantes. É um baita serviço para empreendedores que precisam se adaptar aos novos tempos.

Home office ou trabalho remoto: ferramentas digitais em tempos de mudança

O coronavírus impôs uma nova realidade ao mundo e, consequentemente, à muitos trabalhadores que tiveram que rapidamente lidar com essa mudança radical de cultura. Em questão de dias, muitas pessoas entraram no mundo do home office, e trabalhar de casa, preparar sua rotina, cuidar dos filhos e ainda evitar a procrastinação e a falta de foco se tornaram um enorme desafio.

Inúmeros textos brotaram, pós COVID-19, sobre trabalho remoto. A maioria dos que li focam em dicas e orientações geais, algo que eu mesmo esbocei aqui há uns anos. Como as dicas ainda são as mesmas, resolvi focar em ferramentas que me ajudam a trabalhar de casa.

Continue reading “Home office ou trabalho remoto: ferramentas digitais em tempos de mudança”

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

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
Continue reading “Como esconder o pop-up de login e navegar no Instagram sem uma conta”

Para compartilhar #2

O single de Come as You Are lançado pela Folha gratuitamente

Em 1992, o jornal Folha de S.Paulo presenteou os seus assinantes com um disco de uma banda até então desconhecida. Num domingo daquele ano, os fiéis leitores receberam junto com a edição do diário um vinil de um tal de Nirvana. E, veja bem, não era o Nevermind, disco lançado em setembro do ano anterior, que já estava bombando na gringa. Era “Come As You Are”, segundo single daquele álbum. O presentinho foi feito em vinil. EM VINIL.

Baita reportagem da Vice sobre uma história que nem eu, viciado da porra, sabia sobre a banda.

Neutralidade da rede garantida no Brasil?

De acordo com o NIC.br, o fim da neutralidade da rede nos Estados Unidos não deve gerar consequências ao Brasil. Resta garantir que o Marco Civil se mantenha de pé mesmo com tentativas de flexibilização sendo propostas pelas teles.

Para mais informações, recomendo também o site Direitos na Rede.

Quanto ganha um magistrado?

Um rapaz muito bacana extraiu os contracheques de todos os magistrados disponíveis no site do Conselho Nacional de Justiça (CNJ) e gerou um arquivo CSV que mostra que algun dos salários chegam a mais de R$ 100 mil.