Jak zrobić przyklejony nagłówek w WordPress

W ciągu ostatniej dekady coraz większy nacisk kładzie się na nawigację w witrynie. Zbiegło się to z powszechnym użyciem smartfonów, które mają ograniczone opcje nawigacji w porównaniu z tradycyjnym interfejsem pulpitu. Różnica w wyglądzie strony internetowej jest bardziej niż widoczna, jeśli spojrzysz na porównanie między witryną z 2011 r. a tą, która powstała teraz.

Jedną z głównych metod rekonfiguracji układów witryny były elementy przyklejone. Odpowiednio nazwane, elementy te przyklejają się do strony na jej krawędziach, gdy się po niej poruszasz, tzn. zachowują swoją pierwotną pozycję (pomyśl o zamrożeniu okienek w Excelu, a będziesz miał dobry pomysł, jak to działa).

Góra, dół, lewo i prawo

Przyklejone elementy są zwykle zarezerwowane dla menu, nagłówków i/lub pasków stanu; zapewniają one odwiedzającemu dużą elastyczność, ponieważ może on natychmiast przełączać się z jednej strony na drugą bez konieczności cofania się. Ponadto wszystkie te elementy są na początku umieszczone na górnej i dolnej krawędzi strony, co dobrze sprawdza się w całym założeniu. Niezwykle trudno byłoby zbudować stronę wokół przyklejonego elementu, który jest umieszczony na środku strony.

Rzadko można je również znaleźć na lewym i prawym obramowaniu, z tymi samymi funkcjami, tylko innym układem. W takich przypadkach będą ukryte, dopóki nie najedziesz na nie kursorem lub nie dotkniesz ich na ekranie.

Oszczędzający miejsce

Interesujące w przypadku elementów przyklejonych jest to, że oszczędzają miejsce na stronie i w witrynie jako całości – mogą być faktycznie używane do zastępowania całych stron. Dzieje się tak, ponieważ pozostawiają one główną część witryny nienaruszoną i sprawiają, że obramowania stają się wielofunkcyjnymi narzędziami, które przejmują wiele funkcji strony na siebie. Pomyśl przez chwilę o przeciętnym układzie witryny.

Górna część jest zarezerwowana dla menu zawierających strony posortowane według wyznaczonych kategorii i paska wyszukiwania. Oba są ukryte za paskiem podczas przewijania i rozwijają się w razie potrzeby. Gdyby tak nie było, tylko drzewo menu zajęłoby całą górną część strony i nie „podążałoby” podczas przewijania w dół, więc odwiedzający musiałby stale poruszać się w górę i w dół tylko po to, aby nawigować po stronach .

Z drugiej strony, przyklejony dolny element może dość łatwo zastąpić całą stronę pomocy technicznej – wystarczy dodać e-mail i/lub numer wraz z przyciskiem czatu i gotowe. Zapewniasz odwiedzającym stale obecny sposób kontaktowania się z Tobą. Po raz kolejny praktyczna aplikacja jest fantastyczna – klient przegląda strony Twoich produktów, ma pytanie i może natychmiast dowiedzieć się, czego potrzebuje, klikając przycisk czatu.

Tworzenie lepkich elementów

Kiedy mówimy o WordPressie, zawsze istnieje wiele sposobów na zrobienie wszystkiego, o czym możesz pomyśleć, i to samo dotyczy tutaj. Możesz tworzyć przyklejone elementy ręcznie w domyślnym edytorze lub możesz użyć wtyczki, która zastępuje potrzebę kodowania interfejsem przyjaznym dla początkujących. Kontrast między wynikami końcowymi jest minimalny, ale sposób, w jaki się tam dostaniesz, robi różnicę. W naszym przykładzie użyjemy lepkich nagłówków, ponieważ są one zdecydowanie najczęstszym elementem, który się przykleja.

Ręczne tworzenie przyklejonego nagłówka

