označiti. Na primjer, možete razbiti tijelo () svoje web stranice u različite odjeljke, kao što su navigacija, zaglavlje, glavni sadržaj, bočna traka i podnožje, između ostalog.
Nakon što svoju web stranicu postavite u odjeljke, možete sortirati (ili organizirati) odjeljke kako god želite pomoću CSS-a. Taj je proces poznat kao stiliziranje, a uključuje dodavanje drugih elemenata stila kao što su boja, veličina, obrubi, posebni efekti i tako dalje. Takva je moć CSS-a, koji je, inače, skraćenica od Cascading Style Sheets. Kada spojite svoje HTML i CSS datoteke i dodate nekoliko slika, na kraju ćete dobiti potpunu web stranicu.
Stvari nisu puno drugačije s WordPress temama. Kao što smo vidjeli u dijelu 1 Od Kako stvoriti WordPress temu iz HTML-a, WordPress teme su podijeljene u različite datoteke. Ako u ovom trenutku ne možete uočiti nikakve sličnosti, dopustite mi da objasnim.
Statičke HTML web stranice podijeljene su na odjele (ono što smo gore nazvali odjeljcima).
etikete (ili tablice ako ste stvarno old school). S druge strane, WordPress teme su podijeljene u različite php datoteke, koje se zatim ponovno spajaju pomoću oznaka predložaka.
Stoga, umjesto da svi elementi tijela (zaglavlje, glavni sadržaj, bočna traka, podnožje, itd.) žive u jednoj datoteci (kao što je slučaj sa statičnim HTML-om), svaki od elemenata tijela (u WordPress temama) živi u zasebnim datotekama.
Dakle, zaglavlje će živjeti u header.php, bočna traka će pronaći početak u sidebar.php, glavni sadržaj će živjeti u index.php ili single.php (ako je post) ili page.php (ako je stranica). ). Odjeljak podnožja će živjeti u footer.php i tako dalje.
Pratite li? Pogledajte sljedeću ilustraciju:
Iz naše prethodne ilustracije, i nazivaju se oznakama šablona. Vaš posao je da tražite header.php, sidebar.php i footer.php tim redoslijedom iz direktorija tema i prikažete sadržaj u svom index.php i na taj način dovršite web stranicu.
Ne dopustite da .php plašim vas, sadržaj unutar php datoteka je samo HTML kod koji vam je poznat. Na primjer, vaš header.php može sadržavati tipičnu HTML navigaciju popisa. Slično, možete staviti tipičan HTML kod u footer.php, sidebar.php i index.php.
Također možete postaviti petlja.php u vašem index.php (ili gdje god želite) za prikaz vaših postova na blogu, ali trebali biste usporiti i vratiti se anatomiji WordPress tema. Spomenuo sam nešto o ciklusu u dijelu 2 o tome kako izraditi WordPress temu iz HTML-a. a o njoj (petlji) i drugim funkcijama ćemo govoriti u budućnosti.
Naprijed…
Osnovna WordPress tema sastoji se od najmanje četiri datoteke predloška, i to:
- index.php
- header.php
- bočna traka.php
- footer.php
Pogledajmo što svaki od njih uključuje čarobni zapisi:
Datoteka predloška Index.php
Ovo je glavna datoteka bez koje nemate radnu WordPress temu. To je prva (ili zadana) datoteka koja se učitava kada posjetite web stranicu WordPress. Smatrajte to ekvivalentom index.html.
Tipičan index.php u WordPress temama izgledat će ovako:
Možete dodati petlju između i za prikaz blog postova na početnoj stranici (index.php) kao što je prikazano u nastavku:
Datoteka predloška Header.php
Ove datoteke predložaka sadrže vaš HTML kod zaglavlja, navigaciju i kod zaglavlja. U osnovi, header.php pohranjuje sve što želite prikazati na vrhu vaše web stranice. Znate, stvari poput naslova vaše web stranice i slične stvari.
Također se povezuje na vašu CSS tablicu stilova u header.php. Evo osnovnog primjera header.php:
"> "> " type="text/css" />
Datoteka predloška Sidebar.php
Sidebar.php sadrži sve što vam je potrebno da se pojavi u vašem barras strane. Bočna traka sadrži dodatne izbornike, widgete, kategorije, ikone društvenih medija, prilagođeni sadržaj, HTML kôd kao što su oglasi itd.
Sidebar.php može sadržavati čiste HTML oznake ili pozive php funkcija ovisno o vašim potrebama. Kao takav, osnovni sidebar.php može izgledati ovako:
Datoteka predloška Footer.php
Što mislite da ide u footer.php? Ovdje možete staviti svoje podatke o autorskim pravima, dodatne izbornike, linkove, ikone društvenih medija, što god želite! Želite li vidjeti kako izgleda osnovni footer.php? Ovdje:
Obratite pažnju na y
