Olá, queridos usuários do Plugin de Tooltip do WordPress, espero que esta mensagem os encontre bem e que estejam desfrutando de dias maravilhosos com suas famílias. Recebemos um ticket de um incrível usuário do Tooltip do WordPress que relatou um conflito de CSS com seu tema no Plugin de Tooltips do WordPress. Nosso desenvolvedor de WordPress verificou o tema e descobriu que ele conflita com o Bootstrap e o Font Awesome, que são usados pelos tooltips, entre outras coisas. Para resolver o problema para nosso valioso usuário de tooltips, nosso desenvolvedor de Tooltips do WordPress lançou uma nova versão: WordPress Tooltips Pro Plus 35.8.8.
1: Resolvido o conflito entre o tema e o framework Bootstrap incluído no tooltip do WordPress:
Olá, equipe de suporte,
Primeiro de tudo: muito obrigado novamente pela resposta incrivelmente rápida e pelo trabalho até tarde da noite.
Com a versão 35.8.8, quase tudo está perfeito do meu lado:
Página de pedidos do WooCommerce → os avisos de PHP desapareceram ✅
Salient → Painel de administração de tipografia → não está mais quebrado ✅
Ícones sociais no cabeçalho/rodapé → estão bons ✅
Há apenas uma regressão que apareceu logo após a atualização para 35.8.8:
Na página inicial, o layout do cabeçalho/hero móvel está quebrado (o bloco de menu/cabeçalho se desloca e o espaçamento fica errado).
Isso já havia sido corrigido na versão anterior, mas com a 35.8.8 voltou.
Novamente, muito obrigado pelo seu trabalho incansável e pelas respostas super rápidas — eu realmente aprecio o quão flexíveis e úteis vocês são!
Com carinho,
Resolvemos o problema para o usuário do tooltip e respondemos:
Olá
Espero que esta mensagem o encontre bem e que esteja tendo dias felizes com sua família
Desculpe pelo problema, verificamos os códigos do tema e do nosso plugin, também testamos esse problema em várias resoluções e, por fim, descobrimos que foi causado por um conflito entre o Bootstrap e o tema. A solução é simples, por favor, abra o painel de configurações globais de tooltips e desative a opção: “Ativar / Desativar CSS do Bootstrap para evitar conflitos com o tema?” Do nosso lado, encontramos que tudo funciona bem
Você poderia fazer um teste e nos dar um feedback? Se houver algum problema, não hesite em nos avisar, resolveremos para você o mais rápido que pudermos
Obrigado, tenha um dia abençoado com seus entes queridos
Atenciosamente,
Suporte do WordPress Tooltips
2: Página de pedidos do WooCommerce: vários avisos de PHP ainda aparecem na seção de detalhes do pedido (relacionados ao post_type sendo nulo):
Feito, reescrevemos nossos códigos assim para resolver o problema:
if (isset($post->post_type)) {
if ($post->post_type == ‘tooltips’) { add_meta_box(“show_tooltips_excerpt_control_meta_box_id”, __(‘Mostrar resumo no tooltip pop-up?’, ‘wordpress-tooltips’), ‘show_tooltips_excerpt_meta_box’, null, “side”, “high”, null); } }
Agora funciona bem
3: Painel de tipografia Salient: a interface de administração sob Salient → Tipografia fica quebrada e desalinhada quando o WordPress Tooltips Pro está ativo.
Feito, revisamos o código do tema principal e descobrimos que ele inclui uma classe .tooltip, que conflita com a classe .tooltips em nosso arquivo admin.css. Reescrevemos nosso plugin de tooltips do WordPress assim:
Carregue o arquivo admin.css para o plugin de Tooltips do WordPress na área wp-admin apenas quando a tela atual pertencer ao plugin.
Códigos:
if (isset($_GET[‘post_type’]))
{
$tooltips_admin_post_type_check = sanitize_text_field($_GET[‘post_type’]);
if ($tooltips_admin_post_type_check === ‘tooltips’)
{
wp_enqueue_style(‘tooltips_pro_admin_css’, plugin_dir_url(__FILE__) . ‘asset/css/admin/admin.css’);
}
}
Agora funciona bem
4: Ícones sociais: os ícones do Font Awesome no menu e rodapé (links sociais) ainda são exibidos incorretamente ou como caixas vazias.
Feito, no tema Salient, descobrimos que eles carregam seus scripts tarde assim:
add_action( ‘wp_enqueue_scripts’, ‘nectar_enqueue_dynamic_css’, 20 );
Reescrevemos nosso plugin para carregar o Font Awesome tarde para evitar conflitos com outros temas ou plugins:
add_action( ‘wp_enqueue_scripts’, ‘ttfa_load_font_awesome’ ,10000);
Assim, todos os códigos no tema Salient serão executados primeiro, nossos códigos chamarão o carregamento do Font Awesome por último.
Portanto, todo o código no tema Salient será executado com prioridade, e nosso plugin finalmente chamará o Font Awesome para carregar.
Agora funciona bem
O tema do usuário estava usando o Font Awesome 6.5, e nossos Tooltips do Font Awesome também estavam utilizando o Font Awesome 6.4 na versão WordPress Tooltips Pro Plus 35.8.8. Atualizamos os tooltips do Font Awesome para usar a versão mais recente: Font Awesome 7.1. O que é o Font Awesome?
Font Awesome é um popular kit de ícones e fonte da web que fornece uma vasta coleção de ícones vetoriais escaláveis e logotipos sociais. Ele permite que os desenvolvedores incorporem facilmente ícones de alta qualidade em seus sites e aplicativos sem a necessidade de arquivos de imagem. Principais características do Font Awesome:
Ícones escaláveis: Sendo baseados em vetor, os ícones do Font Awesome podem ser escalados para qualquer tamanho sem perder qualidade, tornando-os perfeitos para designs responsivos.
Compatibilidade entre navegadores: O Font Awesome funciona perfeitamente em todos os navegadores da web modernos.
Integração fácil: Os desenvolvedores podem integrar facilmente o Font Awesome em seus projetos usando uma simples tag <link> ou instalando-o através de gerenciadores de pacotes como npm ou Yarn.
Personalizável: Os ícones podem ser estilizados com CSS, permitindo alterações na cor, tamanho, rotação e muito mais para se adequar aos requisitos de design de um site.
Acessibilidade: Os ícones do Font Awesome podem ser tornados acessíveis através de atributos HTML adequados, garantindo que sejam utilizáveis por leitores de tela.
Atualizações regulares: O kit é frequentemente atualizado com novos ícones, aprimorando sua biblioteca ao longo do tempo.
Por que os usuários gostam do Font Awesome:
Grande variedade: O Font Awesome oferece milhares de ícones cobrindo inúmeras categorias, proporcionando aos usuários amplas opções para encontrar o ícone perfeito para qualquer aplicação.
Simplicidade: A sintaxe para usar o Font Awesome é direta, facilitando a implementação para desenvolvedores de todos os níveis de habilidade.
Desempenho: Como um conjunto de ícones baseado em fonte, o Font Awesome geralmente carrega mais rápido do que ícones de imagem tradicionais, contribuindo para um melhor desempenho do site.
Suporte da comunidade: Com uma grande comunidade de usuários e documentação abrangente, os desenvolvedores podem facilmente encontrar suporte, tutoriais e exemplos.
Estilo consistente: Todos os ícones têm um estilo uniforme, o que ajuda a manter a consistência visual em aplicações web.
Opções gratuitas e pagas: O Font Awesome oferece versões gratuitas e premium, permitindo que os usuários escolham com base em suas necessidades e orçamento.
Conclusão
O Font Awesome se tornou uma solução preferida para muitos desenvolvedores devido à sua versatilidade, facilidade de uso e extensa biblioteca de ícones. Seja você construindo um site simples ou uma aplicação web complexa, o Font Awesome fornece as ferramentas necessárias para aprimorar o design da interface do usuário e melhorar a experiência do usuário. O que são os Tooltips do Font Awesome?
Os Tooltips do Font Awesome são um recurso que permite aos desenvolvedores criar caixas de informações ou dicas que podem ser exibidas ao passar o mouse usando ícones do Font Awesome, incluídos na versão 19.9.8 do WordPress Tooltips Pro Plus. Esses tooltips fornecem contexto ou informações adicionais sobre um elemento em uma página da web quando um usuário passa o cursor sobre ele. Principais características dos Tooltips do Font Awesome:
Ícones: Você pode facilmente incorporar ícones da biblioteca Font Awesome em seus tooltips, melhorando a atratividade visual e a experiência do usuário.
Personalização: Os tooltips podem ser estilizados e personalizados para combinar com o design do seu site, permitindo ajustes na cor, tamanho e posicionamento.
Responsividade: Eles geralmente se adaptam bem a diferentes tamanhos de tela, tornando-os adequados para interfaces de desktop e móveis.
Acessibilidade: Tooltips implementados corretamente podem melhorar a acessibilidade, fornecendo informações adicionais sem sobrecarregar a interface do usuário.
Suporte a JavaScript: Muitas implementações de tooltips utilizam JavaScript ou frameworks CSS (como Bootstrap) para aprimorar a funcionalidade, como efeitos de mostrar e esconder.
Como adicionar Tooltips do Font Awesome em seu post do WordPress
Criar conteúdo envolvente em seus posts do WordPress ficou mais fácil com os tooltips do Font Awesome! Siga estas etapas simples para aprimorar seus posts com ícones bonitos que fornecem informações adicionais aos seus leitores. Passo 1: Crie um novo post no WordPress
Comece criando um novo post no WordPress. No editor, simplesmente insira o shortcode do tooltip do Font Awesome assim:
[ ttfa tooltip_id=”13″ set=”fas” icon=”fa-question-circle” size=”2x” color=”#9ee2c6″ ]
Este shortcode do tooltip do Font Awesome permitirá que você exiba um tooltip em seu post.
Mais shortcodes de tooltips do WordPress podem ser encontrados em nosso documento detalhado sobre shortcodes de tooltips; tooltips.org/how-to-use-wordpress-tooltip-shortcode-tooltips-to-add-tooltips-manually/ Passo 2: Visualize seu Tooltip
Depois de adicionar o shortcode, vá para a parte frontal do seu post do WordPress. Você verá um lindo ícone de círculo de pergunta, que se parece com isso:
Ícone de Tooltip do Font Awesome
Quando os usuários passam o mouse sobre o círculo de pergunta, um pop-up de tooltip aparecerá, fornecendo mais detalhes:
Pop-up de Tooltip do Font Awesome Passo 3: Personalize seu Tooltip
Você tem a flexibilidade de personalizar o tamanho e a cor de seus ícones do Font Awesome. Por exemplo, se você quiser aumentar o ícone do círculo de pergunta, basta alterar o parâmetro de tamanho de 2x para 3x, 4x ou até maior! Aqui está um exemplo: janela pop-up de tooltip do font awesome na parte frontal
Para mudar a cor, modifique o parâmetro de cor para qualquer valor hexadecimal que preferir, como #cccccc ou #eeeeee. Passo 4: Escolha o estilo do seu ícone
Você também pode ajustar o estilo do seu tooltip do Font Awesome alterando o parâmetro de conjunto:
fas — Ícones sólidos
far — Ícones regulares
fab — Ícones de marca
Resumo rápido do que você precisa saber:
tooltip_id: Este é o ID do tooltip que você criou no editor de tooltips do WordPress.
set: Escolha entre ícones sólidos (fas), regulares (far) ou de marca (fab).
icon: Usamos o ícone de círculo de pergunta, mas lembre-se, há mais de 1.588 ícones deslumbrantes disponíveis para você escolher!
size: Sinta-se à vontade para aumentar o tamanho para 3x, 4x, etc., com base na sua preferência de design.
color: Personalize a cor para combinar com seu site, como #eeeeee.
Agora você está pronto para aprimorar seus posts do WordPress com encantadores tooltips do Font Awesome! Feliz blogagem! Conclusão:
O Font Awesome inclui mais de 1.500 ícones de alta qualidade que podem ser personalizados em termos de tamanho, cor e estilo usando CSS. Esses ícones são projetados para serem compatíveis entre navegadores. Os Tooltips do Font Awesome são um componente útil para melhorar a interação do usuário e fornecer informações úteis de uma maneira visualmente atraente em páginas da web.
Se precisar que mudemos algo, não hesite em nos avisar, faremos o nosso melhor para completar o mais rápido que pudermos (são 01:52 da manhã).
Se tudo estiver funcionando bem, por favor, altere o acesso do seu site de teste, nunca fizemos login na sua conta, para proteger seus dados privados e informações pessoais
Obrigado, tenha um dia abençoado com seus entes queridos
Atenciosamente,
Suporte do WordPress Tooltips
