Você já se deparou com um site que publica seus artigos de maneira diferente no blog?
Alguns sites apresentam artigos destacados com um fundo personalizado, enquanto outros podem ter cada postagem de categoria com uma aparência exclusiva. Se você sempre quis aprender como personalizar cada postagem do WordPress, você veio ao lugar certo.
Neste tutorial, mostraremos como moldar cada artigo do WordPress de maneira diferente.
Mas, se você nunca instalou o WordPress, descubra Como instalar um blog WordPress passos 7 et Como encontrar, instalar e ativar um tema WordPress em seu blog
Então, voltemos ao porquê de estarmos aqui.
Observação: Este tutorial requer que você adicione CSS personalizado no WordPress. Você também precisará usar a ferramenta Inspecionar. É necessário algum conhecimento de CSS e HTML.
Dê estilo individual em itens WordPress
O WordPress adiciona classes CSS padrão a vários elementos do seu site. UMA tema WordPress compatível com o padrão deve ter código exigido pelo WordPress para adicionar classes CSS para corpo, posts, páginas, widgets, menus e muito mais.
Descubra também o nosso guia sobre Permalinks: Como personalizar seus links do blog
Uma função principal do WordPress chamada " post_class () É usado por temas para informar ao WordPress onde adicionar essas classes CSS padrão nos artigos.
Se você visitar seu site e usar a ferramenta Inspecionar em seu navegador, poderá ver essas classes adicionadas a cada postagem.
Aqui estão as classes CSS adicionadas por padrão, com base na página exibida por um usuário.
- .post-id
- .poster
- .attachement
- .gluant
- .hentry
- .Mapa ID
- .Mapa-name
- .tag-name
- .format- {tamanho-name}
- {Pós-type-name .type-}
- .Tem pós-thumbnail
- -.post-senha necessária
- .protected-by-a-senha
Um exemplo de exibição ficaria assim:
Você pode personalizar cada publicação do WordPress de maneira diferente usando as respectivas classes CSS.
Leia também: Como melhorar o seu blog WordPress neste fim de semana
Por exemplo, se você deseja editar uma publicação individual, pode usar a classe de pós-identificação em seu CSS personalizado.
.post-412 {background-color: #FF0303; Cor: #FFFFFF; }
Lembre-se de alterar o Post ID para corresponder ao seu post ID.
Vamos dar uma olhada em outro exemplo.
Desta vez, abordaremos todos os artigos publicados em uma categoria específica chamada "notícias".
Descubra o nosso guia em Como adicionar CSS personalizado ao seu blog WordPress
Podemos fazer isso adicionando o seguinte CSS personalizado ao nosso tema.
.Mapa-news {font-size: 18px; font-style: italic; }
Este CSS afetará todos os itens da categoria " atualidade ".
A função post_class ()
Os desenvolvedores de temas usam a função post_class () para informar ao WordPress onde adicionar as pós-classes. Normalmente, está na tag "artigo".
a função post_class () não apenas carrega classes CSS geradas pelo WordPress por padrão, mas também permite que você adicione suas próprias classes.
Descubra também Como proteger seu blog raspadores de conteúdo
De acordo com teu tema WordPress, você encontrará a função post_class() em seu arquivo single.php ou nos arquivos de modelo. Normalmente o código ficará assim:
" >
Você pode adicionar sua própria classe CSS personalizada com um atributo como este:
" >
A classe post_class imprimirá as respectivas classes CSS padrão com sua classe CSS personalizada.
Se você deseja adicionar várias classes CSS, pode defini-las como uma matriz e usá-las na função post-class ().
" >
Mostrar artigos com um estilo diferente, de acordo com os autores
As classes CSS padrão geradas pela função posts_class não incluem o nome do autor como uma classe CSS.
Se você deseja personalizar o estilo de cada postagem com base no autor, primeiro precisa adicionar o nome do autor como uma classe CSS.
Leia também: Como adicionar animações CSS WordPress
Você pode fazer isso usando o seguinte snippet:
" >
Este código adicionará o nome de usuário como uma classe CSS. Nome de usuário é um nome compatível com a URL usada pelo WordPress. Não tem espaços e todos os caracteres são minúsculos, o que o torna perfeito para uso como uma classe CSS.
Veja também nosso guia sobre Como adicionar CSS personalizado ao seu blog WordPress
O código acima provavelmente será exibido assim:
Agora você pode usar ".peter" em seu CSS personalizado para modificar todas as postagens desse autor específico para que apareçam de forma diferente.
.peter {background-color: #EEE; fronteira: sólido 1px #CCC; }
Personalizar postagem de artigos com base em comentários
Você pode ter visto sites com widgets com artigos populares, que às vezes são classificados com base em comentários. Neste exemplo, mostraremos como criar um estilo diferente usando o número de comentários.
Descubra nossos 10 plugins WordPress premium para gerenciar seus comentários
Primeiro, precisamos obter o número de comentários e associar uma classe.
Para obter a contagem de comentários você precisa adicionar o seguinte código em seus arquivos tema WordPress. Este código entra no loop do WordPress, você pode adicioná-lo logo antes da tag .
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'; }?>
Esse código verifica o número de comentários da publicação postada e atribui a eles um valor com base na conta. Por exemplo, mensagens com menos de comentários 10 obtêm uma classe chamada " novo Menos que 20 são chamados emergente "E tudo o que preocupa mais do que os comentários do 20 é" popular ".
Então você precisa adicionar a classe CSS à função post_class.
" >
Isso adicionará as classes CSS novas, emergentes e populares a todos os artigos, com base no número de comentários em cada postagem.
Também convidamos você a ler nosso artigo sobre 6 WordPress plugins para assinar documentos online
Você também pode adicionar CSS personalizado a publicações de estilo com base na popularidade:
.new {fronteira: sólido 1px #FFFF00;} .emerging {fronteira: tracejado 1px #FF9933;} .popular {fronteira: tracejado 1px #CC0000;}
Apenas adicionamos bordas, mas você pode adicionar as regras CSS que desejar.
Descubra também alguns plugins premium do WordPress
Você pode usar outro WordPress plugins para dar uma aparência moderna e otimizar a conexão com seu blog ou site.
Oferecemos a você aqui alguns plugins premium do WordPress que ajudarão você a fazer isso.
1. Ultimate Membership Pro
Ultimate Membership Pro é um ótimo WordPress Plugin premium de assinatura e restrição de conteúdo. Permite que os usuários sejam gerenciados de acordo com seu pacote (gratuito ou pago), criando níveis de acesso exclusivos.
Será, portanto, possível proteja todo o conteúdo do seu site, ou apenas uma parte dela. Será por exemplo um curso, uma aula, uma página, um produto, uma categoria, uma imagem, etc ...
Leia também nosso artigo sobre 4 premium WordPress plugins para criar miniaturas
Suas principais características são, entre outras: proteção de conteúdo, múltiplos níveis de acesso, suporte para múltiplos gateways de pagamento - PayPal, Autorizar.net, Stripe, 2CheckOut, Transferência bancária, proteção parcial do conteúdo, E muito mais…
Descarregar | Demo | hospedagem na web
2. Como Slider para Facebook
Como Slider para Facebook é um WordPress Plugin premium que oferece aos visitantes a opção de deixar comentários em seu site. Com esta caixa de comentários moderna e não intrusiva, este WordPress Plugin fornece o recurso Like Box e Fan Page Wall, que ampliará a integração do seu site com a rede social Facebook.
O plug-in também fornece várias funcionalidades para ampliar as capacidades do seu site: ele possui, por exemplo, uma seção Curtir (“Like Box”) ou uma página dedicada aos fãs (“Fan Page Wall).
Descubra também Como carregar gradualmente os comentários do Facebook e Disqus
Você não precisa incorporar os botões "Curtir" e "Compartilhar" em postagens ou páginas, porque o Slider de comentários do Facebook já os possui e eles podem aparecer em qualquer postagem ou página. Os visitantes encontrarão o botão "Curtir", o botão "Compartilhar" e a caixa de comentários do controle deslizante do Facebook. Obviamente, eles usarão suas contas do Facebook.
Além disso, você pode ligar, desligar e definir o tempo do efeito de vibração.
Descarregar | Demo | hospedagem na web
3. Login Ninja
Este plugin premium para WordPress permite que você personalize sua página de login. É mais do que apenas personalizar seu formulário de login. Você pode personalizar a página inteira, alterando a cor da página, adicionando uma imagem de plano de fundo, adicionando um logotipo e muito mais.
Suas outras características são: proteção de login e formulários de registro com captcha, proibição automática e manual de IPs que o atacam por força bruta, um registro detalhado de todas as atividades relacionadas à conexão, redirecionamento de usuário com base em funções e nomes de usuário, recebendo notificações por email para todos os eventos de conexão, uma interface gráfica fácil de usar, documentação detalhada e muito mais.
Descarregar | Demo | hospedagem na web
Recursos Recomendados
Descubra outros recursos recomendados para ajudá-lo a criar e gerenciar seu site.
- 9 WordPress plugins para gerenciar pagamentos do PayPal em seu Blog
- 10 plug-ins essenciais do WordPress para instalar no seu blog
- 10 plugins do WordPress para usar no gerenciamento de publicidade
- 10 WordPress plugins para criar atributos para seus produtos variáveis
Conclusão
Aqui está ! Isso é tudo para este tutorial, espero que ele permita que você personalize a exibição de artigos em seu blog WordPress. Se você tiver alguma dúvida ou sugestão nessa área, vamos nos encontrar em a seção de comentários para discutir.
No entanto, você também poderá consultar nossos Ressources, se você precisar de mais elementos para realizar seus projetos de criação de sites da Internet, consultando nosso guia no site Criação de blog WordPress ou aquele em Divi: o melhor tema WordPress de todos os tempos.
Mas enquanto isso, compartilhe este artigo em suas diferentes redes sociais.
...