Ręczne tworzenie przyklejonego nagłówka w WordPressie wymaga użycia kodu CSS. Bez zbytniego wchodzenia w szczegóły, kod CSS możemy dodać do praktycznie każdego elementu na stronie, aby zmienić jego właściwości. W przypadku ręcznego kodowania jest to nasza główna metoda dostosowywania. Korzystanie z CSS w pierwszej kolejności wymaga obecności nagłówka na stronie, więc upewnij się, że jest coś do dostosowania. WordPress upraszcza ten proces, ponieważ nawet domyślny edytor daje możliwość dodania go jednym kliknięciem.

Gdy masz już nagłówek do pracy, musisz uzyskać dostęp do konsoli. Po prostu przejdź do sekcji wyglądu znajdującej się po lewej stronie pulpitu nawigacyjnego, wybierz „dostosuj”, a następnie kliknij „dodatkowy CSS”. Gdy konsola jest już otwarta, musisz wprowadzić kod, który sprawi, że Twój nagłówek będzie przyklejony:

 #website-navigation { background:#fff; height:60px; z-index:170; margin:0 auto; border-bottom:1px solid #dadada; width:100%; position:fixed; top:0; left:0; right:0; text-align: center; }

Powyższy kod jest tylko przykładem tego, jak powinien wyglądać ogólnie, a nie ostatecznym poleceniem. Pamiętaj, że pierwszy wiersz jest zawsze specyficzny dla każdej witryny — zastąp #website-navigation klasą CSS lub identyfikatorem nagłówka nawigacji przed powrotem do edytora stron.

Po sprawdzeniu funkcjonalności w oknie podglądu strony/postu po prostu opublikuj, a otrzymasz przyklejony nagłówek. Musimy zaznaczyć, że prawdopodobnie będziesz chciał rozszerzyć kod CSS, aby obejmował więcej niż tylko atrybut „lepki” dla nagłówka takiego jak ten – zalecane jest dodanie elementów, które wizualnie podkreślą nagłówek, takich jak kolorowe czcionki, rozmiar, wcięcie itp. Ponieważ jest to stałe miejsce na stronie, można go łatwo przeoczyć, więc powinieneś spróbować go wyróżnić.

Tworzenie przyklejonego nagłówka z wtyczką

Istnieje ogromne zachodzenie na siebie tych, którzy potrzebują strony internetowej dla swojej firmy lub bloga, a tymi, którzy po prostu nie mają wiedzy, aby zbudować coś, co wygląda i czuje się profesjonalnie. Na szczęście w WordPressie jest tak wiele wtyczek, które ułatwiają życie wszystkim; praktycznie nie ma potrzeby posiadania niczego poza podstawową wiedzą o oprogramowaniu, aby osiągnąć swoje cele. WP Sticky to świetny przykład wtyczki, która zastępuje całe kodowanie, które omówiliśmy powyżej, przyjaznym dla użytkownika interfejsem, z którym każdy może szybko uzyskać dostęp. Jednocześnie oferuje taką samą funkcjonalność, jaką miałbyś podczas ręcznego tworzenia przyklejonego nagłówka. Rozbijmy to.

Tworzenie elementu

Tak jak musisz mieć nagłówek, od którego zaczynasz, gdy używasz CSS, musisz utworzyć element, do którego następnie dodasz atrybut sticky.

Istnieją dwa różne sposoby wyróżnienia elementu – możesz wprowadzić oznaczenie w wymaganym polu lub możesz wybrać element w oknie podglądu, klikając go (to działa cudownie, jeśli masz problem z określeniem oznaczeń) . Wybierając swój element w oknie podglądu, zobaczysz zmieniające się oznaczenia na górze ekranu.

Odkryliśmy, że po pewnym czasie pracy z wtyczką poczujesz się z nią tak komfortowo, że prawie nigdy nie będziesz używać wizualnego selektora. Oznaczenia staną się znajome, co prowadzi do prostego i ręcznego wprowadzania ich, oszczędzając czas. Dopóki nie zapoznasz się z tym zakresem, wizualny selektor będzie twoim najlepszym przyjacielem. Ostatecznie obie metody przeniosą Cię w to samo miejsce – lepki nagłówek na interfejsie.

Spraw, aby wyglądało dobrze

Nie wszystkie lepkie elementy są sobie równe, a twój również nie powinien być zwykłym przykładem. Sekcja ustawień wizualnych zapewni Ci mnóstwo opcji dostosowywania, z którymi możesz pracować, aby Twój przyklejony nagłówek był wyjątkowy pod każdym względem.

Pierwszą rzeczą, którą musisz wziąć pod uwagę, jest pozycjonowanie swojego elementu. Ponieważ robimy nagłówek, będzie to łatwa decyzja – przyklejamy go na górze strony. Pozycjonowanie jest kluczem do dobrego nagłówka, więc jeśli nie chcesz, aby obejmował on samą górę strony, możesz przesunąć go w dół o kilka pikseli, aby uzyskać lepsze dopasowanie. Dodatkowo, jeśli Twoja witryna korzysta z paska narzędzi administratora dla zarejestrowanych użytkowników, możesz sprawić, by wtyczka automatycznie go sprawdzała i odpowiednio dostosowywała nagłówek.

Poruszyliśmy nieco kwestię konieczności w pełni responsywnej witryny, ponieważ potencjalni użytkownicy mogą przeglądać Internet na wiele sposobów. Aby Twoja witryna była w pełni adaptacyjna, możesz wybrać, na których ekranach nagłówek będzie przyklejony.

Zwykle mniejsze ekrany najbardziej korzystają z lepkich nagłówków, podczas gdy większe używane na tradycyjnych komputerach stacjonarnych, które mają więcej opcji nawigacji, radzą sobie bez nich. Rozmiary są podzielone na cztery grupy, które obejmują wszystkie główne rozmiary ekranów.

Indeks Z to opcjonalne ustawienie, które może zmylić wielu na pierwszy rzut oka. Z tego powodu oraz z faktu, że jest to funkcja opcjonalna, wielu prawdopodobnie zrezygnuje z tego i zignoruje. Jeśli wszystko działa, prawdopodobnie nigdy nie spojrzysz wstecz; jednak w przypadku problemów z wyświetlaczem indeks Z może być potencjalnie szybkim rozwiązaniem. Zasadniczo myśl o stronie jako o zbiorze stosów, w których stosy na górze mają wyższe liczby niż stosy na dole. Dlatego, jeśli coś zasłania Twój przyklejony nagłówek, spróbuj podnieść indeks Z (sugerowana wartość 99999)

Z przyklejonym nagłówkiem „na szczycie stosów” nadszedł czas, aby uzyskać jeszcze więcej kreatywności dzięki dodawaniu efektów podczas przewijania w dół. Gdy obie opcje są wyłączone, nagłówek po prostu zachowa swoją pozycję na górze, jak wycięty fragment oryginalnej strony. Możesz dodać więcej flary dzięki efektom takim jak pojawianie się lub przesuwanie w dół. Zastanów się nad ogólnym projektem wizualnym swojej witryny, zanim zdecydujesz się na tego typu efekty; jednak – często mniej znaczy więcej.

Efekty wizualne nie ograniczają się tylko do tych, które są związane z ruchem. Możesz także dostosować sam nagłówek (oprócz ruchów wykonanych podczas tworzenia nagłówka). Krycie jest przydatne, jeśli nie chcesz, aby nagłówek zasłaniał inne treści na stronie. Ustawienie go na około 50% sprawi, że zarówno nagłówek, jak i zawartość pod spodem będą stosunkowo widoczne.

Jeszcze bardziej użyteczną funkcją niż przezroczystość jest dostosowanie zakresu przewijania. W przypadku, gdy masz bardzo długie strony, takie jak zwykle mają blogi, jest pewien punkt w nawigowaniu w dół, gdzie przyklejony nagłówek po prostu nie ma już sensu. Są to chwile, kiedy dobrze jest odkleić nagłówek po tym, jak odwiedzający przewinął wystarczająco daleko w dół.

Na koniec istnieje możliwość zmiany koloru tła nagłówka, gdy jest on lepki, dzięki czemu wyróżnia się jeszcze bardziej, ale odwraca go do oryginalnych wartości, gdy nagłówek nie jest już lepki.

Ostatnia część edycji wizualnej sprowadza nas z powrotem do ręcznego edytowania przyklejonego nagłówka za pomocą CSS.

Nawet jeśli naprawdę nie musisz mieć żadnej wcześniejszej wiedzy o kodowaniu, aby z powodzeniem korzystać z WP Sticky, może to poprawić twoją pracę, jeśli jej użyjesz. Ta funkcja jest opcjonalna, więc zależy wyłącznie od Ciebie, czy chcesz z niej korzystać i w jakim stopniu.

Zaawansowane opcje

Sekcja opcji zaawansowanych w dużej mierze dotyczy wykluczania, tj. w jakich przypadkach przyklejony nagłówek przestanie być przyklejony i powróci do „oryginalnego programowania”.

Ręczne ustawianie rozmiaru ekranu, w którym nagłówek nie jest lepki, jest krokiem naprzód w stosunku do czterech domyślnych rozmiarów wyświetlanych w sekcji ustawień wizualnych. Tutaj możesz być tak dokładny, jak chcesz, więc jeśli kiedykolwiek pojawi się dziki ekran, który nie będzie pasował do żadnego z wcześniej określonych rozmiarów, możesz stworzyć reguły, które będą dla niego działać.

Nieprzyklejanie nagłówka to nie tylko rozmiar ekranu, ale także zawartość witryny, a dokładniej kategoryzacja. Możesz sprawić, by Twój nagłówek nie przyklejał się do wyznaczonych stron, postów i typów postów, określonych kategorii lub treści z określonymi tagami. Wszystkie te warunki można mieszać i dopasowywać, aby stworzyć idealne kompendium, gdy używa się lepkiego nagłówka, a kiedy nie.

Podobnie do sposobu, w jaki wybrałeś przyklejony element (w naszym przypadku nagłówek) na samym początku, możesz również wybrać element push-up niżej na stronie, na którym chcesz, aby Twój nagłówek był wypychany w górę. To zasadniczo sprawi, że twój nagłówek przesunie się do samej granicy tego elementu bez dopełnienia lub jakiejkolwiek przestrzeni między nimi.

Aby zakończyć to wszystko, gdy masz już dość i nie chcesz już swojego przyklejonego elementu, zawsze istnieje ostateczna opcja, aby całkowicie go usunąć. Ostrzegamy, że jest to akcja trwała, a wszystkie dostosowania wprowadzone do elementu (w tym przypadku nagłówka) zostaną utracone.

Streszczenie

Trudno powiedzieć, który sposób działania jest lepszy. Z pewnością masz do dyspozycji więcej opcji za pomocą CSS, ale jest to rozwiązanie dla bardzo niewielu osób. Z drugiej strony wtyczka taka jak WP Sticky łączy łatwość obsługi z wciąż solidną funkcjonalnością, co czyni ją idealnym wyborem dla początkujących lub tych, którzy wciąż nie są pewni kodowania od zera. Prawdopodobnie najlepszym sposobem na zrobienie lepkiego, działającego nagłówka jest rozpoczęcie od tego drugiego i przejście do pierwszego.

Autor: Matej Milohnoja

Używany do pisania ogólnie o grach i grach, ale od tego czasu przerzucił się na testowanie i pisanie o oprogramowaniu do tworzenia stron internetowych. Nadal gra w wiele gier, tylko dla zabawy.