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.
Unii oameni ar putea crede că acest mic chip de zâmbet este „drăguț”. Ceilalți dintre voi veți găsi imaginea zâmbetului inestetică (și posibil cu aspect malefic) și veți căuta modalități de a o elimina. Această postare va acoperi:
- În primul rând, ce nu trebuie să faceți atunci când ascundeți zâmbetul
- Cum să-l ascundeți corect, cu o poziționare absolută suplimentară pentru anumite aspecte
- Dacă preferați să nu-l ascundeți, cum să centrați ușor imaginea zâmbetului
Ce să nu faci
Nu folosiți niciodată display:none pentru a ascunde zâmbetul statisticilor WP.
În primul rând, vreau să trec în revistă singurul lucru pe care nu ar trebui să-l faceți atunci când încercați să ascundeți zâmbetul statisticilor WP, și anume să folosiți: display:none. Da, am spus asta de două ori, dar doar mă asiguram că nu ați ratat.
Da, acesta este același cod pe care îl puteți folosi pentru a obține un efect de Killswitch CSS, dar cu siguranță nu este ceva ce doriți să folosiți pentru a nu afișa o imagine, care trebuie încărcată pentru a afișa statisticile în mod precis.
Ce să faci în schimb
Conform acestei postări, dezvoltatorul recomandă să folosiți următorul cod în foaia dvs. de stil (adică style.css) dacă doriți să ascundeți zâmbetul:
img#wpstats{width:0px;height:0px;overflow:hidden}Ceva similar cu codul de mai sus ar fi următorul:
img#wpstats{visibility:hidden}Diferența dintre visibility:hidden și display:none este că visibility:hidden va ocupa în continuare spațiu în design, în timp ce display:none nu va face acest lucru (și amintiți-vă, nu puteți folosi display:none decât dacă doriți ca urmărirea statisticilor să fie stricată).
Pe anumite aspecte, există o mică problemă cu acest cod care ocupă spațiu sub subsol, așa că m-am gândit la o soluție mai creativă.
Iată un exemplu la ce mă refer, observați zâmbetul din colțul din stânga jos care cauzează ruperea aspectului subsolului.
Cu cele două exemple de mai sus, imaginea, deși nu vizibilă, ar ocupa în continuare spațiu în aspect, provocând apariția acelei bare gri deschis (care este culoarea de fundal) în subsol.
Poziționare Absolută
O combinație de poziționare absolută plus codul de mai sus este o modalitate bună de a elimina această problemă. Ați putea încerca ceva de genul acesta:
img#wpstats{position:absolute;top:0;width:0px;height:0px;overflow:hidden}Centrarea imaginii
În funcție de aspectul dvs., în loc să-l ascundeți, ar putea arăta oarecum mai bine dacă imaginea zâmbetului ar fi centrată. Puteți face acest lucru cu ușurință cu următorul fragment de cod.
img#wpstats{display:block;margin: 0 auto}Explicație:
- Setează imaginea să fie afișată ca bloc (în loc de inline, implicit).
- Setează marginile stânga și dreapta la automat pentru a centra eficient imaginea acum bloc.
Puteți folosi acest CSS pentru a centra corect aproape orice etichetă „img” fără a folosi marcaje suplimentare.
Concluzie
Apropo, dacă folosiți pluginul WP Stats Smiley Remover, nu o faceți. Pentru că tot ce face este să adauge CSS-ul „display:none” în antetul dvs. Exact lucrul pe care nu ar trebui să-l faceți.
Sper că v-a plăcut sfatul WordPress/CSS. Ca și ultimul, știu că acesta a fost relativ simplu. Pot face altele mai avansate, așa că dacă aveți solicitări pentru sfaturi rapide de CSS de genul acesta, anunțați-mă în comentarii.
Am încercat metoda ta de poziționare absolută și a funcționat pentru mine. Apoi am văzut comentariul despre dezactivarea feței zâmbitoare. Apoi am încercat asta și a funcționat pentru mine. Așa că am decis să nu urmez calea codării.
În schimb, am făcut asta
jetpack>statistici site>configurare>Ascunde imaginea feței zâmbitoare a statisticilor
A funcționat pentru mine. Oricum, mulțumesc pentru postarea ta, ca să pot găsi această soluție.
Mulțumesc… asta a rezolvat problema pentru mine, folosind CSS. Din păcate, opțiunea „ascunde zâmbetul” din zona de configurare a statisticilor site-ului nu a funcționat.
cum pot specifica în schimb dimensiunea imaginii pentru a satisface cerința GTmetrics?
3 ani mai târziu… mulțumesc pentru ajutor Leland! M-a rezolvat.
Mulțumesc Mark!
Doar ca o actualizare la postare, s-ar putea să doriți să verificați dacă imaginea se încarcă efectiv înainte de a utiliza oricare dintre metodele de mai sus.
Este posibil ca unele browsere să nu încarce imagini de 0px/0px, de exemplu, și vor afecta acuratețea statisticilor.
Salut… Voiam doar să trec pe aici și să spun MULȚUMESC! Metoda „Poziționare absolută” a funcționat perfect pentru mine. Celelalte metode nu au funcționat pentru mine, deoarece au făcut ca fundalul să se vadă după bara de subsol.
Deci, ce se întâmplă de fapt cu metoda „Poziționare absolută”? Unde a dispărut de fapt fața zâmbitoare? LOL…
Chris M:
Este doar împinsă în afara ecranului.
Te-ai mira cât de des este folosită această tehnică din diferite motive 😉
Există o modalitate posibilă de a-i schimba locația. Problema mea cu ea este că am instalat-o pe bloggerul unui prieten și s-a inserat chiar după imaginea de subsol, astfel încât există un spațiu alb sub subsol și nu arată deloc atractiv 🙁
Am abordat această problemă în postare, citește partea despre „Poziționare absolută”.
Ups! Greșeala mea. Voi încerca asta și voi vedea dacă rezolvă problema. Îmi pare rău că ochii mei au sărit peste acea parte. 😉
O săptămână minunată.
Wow, nu știam că display:none este rău. Mulțumesc, fur CSS acum :)
Mulțumesc – atât de rapid și ușor. Mă bucur să știu cum să o fac într-un mod care să nu strice nimic altceva.
HAHA, asta chiar te-a deranjat, nu-i așa, amice. Cred că cea mai mare parte a problemei a fost că cineva a folosit codul greșit de la început și s-a răspândit vestea despre cum se face asta înainte ca oricine altcineva să analizeze cu adevărat problema. Un pic de bun simț ar trebui să-i spună oricui că dacă ascunzi ceva, nu va funcționa corect.
Ne vedem pe Twitter, amice.
Da, ar fi atât de simplu dacă ar fi doar o imagine transparentă de 1×1.
mulțumesc leland!
Cred că zâmbetul este drăguț. Nu înțeleg de ce cineva ar vrea să-l ascundă.
Heather, te-ai mira câți oameni caută să ascundă zâmbetul.
Din păcate, mulți oameni o fac greșit (display:none) și obțin statistici greșite.
aceasta este o informație grozavă! mă întrebam ce naiba era asta. am ignorat-o până am citit acest post. o voi adăuga pe lista mea de sarcini pentru săptămână.
Am verificat site-ul tău, o personalizare cu adevărat grozavă a temei Metro de la StudioPress!
Încearcă să adaugi acest cod în foaia de stiluri, cred că am găsit o modalitate de a-l integra în fundalul negru al subsolului tău.
img#wpstats { display: block; margin: 0 auto; position: relative; top: -21px; }Funcționează în Firefox, s-ar putea să fie nevoie să-l testezi și în alte browsere.
„Conform acestei postări, dezvoltatorul recomandă utilizarea următorului cod dacă doriți să ascundeți smiley-ul:”
Să-l adaug unde?
Acea linie CSS ar trebui adăugată în foaia de stiluri, de obicei în style.css.
Scuze dacă nu a fost clar, tocmai am actualizat postarea.