W artykule:
Jesteśmy teraz w ostatniej części naszej trzyczęściowej serii na temat tworzenia pierwszego motywu WordPress ze statycznego HTML.
Do tej pory zabrałeś swoje indeks.html plik, przekształcił to w plik PHP, dodał znaczniki szablonów i podzielił je na pliki szablonów motywów. Następnie utworzono dodatkowe pliki szablonów, aby wyświetlić różne typy zawartości.
W tej ostatniej części zakończymy proces tworzenia motywu. Wykonamy następujące czynności:
- Utwórz plik funkcji z niezbędnymi funkcjami motywu.
- Dodaj obszary widżetów na pasku bocznym i stopce.
- Dodaj menu nawigacyjne, które użytkownicy mogą wypełnić za pośrednictwem ekranu menu w panelu administracyjnym WordPress.
Czego potrzebujesz
Aby śledzić ten post, potrzebujesz kilku narzędzi:
- Instalacja rozwojowa WordPress, najlepiej na komputerze lokalnym.
- Edytor kodu.
- Kod, który stworzyłeś w części pierwszej i drugiej tej serii-jeśli go nie masz, możesz pobrać pliki, których używam.
Upewnij się, że wykonujesz tę pracę na stronie deweloperskiej, a nie na stronie na żywo – nie chcesz, aby świat zobaczył Twój motyw, dopóki nie będzie gotowy.
Tworzenie i wypełnianie Pliku funkcji
Plik funkcji motywu nie jest plikiem szablonu – nie jest używany do wyświetlania zawartości. Zamiast tego zawiera funkcje, które będą używane przez WordPress do skonfigurowania motywu i witryny.
Jeśli zauważysz, że dodajesz wiele dodatkowych funkcji do pliku funkcji, powinieneś zamiast tego utworzyć wtyczkę. Istnieje jednak pewna funkcjonalność, którą musisz dodać za pośrednictwem funkcje.php i to właśnie będziemy tutaj dodawać.
Uwaga: Jeśli chcesz dowiedzieć się więcej o tym pliku, zapoznaj się z naszym ostatecznym przewodnikiem po Pliku funkcji motywu.
Konfigurowanie Tematu
Jednym z zadań, które wykonuje plik funkcji, jest konfiguracja motywu. Obejmuje to takie rzeczy, jak włączanie menu nawigacji i polecanych obrazów.
W folderze motywów utwórz nowy plik o nazwie funkcje.php i otwórz. Dodaj otwarcie <?php Oznacz u góry (nie dodawaj zamykającego na dole, WordPress go nie potrzebuje i zminimalizuje szanse na błąd, jeśli dodasz po nim podziały wierszy).
Teraz dodaj ten kod do swojego pliku:
To dodaje:
- tłumaczenie
- Obsługa formatów postów
- obsługa miniatur postów w postach i na stronach
- Obsługa linków RSS
- menu nawigacyjne.
Teraz zakończ konfigurację tłumaczenia, otwierając arkusz stylów. Dodaj ten wiersz w komentowanym tekście U góry:
To mówi WordPress co domena tekst jest dla tego tematu, więc może być używany z dowolnego kodu, który można udostępnić do tłumaczenia. Aby uzyskać więcej informacji na ten temat, zobacz nasz przewodnik po przygotowywaniu tematów do tłumaczenia. Możesz zauważyć, że w pliku funkcji umieściłem już jeden fragment tekstu, który zawiera umiędzynarodowienie. Dotyczy to nazwy menu nawigacyjnego na ekranach administratora.
Wreszcie twoja funkcja jest podłączona do after_setup_theme hak, bez którego nie będzie strzelać.
Więc temat jest teraz skonfigurowany i mamy menu nawigacyjne, które możemy wypełnić. Jednak nie będzie on jeszcze wyświetlany na stronie. Poprawmy to.
Dodawanie menu nawigacyjnego
W tej chwili menu jest zakodowaną listą. Zastąpmy to funkcją, która wyświetli menu, które tworzymy na ekranach administratora WordPress.
Otwórz swój nagłówek.php plik i znajdź kod do menu:
Zastąp to tym:
Spowoduje to wygenerowanie menu nawigacyjnego. Spróbuj teraz dodać menu za pomocą ekranu menu (po zapisaniu plików nagłówka i funkcji).
Oto moje menu w adminie:
I na przednim końcu mojej strony:
Dodawanie Obszarów Widżetów
Następnym krokiem jest dodanie obszarów widżetów do naszego paska bocznego i stopki. Zastąpi to zakodowaną zawartość, która już tam jest.
Rejestrowanie Obszarów Widżetów
Najpierw musimy zarejestrować obszary widżetów w naszym Pliku funkcji. Otwórz to i dodaj to:
To rejestruje cztery obszary widgetu: jeden na pasku bocznym i trzy w stopce, które umieścimy obok siebie. Teraz będziesz mógł je wypełniać za pośrednictwem ekranów administratora, ale nie pojawią się one na stronie. To dlatego, że musimy dodać je do plików szablonów.
Aby zrozumieć, jak działa ten kod, zobacz stronę Kodeksu na stronie register_widget() funkcja.
Dodawanie obszaru widżetu do paska bocznego
Najpierw dodajmy nasz widżet paska bocznego. Otwórz swój pasek boczny.php plik i znajdź ten kod:
Zastąp to wszystko czekiem, aby sprawdzić, czy obszar widżetu jest wypełniony, a jeśli tak, aby wyświetlić obszar widżetu i jego zawartość (tj. niezależnie od dodanych widżetów):
Teraz zapisz i zamknij plik.
Po odświeżeniu witryny nic nie będzie widoczne na pasku bocznym. Dodaj kilka widżetów poprzez Widgety ekran admina i pojawią się.
Dodawanie obszarów widżetu do stopki
Teraz dodajmy trzy obszary widżetów do stopki.
Otwórz stopka.php plik i znajdź ten kod:
To sprawdza dla każdego z trzech obszarów stopki po kolei i jeśli są wypełnione, wyświetla je. Dodałem klasy CSS, aby unosić obszary widżetu obok siebie i uczynić je prawidłową szerokością. To wszystko jest zawarte w arkuszu stylów mojego motywu.
Ostatni Krok-Metadane
Teraz mamy nasze widgety i menu na miejscu. Ostatnim krokiem w pliku funkcji jest dodanie obsługi metadanych tytułu. Pomoże to wyszukiwarkom zidentyfikować, o czym jest strona. Dodamy również metadane do nagłówka strony, w nagłówek.php plik.
Dodawanie metadanych tytułu witryny dla SEO
Otwórz swój nagłówek.php plik. Znajdź tę linię i usuń ją:
Jeśli używasz własnego pliku statycznego, twój może być inny, ale to jest to, co mam w swoim.
Otwórz swój funkcje.php plik. Znajdź dużą funkcję, którą dodałeś jako pierwszą, ze wszystkimi funkcjami konfiguracji. Dodaj to wewnątrz funkcji:
Zapisz i zamknij plik funkcji. To wszystko, co musisz zrobić – nie musisz nic dodawać do swojego nagłówek.php plik.
Dodawanie metadanych witryny w nagłówku
Nadal nie ustawiliśmy naszego motywu tak, aby tytuł w nagłówku był automatycznie generowany, a nie kodowany. Naprawmy to.
W Twoim nagłówek.php plik, znajdź tę linię:
Edytuj go, aby przeczytać w ten sposób:
Spowoduje to automatyczne wypełnienie nagłówka informacjami, które dodasz za pomocą Ustawienia ekran.
Temat Końcowy
Teraz rzućmy okiem na naszą stronę z pełnym tematem:
Dobrze to wygląda! Oczywiście, jeśli pracowałeś z własnego statycznego HTML, twój będzie wyglądał zupełnie inaczej. Być może będziesz musiał poświęcić trochę czasu na dostosowanie CSS, aby upewnić się, że kierujesz wszystkie elementy, które są generowane przez WordPress.
Stworzyłeś swój pierwszy motyw WordPress. Daj sobie głośne pat wygrać z powrotem! To jest początek twojej kariery programistycznej WordPress. Możesz teraz dodać więcej kodu do motywu, jeśli tego potrzebujesz (korzystając z naszych przewodników), utworzyć więcej plików szablonów, jeśli chcesz i zacząć z niego korzystać. Powodzenia!
Tagi:
