Wsparcie » Używanie i konfiguracja WordPressa » kolumna widoczna po kliknięciu na przycisk-urządzenia mobilne

  • Chcę dostosować wordpress pod urządzenia mobilne. Mój szablon składa się z dwóch kolumn. Problem jest taki, że na telefonach teraz te kolumny wyświetlają się jedna pod drugą.
    Widziałem ciekawe rozwiązanie w którym pierwsza kolumna (wyświetla się na stronie). Natomiast aby wyświetlić drugą kolumnę należy kliknąć na przycisk, który pojawia się w nagłówku strony.
    Jak coś takiego zrobić? są jakieś pluginy do tego, czy może da radę samym cssem?
    Na stronach mobilnych często wyświetla się menu w ten sposób, które na laptopie widoczne jest jako np. menu poziome, a na telefonach robi się z tego przycisk, który po kliknięciu pokazuje całe menu

Viewing 8 replies - 1 through 8 (of 8 total)
  • Czyli, że cała druga kolumna z zawartością jest schowana na urządzeniach mobilnych, dopóki ktoś nie kliknie na wspomniany przycisk ? Brzmi raczej na mało praktyczne rozwiązanie, ewentualnie raczej do stron, gdzie w drugiej kolumnie znajduje się zawartość opcjonalna, choć i to chyba lepiej załatwić prostym spoilerem lub grupą guzików typu accordion.

    Tak czy siak na pewno będzie łatwiej pomóc, gdy faktycznie podasz stronę z podobnym rozwiązaniem.

    Thread Starter lamcpp

    (@lamcpp)

    a jak byłoby bardziej praktycznie?
    Otwórz np. stronę allegro na telefonie. Po lewej stronie na górze masz kwadracik po kliknięciu którego pojawia się rozwijalne menu.
    Na sporej ilości stron widziałem podobne rozwiązanie.

    My chyba nie mówimy o tym samym.

    Menu mobilne to żaden problem, są nawet wtyczki:
    https://wordpress.org/plugins/mobile-menu/
    https://wordpress.org/plugins/slicknav-mobile-menu/
    https://wordpress.org/plugins/responsive-menu/

    Ty natomiast wspominałeś o kolumnach z zawartością strony, a to już co innego 🙂

    Jeżeli maswz visual composera to w zasadzie wystarczy ustawuić aby obecna kolumna nie była widoczna na telefonach i zrobić nową widoczną tylko na nich (nad lub pod treścią w kolumnie z zawartością) – w zależności od motywu jest opcja „ukrytej sekcji” dostępnej po kliknięciu lub wejściu w link z jej ID domena.pl/#sekcja i możesz to wykorzystać, ale jest to zależne od motywu nie VC

    Thread Starter lamcpp

    (@lamcpp)

    Szablon na którym fajnie się wyświetla na urządzeniach mobilnych to: https://wp-themes.com/twentyfifteen/ (standardowy szablon wordpress).
    Jednak nie widzę opcji w szablonie by można było zmienić sposób tego wyświetlania, tzn. jak to działa, czy to czysty css?
    Szablon, który ja mam to: http://demo.woothemes.com/?name=artificer,
    tutaj na mobilnych ukrywa się tylko menu, a chciałbym żeby cała lewa kolumna się ukrywała tak jak na powyższym szablnie.
    Stąd pytanie jakiego mechanizmu użyto na twentyfifteen>

    Pierwszy szablon, który podlinkowałeś nie ma typowego menu, dlatego sidebar jest jako takowy traktowany i po kliknięciu na guzik menu mobilnego wyświetla sidebar, a nie menu.

    W Artificier sidebar jest spychany do kolumny pod zawartość strony, a menu masz na samej górze klikalne – jest to prawidłowe responsywne zachowanie.

    Jeśli chcesz mieć sidebar pod mobilnym guzikiem, to możesz użyć np. tej wtyczki:
    https://wordpress.org/plugins/mobile-menu/
    – w jej opcjach możesz podłączyć widgety z sidebara pod guzik mobilny.

    Standardowy sidebar możesz schować używając najprostszego display:none;, czyli np:

    @media only screen and (max-width: 599px) {
      #sidebar {
        display: none;
      }
    }

    jest to najprostsze rozwiązanie, oczywiście korzystając z tego sidebar nadal jest generowany, po prostu chowa się – jeśli chcesz bardziej profesjonalne rozwiązanie, to możesz wykorzystać funkcję php wp_is_mobile()

    Thread Starter lamcpp

    (@lamcpp)

    niestety wtyczka mobile-menu nie pozwala na dodanie widgetów do menu;/
    czy jest jakiś inny sposób na zrobienie tego?

    Dopisanie funkcjonalności i zmienna is_mobile

Viewing 8 replies - 1 through 8 (of 8 total)
  • Temat ‘kolumna widoczna po kliknięciu na przycisk-urządzenia mobilne’ jest zamknięty na nowe odpowiedzi.