1. 1. Samouczek WordPress: Jak utworzyć motyw WordPress z HTML (część 1)
  2. 2). Teraz czytam: Samouczek WordPress: Jak utworzyć motyw WordPress z HTML (część 2)
  3. 3). Wprowadzenie do anatomii motywu WordPress

W części pierwszej tego samouczka omówiliśmy podstawy konwertowania szablonu HTML na motyw WordPress. Jeśli jesteś bardzo ciekawy, nauczyliśmy się kilku rzeczy na temat dzielenia szablonów HTML na pliki PHP, łączenia ich z powrotem, stylizowania i nadawania nazw motywom WordPress. Naprawdę wiele się nauczyliśmy i będziesz chciał zapoznać się z koncepcjami, które omówiliśmy w naszym pierwszym samouczku, aby cieszyć się tą drugą porcją. W dzisiejszym poście podnosimy poprzeczkę wyżej. Omówimy jeszcze kilka obszarów, abyś mógł stworzyć w pełni funkcjonalny motyw WordPress. Więc bez zbędnych ceregieli, zaczynamy.


Konfigurowanie obrazów i plików JavaScript

Jeśli masz obrazy w oryginalnym szablonie HTML (index.html), prawdopodobnie zauważyłeś, że przestały się wyświetlać po pokrojeniu szablonu na pliki PHP. Nie martw się, taki właśnie jest PHP. Na przykład, jeśli masz logo w sekcji nagłówka, takie jak…

twój tekst_logowy_tekst

… Będziesz musiał trochę pobawić się kodem. Kod, który ujawnię za chwilę, pomoże przeglądarkom znaleźć twoje logo (lub inny obraz) na twoim obrazy folder, który jest (lub powinien być) podfolderem głównego katalogu motywu. Aby wyświetlić swoje logo w sekcji nagłówka, otwórz plik header.php i zastąp powyższy kod następującym kodem:

twój tekst_logowy_tekst

Funkcja get_template_directory_uri () zwraca adres URL katalogu motywów. SO, jeśli dodasz swoje logo do folderu z obrazami, kod pobierze to logo.

Zauważasz jakąś różnicę? Oczywiście ten fragment kodu naprawi tylko twoje logo. Aby naprawić inne obrazy, musisz przepisać ich kody w podobny sposób. Łatwe, pełne smaku rzeczy.

Przejdźmy do JavaScript. Jeśli Twoja witryna HTML korzysta z JavaScript, utwórz folder o nazwie js i umieść tam swoje skrypty. Możesz je wywołać w pliku header.php, używając następującego kodu:

Powyższy kod wykorzystuje przyklad.js jako ilustracja. Nie zapomnij zastąpić tej części nazwą pliku JavaScript.

Oczywiście, jeśli tworzysz motyw dla kogoś innego, naprawdę powinieneś załadować swoje pliki js za pomocą wp_enqueue_scripts. Zapoznaj się z postami AJ na temat dodawania JavaScript do motywów WordPress, aby uzyskać więcej informacji i wskazówek.

Pliki szablonów

W części pierwszej tego samouczka wymieniliśmy cztery podstawowe pliki szablonów, a mianowicie index.php, header.php, sidebar.php i footer.php. Pliki szablonów kontrolują sposób wyświetlania witryny w sieci. Szablony pobierają informacje z bazy danych MySQL WordPressa i tłumaczą je na kod HTML wyświetlany w przeglądarkach internetowych. Innymi słowy, pliki szablonów są elementami składowymi motywów WordPress. Aby lepiej zrozumieć szablony, zajrzyjmy do koncepcji znanej jako hierarchia szablonów.

Użyjemy analogii. Jeśli użytkownik kliknie link kategorii (tj. Link do kategorii), taki jak http://www.yoursite.com/blog/category/your-category/, WordPress wykorzystuje hierarchię szablonów do wygenerowania odpowiedniego pliku (i treści) jako wyjaśnione poniżej:

  • Po pierwsze, WordPress wyszuka plik szablonu, który pasuje do identyfikatora kategorii
  • Jeśli identyfikator kategorii to, na przykład 2, WordPress wyszuka plik szablonu o nazwie category-2.php
  • Jeśli kategoria-2.php jest niedostępna, WordPress wybierze ogólny szablon szablonu kategorii, taki jak kategoria.php
  • Jeśli ten plik szablonu jest również niedostępny, WordPress wyszuka ogólny szablon archiwum, taki jak archive.php
  • Jeśli ogólny szablon archiwum nie istnieje, WordPress powróci do głównego pliku szablonu, index.php

Tak działają szablony WordPress i możesz użyć tych plików, aby dostosować motyw WordPress do własnych potrzeb. Inne pliki szablonów obejmują:

home.php lub index.phpSłuży do wyświetlania indeksu postów na blogu
front-page.phpSłuży do renderowania stron statycznych lub najnowszych postów zgodnie z ustawieniami na stronach początkowych
single.phpSłuży do renderowania pojedynczej strony postu
single- {post-type} .phpSłuży do renderowania niestandardowych typów postów, np. jeśli post-type był produktem, WordPress użyłby single-product.php
page.phpSłuży do renderowania stron statycznych
category.php lub archive.phpSłuży do renderowania indeksu archiwum kategorii
autor.phpSłuży do renderowania autora
date.phpSłuży do wyświetlania daty
search.phpSłuży do wyświetlania wyników wyszukiwania
404.phpSłuży do renderowania strony błędu serwera 404

To tylko krótka lista, jest wiele innych Szablony WordPress. Temat szablonów jest duży, a najlepszym sposobem na naukę gry z plikami szablonów jest przeczytanie obszernego Opracowywanie motywów biblioteka w WordPress. Alternatywnie możesz przeczytać krótszy Sekcja szablonów w WordPress Codex.

Tagi szablonów

Widząc, że właśnie wprowadziliśmy Pliki szablonów, sprawiedliwe jest tylko wspomnienie o kilku elementach tagów szablonów i roli, jaką odgrywają w tematyce WordPress. Według WordPress.org „… w szablonie bloga używane są tagi szablonu, aby dynamicznie wyświetlać informacje lub w inny sposób dostosowywać bloga, zapewniając narzędzia, dzięki którym jest on tak indywidualny i interesujący jak Ty”.

W naszym poprzednim samouczku poznałeś kilka tagów szablonów, takich jak get_header, get_sidebar, get_footer i bloginfo. W poniższej sekcji dodamy kilka tagów szablonów do naszego nowo utworzonego motywu WordPress. Zakładam, że już załączyłeś deklarację DOCTYPE do pliku header.php. Jeśli nie, oto kod:

Deklaracja DOCTYPE nadaje znaczenie Twojemu kodowi HTML. W ten sposób zmodyfikujmy otwierający tag HTML. Uwzględnimy atrybut lang za pomocą tag language_attributes tak:

Powyższy kod wygeneruje:

Po wprowadzeniu deklaracji DOCTYPE i tagu language_attribute struktura motywu jest poprawna, a przeglądarki zrozumieją Twój kod. Jeśli tworzysz motyw dla bloga, ważne jest, aby umieścić w głowie linki do swojego pingback URL i kanału RSS. W pliku header.php dodaj następujący kod:

Czy zauważyłeś, jak zastosowaliśmy tag bloginfo dołączyć kanał RSS („rss2_url”) i pingback („pingback_url”)? Przed zapisaniem pliku header.php dodaj również następujący kod:

Powyższy tag wp_head pobierze arkusze stylów i pliki JavaScript wymagane przez twoje wtyczki. Jeśli pominiesz ten niewielki fragment kodu, wtyczki mogą nie działać zgodnie z oczekiwaniami. W ten sposób dodajmy tytuły stron do naszego motywu WordPress za pomocą – ponownie – tagu bloginfo. W pliku header.php dodaj następujący kod:

<?php wp_title( '|', true, 'right' ); ?><?php bloginfo('name'); ?>

Pierwszy tag wp_title doda tytuł strony lub posta i drugi tag bloginfo („name”) doda nazwę Twojego bloga. Teraz, gdy Twój motyw WordPress ma tytuły stron, może utworzymy zrzut ekranu dla naszego motywu, przepakujemy go i odpoczniemy?

Tworzenie zrzutu ekranu dla Twojego motywu

Kiedy przesłałeś swój motyw testowy po raz pierwszy, musiałeś zauważyć, że nie ma zrzutu ekranu w panelu motywów WordPress. Wyglądał ponuro, zwłaszcza jeśli masz inne motywy z kolorowymi zrzutami ekranu. Ale nie martw się, tworzenie zrzutu ekranu dla twojego motywu jest bardzo łatwe. Wystarczy utworzyć obraz za pomocą swojego ulubionego edytora obrazów (np. Adobe Photoshop) lub zrobić zrzut ekranu z motywem. Upewnij się, że obraz ma szerokość 600 pikseli i wysokość 450 pikseli. Zapisz obraz jako screenshot.png w folderze motywów. Zapisz wszystkie zmiany, skompresuj folder motywu do archiwum ZIP. Prześlij motyw i aktywuj go, aby zobaczyć nowe zmiany ��

Wniosek

Chcę wierzyć, że ten drugi samouczek zapewnił głębszy wgląd w tworzenie motywu WordPress ze statycznego HTML. W najbliższej przyszłości przedstawię Ci inne aspekty tematów WordPress, ale w międzyczasie przygotowałem dla Ciebie następujące zasoby:

Miłego tworzenia!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me