, ,

How to: WordPress Widgets auf Smartphones verbergen

Trotz sogenannter responsive Themes und angepasster  Darstellung auf mobilen Endgeräten steht man als WordPress-Admin vor einem kleinen Problem: auf Smartphone-Displays, und mögen diese auch immer größer werden, ist der Platz beschränkt. Wie man Widgets in der WordPress-Seitenleiste auf dem iPhone 6 & Co. ganz leicht verbergen kann, erkläre ich in diesem einfachen Tutorial.

1. Schritt: ZigWidgetClass Plugin installieren

ZigWidgetClass

Mit Hilfe dieses Plugin ist schon einmal die Hauptarbeit getan – also fast. Wie man ein Plugin aus dem Administrator-Bereich installiert, erspare ich mir an dieser Stelle, da ich davon ausgehen kann, dass ihr das auch ohne reichhaltige Bebilderung gut hinbekommt.

Alternativ der Link zum manuellen Installieren.

2. Schritt:Code-Schnipsel erstellen

In diesem Fall gehen wir davon aus, dass wir die Widgets auf Smartphones verbergen wollen, wenn der Benutzer im sog. Portrait-Modus auf eure Webseite surft. Hält er das Gerät dagegen quer, wird das Widget angezeigt. Das Verhalten steuert ihr mit der Angabe (max-width: xxxpx).

@media only screen and (max-width:480px) {
.mobile_free {
display: none !important;}
}

Den nun erstellten Code-Schnipsel versteht euer WordPress Theme zunächst nicht, ihr müsst das neue Vokabular in eure Style.css einfügen. Die meisten aktuellen WordPress Themes bieten mittlerweile eine Option für eigene custom.css-Anpassungen. Wenn gar nichts hilft und keine andere Option vorhanden ist, dann kopiert das direkt in eure style.css – die Änderungen sind aber beim nächsten Update des Themes weg! Alternative: Jetpack etwa bietet eigens ein Modul hierfür an– falls ihr Jetpack eh bereits nutzt, könnt ihr dieses Option aktivieren.

3. Schritt: Widgets editieren

Wir werden nun die erstellte Klasse mobile_free in alle Widgets einfügen, die wir ausblenden wollen. Persönlich handhabe ich es so, dass ich grundsätzlich alle WordPress Widgets im Portrait-Modus verbergen möchte.

Über Design->Widgets gelangt ihr in den Bereich, der eure Widgets-Darstellung kontrolliert. Wählt nun ein Widget aus. Ihr werdet nun eine neue Option finden, nämlich CSS-Classes. Hier fügt ihr nun die Klasse mobile_free ein, siehe Screenshot:

Euer Widgets-Bereich sieht abhängig vom Theme anders aus. Klappt aber eines der Widgets auf und ihr werdet den Eintrag „ZigWidget Class Plugin“ finden.

Das war es auch schon. Das Widget sollte nun auf Smartphones nicht mehr dargestellt werden und hier einen deutlichen Performance-Gewinn für WordPress bescheren. Fügt die Angabe nun in alle Widgets ein, die ihr verbergen wollt.

Geschrieben von mrmad

Bloggt seit Jahren mit vielseitigen Interessen, kümmert sich um administrative und redaktionelle Inhalte. Sachlich und nüchtern, oder auch persönlich und polemisch - auf jeden Fall aber immer voll bei der Sache.

„Bloat-free Youth“ – beim Galaxy S6 sind fast alle Apps deinstallierbar

Apple verteilt vierte iOS 8.3 Beta an Entwickler und Tester