WP-PAGENAVI Adaptacyjna nawigacja w WordPress
Chyba każdy zna tak popularną wtyczkę jak wp-pagenavi, Kto nie zna tej wtyczki nawigacyjnej. Niestety, twórcy wtyczki nie spieszą się, aby uczynić ją adaptacyjną, W tej chwili responsywne strony odgrywają bardzo dużą rolę, zwłaszcza dla wyszukiwarki Google. Dlatego dzisiaj postanowiłem otworzyć to pytanie i powiedzieć, jak szybko możesz zamienić nieresponsywną nawigację w taką, która będzie idealnie wyświetlać się na urządzeniach mobilnych..
Jak każdy geniusz, ta lekcja będzie tak prosta i zrozumiała, jak to tylko możliwe, nawet dla początkujących programistów internetowych..
Responsywna nawigacja wp-pagenavi dla strony internetowej na urządzenia mobilne
Zobaczmy, jak wygląda nawigacja po wtyczce na urządzeniach mobilnych bez żadnych zmian.
Jak widać na zdjęciu wszystko pływa, ponieważ po prostu nie mieści się na ekranie. Naprawmy to i zostawmy tylko ważne przyciski.
Jeśli masz już zainstalowaną wtyczkę wp-pagenavi, wtedy wszystko, co musisz zrobić, to otworzyć arkusz stylów, który znajduje się w ścieżce /wp-content/themes/-nazwa twojego motywu-/style.css (w motywach premium ścieżka do stylów może być nieco inna).
Aby otworzyć plik i dodać style:
|
1 2 3 4 5 |
@media (max-width: 800px) { .wp-pagenavi .page { display: none; } } |
Po prostych manipulacjach dodatkowe przyciski dla urządzeń mobilnych zostaną ukryte.
Jeśli to nie wystarczy dla twojego projektu, następnie możesz również usunąć pierwszy i ostatni przycisk. Aby to zrobić, musisz nieco zmodyfikować kod stylu.:
|
1 2 3 4 5 6 7 |
@media (max-width: 800px) { .wp-pagenavi .page, .wp-pagenavi .last, .wp-pagenavi .first { display: none; } } |
Oto, co się stało:
Gdyby coś nie wyszło, zapytaj w komentarzach. Myślę, że można to zakończyć, pomyślny rozwój wygodnych i adaptacyjnych witryn.
- Podstawowy kurs projektowania stron internetowych;
- Układ stron;
- Ogólny kurs CMS WordPress oraz kontynuacja kursu dotyczącego tworzenia szablonów;
- Tworzenie stron internetowych w PHP.
