Wordpress SEO - 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ł.

161 artykułów w bazie

Jak ukryć widgety na urządzeniach moblinych ?

widget-wp

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.

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ń starszy specjalista ds. SEO w firmie Seogroup. 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ą.

You didn't add any pricing tables yet!

Pobierz SEO eBook

download ebook

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="">

Przeczytaj poprzedni wpis:
wp-automatic-10
[INOFGRAFIKA] 10 urodziny WordPress

Wordpress tego roku obchodzi wraz z firmą Automattic - spółki potomnej Wordpress Foundation 10 urodziny. Odgrywa ona znaczącą rolę w...

Zamknij