Você já se deparou com um site que oferece um estilo diferente para cada item? Alguns sites têm artigos diferentes « en avant Destacados enquanto outros têm cada categoria com cores diferentes, às vezes alguns podem até ter uma perspectiva muito original.
Bem, é exatamente isso que abordaremos neste tutorial. Compartilharemos com você os diferentes métodos que você pode usar para dar um estilo único aos seus artigos no WordPress.
Então, o que vamos usar? Vamos usar uma função chamada " post_class " Esta função imprime classes diferentes nos contêineres do artigo (tag HTML), geralmente no index.php, single.php e outros arquivos que exibem um " loop de artigos "(Com referência a" WordPress loop ").
Observação: Este tutorial requer que você esteja familiarizado com o design de tema WordPress e dominar alguns HTML/CSS.
Quando você abre seu arquivo "index.php", ou outro arquivo que tem um loop, você normalmente verá " div "Com classes" post- {id} ", mas também provavelmente o uso da função" post_class ".
" >
Adicionando esta função em uma tag " div », Cada um dos seus artigos terá as seguintes classes, adicionadas pelo WordPress. As seguintes classes são adicionadas por padrão:
- .post-id
- .post
- .attachment
- .sticky
- .hentry (hAtom páginas microformat)
- .Mapa ID
- .Mapa-name
- .tag-name
Aqui está um exemplo de uma tag com classes.
Portanto, se você abrir o arquivo "style.css" e adicionar a classe "category-dancing", poderá personalizar a exibição dos artigos na categoria "dancing".
.Mapa-dancing {background: #97c3e1; fronteira: sólido 1px #84aac4;}
O exemplo acima fará com que os artigos da categoria "dança" tenham um fundo azul. Você pode continuar adicionando outra classe para a classe "dança de categoria" etc. Você pode usar a mesma técnica para dar uma aparência única aos itens que possuem um rótulo específico.
Mas para alguém que realmente deseja customizar a aparência de seu site, eles podem precisar de alguns controles extras em termos de classes. Bem, você pode especificar as classes que deseja usar da seguinte maneira:
Mas como ele funcionará em uma plataforma dinâmica como o WordPress? Então, vamos dar uma olhada em alguns exemplos de como adicionar classes aos seus artigos no WordPress.
Estilo baseado em autores
Freqüentemente, você notará que alguns blogs usam um estilo diferente dependendo dos autores. Para esses blogs, é uma boa ideia dar a cada artigo um estilo único de acordo com os autores. Portanto, neste exemplo, vamos dar a cada postagem seu próprio estilo com base no nome do autor. Portanto, em seu arquivo "index.php" ou outro arquivo (archive.php / category.php etc), iremos recuperar o nome do autor do artigo:
O código acima recupera o nome "exibido" de um autor e o atribui à variável $ author. Agora que temos um valor, podemos adicioná-lo em nosso código post_class como este:
Nota: Você não precisa manter a classe 1 e a classe 2. É apenas se você deseja adicionar classes estáticas.
Nosso exemplo deve ficar assim:
O nome será diferente em cada artigo, dependendo da variável do nome público de um autor. Você pode adicionar o estilo de sua escolha como este:
.Herve {border: 1px solid # 000;} .Thierry {border: 1px solid # d88b3d;} .Franklin {border: 1px solid # 4781a8;}
Cada item do loop terá uma classe diferente e, portanto, será aplicado um estilo diferente.
Estilo na série de comentários
Você viu sites com artigos populares em um widget, que se baseiam principalmente no número de comentários. Bem, neste exemplo, vamos mostrar como o estilo das postagens varia dependendo do número de comentários. A primeira coisa que precisamos fazer é obter o número de comentários e associar uma classe a eles. Para obter o número de comentários, precisamos do seguinte código no loop:
aprovado; if ($ my_comment_count <10) {$ my_comment_count = 'novo'; } elseif ($ my_comment_count> = 10 && $ my_comment_count <20) {$ my_comment_count = 'ermerging'; } elseif ($ my_comment_count> = 20) {$ my_comment_count = 'popular'; }?>
No código acima, adicionamos classes de acordo com uma escala específica. Se um artigo for menor que os comentários do 10, a classe " novo Será adicionado. Se o artigo tiver mais que comentários 10 e menos que comentários 20, a classe "ermergingSerá adicionado. Se o artigo tiver mais de comentários do 20, a classe 'Popular' será adicionado. Você pode alterar essa escala com base na taxa média de comentários do seu site.
Portanto, o código do artigo será semelhante a este:
Certifique-se de colar o código acima no loop. Então você adicionará a variável $ custom_values à função post_class.
.new {fronteira: sólido 1px #FFFF00;} .emerging {fronteira: tracejado 1px #FF9933;} .popular {fronteira: tracejado 1px #CC0000;}
Essa é de longe a melhor maneira de personalizar o estilo de artigos no WordPress. Mas, às vezes, você quer ter mais controle. As classes CSS permitem editar a visualização, mas não alterar a estrutura.
É isso neste tutorial. Espero que você consiga criar estilos específicos para artigos no WordPress.
