Jak zrobić własny lepki pasek nagłówka, taki jak MakeUseOf

Reklama

Około miesiąc temu wprowadziliśmy nowy element interfejsu do MakeUseOf - ruchomy pasek nawigacji i wyszukiwania. Informacje zwrotne, które otrzymujemy, są niemal całkowicie pozytywne, gwałtownie wzrosła liczba wyszukiwań wewnętrznych, a niektórzy czytelnicy pytali, jak stworzyć własną witrynę, więc pomyślałem, że się podzielę.

Użyjemy jQuery do przyklejenia paska na górze ekranu - ale tylko do pewnego momentu. Zrobię to wszystko w domyślnym motywie WordPress - Twenty Eleven, choć oczywiście można go zastosować do dowolnego motywu lub strony internetowej, które wystarczająco rozumiesz, jak je modyfikować.

HTML

Najpierw otwórz motywy header.php i wskaż pasek nawigacyjny, który będzie lepki. Jak powiedziałem, poniższy kod jest domyślny dla dwadzieścia jedenastu; twoje mogą się różnić.

Najpierw dodaj nowy kontener DIV otaczający całą sekcję NAV.

Przenieśmy też ten domyślny pasek wyszukiwania tutaj. Zauważysz, że jest domyślnie dodawany w prawym górnym rogu motywu; znajdź linię php get_search_form ();

i wklej go do naszej sekcji nawigacji. Usuń wszystkie inne jego wystąpienia z tego pliku.

Jeśli zapiszesz i odświeżysz teraz, zobaczysz, że formularz wyszukiwania nie pojawia się na pasku nawigacyjnym - nadal jest wyświetlany w prawym górnym rogu. To dlatego, że został umieszczony absolutnie w CSS, a my usuniemy to wszystko za sekundę.

CSS

Otwórz główny plik style.css i znajdź sekcję formularza wyszukiwania:

#branding #searchform {... }

Zastąp wszystko, co jest w środku (powinno być w stanie zawierać około czterech linii, w tym pewne pozycjonowanie bezwzględne):

#branding #searchform { float: left; tło: biały; margines: 7 pikseli; }

Dostosuj kolor lub margines. Zmień liczbę zmiennoprzecinkową, jeśli wolisz, aby pojawiała się po prawej stronie paska. W tym temacie wyszukiwanie jest rozszerzone, gdy użytkownik kliknie w nim; to nie wchodzi w zakres tego samouczka, ale możesz zobaczyć podobny efekt w naszej wyszukiwarce MakeUseOf.

jQuery

Jeśli zastanawiasz się, dlaczego używamy do tego jQuery, jest to proste: CSS jest naprawiony i nie można go dynamicznie dostosowywać. Chociaż możemy użyć CSS do stworzenia lepkiego nagłówka, musiałby to być górny element strony. Problemem jest to, że nasze menu nie jest najważniejszym elementem, więc nie możemy zacząć od tego, że jest lepki. To jest, gdzie jest używany jQuery; możemy sprawdzić, kiedy użytkownik przekroczy określony punkt; wtedy i tylko wtedy uczyń go lepkim.

Zacznij od dodania jQuery do swojego motywu. Twój motyw może już mieć załadowany; jeśli nie, nie martw się. Możesz go kolejkować, dodając następujący kod do pliku functions.php, w ten sposób:

php. funkcja my_scripts_method () { wp_deregister_script ('jquery'); wp_register_script („jquery”, „ http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js'); wp_enqueue_script ('jquery'); } add Działalności („wp_enqueue_scripts”, „my_scripts_method”);

Możesz też całkowicie ominąć WordPressa i włączyć to do pliku nagłówkowego. Gdzieś w sekcji głowy po prostu dodaj ten wiersz:

Jeśli użyjesz pierwszej metody, zostanie ona załadowana noConflict tryb, co oznacza, że ​​musisz użyć „jQuery” w kodzie, aby uzyskać dostęp do funkcji jQuery. Jeśli użyjesz drugiej metody bezpośredniego dodania jej do nagłówka, możesz użyć standardowego akcesorium jQuery $. Przyjmę drugą metodę w poniższym kodzie.

Tak więc, aby dodać rzeczywisty kod jQuery, umieść następujące miejsce na końcu swojego header.php - Umieściłem mój tuż przed

Pierwszą rzeczą, jaką robi skrypt, jest ustalenie, od czego zaczyna się pasek nawigacji, i zapamiętanie tej wartości. Po drugie, dołączamy do zdarzenia przewijania - oznacza to, że za każdym razem, gdy użytkownik przewija stronę, możemy uruchomić ten blok kodu. Po uruchomieniu kodu istnieją dwa sposoby:
1. Jeśli okno przewinęło się poza pasek nawigacji, ustalamy, że jest to stały CSS (jest to „lepka” część).
2. Jeśli górna część okna jest wyższa niż pierwotna pozycja paska nawigacji (tj. Użytkownik ponownie przewinął w górę), przywracamy domyślną pozycję statyczną.

Chciałbym zwrócić uwagę na dwa punkty:

• +288 jest tam, aby naprawić błąd związany z uzyskaniem nieprawidłowej pozycji; bez niego pasek zbyt wcześnie uruchamia stan lepkości - usuń go, aby zobaczyć, co mam na myśli. Nie będzie to konieczne we wszystkich tematach i prawdopodobnie możesz znaleźć lepsze rozwiązanie.
• Aby rozwiązać problem zmiany szerokości paska nawigacyjnego, gdy przechodzi on w stan lepki, edytuj style.css, wiersz 550, aby przeczytać 1000px zamiast 100%

To wszystko, pasek nawigacyjny powinien być ładnie lepki.

Podsumowanie:

Pełna wymiana header.php kod tego samouczka można znaleźć pod adresem ten pastebin; i wymiana style.csstutaj. Mam nadzieję, że podobał ci się ten mały samouczek; jeśli masz problemy, opublikuj komentarz w komentarzach, ale pamiętaj, aby publicznie udostępnić swoją witrynę, abym mógł ją zobaczyć. Jeśli jesteś tu nowy, koniecznie sprawdź wszystkie inne bloger i artykuły na temat tworzenia stron internetowych.