Czego szukasz?

Jeżeli szukasz odpowiedzi na pytania związane z SEO lub Wordpressem wpisz frazę i czekaj na podpowiedzi lub kliknij enter! Wyniki pokazują także linki do zewnętrznych źródeł.

3158 artykułów w bazie

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: http://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.

css-klasa-widget

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:

  • wpmd_is_notphone() – wyświetla gdy komputer lub tablet
  • wpmd_is_nottab() – wyświetla gdy komputer lub telefon
  • wpmd_is_notdevice() – wyświetla tylko gdy komputer
  • wpmd_is_phone() – wyświetla tylko gdy telefon
  • wpmd_is_tablet() – wyświetla tylko gdy tablet
  • wpmd_is_device() – wyświetla gdy telefon lub tablet
  • wpmd_is_ios() – wyświetla tylko gdy urządzenie z systemem iOS
  • wpmd_is_iphone() – wyświetla tylko gdy iPhone
  • wpmd_is_ipad() – wyświetla tylko gdy iPad
  • wpmd_is_android() – wyświetla tylko gdy urządzenie z systemem Android
  • wpmd_is_windows_mobile() – wyświetla tylko gdy urządzenie z systemem Windows Mobile

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

mobile-detect-logic

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/

Wojciech Władziński

O Wojciech Władziński

Branżą SEO zajmuję się od 2008 roku. Na co dzień specjalista ds. SEO w firmie Virtal. Tworzę i optymalizuję duże serwisy jak i mniejsze strony internetowe. Szczególnie upodobałem sobie środowisko WordPressa, który mimo powszechnej opinii nie jest tylko platformą blogową.
Udostępnij na: Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedIn

5 komentarzy

  1. MediaQueries jest przydatne jednak ja nie jestem zwolennikiem dodawania do wszystkiego wtyczek… zdecydowanie lepiej albo odpowiednio zrobić samodzielnie widget i go podmienić w motywie potomnym, albo w treści widgetu zrobić div, który będzie ukryty/pokazany.

Zostaw odpowiedź

Email nie będzie publikowany. Wymagane pola są oznaczone *

Możesz używać tych tagów HTML <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Oferuję szereg usług związanych z WordpressemSPRAWDŹ OFERTĘ
Przeczytaj inne:
CheryFramework 4.0 nowości i instalacja

Jakiś czas temu przygotowałem dla Państwa artykuł na temat „Konfiguracja motywu potomnego na podstawie CherryFramework”, gdzie opisywałem proces tworzenia motywy...

Zamknij