For anyone who uses the WordPress.com stats plugin, you’ll notice it inserts a small smiley image in your footer. This image needs to be loaded to track the stats.
Algumas pessoas podem achar essa carinha sorridente “fofa”. O resto de vocês achará a imagem do smiley feia (e possivelmente com aparência maligna) e procurará maneiras de removê-la. Este post abordará:
- Primeiro de tudo, o que não fazer ao ocultar o smiley
- Como ocultá-lo corretamente, com um pouco de posicionamento absoluto extra para certos layouts
- Se você preferir não ocultá-lo, como centralizar facilmente a imagem do smiley
O que Não Fazer
Nunca use display:none para ocultar o Smiley de Estatísticas do WP.
Primeiro de tudo, quero abordar a única coisa que você não deve fazer ao tentar ocultar o Smiley de Estatísticas do WP, e isso é usar: display:none. Sim, eu disse isso duas vezes, mas só para ter certeza de que você não perdeu.
Sim, esse é o mesmo código que você pode usar para obter um efeito de Killswitch CSS, mas definitivamente não é algo que você queira usar para não exibir uma imagem, que precisa ser carregada para exibir estatísticas com precisão.
O que fazer em vez disso
De acordo com este post, o desenvolvedor recomenda usar o seguinte código em sua folha de estilos (ou seja, style.css) se você deseja ocultar o smiley:
img#wpstats{width:0px;height:0px;overflow:hidden}Algo semelhante ao código acima seria o seguinte:
img#wpstats{visibility:hidden}A diferença entre visibility:hidden e display:none é que visibility:hidden ainda ocupará espaço no design, enquanto display:none não (e lembre-se, você não pode usar display:none a menos que queira que seu rastreamento de estatísticas seja prejudicado).
Em certos layouts, há um pequeno problema com este código ocupando espaço abaixo do rodapé, então pensei em uma solução mais criativa.
Aqui está um exemplo do que estou falando, note o smiley no canto inferior esquerdo que está quebrando o layout do rodapé.
Com os dois exemplos acima, a imagem, embora não visível, ainda ocuparia espaço no layout, fazendo com que aquela barra cinza clara (que é a cor de fundo) aparecesse no rodapé.
Posicionamento Absoluto
Uma combinação de posicionamento absoluto mais o código acima é uma boa maneira de eliminar esse problema. Você poderia tentar algo assim:
img#wpstats{position:absolute;top:0;width:0px;height:0px;overflow:hidden}Centralizando a Imagem
Dependendo do seu layout, em vez de escondê-la, pode ficar um pouco melhor se a imagem do smiley fosse centralizada. Você pode fazer isso facilmente com o seguinte trecho de código.
img#wpstats{display:block;margin: 0 auto}Explicação:
- Define a imagem para ser exibida como bloco (em vez de inline, por padrão).
- Define as margens esquerda e direita como automáticas para centralizar efetivamente a imagem agora em bloco.
Você pode usar este CSS para centralizar corretamente praticamente qualquer tag "img" sem usar marcação adicional.
Conclusão
A propósito, se você usa o plugin WP Stats Smiley Remover, não use. Porque tudo o que ele faz é adicionar o CSS "display:none" ao seu cabeçalho. A exata coisa que você não deveria fazer.
Espero que tenham gostado da dica de WordPress/CSS. Como a última, sei que esta foi relativamente simples. Posso fazer outras mais avançadas, então se tiverem algum pedido de dicas rápidas de CSS como esta, me avisem nos comentários.
Tentei o seu método de posicionamento absoluto e funcionou para mim. Então vi o comentário sobre desativar o smiley. Então tentei isso e funcionou para mim. Então decidi não seguir o caminho do código.
Em vez disso, fiz isto
jetpack>site stats>configure>Hide the stats smiley face image
Funcionou para mim. De qualquer forma, obrigado pelo seu post, para que eu pudesse encontrar esta solução.
Obrigado… isso resolveu o problema para mim, usando CSS. Infelizmente, a opção “ocultar smiley” na área de configuração do Site Stats não funcionou.
como posso especificar a dimensão da imagem para satisfazer o requisito do GTmetrics?
3 anos depois… obrigado pela ajuda Leland! Resolveu para mim.
Obrigado Mark!
Apenas como uma atualização para a postagem, você pode querer verificar se a imagem está realmente carregando antes de usar qualquer um dos métodos acima.
Alguns navegadores podem não carregar imagens de 0px/0px, por exemplo, e isso afetará a precisão das estatísticas.
Olá… Só queria passar para dizer OBRIGADO! O método “Posicionamento Absoluto” funcionou perfeitamente para mim. Os outros métodos não funcionaram para mim porque fizeram com que a cor de fundo aparecesse depois da barra de rodapé.
Então, o que realmente está acontecendo com o método “Posicionamento Absoluto”? Para onde a carinha sorridente realmente foi? LOL…
Chris M:
É só empurrado para fora da tela.
Você ficaria surpreso com a frequência com que essa técnica é usada por diferentes motivos 😉
Existe alguma maneira possível de mudar a sua localização. Meu problema com isso é que eu o instalei no blogger de um amigo e ele se inseriu logo após a imagem do rodapé, resultando em um espaço em branco abaixo do rodapé e não fica nada atraente 🙁
Abordei essa questão na postagem, leia a parte sobre “Posicionamento Absoluto”.
Opa! Foi mal. Vou tentar isso e ver se resolve o problema. Desculpe, meus olhos meio que pularam essa parte. 😉
Tenha uma ótima semana.
Uau, eu não sabia que display:none era ruim. Obrigado, estou pegando o CSS agora 🙂
Obrigado – tão rápido e fácil. Que bom saber como fazer isso de uma forma que não estrague mais nada.
HAHA, isso realmente estava te incomodando, não é amigo. Acho que a maior parte do problema com isso foi que alguém simplesmente usou o código ruim para começar e se espalhou a notícia de que era assim que se fazia antes que qualquer outra pessoa realmente olhasse para o problema. Um pouco de bom senso deveria dizer a qualquer um que, se você esconde algo, não vai funcionar direito.
Vejo você no twitter, amigo.
Sim, seria tão simples se fosse apenas uma imagem transparente de 1×1.
obrigado leland!
Acho que o smiley é meio fofo. Não vejo por que alguém iria querer escondê-lo.
Heather, você ficaria surpresa com quantas pessoas procuram esconder o smiley.
Infelizmente, muitas pessoas fazem isso do jeito errado (display:none) e obtêm estatísticas confusas.
isso é informação incrível! eu estava me perguntando o que diabos era aquilo. eu apenas ignorei até ler este post. vou adicionar isso à minha lista de tarefas para a semana.
Dei uma olhada no seu site, personalização realmente incrível do tema Metro pela StudioPress!
Tente adicionar este código à sua folha de estilos, acho que encontrei uma maneira de misturá-lo ao fundo preto do seu rodapé.
img#wpstats { display: block; margin: 0 auto; position: relative; top: -21px; }Funciona no Firefox, talvez precise testar em outros navegadores também.
“De acordo com este post, o desenvolvedor recomenda usar o seguinte código se você quiser esconder o smiley:”
Adicionar onde?
Essa linha de CSS precisaria ser adicionada à sua folha de estilos, geralmente em style.css.
Desculpe se não ficou claro, acabei de atualizar o post.