Como adicionar letras maiúsculas e minúsculas em publicações do WordPress (3 métodos simples)

A adição de elementos como letras maiúsculas em suas postagens do WordPress pode melhorar a legibilidade e dar ao seu conteúdo uma aparência profissional e polida.

As letras maiúsculas são letras maiúsculas grandes e decorativas usadas no início de um parágrafo. Elas chamam a atenção dos leitores e dão um toque de elegância ao seu texto.

Ao longo dos anos, usamos drop caps em nossos blogs pessoais para dar um toque estético. Muitos de nossos leitores notaram e comentaram o quanto gostam desse recurso, apreciando o apelo visual aprimorado que ele traz ao design do site.

Neste artigo, mostraremos passo a passo como adicionar facilmente drop caps nas postagens do WordPress.

O que é um Drop Cap?

O drop cap é uma técnica de estilo comumente usada em livros e revistas impressos que apresentam leituras mais longas. A primeira letra do parágrafo inicial de cada capítulo usa um tamanho de fonte grande.

Normalmente, a letra maiúscula grande se estende para baixo e fica abaixo das primeiras linhas, por isso é chamada de “drop cap”.

A adição de capitulares ajuda seu conteúdo a se destacar e a chamar a atenção do visitante. Elas dão um toque mais formal e tradicional ao design do seu site.

Há várias maneiras de adicionar drop caps a um site do WordPress. Você pode usar a opção integrada no editor de blocos do WordPress ou usar um plug-in.

Dito isso, vamos ver como você pode adicionar facilmente drop caps em posts do WordPress usando métodos diferentes.

Sinta-se à vontade para clicar nos links abaixo para ir para o método de sua preferência:

Método 1: Adicionar letras maiúsculas usando o editor de blocos do WordPress

Se você quiser adicionar capitulares usando o editor de blocos padrão do WordPress, esse método é para você. Lembre-se de que, embora esse método funcione, você precisa adicionar manualmente capitulares para cada post.

Se estiver procurando um método automático, pule para o método 2.

Primeiro, vá para a página Posts ” Add New no painel de administração do WordPress. Agora, basta clicar no botão “Add Block” (+) no canto superior esquerdo da tela.

Depois disso, localize e clique no bloco Parágrafo para adicioná-lo à sua postagem.

Em seguida, você precisa abrir o painel Block Settings (Configurações de bloqueio) na coluna da direita.

Depois de fazer isso, role para baixo até a seção “Typography” (Tipografia) e clique no ícone de três pontos ao lado dela. Isso abrirá uma lista de mais opções, das quais você deve selecionar “Drop Cap” para adicioná-la ao painel de blocos.

Depois que o recurso de capitular for adicionado, basta alternar o botão ao lado da opção “Capitular” para mostrar uma letra inicial grande no início de um parágrafo.

Não se esqueça de clicar no botão “Salvar rascunho” ou “Publicar” na parte superior para salvar suas alterações.

Você adicionou com sucesso um drop cap à sua postagem.

Esta é a aparência em nosso site de demonstração.

Observe que a opção de letras maiúsculas incorporadas no editor de blocos usará o estilo do tema do WordPress para a cor, a fonte e o tamanho da primeira letra.

Se quiser alterar o estilo de suas capas suspensas no editor de blocos do WordPress, você terá de usar o código CSS personalizado para estilizar suas capas suspensas.

Método 2: Adicionar capitulares usando o código CSS

Para esse método, usaremos um código CSS personalizado para adicionar automaticamente letras maiúsculas ao primeiro parágrafo de cada publicação. Você pode adicionar o código CSS às folhas de estilo do seu tema ou usar um plug-in de snippet de código.

Recomendamos o uso do WPCode porque ele é o plug-in de snippet de código nº 1 usado por mais de 2.000.000 de sites em todo o mundo. Com ele, é muito fácil adicionar código ao seu site sem complicações.

Primeiro, você precisa instalar e ativar o plug-in WPCode. Para obter mais instruções, consulte nosso guia para iniciantes sobre como instalar um plug-in do WordPress.

Após a ativação, visite a página Code Snippets ” +Add Snippet na barra lateral do administrador do WordPress.

A partir daqui, passe o mouse sobre a opção “Add Your Custom Code (New Snippet)” (Adicionar seu código personalizado (novo snippet)). Isso revelará o botão “Use Snippet” no qual você deve clicar.

Agora que você está na página “Criar snippet personalizado”, pode começar inserindo um título para o snippet de código. Pode ser qualquer coisa que ajude você a identificar o snippet.

Depois disso, selecione “CSS Snippet” como o “Code Type” (Tipo de código) no menu suspenso à direita.

