Witaj z powrotem w tej serii pokazującej, jak stworzyć swój pierwszy motyw WordPress ze statycznego HTML.

W pierwszej części tej serii, wziąłeś statyczne indeks.html plik i przekonwertowany do pliku PHP. Dodałeś znaczniki szablonów i pętlę. W tej drugiej części Twój plik zacznie wyglądać bardziej jak właściwy motyw-podzielisz go na wiele plików i zaczniesz tworzyć pliki szablonów dla różnych typów treści.

W szczególności będziemy:

  • Podziel nasze indeks.php plik do wielu plików, tworząc osobny plik dla nagłówka, paska bocznego i stopki.
  • Utwórz plik dla pętli.
  • Tworzenie nowych plików szablonów dla stron statycznych, stron archiwalnych i pojedynczych postów.

Więc zaczynajmy!

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 pierwszej części 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.

Dzielenie indeksu.plik php

Najpierw podzielimy plik utworzony w części pierwszej, tworząc nowe pliki dla nagłówka, paska bocznego i stopki.

Tworzenie pliku nagłówka

Otwórz folder motywów, jeśli jeszcze tego nie zrobiłeś. Zacznij od utworzenia trzech nowych pustych plików:

  • nagłówek.php
  • pasek boczny.php
  • stopka.php

Teraz otwórz swój indeks.php plik. Znajdź cały kod Od początku pliku do końca menu nawigacyjnego:

Ładowanie gist 2b693721668dba8bcc578b8de9824642

Skopiuj ten kod i wklej go do nowego nagłówek.php plik. Następnie usuń go z indeks.php.

Na jego miejsce Lubię umieszczać komentarze na górze KAŻDEGO pliku szablonu, aby przypomnieć mi, czym jest plik. Oto moje dla indeks.php:

Ładowanie gist 2b693721668dba8bcc578b8de9824642

Poniżej musisz dodać wywołanie do pliku nagłówka. Dodaj to ponad wszystko inne w swoim indeks.php plik (poza tymi komentarzami):

Ładowanie gist 2b693721668dba8bcc578b8de9824642

Teraz zapisz zarówno swoje indeks.php oraz nagłówek.php pliki.

Tworzenie pliku paska bocznego

Teraz pasek boczny. Znajdź cały kod w swoim indeks.php plik dla paska bocznego:

Ładowanie gist 2b693721668dba8bcc578b8de9824642

Skopiuj to na puste miejsce pasek boczny.php plik i usuń go z indeks.php.

Uwaga: w następnej części tej serii zastąp statyczną zawartość tutaj obszarem widżetów.

Po raz kolejny musisz dodać połączenie do paska bocznego. Więc w miejscu, w którym usunąłeś kod paska bocznego, dodaj go do swojego indeks.php plik:

Ładowanie gist 2b693721668dba8bcc578b8de9824642

Tworzenie pliku stopki

Na koniec utworzymy plik stopki. Znajdź cały kod w indeks.php dla stopki:

Ładowanie gist 2b693721668dba8bcc578b8de9824642

Należy pamiętać, że obejmuje to nie tylko element stopki, ale zamknięcie główna div, zakończenie ciało oraz html tagi i wp_footer podłącz wszystko do końca pliku.

Skopiuj to do nowego stopka.php plik i usuń go z indeks.php. Następnie dodaj połączenie do stopki na końcu indeks.php:

Ładowanie gist 2b693721668dba8bcc578b8de9824642

Nasz plik jest teraz podzielony na główny plik szablonu (indeks.php) oraz trzy pliki include. Jest to bardziej efektywny sposób kodowania motywu, ponieważ oznacza to, że gdy dodajemy nowe pliki szablonów, nie musisz dodawać całego kodu dla nagłówka, paska bocznego i stopki za każdym razem – a jeśli chcesz je zmienić, robisz to tylko raz.

Tworzenie pliku pętli

Innym fragmentem kodu, który pojawia się w wielu plikach, jest pętla. Podzielmy to na osobne akta.

Utwórz nowy folder o nazwie zawiera, a wewnątrz tego utwórz pusty plik o nazwie pętla.php. W Twoim indeks.php plik, Znajdź kod pętli:

Ładowanie gist 2b693721668dba8bcc578b8de9824642

Skopiuj to do nowego pustego pliku i zastąp go w indeks.php z tym:

Ładowanie gist 2b693721668dba8bcc578b8de9824642

To wywoła pętlę. Pamiętaj, że dobrym pomysłem jest umieszczenie pliku pętli w podfolderze, ponieważ pomaga to uporządkować sprawy. Będziemy tworzyć kolejne pliki Pętli, wszystkie w tym folderze.

Nasz plik indeksu jest teraz znacznie mniejszy. Powinno to wyglądać tak:

Ładowanie gist 2b693721668dba8bcc578b8de9824642

Zauważ, że może to wyglądać trochę dziwnie, ponieważ masz pewne elementy (np. ciało oraz główna div), które otwierają się w jednym pliku i zamykają w innym. Nie martw się o to – przyzwyczaisz się do tego, gdy już pracujesz z plikami motywów przez jakiś czas!

Tworzenie Większej Ilości Plików Szablonów

Obecnie nasz motyw ma tylko jeden plik szablonu – indeks.php. Chociaż jest to wystarczające, aby nasz motyw działał, będzie działał lepiej, jeśli będziemy mieli więcej. Dodajmy je.

Tworzenie pliku szablonu dla stron statycznych

Zrób duplikat swojego indeks.php file and call it strona.php. Będzie to teraz plik szablonu, którego WordPress używa do wyświetlania statycznych stron. Ale teraz jest identyczny. Zmiany, które chcemy wprowadzić, są w pętli, więc będziemy musieli również utworzyć nową wersję tego.

Zduplikuj swój pętla.php plik (wewnątrz zawiera folder) i nazwać go loop-page.php.

Teraz otwórz swój strona.php plik i znajdź tę linię:

Ładowanie gist 2b693721668dba8bcc578b8de9824642

Edytuj to tak, żeby wyglądało to tak:

Ładowanie gist 2b693721668dba8bcc578b8de9824642

To wykorzystuje get_template_part() funkcja pobierania loop-page.php plik. Jeśli to nie istnieje, załaduje się pętla.php.

Dobrym pomysłem jest również edytowanie komentarzy u góry strona.php plik:

Ładowanie gist 2b693721668dba8bcc578b8de9824642

Teraz zamknij strona.php i otwarte loop-page.php.

Usunąć wejście-meta div:

Ładowanie gist 2b693721668dba8bcc578b8de9824642

Teraz w tytule strony usuń link do strony – nie potrzebujesz tego, ponieważ każdy, kto patrzy na zawartość tego pliku, będzie już na stronie, do której prowadzi. Edytuj kod tytułowy, aby wyglądał tak:

Ładowanie gist 2b693721668dba8bcc578b8de9824642

Teraz zapisz swoje loop-page.php plik.

Tworzenie pliku szablonu dla stron archiwalnych

Teraz zrób kopię swojego indeks.php file and call it archiwum.php. Spowoduje to wyświetlenie wszystkich stron archiwalnych, w tym głównej strony bloga i dowolnych archiwów kategorii lub tagów, a także archiwów dat.

Otwórz archiwum.php plik, aby nadać mu tytuł. Dodaj, że nad edytowanym wywołaniem pliku pętli:

Ładowanie gist 2b693721668dba8bcc578b8de9824642

Jeśli już śledzisz, będziesz wiedzieć, że oznacza to, że musimy utworzyć nową wersję pętla.php zwany loop-archiwum.php. Utwórz go teraz, otwórz go i Edytuj, aby zmienić h2 tagi do h3 tagi. Wyjmij też sekcję komentarzy. Twój loop-archiwum.php plik będzie wyglądał następująco:

Ładowanie gist 2b693721668dba8bcc578b8de9824642

To wyświetli Twoje posty na stronach archiwalnych, używając odpowiedniej hierarchii dla Twoich nagłówków w HTML i bez komentarzy, których nie chcesz na stronach archiwalnych.

Tworzenie pliku szablonu dla pojedynczych postów

Na koniec stwórzmy plik szablonu dla pojedynczych postów. Duplikat indeks.php i nazwij to singiel.php. Duplikat pętla.php i nazwij to pętla-singel.php.

Edytuj swój nowy singiel.php plik tak wygląda:

Ładowanie gist 2b693721668dba8bcc578b8de9824642

Następnie w pętla-singel.php plik, edytuj tylko tytuł, aby usunąć link:

Ładowanie gist 2b693721668dba8bcc578b8de9824642

Teraz zapisz wszystkie swoje pliki.

Teraz Nasz Motyw Ma Pliki Szablonów

Nasz motyw ma teraz wiele plików szablonów i plików dołączania i jest odpowiednio skonstruowany. Jeśli chcesz, możesz dodać dodatkowe pliki szablonów zgodnie z hierarchią szablonów WordPress. Przekonasz się, że masz wszystkie potrzebne pliki pętli, więc jeśli dodasz nowe pliki szablonów, możesz użyć tych plików pętli. Na przykład, jeśli dodałeś Kategoria.php plik, możesz zadzwonić loop-archiwum.php.

W następnej części przejdziemy do dodawania menu nawigacyjnego i obszarów widżetów, a Plik funkcji działa poprawnie.

Jak korzystać z plików szablonów w swoich szablonach? Daj nam znać w komentarzach!

Tagi:

You May Also Like

Jak naprawić nieprawidłowy błąd JSON w WordPress (Przewodnik dla początkujących)

W artykule: Co powoduje błąd “nieprawidłowa odpowiedź JSON” w WordPress?1. Sprawdź adresy…

Jak naprawić błąd krytyczny w WordPress (krok po kroku)

W artykule: Co To jest błąd krytyczny w WordPress?Co powoduje krytyczny błąd…

Jak zmienić kolor linku w WordPress (poradnik dla początkujących)

W artykule: Dlaczego Linki Są Ważne?Jak dodawać linki w postach i stronach…

9 Najlepsze Darmowe Wtyczki WordPress Author Bio Box

W artykule: 1. Simple Author Box2. Branda3. Autor postu WP4. Author Bio…