Limitar o número de caracteres conforme o tamanho da tela

Limitar o número de caracteres conforme o tamanho da tela do dispositivo.

“Estou executando um projeto de site onde a imagem e o texto ficam lado a lado, porém quando diminuo o tamanho da tela o texto fica desproporcional com a imagem”.

Essa falta de responsividade ocorre porque o layout atual não está configurado para se adaptar dinamicamente às diferentes dimensões da tela.

Para solucionar esse problema, estou avaliando as seguintes alternativas:

• Javascript e PHP: O código detecta o tamanho da tela e ajusta o comprimento do texto dinamicamente, adicionando reticências (“…”)
• Implementar media queries CSS: Com as media queries e usando as propriedades text-overflow e white-space no CSS, é possível aplicar estilos específicos para cada faixa de tamanho de tela, garantindo que o layout seja otimizado para cada dispositivo e limitar o número de caracteres.
• Implementar -webkit-line-clamp: O -webkit-line-clamp é uma propriedade CSS não padronizada que limita a quantidade de linhas visíveis de um elemento de texto, truncando-o e adicionando reticências ao final quando o conteúdo excede o limite estabelecido. Para que funcione corretamente, essa propriedade depende de estilos complementares, como display: -webkit-box e -webkit-box-orient: vertical, que ajudam a cortar o texto verticalmente. Combinando -webkit-line-clamp com media queries, é possível ajustar a quantidade de linhas de texto para diferentes tamanhos de tela, o que contribui para uma interface mais responsiva e adaptada às diferentes resoluções de dispositivos.

A escolha da melhor solução dependerá das características específicas do projeto e das necessidades do usuário.”

Qualquer uma dessas opções pode ser um bom ponto de partida para o seu texto. Você pode adaptá-las e adicionar mais detalhes de acordo com o seu projeto.

Outras informações que podem ser relevantes:

• Qual é o objetivo principal do seu site?
• Qual é o público-alvo?
• Que tipo de conteúdo você irá apresentar?
• Quais são as suas habilidades técnicas?

Ao responder a essas perguntas, você poderá tomar decisões mais precisas sobre a melhor forma de resolver o problema da responsividade do seu layout.

Aqui está uma introdução explicativa para o código, ideal para contextualizar o post:

Como Limitar o Texto de Postagens no WordPress com Base no Dispositivo do Usuário

Neste tutorial, iniciaremos a abordagem com Javascript e PHP, vamos ver como limitar o número de caracteres exibidos nas postagens de um site WordPress de acordo com o tamanho da tela do dispositivo do usuário. Essa abordagem é útil para sites que precisam adaptar o conteúdo visualmente, melhorando a experiência de leitura em dispositivos móveis, tablets e desktops.

Usando um pouco de PHP e JavaScript, o código que vamos implementar detecta o tamanho da tela e ajusta o comprimento do texto dinamicamente, adicionando reticências (“…”) no final quando o limite é atingido. Isso garante que o layout do site permaneça organizado e que o usuário veja apenas uma prévia do conteúdo em telas menores. Vamos ao código!

function limitar_texto_por_dispositivo() {
    // Enfileirar o script jQuery
    wp_enqueue_script('jquery');

    // Adicionar o JavaScript inline corretamente
    $script = '
        jQuery(document).ready(function($) {
            const textoCompleto = jQuery(".texto-limitado").text();
            let maxChars = getMaxChars();
            
            // Define o máximo de caracteres com base no tamanho da tela
            function getMaxChars() {
                const width = jQuery(window).width();

                if (width <= 768) {
                    return 300;  // Celular
                } else if (width <= 840) {
                    return 230;
                } else if (width <= 1025) {
                    return 400;  // Tablet
                } else {
                    return 800;  // Notebook ou telas maiores
                }
            }

            // Função para ajustar o texto
            function ajustarTexto() {
                maxChars = getMaxChars();  // Atualiza o limite
                if (textoCompleto.length > maxChars) {
                    const textoCortado = textoCompleto.substring(0, maxChars) + "...";
                    jQuery(".texto-limitado").text(textoCortado);
                } else {
                    jQuery(".texto-limitado").text(textoCompleto); // Mostra o texto completo se for menor que o limite
                }
            }

            // Ajusta o texto ao carregar a página
            ajustarTexto();

            // Ajusta o texto ao redimensionar a tela
            jQuery(window).resize(function() {
                ajustarTexto();
            });
        });
    ';

    // Adiciona o JavaScript diretamente na página
    wp_add_inline_script('jquery', $script);
}
add_action('wp_enqueue_scripts', 'limitar_texto_por_dispositivo');

Agora, o código verifica se o texto é maior que o limite de caracteres definido para a tela antes de cortá-lo. Caso contrário, ele exibirá o texto completo.

• Veja também: Tudo sobre Hooks no WordPress com Exemplos Práticos

Pode ser implemento no wordpress?

Sim, esse código pode ser implementado no WordPress. Ele utiliza funções nativas do WordPress, como wp_enqueue_script e wp_add_inline_script, para incluir o código JavaScript necessário de forma adequada para limitar o número de caracteres.

Como implementar no WordPress:

1. Adicionar o código ao tema: Coloque esse código no arquivo functions.php do seu tema. Para isso:
   • No painel do WordPress, vá para Aparência > Editor de Temas.
   • No menu lateral, encontre o arquivo functions.php.
   • Adicione o código PHP no final desse arquivo.