Em seguida, basta copiar e colar o seguinte código na caixa “Code Preview” (Visualização de código):

<style type="text/css">
.entry-content p:first-child:first-of-type:first-letter {
    font-size: 85px;
    line-height: 1;
    padding-top: 0px;
    padding-right: 10px;
    padding-left: 4px;
    color: #000080;
    float: left;
    font-family: 'Tangerine', serif;
    text-shadow: 4px 4px 4px #aaa;
</style>
}

Agora, você deve rolar para baixo até a seção Inserção e selecionar o método “Inserção automática” se quiser executar o código em todo o seu site.

Você pode usar o método “Shortcode” se quiser adicionar drop caps somente a posts específicos.

Depois de salvar o snippet, você receberá um shortcode que poderá colar no editor de blocos das postagens em que deseja adicionar drop caps.

Depois disso, volte para a parte superior da página e alterne o botão para “Ativo”.

Por fim, clique no botão “Save Snippet” (Salvar snippet).

Seu snippet de código CSS agora estará ativo em seu site.

Esta é a aparência das tampas suspensas em nosso site de demonstração usando o snippet de CSS acima.

Método 3: Adicionar capitulares usando um plug-in

Se você estiver hesitante em adicionar CSS personalizado, também poderá adicionar letras maiúsculas usando o plug-in Initial Letter.

Esse plug-in também permite que você altere o tamanho, a cor e a fonte das tampas suspensas.

Dito isso, primeiro você precisa instalar e ativar o plug-in Initial Letter. Para obter mais instruções, consulte nosso guia sobre como instalar um plug-in do WordPress.

Após a ativação, navegue até a página Configurações ” Carta inicial na barra lateral do administrador. A partir daí, você pode definir as configurações para drop caps.

Primeiro, você precisa selecionar se deseja que as letras capitulares sejam aplicadas automaticamente às novas postagens. Para fazer isso, escolha a opção “Yes” (Sim) no menu suspenso ao lado da opção “Default for Posts” (Padrão para publicações).

Em seguida, escolha a fonte, a cor, o tamanho e o preenchimento de sua preferência para as letras maiúsculas e minúsculas.

Observação: talvez seja necessário voltar às configurações depois de visualizar o site para ajustar essas opções de estilo.

Depois disso, marque a caixa ao lado da opção “Enable for excerpts” (Ativar para trechos) se quiser que as capitulares sejam ativadas para trechos de postagens.

Você também pode marcar a caixa ao lado da opção “First Paragraph Only” se quiser que as letras maiúsculas sejam adicionadas apenas ao primeiro parágrafo da publicação.

Por fim, não se esqueça de clicar no botão “Save Changes” (Salvar alterações) para armazenar suas configurações.

Agora você pode acessar qualquer publicação em seu site e verá as letras maiúsculas em ação no primeiro parágrafo da publicação.

Se quiser remover as letras maiúsculas de uma postagem, você também pode fazer isso abrindo a postagem no editor de blocos.

Uma vez lá, role para baixo até a seção “Initial Letter” (Letra inicial) e selecione a opção “No” (Não) no menu suspenso. Isso desativará as letras maiúsculas para essa postagem.

Bônus: Altere as fontes nos seus temas do WordPress

Além das letras maiúsculas, você também pode alterar a fonte do seu site WordPress para tornar seu conteúdo mais legível e esteticamente agradável.

Para fazer isso, você pode visitar a página Appearance ” Customize (Aparência ” Personalizar ) no painel do WordPress. Isso abrirá o personalizador de temas, onde você deve abrir a guia “Global”.

Agora você verá algumas novas opções na coluna da esquerda, incluindo tipografia, cores, contêineres e botões. Aqui, você deve expandir a guia “Typography” (Tipografia).

Isso abrirá uma lista de diferentes predefinições oferecidas pelo tema, e você poderá selecionar a fonte de sua preferência. Quando terminar, não se esqueça de clicar no botão “Publish” (Publicar) na parte superior para armazenar suas configurações.

Se estiver usando um tema de bloco, o personalizador de tema não estará disponível e você terá que alterar a fonte usando o editor completo do site.

Para obter mais detalhes sobre isso, consulte nosso tutorial sobre como alterar as fontes nos temas do WordPress.

Esperamos que este artigo tenha ajudado você a aprender como adicionar letras maiúsculas nas postagens do WordPress. Talvez você também queira dar uma olhada em nosso guia sobre como alterar fontes em seu tema do WordPress e em nossa lista de maneiras de criar um site WordPress compatível com dispositivos móveis.

Se você gostou deste artigo, inscreva-se em nosso canal do YouTube para receber tutoriais em vídeo sobre o WordPress. Você também pode nos encontrar no Twitter e no Facebook.