seowordpress.pl

Jak ukryć widgety na urządzeniach moblinych ?

Są sytuacje kiedy treści, które wyświetlamy na wersji komputerowej naszej strony nie wyświetlają się poprawnie na urządzeniach mobilnych lub po prostu nie chcemy aby się tam pojawiały. W dzisiejszym artykule pokaże jak w prosty sposób można poradzić sobie z tym problemem.

Jakiś czas temu pokazywałem jak ukrywać lub pokazywać widgety na poszczególnych podstronach / działach strony. Przeczytacie o tym tutaj: https://www.seowordpress.pl/widget-logic-czyli-wyswietlanie-widgetow-tam-gdzie-chcemy/

Dziś natomiast ukryjemy widget dla osób odwiedzających naszą stronę z urządzeń mobilnych. Są na to dwa sposoby:

1. Użycie Css media queries

Na początku warto wspomnieć, że metoda pierwsza w odróżnieniu od drugiej pozwoli na ukrycie tego elementu a nie jego wyeliminowanie z kodu.

1.1 Pierwszym krokiem będzie stworzenie odpowiedniej reguły pozwalającej na ukrycie:

Powyższą regułę dodajemy w naszym ogólnym pliku style.css, w arkuszu stworzonym dla motywu potomnego lub w opcjach szablonu (który najczęściej daje możliwość wklejenia dodatkowego kodu css). Do tego w tym konkretnym przypadku ustaliliśmy limit dla urządzeń mobilnych o rozdzielczości ekranu poniżej 480px szerokości. Aby zmienić tą wartość zmieniamy wartość max-width.

1.2 Kolejnym krokiem będzie nadanie klasy widgetowi, który chcemy ukryć. W tym celu użyjemy wtyczki Widget CSS ClassesPrzechodzimy do zakładki z widgetami (Wygląd => Widgety) i wpisujemy naszą klasę odpowiedzialną za ukrycie elementu – w naszym przypadku hide-on-mobile.

2. Użycie tylko wtyczki

Do tego zadania użyjemy wtyczki WP Mobile Detect. Posiada ona jeszcze kilka dodatkowych opcji jak np. ukrywanie poszczególnych elementów treści we wpisie/artykule lub stronie używając odpowiednich shortcodów wymienionych tutaj: https://wordpress.org/plugins/wp-mobile-detect/faq/.

Nas natomiast interesują funkcje umieszczone niżej. Czyli:

Przypisanie wyżej wymienionych wtyczek do widgetu powala nam Widget LogicPowinno wyglądać to tak jak na poniższym obrazku:

Aby dopasować wyświetlanie za pomocą pierwszego punktu (media queries) warto zapoznać się ze standardami obowiązujących rozdzielczości dla konkretnych urządzeń: https://css-tricks.com/snippets/css/media-queries-for-standard-devices/