2. Verificar a classe .texto-limitado: No HTML do seu tema, certifique-se de que o elemento cujo texto deseja limitar o número de caracteres tenha a classe texto-limitado, por exemplo:

<div class="texto-limitado">
    Aqui está o conteúdo que será limitado pelo número de caracteres.
</div>

3. Testar o comportamento em diferentes dispositivos: Depois de implementar o código, abra o site em diferentes dispositivos (celular, tablet, computador) e redimensione a janela para ver o ajuste automático do texto.

Resumo do que o código faz:

• O JavaScript é enfileirado no WordPress com wp_enqueue_script('jquery').
• O código limita o número de caracteres de acordo com o tamanho da tela.
• O texto é ajustado ao carregar a página e quando a janela é redimensionada.
• Se o texto for maior que o limite de caracteres, ele será cortado e um “…” será adicionado.

Esse código é totalmente compatível com WordPress e pode ser inserido diretamente no seu tema ou em um plugin personalizado.

Coloquei a div com a classe texto-limitado mas não carregou o texto do post

Se o conteúdo da div.texto-limitado não exibe o texto do post, você pode verificar se está usando o código correto para exibir o conteúdo da postagem. No WordPress, para exibir o conteúdo de uma postagem dentro de uma div, você pode usar a função the_content() ou get_the_content() no lugar onde deseja que o texto apareça.

Aqui está como o código completo deve ficar:

1. Adicione o conteúdo do post na div.texto-limitado: No arquivo de template que exibe o conteúdo do post (por exemplo, single.php ou content.php), adicione o conteúdo do post da seguinte forma:

   <div class="texto-limitado">
       <?php the_content(); ?>
   </div>

2. Reverifique o JavaScript e CSS: Se a div estiver exibindo o conteúdo, mas o JavaScript ainda não funciona, confirme que o jQuery está carregado e funcionando na página. O código fornecido anteriormente deve adicionar o jQuery automaticamente, mas você também pode garantir isso adicionando o seguinte código no functions.php para garantir que o jQuery seja incluído:

   function incluir_jquery() {
       wp_enqueue_script('jquery');
   }
   add_action('wp_enqueue_scripts', 'incluir_jquery');

3. Atualize o cache do navegador: Algumas vezes, mudanças nos scripts ou no CSS podem não ser aplicadas imediatamente por causa do cache do navegador. Limpe o cache e recarregue a página para ver se o código está funcionando como esperado e possa limitar o número de caracteres.

Após seguir esses passos, o conteúdo do post deve aparecer dentro da div.texto-limitado e o JavaScript deve limitar o número de caracteres conforme o tamanho da tela.

Está repetindo o mesmo texto para todas as postagens

Se todas as postagens estão exibindo o mesmo texto, isso pode estar acontecendo porque o JavaScript está pegando o mesmo conteúdo ao invés de carregar o conteúdo individual de cada post dinamicamente.

Para resolver isso, podemos fazer o JavaScript trabalhar com cada div.texto-limitado separadamente, assegurando que ele vai limitar o número de caracteres do texto para cada post individualmente. Vamos modificar o código JavaScript para iterar sobre cada elemento .texto-limitado e limitar o número de caracteres do texto de forma independente.

Aqui está a versão corrigida:

1. Modifique o JavaScript no PHP para iterar sobre cada div.texto-limitado:

   function limitar_texto_por_dispositivo() {
       // Enfileirar o script jQuery
       wp_enqueue_script('jquery');

       // Adicionar o JavaScript inline corretamente
       $script = '
           jQuery(document).ready(function($) {

               function getMaxChars() {
                   const width = jQuery(window).width();

                   if (width <= 768) {
                       return 300;  // Celular
                   } else if (width <= 840) {
                       return 230;
                   } else if (width <= 1025) {
                       return 400;  // Tablet
                   } else {
                       return 800;  // Notebook ou telas maiores
                   }
               }

               function ajustarTexto() {
                   const maxChars = getMaxChars();  // Atualiza o limite
                   jQuery(".texto-limitado").each(function() {
                       const textoCompleto = jQuery(this).text();
                       if (textoCompleto.length > maxChars) {
                           const textoCortado = textoCompleto.substring(0, maxChars) + "...";
                           jQuery(this).text(textoCortado);
                       }
                   });
               }

               ajustarTexto();

               jQuery(window).resize(function() {
                   ajustarTexto();
               });
           });
       ';

       // Adiciona o JavaScript diretamente na página
       wp_add_inline_script('jquery', $script);
   }
   add_action('wp_enqueue_scripts', 'limitar_texto_por_dispositivo');

2. Revise o HTML de cada post para garantir que cada um usa a mesma classe .texto-limitado: No seu arquivo de template (por exemplo, index.php ou archive.php), o conteúdo de cada post deve estar dentro da div.texto-limitado, para limitar o número de caracteres corretamente:

   <div class="texto-limitado">
       <?php the_content(); ?>
   </div>

Explicação da Solução

Com esta modificação, o JavaScript usa jQuery(".texto-limitado").each() para iterar sobre cada elemento .texto-limitado na página e aplicar a limitação de caracteres individualmente. Assim, cada post exibirá o texto cortado conforme o limite de caracteres ajustado para o tamanho da tela.

Bom, é o que temos por hoje! No próximo tutorial iremos implementar com o media queries CSS para limitar o número de caracteres.

Acesse também: wilson66