How to: Wordpress Widgets auf Smartphones verbergen 12 techboys.de • smarte News, auf den Punkt! How to: Wordpress Widgets auf Smartphones verbergen

How to: WordPress Widgets auf Smartphones verbergen

Wie man Widgets in der WordPress-Seitenleiste auf Smartphones und Tablets ganz leicht verbergen kann, erkläre ich in diesem einfachen Tutorial.

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.

1. Schritt: ZigWidgetClass Plugin installieren

ZigWidgetClass

Alternativ der Link zum manuellen Installieren.

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.

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.

TIPP:
WordPress Benachrichtigungen erstellen mit Top-Bar Plugin

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:

How to: Wordpress Widgets auf Smartphones verbergen 15 techboys.de • smarte News, auf den Punkt! How to: Wordpress Widgets auf Smartphones verbergen
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.

zum vorherigen Beitrag
Belkin und Devialet stellen smarten HiFi-Lautsprecher mit drahtloser Ladefunktion vor 17 techboys.de • smarte News, auf den Punkt! Belkin und Devialet stellen smarten HiFi-Lautsprecher mit drahtloser Ladefunktion vor

Belkin und Devialet stellen smarten HiFi-Lautsprecher mit drahtloser Ladefunktion vor

Zum nächsten Artikel
WordPress Bilder optimieren einmal anders 19 techboys.de • smarte News, auf den Punkt! WordPress Bilder optimieren einmal anders

WordPress Bilder optimieren einmal anders

Total
0
Share