Koleżanka właśnie kończy jedną ze stron na WordPressie (landing page), którą od strony technicznej dla niej przygotowywałem. Ja odpowiadam za sprawy techniczne i co bardziej skomplikowane elementy na stronie, a ona zajmie się warstwą graficzną. Działa to całkiem sprawnie – ja lubię elementy techniczne, a koleżanka z chęcią „bawi się” wyglądem (zwłaszcza z motywem Divi, który bardzo, ale to bardzo jej w tym kontekście pasuje). Zainspirowana ikonami w menu, które zazwyczaj dodaje na stronach (np. w menu głównym na Webinsider.pl), postanowiła takie same ikony dodać u siebie…
Modyfikacja zawartości menu zależnie od (rozmiaru) urządzenia
Podrzuciłem jej kod HTML do wykorzystania w menu (jako etykietę), i właściwie na tym temat można by uznać za zamknięty. Ale to, że ikona bez tekstu w menu na komputerze wygląda fajnie, nie znaczy, że tak samo dobrze będzie wyglądać na komórce. I to, że na komórce wygląda dobrze z tekstem, nie oznacza, że na komputerze też tak będzie.
Tak np. wygląda menu Webinsider.pl na komputerze:
Ikony, o których mowa, to „domek” po lewej, oraz ikony portali społecznościowych po prawej stronie menu. I w tej formie jest tak, jak być powinno. Sprawa trochę się komplikuje, gdy otworzymy stronę na komórce (mobile).
W standardowej postaci ikony pojawiają się w menu jedna po drugą, tworząc swego rodzaju dziurę (lewa strona grafiki poniżej), która wygląda średnio. A zdecydowanie sensowniej wygląda to z etykietą tekstową (prawa strona grafiki):
Ale z racji tego, że taki tekst jest często zbyteczny w przypadku menu „stacjonarnego”, warto skorzystać z małej sztuczki z CSSem (arkusz stylów), dzięki czemu dodatkowy tekst obok ikon będzie się wyświetlał tylko w przypadku menu „mobilnego”.
Zacznijmy jednak od menu (WP-Admin: Wygląd -> Menu), w którym dodajemy odnośnik (z dostępnych do wyboru lub własny), i jako etykietę ustawiamy np. domek (strona główna).
W moim przypadku – korzystam z Font Awesome – tekst etykiety w formie podstawowej będzie wyglądał tak:
<i class="fa fa-home" aria-hidden="true"></i>
Możemy dodać do tej ikony jakiś tekst:
<i class="fa fa-home" aria-hidden="true"> Strona główna</i>
Ale efekt, jaki chcemy uzyskać to sama ikona na komputerach, i ikona + tekst na mobile. Dlatego dokonujemy małej modyfikacji kodu (tekstu etykiety):
<i class="fa fa-home" aria-hidden="true"></i><span class="mobile-only"> Strona główna</span>
Utworzyliśmy nowy obiekt „span” o klasie „mobile-only”, i teraz musimy sprawić, by widoczny był tylko na mniejszych ekranach (mobile). W tym cel musimy dodać jeszcze kod CSS.
Kod możemy dodać w pliku „style.css” naszego motywu potomnego, w ustawieniach motywu (jeśli posiada taką opcję), czy też samego WordPressa, na ekranie personalizacji (WP-Admin: Wygląd -> Dostosuj: Dodatkowy CSS):
.mobile-only { display: none !important; }
@media (max-width: 980px) {
.mobile-only {
display: inline !important;
}
}
Powyższy kod sprawia, że obiekt o klasie „mobile-only” jest domyślnie ukryty. Zmienia się to w sytuacji, gdy okno przeglądarki będzie miało rozmiar mniejszy lub równy 980 pikseli (ja taką wartość przyjąłem, możecie użyć innej).
Choć w tym artykule opierałem się na motywie Divi i WordPressie, to ta metoda powinna zadziałać nie tylko w przypadku innych motywów, ale również i systemów, czy wręcz na stronie pisanej „w czystym HTMLu”.
- Zero Trust od Cloudflare, czyli prosty i bezpieczny sposób na dostęp do lokalnych zasobów z zewnątrz, bez publicznego adresu IP i otwierania portów na routerze - 1970-01-01
- Home Assistant i integracja z IMGW-PIB, czyli tworzymy automatyzację z powiadomieniami bazując na sensorach zagrożenie i alarm powodziowy - 1970-01-01
- Home Assistant 2024.9 i kolejne przydatne nowości w widoku „sekcje”, dzięki którym jeszcze lepiej można dopasować wygląd - 1970-01-01