Como codificar com cores as postagens do blog Divi pelo autor

Um dos principais objetivos do Divi é garantir que todos os elementos do seu site tenham uma boa aparência, e as postagens no blog não são exceção. No entanto, sempre há espaço para melhorias, e a codificação por cores de suas postagens de blog por autor oferece uma maneira para os usuários navegarem em seu conteúdo com mais eficiência (além de identificar seus escritores favoritos!).

Neste artigo, vamos falar mais sobre por que você pode querer codificar com cores suas postagens do blog Divi e como fazê-lo em duas etapas simples. É hora de uma nova camada de tinta!

Por que você deve considerar a codificação por cores nas postagens do seu Divi Blog

Antes de prosseguirmos, vamos esclarecer o que entendemos por codificação de cores nas postagens do seu blog Divi. Na próxima seção, vamos ensinar a você como atribuir a cada um de seus escritores uma cor que aparecerá como plano de fundo para seus próprios posts. Neste exemplo, atribuí às minhas próprias postagens (como autor1) um azul claro muito atraente:

O efeito em si é relativamente simples, mas oferece uma maneira impactante de diferenciar os escritores. Os usuários podem reconhecer facilmente novas peças de seus escritores favoritos. Claro, tornar o nome do autor mais proeminente pode ter o mesmo efeito, mas pode não ser tão impressionante visualmente.

Sua única preocupação com isso é a escolha das cores. Faça a captura de tela no início desta seção, por exemplo - nosso índice do blog Divi usa um fundo branco, então decidimos usar cores pastéis claras para as postagens de nossos autores. Vamos ver o que acontece se escolhermos um esquema de cores diferente:

Claro, esse é um exemplo extremo, mas nos ajuda a ilustrar nosso ponto. Se você quiser codificar suas postagens com cores, deverá considerar sua paleta com cuidado, usando uma ferramenta adequada para ajudar, se necessário. Usar cores contrastantes para destacar a diferença entre cada postagem pode ajudar os usuários a identificar os autores rapidamente, mas também pode destruir o estilo do seu blog e dificultar a leitura do seu conteúdo.

Como codificar com cores as postagens do Divi no blog por autor (em 2 etapas)

Agora que cobrimos a teoria, é hora de passar para a forma de codificar com cores as postagens do blog Divi. A ativação desse recurso leva apenas dois passos, mas há algumas considerações a fazer antes de começar.

Para começar, você vai querer fazer backup do seu site WordPress, o que é sempre uma boa ideia ao fazer alterações. Em segundo lugar, você vai querer criar um tema filho Divi, então suas modificações permanecerão assim que o tema for atualizado.

Finalmente, você precisará usar um cliente FTP para a etapa número um. Estaremos usando o FileZilla, mas se houver outra ferramenta de sua preferência, vá em frente.

Etapa 1: adicionar um trecho de código ao arquivo functions.php do tema filho

Para fazer isso, você precisará abrir seu cliente FTP e fazer login no servidor do seu site. De lá, vá para o diretório public_html / wp-content / themes / e , em seguida, encontre a pasta do seu tema filho. Lembre-se de que public_html ou pasta raiz pode ser nomeada como www ou após o domínio do seu site, dependendo do seu host:

Depois de localizar a pasta do seu tema filho, abra-a e procure o arquivo functions.php dentro dela. Agora, clique com o botão direito sobre ele e selecione a opção Exibir / Editar :

Isso solicitará que você abra o arquivo com seu editor de texto padrão. Já que estamos lidando com um tema filho, seu arquivo functions.php deve estar praticamente vazio, exceto enfileirar as funções de seu pai. Vamos adicionar um trecho que cria automaticamente uma nova classe para cada um de seus autores com o prefixo autor . Por exemplo, se você tiver um usuário do WordPress chamado John, poderá usar a classe author-john . Isso nos permitirá adicionar algum código CSS mais tarde.

Em seguida, adicione o seguinte snippet PHP após a linha // END ENQUEUE PARENT ACTION :

function et_set_author_class( $classes ) {$classes[] = 'author-' . strtolower( str_replace( ' ', '-', get_the_author() ) );

return $classes;}

add_filter( 'post_class', 'et_set_author_class' );

Agora salve suas alterações, feche o editor e pronto! Lembre-se de que você precisará usar caracteres minúsculos para que sua classe funcione, independentemente do autor com quem está lidando. Isso será importante para a segunda etapa.

Etapa 2: Especifique uma cor para cada autor usando a opção CSS personalizada da Divi

Agora que nossa nova função está pronta, o próximo passo é definir uma cor para cada um de seus autores. Divi permite que você faça isso com seu recurso CSS personalizado , já que qualquer código que você adicionar afetará todo o seu tema. Para encontrá-lo, vá para o painel do WordPress e navegue até a guia Divi> Opções de tema , em seguida, role para baixo até a caixa CSS personalizado no final da página:

Você precisará adicionar uma nova linha de CSS neste campo para cada um de seus autores. Por exemplo, se você tiver um autor com o nome de usuário author1, veja como definiria uma cor específica para eles:

.author-author1 {background-color: #C1F3FA !important;}

Lembre-se de que você precisa adicionar o prefixo do autor à sua classe, independentemente do seu nome de usuário. Depois de indicar uma cor de fundo, você também precisa certificar-se de declarar que o código é importante . Simplificando, isso dá ao código mais peso e substitui quaisquer conflitos que possam surgir - sem ele, esse recurso não funcionará.

Vamos examinar um último exemplo. Neste, vamos atribuir cores diferentes a dois autores. Este é o código que adicionamos ao nosso campo CSS personalizado Divi:

.author-author1 {background-color: #C1F3FA !important;}

.author-author2 {background-color: #F9FCB8 !important;}

Agora, esta é a aparência do front end:

Deixando de lado sua escolha de cor, existem outros ajustes que você pode fazer nas postagens do seu blog Divi. Por exemplo, você pode ajustar a extensão dos trechos do seu blog ou estilizar os 'cartões' de suas postagens de várias maneiras. Seu objetivo principal deve ser encontrar o estilo perfeito para o seu próprio blog, então não tenha medo de brincar com o Divi e ver o que ele pode fazer!

Conclusão

Codificar as suas postagens de blog pelo autor é um recurso simples que pode ajudar o usuário a navegar no seu conteúdo com muito mais facilidade (principalmente se você tiver um arquivo extenso). Além disso, muitos de seus usuários provavelmente apreciarão ser capazes de reconhecer as postagens de seus autores favoritos apenas pela cor.

Antes de começar a ajustar os arquivos, lembre-se de fazer backup do seu site e configurar um tema filho, para que suas alterações persistam no futuro. Depois de fazer isso, estas são as duas etapas que você precisa seguir para codificar com cores as postagens do seu blog Divi por autor:

1. Modifique o arquivo functions.php do seu tema filho.
2. Especifique uma cor para cada um de seus autores usando a opção CSS personalizada do Divi.

Você tem alguma dúvida sobre como codificar com cores as postagens do blog Divi por autor? Pergunte na seção de comentários abaixo!

Imagem em miniatura do artigo por RaZZers / shutterstock.com.