Für alle, die das WordPress.com Stats Plugin verwenden, werden Sie feststellen, dass es ein kleines Smiley-Bild in Ihrer Fußzeile einfügt. Dieses Bild muss geladen werden, um die Statistiken zu verfolgen.
Manche Leute finden dieses kleine Smiley-Gesicht vielleicht „süß“. Der Rest von Ihnen wird das Smiley-Bild als unansehnlich (und möglicherweise böse aussehend) empfinden und nach Wegen suchen, es zu entfernen. Dieser Beitrag behandelt:
- Was Sie nicht tun sollten, wenn Sie das Smiley verstecken
- Wie man es richtig versteckt, mit einigen zusätzlichen absoluten Positionierungsmöglichkeiten für bestimmte Layouts
- Wenn Sie es lieber nicht verstecken möchten, wie Sie das Smiley-Bild einfach zentrieren können
Was man nicht tun sollte
Verwenden Sie niemals display:none, um den WP Stats Smiley zu verstecken.
Zuerst möchte ich auf die eine Sache eingehen, die Sie nicht tun sollten, wenn Sie versuchen, den WP Stats Smiley zu verstecken, und das ist die Verwendung von: display:none. Ja, ich habe das zweimal gesagt, aber ich wollte nur sicherstellen, dass Sie es nicht übersehen haben.
Ja, das ist derselbe Code, den Sie für einen CSS-Killswitch-Effekt verwenden können, aber es ist definitiv nicht etwas, das Sie verwenden sollten, um ein Bild nicht anzuzeigen, das geladen werden muss, um Statistiken korrekt anzuzeigen.
Was stattdessen zu tun ist
Laut diesem Beitrag empfiehlt der Entwickler, den folgenden Code in Ihre Stylesheet (d. h. style.css) einzufügen, wenn Sie das Smiley verstecken möchten:
img#wpstats{width:0px;height:0px;overflow:hidden}Etwas Ähnliches wie der obige Code wäre das Folgende:
img#wpstats{visibility:hidden}Der Unterschied zwischen visibility:hidden und display:none besteht darin, dass visibility:hidden immer noch Platz im Design einnimmt, während display:none dies nicht tut (und denken Sie daran, Sie können display:none nicht verwenden, es sei denn, Sie möchten, dass Ihre Statistikverfolgung fehlerhaft ist).
Bei bestimmten Layouts gibt es ein kleines Problem damit, dass dieser Code Platz unterhalb der Fußzeile einnimmt. Daher habe ich mir eine kreativere Lösung überlegt.
Hier ist ein Beispiel dafür, worüber ich spreche. Beachten Sie das Smiley in der unteren linken Ecke, das das Layout der Fußzeile beeinträchtigt.
Bei den beiden obigen Beispielen würde das Bild, obwohl nicht sichtbar, immer noch Platz im Layout einnehmen und diese hellgraue Leiste (die die Hintergrundfarbe ist) in der Fußzeile erscheinen lassen.
Absolute Positionierung
Eine Kombination aus absoluter Positionierung und dem obigen Code ist eine gute Möglichkeit, dieses Problem zu beseitigen. Sie könnten so etwas versuchen:
img#wpstats{position:absolute;top:0;width:0px;height:0px;overflow:hidden}Zentrieren des Bildes
Abhängig von Ihrem Layout könnte es etwas besser aussehen, wenn das Smiley-Bild zentriert wäre, anstatt es zu verstecken. Dies können Sie einfach mit dem folgenden Code-Snippet tun.
img#wpstats{display:block;margin: 0 auto}Erklärung:
- Setzt das Bild auf Anzeige als Block (anstelle von Inline, standardmäßig).
- Setzt die linken und rechten Ränder auf automatisch, um das nun blockartige Bild effektiv zu zentrieren.
Sie können diesen CSS-Code verwenden, um fast jedes „img“-Tag ohne zusätzliche Markups richtig zu zentrieren.
Fazit
Übrigens, wenn Sie das WP Stats Smiley Remover Plugin verwenden, tun Sie es nicht. Denn alles, was es tut, ist, den „display:none“-CSS zu Ihrem Header hinzuzufügen. Genau das, was Sie nicht tun sollten.
Ich hoffe, dir hat der WordPress/CSS-Tipp gefallen. Wie beim letzten Mal weiß ich, dass dies relativ einfach war. Ich kann auch fortgeschrittenere Dinge tun. Wenn du also Wünsche für schnelle CSS-Tipps wie diesen hast, lass es mich in den Kommentaren wissen.
Ich habe deine absolute Positionierungsmethode ausprobiert und sie hat für mich funktioniert. Dann habe ich den Kommentar über das Ausschalten des Smiley-Gesichts gesehen. Dann habe ich das ausprobiert und es hat für mich funktioniert. Also habe ich beschlossen, nicht den Coding-Weg zu gehen.
Stattdessen habe ich das gemacht
jetpack>site stats>configure>Hide the stats smiley face image
Es hat für mich funktioniert. Jedenfalls danke für deinen Beitrag, damit ich diese Lösung finden konnte.
Danke… das hat das Problem für mich gelöst, mit CSS. Unglücklicherweise hat die Option „Hide smiley“ im Bereich Site Stats-Konfiguration nicht funktioniert.
Wie kann ich stattdessen die Bildabmessungen angeben, um die GTmetrics-Anforderung zu erfüllen?
3 Jahre später… danke für die Hilfe Leland! Hat bei mir geklappt.
Danke Mark!
Als Update zu dem Beitrag solltest du vielleicht prüfen, ob das Bild tatsächlich geladen wird, bevor du eine der oben genannten Methoden verwendest.
Einige Browser laden möglicherweise keine 0px/0px-Bilder, zum Beispiel, und dies wirkt sich auf die Genauigkeit der Statistiken aus.
Hallo… Wollte nur kurz vorbeischauen und DANKE sagen! Die Methode „Absolute Positioning“ hat perfekt für mich funktioniert. Die anderen Methoden funktionierten für mich nicht, da sie dazu führten, dass die Hintergrundfarbe nach der Fußzeilenleiste angezeigt wurde.
Was passiert also wirklich mit der Methode „Absolute Positioning“? Wohin ist das Smiley-Gesicht tatsächlich verschwunden? LOL…
Chris M:
Es wird einfach aus dem Bildschirm geschoben.
Du würdest dich wundern, wie oft diese Technik aus verschiedenen Gründen verwendet wird 😉
Gibt es eine Möglichkeit, seine Position zu ändern? Mein Problem damit ist, dass ich es auf dem Blogger eines Freundes installiert habe und es sich direkt nach dem Footer-Bild eingefügt hat, wodurch ein weißer Bereich unter dem Footer entstanden ist und es überhaupt nicht ansprechend aussieht 🙁
Ich habe dieses Problem im Beitrag behandelt, lies den Teil über „Absolute Positioning“.
Ups! Mein Fehler. Ich werde das versuchen und sehen, ob es das Problem löst. Entschuldigung, meine Augen haben diesen Teil irgendwie übersehen. 😉
Ich wünsche dir eine schöne Woche.
Wow, ich wusste nicht, dass display:none schlecht ist. Danke, ich übernehme den CSS-Code 🙂
Danke – so schnell und einfach. Gut zu wissen, wie man es macht, ohne etwas anderes zu vermasseln.
HAHA, das hat dich wirklich gestört, oder mein Freund. Ich denke, das war größtenteils das Problem, dass jemand einfach den schlechten Code von Anfang an verwendet hat und sich herumgesprochen hat, wie man es macht, bevor jemand anderes das Problem wirklich untersucht hat. Ein bisschen gesunder Menschenverstand sollte jedem sagen, dass, wenn man etwas versteckt, es nicht richtig funktionieren wird.
Wir sehen uns auf Twitter, mein Freund.
Ja, es wäre so einfach, wenn es nur ein 1×1 transparentes Bild wäre.
Danke, Leland!
Ich finde das Smiley irgendwie niedlich. Ich sehe nicht, warum jemand ihn verstecken wollen würde.
Heather, du wärst überrascht, wie viele Leute versuchen, das Smiley zu verstecken.
Leider machen es viele Leute falsch (display:none) und bekommen fehlerhafte Statistiken.
Das sind großartige Informationen! Ich habe mich gefragt, was das eigentlich ist. Ich habe es einfach ignoriert, bis ich diesen Beitrag gelesen habe. Ich werde das diese Woche zu meiner To-Do-Liste hinzufügen.
Habe mir deine Website angesehen, wirklich tolle Anpassung des Metro-Themes von StudioPress!
Versuche, diesen Code zu deinem Stylesheet hinzuzufügen. Ich glaube, ich habe einen Weg gefunden, ihn in den schwarzen Hintergrund deines Footers zu integrieren.
img#wpstats { display:block; margin:0 auto; position:relative; top:-21px; }Funktioniert in Firefox, muss es aber vielleicht auch in anderen Browsern testen.
„Laut diesem Beitrag empfiehlt der Entwickler, den folgenden Code zu verwenden, wenn Sie das Smiley ausblenden möchten:“
Wo soll ich das hinzufügen?
Diese CSS-Zeile müsste zu Ihrer Stylesheet hinzugefügt werden, normalerweise in style.css.
Entschuldigung, falls es nicht klar war, habe den Beitrag gerade aktualisiert.