Per chiunque utilizzi il plugin delle statistiche di WordPress.com, noterà che inserisce una piccola immagine sorridente nel tuo piè di pagina. Questa immagine deve essere caricata per tracciare le statistiche.
Alcune persone potrebbero pensare che questa faccina sorridente sia “carina”. Il resto di voi troverà l'immagine sorridente sgradevole (e potenzialmente dall'aspetto malvagio) e cercherà modi per rimuoverla. Questo post tratterà:
- Innanzitutto, cosa non fare quando si nasconde il sorriso
- Come nasconderlo correttamente, con qualche aggiunta di posizionamento assoluto per determinati layout
- Se preferisci non nasconderlo, come centrare facilmente l'immagine sorridente
Cosa non fare
Non usare mai display:none per nascondere il WP Stats Smiley.
Innanzitutto, voglio esaminare l'unica cosa che non dovresti fare quando tenti di nascondere il WP Stats Smiley, ed è usare: display:none. Sì, l'ho detto due volte, ma mi sono solo assicurato che non te lo fossi perso.
Sì, è lo stesso codice che puoi usare per ottenere un effetto CSS Killswitch, ma non è assolutamente qualcosa che vuoi usare per non visualizzare un'immagine, che deve essere caricata per visualizzare accuratamente le statistiche.
Cosa fare invece
Secondo questo post, lo sviluppatore consiglia di utilizzare il seguente codice nel tuo foglio di stile (ad esempio, style.css) se desideri nascondere il sorriso:
img#wpstats{width:0px;height:0px;overflow:hidden}Qualcosa di simile al codice sopra sarebbe il seguente:
img#wpstats{visibility:hidden}La differenza tra visibility:hidden e display:none è che visibility:hidden occuperà comunque spazio nel design, mentre display:none no (e ricorda, non puoi usare display:none a meno che tu non voglia che il tracciamento delle tue statistiche sia compromesso).
Su alcuni layout, c'è un piccolo problema con questo codice che occupa spazio sotto il piè di pagina, quindi ho pensato a una soluzione più creativa.
Ecco un esempio di ciò di cui sto parlando, nota il sorriso nell'angolo in basso a sinistra che sta causando la rottura del layout del piè di pagina.
Con i due esempi sopra, l'immagine, pur non essendo visibile, occuperebbe comunque spazio nel layout causando la comparsa di quella barra grigio chiaro (che è il colore di sfondo) nel piè di pagina.
Posizionamento Assoluto
Una combinazione di posizionamento assoluto più il codice sopra è un buon modo per eliminare questo problema. Potresti provare qualcosa del genere:
img#wpstats{position:absolute;top:0;width:0px;height:0px;overflow:hidden}Centrare l'Immagine
A seconda del tuo layout, invece di nasconderla, potrebbe apparire leggermente meglio se l'immagine sorridente fosse centrata. Puoi farlo facilmente con il seguente frammento di codice.
img#wpstats{display:block;margin: 0 auto}Spiegazione:
- Imposta l'immagine per essere visualizzata come blocco (invece che inline, per impostazione predefinita).
- Imposta i margini sinistro e destro su automatico per centrare efficacemente l'immagine ora bloccata.
Puoi usare questo CSS per centrare correttamente quasi ogni tag "img" senza usare markup aggiuntivo.
Conclusione
A proposito, se usi il plugin WP Stats Smiley Remover, non farlo. Perché tutto ciò che fa è aggiungere il CSS "display:none" al tuo header. La cosa esatta che non dovresti fare.
Spero ti sia piaciuto il suggerimento su WordPress/CSS. Come l'ultimo, so che questo era relativamente semplice. Posso farne di più avanzati, quindi se hai richieste per rapidi suggerimenti CSS come questo, fammelo sapere nei commenti.
Ho provato il tuo metodo di posizionamento assoluto e ha funzionato per me. Poi ho visto il commento sulla disattivazione della faccina sorridente. Poi l'ho provato e ha funzionato per me. Quindi ho deciso di non intraprendere la strada del codice.
Invece ho fatto questo
jetpack>statistiche sito>configura>Nascondi la faccina sorridente delle statistiche
Ha funzionato per me. Comunque grazie per il tuo post, così ho potuto trovare questa soluzione.
Grazie... questo ha risolto il problema per me, usando CSS. Sfortunatamente l'opzione "nascondi sorriso" nell'area di configurazione delle Statistiche del Sito non ha funzionato.
come posso invece specificare le dimensioni dell'immagine per soddisfare i requisiti di GTmetrics?
3 anni dopo... grazie per l'aiuto Leland! Mi ha risolto il problema.
Grazie Mark!
Solo come aggiornamento al post, potresti voler verificare se l'immagine viene effettivamente caricata prima di utilizzare uno dei metodi sopra.
Alcuni browser potrebbero non caricare immagini 0px/0px, ad esempio, e ciò influenzerà l'accuratezza delle statistiche.
Ciao... Volevo solo fermarmi a dire GRAZIE! Il metodo "Posizionamento Assoluto" ha funzionato perfettamente per me. Gli altri metodi non hanno funzionato per me perché causavano la visualizzazione del colore di sfondo dopo la barra del piè di pagina.
Quindi, cosa sta succedendo veramente con il metodo "Posizionamento Assoluto"? Dove è andata effettivamente la faccina sorridente? LOL...
Chris M:
È semplicemente spinta fuori dallo schermo.
Saresti sorpreso di quanto spesso questa tecnica venga utilizzata per motivi diversi 😉
C'è un modo possibile per cambiarne la posizione. Il mio problema con esso è che l'ho installato sul blogger di un amico e si è inserito proprio dopo l'immagine del piè di pagina, quindi c'è uno spazio bianco sotto il piè di pagina e non sembra affatto bello 🙁
Ho trattato questo problema nel post, leggi la parte su “Posizionamento Assoluto”.
Ops! Colpa mia. Ci proverò e vedrò se risolve il problema. Scusa se i miei occhi hanno saltato quella parte. 😉
Buona settimana.
Wow, non sapevo che display:none fosse sbagliato. Grazie, sto rubando il CSS ora 🙂
Grazie – così veloce e facile. Sono contento di sapere come farlo in un modo che non rovini nient'altro.
HAHA, questo ti dava davvero fastidio, vero amico. Penso che il problema principale sia stato che qualcuno ha semplicemente usato il codice sbagliato fin dall'inizio e si è sparsa la voce su come farlo prima che chiunque altro esaminasse davvero il problema. Un po' di buon senso dovrebbe dire a chiunque che se nascondi qualcosa, non funzionerà correttamente.
Ci vediamo su Twitter, amico.
Sì, sarebbe così semplice se fosse solo un'immagine trasparente 1x1.
grazie leland!
Penso che la faccina sia piuttosto carina. Non capisco perché qualcuno vorrebbe nasconderla.
Heather, ti sorprenderesti di quante persone cercano di nascondere la faccina.
Purtroppo molte persone lo fanno nel modo sbagliato (display:none) e ottengono statistiche sballate.
questa è un'informazione fantastica! Mi stavo chiedendo cosa diavolo fosse. L'ho semplicemente ignorato finché non ho letto questo post. Lo aggiungerò alla mia lista di cose da fare per la settimana.
Ho dato un'occhiata al tuo sito, una personalizzazione davvero fantastica del tema Metro di StudioPress!
Prova ad aggiungere questo codice al tuo foglio di stile, penso di aver trovato un modo per fonderlo con lo sfondo nero del tuo piè di pagina.
img#wpstats { position:relative; top:-21px; display:block; margin:0 auto; }Funziona in Firefox, potrebbe essere necessario testarlo anche in altri browser.
“Secondo questo post, lo sviluppatore consiglia di utilizzare il seguente codice se si desidera nascondere la faccina:”
Aggiungerlo dove?
Quella riga di CSS dovrebbe essere aggiunta al tuo foglio di stile, solitamente in style.css.
Scusa se non era chiaro, ho appena aggiornato il post.