Wprowadzenie do anatomii motywu WordPress

W artykule:

Trochę podkręcania HTML
Indeks.plik szablonu php
Nagłówek.plik szablonu php
Pasek boczny.plik szablonu php
Stopka.plik szablonu php
Streszczenie
Wniosek

Jakiś czas temu przedstawiliśmy Ci koncepcję tworzenia motywu WordPress z HTML. Podzieliliśmy samouczek na dwie części, a dziś chodzi o to, aby wyrzeźbić dwa samouczki, więc nie krępuj się traktować tego posta jako trzecią porcję w serii postów. Moim celem jest rozebranie motywu WordPress, aby dać ci jasny obraz tego, jak to działa (motyw).

Ten post zakłada, że masz praktyczną wiedzę na temat HTML i CSS. Będę śmiało i zadeklarować, że posiadanie umiejętności HTML i CSS jest warunkiem wstępnym w projektowaniu motywów WordPress. Jeszcze jedno, ten post pozostanie z dala od wielkich słów i trudnych pojęć – będzie łatwy do zrozumienia, więc bądź gotowy do zabawy i nauki.

Trochę podkręcania HTML

Każda strona HTML jest podzielona na różne części za pomocą tagu < div>. Na przykład możesz podzielić treść (<body>) swojej witryny na kilka sekcji, takich jak nawigacja, nagłówek, główna treść, pasek boczny i stopka.

Gdy masz swoją stronę internetową w sekcjach, możesz zamówić (lub zorganizować) sekcje według własnego uznania za pomocą CSS. Proces ten znany jest jako stylizacja i polega na dodaniu 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. Po umieszczeniu plików HTMl i CSS razem i dorzuceniu kilku obrazów, otrzymasz kompletną stronę internetową.

Rzeczy nie są bardzo różne z WordPress themes. Jak widzieliśmy w części 1, Jak utworzyć motyw WordPress z HTML, motywy WordPress są podzielone na różne pliki. Jeśli nie dostrzegasz w tym momencie podobieństwa, pozwól, że wyjaśnię.

Statyczne strony HTML są podzielone na podziały (tak nazywaliśmy sekcje wcześniej) za pomocą znaczników <div> (lub tabel, jeśli jesteś naprawdę Oldskulowy). Z drugiej strony motywy WordPress są dzielone na różne pliki php, które są następnie łączone za pomocą znaczników szablonów.

Dlatego zamiast mieć wszystkie elementy ciała (nagłówek, główna treść, pasek boczny, stopka itp.) żyjące w jednym pliku (jak w przypadku statycznego HTML), każdy z elementów ciała (w motywach WordPress) żyje w oddzielnych plikach.

Tak więc nagłówek będzie żył w nagłówku.php, pasek boczny znajdzie dom w pasku bocznym.php, główna treść będzie żyła w indeksie.php lub single.php (jeśli jest to post) lub strona.php (jeśli jest to strona). Sekcja stopka będzie żyć w stopce.php i tak dalej.

Nadążasz? Zobacz poniższą ilustrację:

html-wordpress=structure

Z naszej ilustracji powyżej,<?php get_header ();?>, <?php get_sidebar ();?> i<?php get_header ();?> nazywane są tagami szablonów. Ich praca polega na pobraniu nagłówka.php, sidebar.php i stopka.php w tej kolejności z katalogu motywu i wyświetla zawartość w indeksie.php, uzupełniając tym samym stronę www.

Don ’ t let the .php rozszerzenie przeraża cię, zawartość wewnątrz plików php to tylko kod HTML, który znasz. Na przykład twój nagłówek.php może zawierać typową nawigację po liście HTML. Podobnie, możesz umieścić typowy kod HTML w stopce.php, sidebar.php i index.php.

Można również umieścić pętla.php funkcja w indeksie.php (lub gdziekolwiek chcesz), aby wyświetlić swoje posty na blogu, ale powinienem zwolnić i wrócić do anatomii motywów WordPress. Wspomniałem o pętli w części 2, Jak stworzyć motyw WordPress z HTML. i porozmawiamy o tym (pętli) i innych funkcjach w przyszłości.

Moving on…

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

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

Zobaczmy, co się dzieje w każdym z tych magicalpliki:

Indeks.plik szablonu php

Jest to 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 witryny WordPress. Uznaj to za odpowiednik indeksu.html.

Typowy indeks.php w WordPress Themes będzie wyglądać tak:

<?php get_header ();?>

<?php get_sidebar ();?>

<?php get_footer(); ?>

Możesz dodać pętlę pomiędzy <?php get_header (); / > i <?php get_sidebar ();?> aby wyświetlić posty na blogu na stronie głównej (indeks.php) jak pokazano poniżej:

<?php get_header ();?>
< div class = "content">
<?php if ( have_posts ()):?>
<?php while ( have_posts ()): the_post ();?>
	< div id = " post -<?php the_ID ();?>" <?php post_class ();?>>
	< div class = "post-header">
	< div class = "date"><?php the_time ('M j y');?>< / div>
	<H2><a href="<?php the_permalink(); ?> "rel= "bookmark"title=" Stały Link do<?php the_title_attribute(); ?>"><?php the_title(); ?>< / a > < / H2>
	< div class = "author"><?php the_author ();?>< / div>
	< / div><!-- end Post header-->
	< div class = "entry clear">
	<?php if ( function_exists( 'add_theme_support')) the_post_thumbnail ();?>
	<?php the_content ();?>
	<?PHP edit_post_link(); ?>
	<?php wp_link_pages(); ?>
	< / div><!-- end entry-->
	< div class = "post-footer">
	< div class = "komentarze"><?php comments_popup_link ('Dodaj komentarz', '1 komentarz',' % komentarzy');?>< / div>
	< / div><!-- end Post footer-->
	< / div><!-- end post-->
<?PHP endwhile; / * przewiń lub Kontynuuj, jeśli wszystkie posty zostały pobrane*/?>
	< div class = "navigation index">
	< div class = "alignleft"><?php next_posts_link ('Starsze wpisy');?>< / div>
	< div class = "alignright"><?php previous_posts_link ('nowsze wpisy');?>< / div>
	< / div><!-- koniec nawigacji-->
<?PHP else:?>
<?PHP endif;?>
< / div>
<?php get_sidebar ();?>
<?php get_footer(); ?>

Nagłówek.plik szablonu php

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

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

< html>
< head>
	< meta charset="<?PHP bloginfo ('charset');?>">
	< meta name=" viewport "content =" width = device-width">
	< title><?php wp_title( '|', true, 'right');?> < / title>
	< link rel = "profile"href = "http://gmpg.org/xfn/11">
	< link rel = "pingback" href="<?PHP bloginfo ('pingback_url');?>">
	< link rel = "stylesheet" href="<?PHP bloginfo ('stylesheet_url');?> "type=" text / css" / >
	<!-- [if lt IE 9]>
	< script src="<?php echo get_template_directory_uri ();?> / js / html5.js " > < / script>
	<![endif]-->
	<?php wp_head(); ?>
< / head>
< body>
< div class = "header">
<p>to jest sekcja nagłówka. Umieść swoje logo i inne szczegóły tutaj.< / p>
< / div>

Pasek boczny.plik szablonu php

Pasek boczny.php zawiera wszystko, czego potrzebujesz, aby pojawić się na pasku bocznym. Pasek boczny zawiera dodatkowe menu, Widżety, kategorie, ikony mediów społecznościowych, niestandardową treść, kod HTML, taki jak reklamy itp.

Pasek boczny.php może zawierać czysty znacznik HTML lub wywołania funkcji php w zależności od potrzeb. Jako taki, podstawowy pasek boczny.php może wyglądać tak:

< div class = "sidebar">

Umieść tutaj swoją niestandardową treść lub kod HTML.

< / div>

Stopka.plik szablonu php

Jak myślisz, co idzie do stopki.php? Możesz umieścić tutaj Informacje o prawach autorskich, dodatkowe menu, linki – ikony mediów społecznościowych-wszystko, co chcesz! Chcesz zobaczyć, jak podstawowa stopka.PHP wygląda jak? Proszę.:

< footer class = "footer">

Umieść tutaj swoją zawartość stopki, w tym wywołania funkcji php (aby pobrać różne pliki szablonów, np.php) w razie potrzeby.

< / footer>

< / body>

< / html>

Zwróć uwagę na znaczniki zamykające </Body> i < / html > w stopce.php? Czy możesz zgadnąć, dlaczego muszą być zawarte w stopce.php? Podobnie, czy możesz zgadnąć, dlaczego znaczniki otwierające < html > i < body>są zawarte w nagłówku.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 podstawowy motyw WordPress. Istnieje wiele innych plików szablonów; istnieje plik szablonu dla każdego elementu, który widzisz na motywie WordPress, czy to Komentarze, wyniki wyszukiwania i strony błędów 404, aby wymienić tylko kilka.

Aby w pełni zrozumieć anatomię motywu WordPress, musisz zapoznać się z różnymi plikami szablonów. Możesz przeglądać wszystkie użyteczne płytki 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 o tagach szablonów i ich roli w WordPress.

Streszczenie

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

Pliki szablonów, takie jak indeks.php, header.php, Szukaj.php, Kategoria.php itp
Tagi szablonu, takie jak <?php get_header ();?>, <?php get_sidebar ();?> itd
CSS
Obrazy i inne pliki multimedialne
Pliki JavaScript

A oto ilustracja podsumowująca anatomię motywu WordPress:

basic_wordpress_theme_anatomy_wpexplorer1

Chcesz kontynuować naukę? Sprawdź szczegółowy przewodnik anatomii tematu w Kodeksie WordPress.

Wniosek

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