Wprowadzenie do anatomii motywu WordPress

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

Jakiś czas temu przedstawiliśmy Ci koncepcję tworzenia motywu WordPress z HTML. Podzieliliśmy samouczek na dwie części, a dziś skupimy się na dopracowaniu dwóch samouczków, więc uważaj ten post za trzecią część serii postów. Moim celem jest rozebranie motywu WordPress, aby uzyskać jasny obraz jego działania (motywu).


Ten post zakłada, że ​​masz praktyczną znajomość HTML i CSS. Przejdę dalej i oświadczę, że znajomość HTML i CSS jest niezbędnym warunkiem projektowania motywów WordPress. Jeszcze jedno, ten post nie będzie zawierał wielkich słów i trudnych pojęć – będzie łatwy do zrozumienia, więc bądź przygotowany na dobrą zabawę i naukę.

Trochę HTML Priming

Każda strona HTML jest podzielona na różne części za pomocą

etykietka. Na przykład możesz złamać ciało () Twojej witryny na kilka sekcji, między innymi nawigację, nagłówek, główną treść, pasek boczny i stopkę.

Po utworzeniu strony internetowej w sekcje możesz zamówić (lub uporządkować) sekcje według własnego uznania za pomocą CSS. Ten proces jest znany jako stylizacja i obejmuje dodawanie innych elementów stylu, takich jak kolor, rozmiar, obramowania, efekty specjalne itp. Taka jest moc CSS, która – nawiasem mówiąc – jest skrótem od Kaskadowych Arkuszy Stylów. Gdy połączysz pliki HTMl i CSS i wrzucisz kilka zdjęć, powstanie kompletna strona internetowa.

Rzeczy nie różnią się bardzo od motywów WordPress. Jak widzieliśmy w części 1 Jak utworzyć motyw WordPress z HTML, motywy WordPress są podzielone na różne pliki. Jeśli nie możesz dostrzec podobieństwa w tym miejscu, pozwól mi wyjaśnić.

Statyczne strony HTML dzielą się na działy (które wcześniej nazywaliśmy sekcjami)

tagi (lub tabele, jeśli naprawdę jesteś oldschoolowy). Z drugiej strony motywy WordPress są dzielone na różne pliki php, które są następnie ponownie składane za pomocą znaczników szablonów.

Dlatego zamiast wszystkich elementów treści (nagłówka, głównej zawartości, paska bocznego, stopki itp.) Żyjących w jednym pliku (jak ma to miejsce w przypadku statycznego HTML), każdy z elementów treści (w motywach WordPress) żyje w osobnych plikach.

Tak więc nagłówek będzie dostępny w header.php, pasek boczny znajdzie stronę główną w sidebar.php, główna zawartość będzie dostępna w index.php lub single.php (jeśli jest to post) lub page.php (jeśli jest to strona ). Sekcja stopki będzie dostępna w footer.php i tak dalej.

Czy obserwujesz? Sprawdź poniższą ilustrację:

html-wordpress = struktura

Z naszej powyższej ilustracji, , i nazywane są tagami szablonów. Ich zadaniem jest pobranie nagłówka.php, sidebar.php i footer.php w tej kolejności z katalogu motywów i wyświetlenie zawartości w pliku index.php, a tym samym ukończenie strony internetowej.

Nie pozwól .php rozszerzenie cię przeraża, zawartość w plikach php to tylko kod HTML, który znasz. Na przykład plik header.php może zawierać typową nawigację po liście HTML. Podobnie możesz umieścić typowy kod HTML w footer.php, sidebar.php i index.php.

Możesz także umieścić loop.php funkcja w pliku index.php (lub w dowolnym innym miejscu), aby wyświetlać posty na blogu, ale powinienem zwolnić i wrócić do anatomii motywów WordPress. W części 2 wspomniałem o jednej lub dwóch kwestiach dotyczących tworzenia pętli WordPress z HTML. i porozmawiamy o tym (pętla) i innych funkcjach w przyszłości.

Iść dalej…

Podstawowy motyw WordPress składa się z co najmniej czterech plików szablonów, a mianowicie:

  1. index.php
  2. header.php
  3. sidebar.php
  4. footer.php

