W artykule:
Dla wielu z nas, nasze pierwsze doświadczenie kodowania dla WordPress jest, gdy piszemy nasz pierwszy motyw.
W końcu każda witryna WordPress potrzebuje motywu, a jeśli chcesz czegoś na zamówienie, warto to sam kodować.
Kiedy zaczynałem z WordPress w 2010, nigdy wcześniej nie pracowałem z systemem zarządzania treścią (CMS). Ale zakodowałem wiele HTML i CSS, albo w dużych witrynach, które używały HTML do treści jako części CMS, albo w małych witrynach klienckich, które zbudowałem od podstaw.
Spędziłem tygodnie rozważając plusy i minusy różnych CMSów, z których mogłem korzystać w witrynach klientów (pamiętaj, że było to zanim WordPress stał się dominującą siłą, którą jest dzisiaj) i zdecydowałem się na WordPress z dwóch powodów. Pierwszym z nich była niesamowita społeczność użytkowników i programistów, której wszyscy jesteśmy częścią. A drugi był fakt, że przy pewnym doświadczeniu w HTML nie jest tak trudno stworzyć motyw WordPress.
W tej serii trzech postów przeprowadzę Cię przez proces tworzenia własnego motywu WordPress ze statycznego HTML. Zaczniemy od pojedynczego pliku HTML i arkusza stylów CSS i przekonwertujemy je na motyw WordPress ze wszystkimi dzwonkami i gwizdkami, które pociągają za sobą.
Posty będą działać przez proces w kolejności:
- Tworzenie twojego indeks.php pliku, Dodawanie znaczników szablonu i pętli.
- Tworzenie dodatkowych plików szablonów i części szablonów, takich jak pliki nagłówka, paska bocznego i stopki.
- Dodawanie funkcji, w tym widżetów i menu nawigacyjnego, oraz konfigurowanie pliku funkcji.
W tym poście stworzę pojedynczy plik – indeks.php. Które będą oparte na indeks.html Plik z mojej statycznej strony, ale usunę zawartość i zastąpię ją tagami szablonu i pętlą.
Więc zaczynajmy!
Czego potrzebujesz
Aby kontynuować tę serię, potrzebujesz kilku narzędzi:
- Instalacja rozwojowa WordPress, najlepiej na komputerze lokalnym.
- Edytor kodu.
- Statyczna strona-jeśli nie masz takiej, z której pracujesz, 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.
Kod Startowy
Strona startowa ma tylko dwa pliki-nasz indeks.html oraz styl.css. Celowo utrzymywałem rzeczy proste i używałem ograniczonej wersji mojej strony. Oto jak to wygląda:
Możesz znaleźć zawartość indeks.html oraz styl.css pliki na Githubie-nie zamierzam pokazywać kodu tutaj, ponieważ jest ich dużo!
Uwaga: jest to podstawowy zestaw kodu zaprojektowany, aby pomóc Ci stworzyć własny motyw. Jeśli chcesz go używać do witryn na żywo, prawdopodobnie będziesz musiał dodać dodatkową stylizację itp. do niego. Nie spełnia wymagań katalogu tematycznego. Po prostu użyj go do nauki, a nie do zasilania witryny na żywo.
Konfigurowanie Motywu
Aby utworzyć motyw, potrzebujesz folderu dla niego w instalacji WordPress. Korzystając z edytora kodu lub menedżera plików, przejdź do wp-content / themes i utwórz nowy folder. Nadaj mu dowolne imię. Mam zamiar zadzwonić do mojego wpmudev-theme-part1.
Skopiuj swój indeks.html oraz styl.css pliki do tego folderu. Jeszcze nic nie zrobią, ale wkrótce to zrobią.
Teraz masz folder z dwoma plikami w nim. Zaczynasz!
W tej chwili WordPress nie wie, że masz motyw. Każdy motyw potrzebuje tylko dwóch plików: indeks.php oraz styl.css. Jak zobaczysz podczas śledzenia wraz z tą serią, Zwykle Potrzebujesz więcej niż to, ale motyw będzie działał tylko z dwoma.
Zacznijmy od dodania komentowanego tekstu do arkusza stylów. Otwórz swój styl.pliku css i dodać następujące:
Daje to WordPress informacje, których potrzebuje, aby rozpoznać, że jest to arkusz stylów motywu. Możesz edytować szczegóły, dodając własną nazwę i adres URL oraz zmienić nazwę motywu, jeśli chcesz.
Następną rzeczą do zrobienia jest zmiana nazwy pliku indeks.html plik do indeks.php. Masz teraz dwa pliki, które sprawią, że Twój motyw będzie działał.
Jednak nie dodałeś jeszcze żadnego PHP. Aby to zrobić, musimy dodać kilka tagów szablonu i pętlę. Zróbmy to.
Dodawanie Tagów Szablonu
Znacznik szablonu to specjalna funkcja WordPress, której używasz w pliku szablonu motywu. Może zrobić jedną z wielu różnych rzeczy-aby zobaczyć zakres tagów szablonów w ofercie, sprawdź Kodeks.
Tutaj dodamy tagi szablonu dla dwóch rzeczy:
- Wywołanie arkusza stylów
- Automatycznie generowane klasy i identyfikatory dla CSS
Wywołanie arkusza stylów
W tej chwili, jeśli otworzysz witrynę z aktywowanym nowym motywem, zauważysz, że żadna z Twoich stylizacji się nie ładuje. Tak wygląda mój:
Nie panikuj! Wystarczy dodać wywołanie arkusza stylów do Głowa sekcja Twojego pliku indeksu.
Uwaga: w trzeciej części tej serii pokażę Ci, jak przenieść to do pliku funkcji motywu, co jest najlepszą praktyką. Na razie pracujemy tylko z dwoma plikami: arkuszem stylów i indeksem.plików php, więc będziemy się ich trzymać.)
Otwórz swoje indeks.php plik. Znajdź tę linię:
Edytuj go, aby zamiast wywoływać plik statyczny, używa PHP do załadowania arkusza stylów motywu:
To wykorzystuje bloginfo() tag szablonu, przydatny tag, który pobiera wszelkiego rodzaju informacje o Twojej witrynie z bazy danych. W tym przypadku pobiera adres URL motywu, a następnie uzyskuje dostęp do pliku w tym folderze o nazwie styl.css.
Teraz odśwież stronę główną. Przekonasz się, że Style się ładują. Oto moja strona:
Zauważysz, że wygląda dokładnie jak twoja stara statyczna strona. To nie znaczy, że skończyliśmy – nigdzie w pobliżu! Treść ciągnie się ze statycznej treści w tym indeks.php plik, który poprawimy dodając pętlę. Ale najpierw dodajmy więcej tagów szablonu.
Tworzenie automatycznie generowanych klas i identyfikatorów
To naprawdę przydatne, aby móc uzyskać WordPress automatycznie generować klasy CSS i identyfikatory dla Twoich postów i Twoich < body> element. Oznacza to, że możesz później użyć tych klas do stylizacji, kierowania określonych typów postów,kategorii i innych.
Otwórz swój indeks.php plik. Znajdź otwarcie < body> tag. Będzie siedział na własnej linii, po zamknięciu < / head> tag.
Edytuj to tak, żeby wyglądało to tak:
To wykorzystuje body_class() znacznik szablonu, który wykryje, na jakiej stronie w danym momencie znajdują się odwiedzający Twoją witrynę i wygeneruje na tej podstawie klasy CSS.
Jeśli odświeżysz stronę i sprawdzisz kod, przekonasz się, że WordPress automatycznie dodaje dla Ciebie kilka klas CSS:
Mogą się one różnić w zależności od strony, na której się znajdujesz i rodzaju wyświetlanych treści. Możesz użyć tego do kierowania CSS do określonych typów treści, takich jak pojedyncze posty, określone kategorie lub cokolwiek chcesz.
Edytuj ten wiersz tak, aby brzmiał tak:
Używa To dwóch znaczników szablonu:
- Na
the_ID ()tag pobiera identyfikator postu i używa go, aby nadać postowi unikalny identyfikator. - Na
post_class()tag działa w podobny sposób jakbody_class()tag, dodając listę klas do elementu article, które odpowiadają typowi tego postu. Zauważ, że w tej chwili nie będzie to działać poprawnie, ponieważ nie pobierasz posta z bazy danych – ale kiedy dodamy pętlę dalej, będzie.
Dodawanie pętli
Teraz zabawa. W tej chwili zawartość twojej strony jest zakodowana. Chcesz, aby został wypełniony z połączenia do bazy danych, tak, że poprawna treść będzie wyświetlana niezależnie od strony jesteś na.
W Twoim indeks.php pliku, Znajdź kod wewnątrz < artykuł> tag (ten, który już dodałeś ID i zamykasz tagami szablonu).
Edytuj ten kod tak, aby wyglądał tak:
Jest tam dużo kodu-jeśli chcesz zrozumieć, o co chodzi, sprawdź nasz post wyjaśniający pętlę.
Teraz, jeśli odświeżysz swoją stronę główną, zobaczysz bardzo różne treści – Twoje posty. Jeśli jest to zupełnie nowa instalacja WordPressa, zobaczysz domyślny post dodany podczas instalacji WordPressa:
Dodawanie Haków
Ostatnim krokiem w tej pierwszej części naszej serii jest dodanie kilku ważnych hooków do naszego kodu. Są one umieszczone w Głowa sekcja i stopka, i są niezbędne dla wielu wtyczek do pracy.
W Twoim Głowa sekcji, dodaj to przed zamknięciem < / head> / tag:
Teraz przejdź do końca indeksu.plik php. Przed zamknięciem < / body> tag, Dodaj wp_footer() hak:
Dodaje to specjalny haczyk na górze i na dole każdej strony w witrynie – są one niezbędne do prawidłowego działania motywów i witryny, więc nie pomijaj ich.
Teraz zapisz swój plik.
Co Dalej
Masz teraz początki motywu WordPress. Jednak jest jeszcze Praca do zrobienia. W następnej części tej serii przeprowadzę Cię przez proces dzielenia motywu na wiele plików szablonów. Utworzysz osobne pliki dla nagłówka, paska bocznego i stopki, plik zawierający pętlę oraz osobny plik dla każdej strony i Archiwum.
Tagi:
