Zaczynamy od przyjrzenia się mojej podstawowej pracy, którą wykonałem za kulisami, dopracowując pewne rzeczy do zrobienia. Podobnie jak dodanie pozostałych wywołań wp_list_pages () w celu wyświetlenia reszty listy fragmentów dla każdej kategorii. A także dodanie CSS, aby zmienić kolor paska oddzielającego kategorie i listy fragmentów. Zmieniliśmy także zawieszenie kategorii, aby rozjaśnić kolory zamiast głupiej białej ramki, którą tymczasowo mieliśmy. Dosłownie użyliśmy lighten()funkcji w Sass, aby wykonać tę pracę za nas.
Celem tego screencasta jest jednak stylizacja widoku dla pojedynczego fragmentu. Gdybym niedawno utworzył ten obszar witryny, fragmenty mogą być niestandardowym typem postów (tak jak zrzuty ekranu z pojedynczej galerii), ale nie istniały, gdy zacząłem to robić. W związku z tym są po prostu „Stronami” i wszystkie używają niestandardowego szablonu strony. Naprawdę nic wielkiego, zwłaszcza teraz, gdy posiadanie dużej liczby stron nie ma znaczenia dla wydajności.
Poszczególne strony z fragmentami będą bardzo podobne do postów na blogu. Standardowa struktura siatki 2/3 1/3 i normalny pasek boczny. Są jednak pewne różnice. Istnieje wyraźna hierarchia fragmentów, np
Strona główna »Fragmenty kodu» Kategoria fragmentu »Nazwa fragmentu
Jest to idealne rozwiązanie dla nawigacji podrzędnej „czarny pasek”, która rozwija się w tej witrynie. Nasza wtyczka Yoast SEO zapewnia funkcjonalność menu nawigacyjnego, więc jest to łatwe - wystarczy wywołać funkcję.
Inną różnicą jest to, że the_modified_time()zamiast daty publikacji podajemy . W ten sposób ludzie znają ostatnią datę aktualizacji fragmentu, która jest bardziej istotna niż data publikacji. Daje mi też motywację do regularnego odwiedzania fragmentów.
Odchodzimy trochę na bok, aktualizując stary fragment dla zabawy.
Na koniec piszemy trochę JavaScript, który sprawi, że nasze widoki podkategorii będą działać. Te widoki zasadniczo wyglądają jak nasza strona główna Snippets, tylko jeśli jesteś w / snippets / javascript /, fragmenty JavaScript będą domyślnie widoczne, a kategoria JavaScript będzie podświetlona. Wierz lub nie, tylko kilka wierszy podstępnego adresu URL ze szczytowym kodem JavaScript, który prawdopodobnie powinien być urywkiem.