Zobaczmy, co wchodzi w każdą z nich magiczny akta:

Plik szablonu Index.php

To jest główny plik, bez którego nie masz działającego motywu WordPress. Jest to pierwszy (lub domyślny) plik, który ładuje się podczas odwiedzania strony internetowej WordPress. Rozważ to jako odpowiednik index.html.

Typowy index.php w motywach WordPress będzie wyglądał następująco:





Możesz dodać pętlę pomiędzy i wyświetlać posty na blogu na stronie głównej (index.php), jak pokazano poniżej:







Plik szablonu Header.php

Te pliki szablonów zawierają kod nagłówka, nawigację i kod nagłówka HTML. Zasadniczo header.php przechowuje wszystko, co chcesz pokazać na górze swojej witryny. Wiesz, takie rzeczy jak tytuł twojej strony i takie tam.

Link do arkusza stylów CSS znajduje się również w pliku header.php. Oto podstawowy przykład header.php:




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






To jest sekcja nagłówka. Umieść tutaj swoje logo i inne szczegóły.

Plik szablonu Sidebar.php

Sidebar.php zawiera wszystko, czego potrzebujesz, aby pojawić się na pasku (ach) bocznym. Pasek boczny zawiera dodatkowe menu, widżety, kategorie, ikony mediów społecznościowych, treści niestandardowe, kod HTML, taki jak reklamy itp.

Sidebar.php może zawierać czysto HTML znaczniki lub wywołania funkcji php w zależności od potrzeb. W związku z tym podstawowy sidebar.php może wyglądać następująco:

Plik szablonu Footer.php

Jak myślisz, co trafia do footer.php? Tutaj możesz umieścić informacje o prawach autorskich, dodatkowe menu, linki, ikony mediów społecznościowych – cokolwiek chcesz! Czy chciałbyś zobaczyć, jak wygląda podstawowy footer.php? Tutaj:

Umieść tutaj swoją stopkę, w tym wywołania funkcji php (w celu pobrania różnych plików szablonów, np. Search.php), jeśli to konieczne.

Zwróć uwagę na i zamykanie tagów w footer.php? Czy potrafisz zgadnąć, dlaczego muszą zostać uwzględnione w footer.php? Podobnie, możesz zgadnąć, dlaczego i tagi otwierające są zawarte w header.php? Daj nam znać swoje domysły w sekcji komentarzy na końcu tego postu ��

Cztery pliki szablonów, które omówiliśmy powyżej, tworzą bardzo prosty motyw WordPress. Istnieje wiele innych plików szablonów; istnieje plik szablonu dla każdego elementu, który widzisz w motywie WordPress, czy to komentarze, wyniki wyszukiwania i strony błędów 404, żeby wymienić tylko kilka.

Aby w pełni zrozumieć anatomię motywu WordPress, musisz zapoznać się z różnymi plikami szablonów. Możesz przeglądać wszystko użyteczne kafelki szablonów w WordPress.

Następnie mamy tagi szablonów, których WordPress używa do pobierania plików szablonów z katalogu motywów. Możesz dowiedzieć się więcej na temat Tagi szablonów i rola, jaką pełnią w WordPress.

Podsumowanie

Motyw WordPress składa się z następujących elementów anatomicznych:

  • Pliki szablonów, takie jak index.php, header.php, search.php, category.php itp
  • Tagi szablonu, takie jak , itp
  • CSS
  • Obrazy i inne pliki multimedialne
  • Pliki JavaScript

A oto ilustracja podsumowująca anatomię motywu WordPress:

Chcesz kontynuować naukę? Sprawdź szczegóły Przewodnik po anatomii motywów w Kodeksie WordPress.

Wniosek

Każdy motyw WordPress, który widzisz w Internecie, ma tę samą anatomiczną strukturę (nawet nasz popularny motyw Total WordPress), który możesz dostosować do własnych potrzeb. Po opanowaniu podstaw tworzenia motywów WordPress nie ma ograniczeń co do tego, co możesz zrobić z / do motywów WordPress.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map