Adicione layouts de alvenaria e grade ao seu site WordPress com apenas CSS
Publicados: 2014-07-09Sempre quis melhorar a forma como suas postagens são exibidas na página inicial e nos arquivos do WordPress?
E se você pudesse exibir suas postagens usando a abordagem de alvenaria (Pinterest) ou talvez um layout de grade, tudo apenas adicionando um trecho de CSS?
Sem plugins, códigos de acesso, alterações de modelo, atribuindo páginas como página inicial. Apenas CSS puro.
Continue lendo ou vá em frente usando estes links:
- Preparativos para adicionar layouts de alvenaria e grade ao seu site
- Dando às suas postagens a aparência de alvenaria do Pinterest
- Disposição de postagens em uma grade
- Adicionando o CSS personalizado ao seu site
Preparativos para adicionar layouts de alvenaria e grade ao seu site WordPress
Essas soluções são baseadas puramente em CSS e, portanto, não surpreendentemente, elas dependem muito da marcação HTML em seu site para funcionar sem modificação.
O CSS utilizado foi desenhado (e testado) com os temas padrão. Isso significa que o CSS tem algumas expectativas:
- Existem classes no elemento body que descrevem o tipo de página (por exemplo, home, blog, archive, search)
- As listas de postagem são coleções de elementos de artigo, completos com cabeçalho envolvido em um div com o id do conteúdo
Se você usar um tema padrão, poderá usar o CSS sem modificação. Mesmo se você não fizer isso, você pode descobrir que seu tema usa marcação semelhante o suficiente para que você ainda possa usar o CSS como está. Por exemplo, o tema dos anos 80 usa praticamente a mesma marcação que os temas padrão.
Se o seu tema não usa a mesma marcação - a maneira mais fácil de saber é verificar a fonte da página para as classes e ids referenciados no CSS - então você ainda pode usar o CSS, basta alterar as classes e os ids para corresponder à sua marcação.
Escolhendo onde aplicar o estilo
Você pode decidir que deseja aplicar apenas o estilo escolhido a determinadas páginas.
O WordPress torna isso muito fácil, pois aplica classes específicas da página ao elemento do corpo, como blog, home, archive e search, então você só precisa codificar seu CSS para cada uma das classes relevantes.
Por exemplo, se você deseja aplicar o estilo apenas à página inicial, seu CSS será algo como:
body.blog article { styles go here... }
Para aplicar o estilo à página inicial e às páginas de arquivo (categoria):
body.blog article, body.archive article { styles go here... }
Para aplicar o estilo apenas aos resultados da pesquisa:
body.blog search { styles go here... }
Novamente, isso depende do seu tema seguindo as recomendações de temas do WordPress.
Compatibilidade do navegador
Sendo CSS3, essas técnicas não funcionarão em todas as plataformas e navegadores.
Eu testei e confirmei que eles funcionam nas versões mais recentes do Chrome e Safari (ambos no OS X) e no iOS (5+). Os vários sites CSS também sugerem que o IE10 também não terá problemas.
Fora desses navegadores (incluindo o IE9), sua milhagem varia, mas vale lembrar que o fallback é seu estilo atual, portanto, os visitantes que usam navegadores mais antigos simplesmente não notarão nenhuma diferença.
Se você achar que os estilos funcionam com sucesso em uma plataforma não mencionada (principalmente Windows), informe-nos nos comentários.
Chega de isenções de responsabilidade, então, vamos ver como enfeitar suas listagens de postagens.
Dando às suas postagens a aparência de alvenaria do Pinterest
Existem muitos temas WordPress e um punhado de plugins que exibem postagens em um formato de alvenaria no estilo do Pinterest. Mas com CSS3, você pode simplesmente adicionar alguns estilos adicionais ao seu site WordPress e obter o mesmo efeito.
Esta solução, inspirada no post de Rahul Arora no W3Bits, é baseada no suporte do CSS3 para a propriedade column . Essa propriedade dividirá o conteúdo pelo número definido de colunas e, embora sua criação provavelmente tenha sido inspirada mais pela ideia de fluxo de texto em colunas no estilo de jornal, é igualmente útil para um layout de alvenaria.
/* Masonry Custom CSS */
/* Masonry container */
body.blog div#content, body.archive div#content {
-moz-column-count: 4;
-webkit-column-count: 4;
column-count: 4;
-moz-column-gap: 1em;
-webkit-column-gap: 1em;
column-gap: 1em;
}
/* Masonry bricks or child elements */
body.blog article, body.archive article {
background-color: #eee;
display: inline-block;
margin: 0 0 1em;
padding: 1em;
width: 100%;
}
body.archive .archive-header, body.blog .paging-navigation, body.archive .paging-navigation {
background-color: #ffffff;
-webkit-column-span: all;
column-span: all;
}
Nos layouts padrão, as postagens são geradas como elementos de artigo agrupados em um div com um id de conteúdo.
O CSS:
1. Define o número de colunas no wrapper #content usando a propriedade column-count – neste caso 4. Ele também define o intervalo de colunas . Você notará o uso de -moz- e -webkit- para Firefox e Safari.
2. Transforma os elementos do artigo em tijolos, usando bloco em linha e definindo uma largura para 100%.
3. Garante que o cabeçalho da página e a navegação fiquem em sua própria "linha", especificando que esses elementos abrangem todas as colunas
Apenas para manter as coisas organizadas, você também pode considerar adicionar o seguinte:
/* Some ad hoc CSS useful for many themes */
body.archive .site-content,
body.blog .site-content {
margin: 1em;
}
h1, h2, h3, h4, h5, h6, a {
-ms-word-wrap: break-word;
word-wrap: break-word;
}
Isso apenas coloca uma margem ao redor do conteúdo e garante que palavras longas nos títulos não joguem fora a formatação (útil para qualquer tema, não apenas aqui).
Tornando-o responsivo
Uma desvantagem com uma abordagem de coluna é que ela se degrada rapidamente à medida que o tamanho da tela fica menor.
O que queremos fazer é manipular o número de colunas para que os elementos do artigo obtenham uma quantidade razoável de espaço na tela para manter a integridade e o apelo visual dos tijolos. Então, vamos adicionar algumas consultas de mídia para alterar o número de colunas com base no tamanho da tela:
@media only screen and (max-width : 1024px) {
body.blog div#content, body.archive div#content { /* Masonry container */
-moz-column-count: 3;
-webkit-column-count: 3;
column-count: 3;
}
}
@media only screen and (max-device-width : 1024px) and (orientation : portrait) {
body.blog div#content, body.archive div#content { /* Masonry container */
-moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2;
}
}
@media only screen and (max-width : 768px) {
body.blog div#content, body.archive div#content { /* Masonry container */
-moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2;
}
}
@media only screen and (max-width : 480px) {
body.blog div#content, body.archive div#content { /* Masonry container */
-moz-column-count: 1;
-webkit-column-count: 1;
column-count: 1;
}
}
Como você pode ver, só precisamos alterar a propriedade column-count (e seus derivados) para cada consulta.
Esses 4 pontos de interrupção, 3 dos quais funcionarão em todas as plataformas (basta redimensionar a janela do navegador para vê-los entrar em vigor) e 1 que é específico para um tablet no modo retrato.
Aqui está o estilo de alvenaria em um iPad e iPhone:
Você pode (e deve), é claro, ir além e adicionar mais estilo aos tijolos para melhorar o apelo visual, mas apenas 3 declarações CSS para transformar suas listagens de postagens em uma parede de alvenaria é bastante impressionante!
Disposição de postagens em uma grade
Se você gosta de mais uniformidade e ordem do que a alvenaria oferece, talvez esteja interessado em organizar suas postagens em uma grade.
As grades são muito, muito fáceis de implementar, mas definitivamente funcionam melhor quando as imagens em destaque são todas do mesmo tamanho, caso contrário, você pode acabar com bastante espaço em branco preenchendo as “células” mais curtas.
Desta vez, o CSS é ainda mais curto, simplesmente contando com o estilo dos elementos do artigo :
/* Grid Layout Custom CSS */
body.blog article, body.archive article {
width: 32.5%;
display: inline-block;
vertical-align: top;
text-align: left;
margin-bottom: 10px;
position: relative;
}
Isso é tudo o que é absolutamente necessário. Novamente, estamos fazendo uso do bloco inline e garantindo que o conteúdo do artigo (título, imagem em destaque, trecho) esteja alinhado verticalmente.
A propriedade importante é a largura , pois ela determina o número de “colunas”. Eu usei 32,5% como o valor inicial (usar 33% pode levar a um encapsulamento prematuro) que fornecerá 3 colunas. Obviamente, se você quisesse 4 colunas, usaria 24,5%, 5 colunas 19,5%, etc.
Adicionando Responsividade
Assim como nosso estilo de alvenaria, as grades precisarão ser responsivas para manter sua eficácia.
Como é a propriedade de largura que determina o número de colunas, então essa é a propriedade que será alterada nas várias consultas de mídia.
@media only screen and (max-device-width : 1024px) and (orientation : portrait) {
body.blog article, body.archive article {
width: 49%;
}
}
@media only screen and (max-width : 768px) {
body.blog article, body.archive article {
width: 49%;
}
}
@media only screen and (max-width : 480px) {
body.blog article, body.archive article {
width: 100%;
}
}
Apenas 3 consultas desta vez, pois comecei apenas com 3 colunas. Se você decidir começar com mais colunas, pode querer adicionar um ponto de interrupção de largura máxima: 1024px para definir a largura para 32,5% (3 colunas).
Isso resultará em:
- 2 colunas em um tablet no modo retrato
- 2 colunas quando o tamanho da tela é uma largura máxima de 768px
- 1 coluna quando o tamanho da tela é uma largura máxima de 480px
Esses pontos de interrupção abrangerão tablets e smartphones e redimensionamento da janela do navegador.
Aqui está o layout da grade em um iPad e iPhone:
Grades, um pouco mais ordenadas do que alvenaria, mas realmente exigem consistência e rigor quando se trata do tamanho da imagem em destaque para serem mais eficazes.
Adicionando o CSS personalizado ao seu site
Existem várias opções quando se trata de injetar o CSS personalizado escolhido em seu site WordPress. Se o seu tema não inclui a capacidade de adicionar CSS personalizado, suas opções são:
- Tema filho – crie um tema filho e adicione o CSS à folha de estilo
- Plugin – adicione o estilo escolhido a um novo arquivo CSS e crie um plug-in que use a função wp-enqueue-style, talvez condicionalmente com base na página que está sendo gerada, para enfileirar o novo arquivo
- Edite a folha de estilo do tema atual - não, realmente, apenas não
- Use um plug-in CSS personalizado – há vários plug-ins que permitirão que você adicione CSS personalizado ao seu site por meio da interface de administração do WordPress (o plug-in CSS personalizado simples é um desses plug-ins)
Eu gosto de usar o plugin CSS personalizado. É rápido e fácil de configurar, facilita muito os testes e é igualmente rápido e fácil remover o CSS do seu site WordPress (limpe o editor ou desinstale o plugin).
CSS, o caminho para o WordPress Zen
O maravilhoso CSS Zen Garden vem provando há muitos anos que a aparência de um site pode ser substancialmente alterada sem uma única alteração na marcação, mas alterando o CSS.
Embora não estejam nem perto do mesmo nível, essas duas técnicas provam que alterar a aparência do seu site WordPress também é totalmente possível sem a necessidade de alterar modelos, usar códigos de acesso ou desenvolver temas filhos.
Apenas um pouco de CSS.
Nota do Editor: Este post foi atualizado para precisão e relevância. [Publicado originalmente: julho de 2014 / revisado: fevereiro de 2022]
Tag: