Uvod v anatomijo WordPress teme

  1. 1. Vodič za WordPress: Kako ustvariti WordPress temo iz HTML-ja (1. del)
  2. 2. Vodič za WordPress: Kako ustvariti WordPress temo iz HTML-ja (2. del)
  3. 3. Trenutno bere: Uvod v anatomijo WordPress teme

Pred časom smo vam predstavili koncept ustvarjanja teme WordPress iz HTML-ja. Vadnico razdelimo na dva dela, danes pa smo vse o vajah izoblikovali, zato prosimo, da to objavo obravnavate kot tretjo post v seriji objav. Moj cilj je ločiti temo WordPress, da vam predstavim jasno sliko, kako to (tema) deluje.


Ta objava predvideva, da imate dobro znanje HTML in CSS. Bom nadaljeval in izjavil, da je znanje HTML in CSS predpogoj za oblikovanje tem WordPress. Še nekaj: ta objava bo ostala brez velikih besed in težkih konceptov – zlahka bo razumljiva, zato se pripravite na zabavo in učenje.

Majhna uporaba HTML-ja

Vsaka spletna stran HTML je razdeljena na različne dele s pomočjo

oznaka. Na primer, lahko razbijete telo () vašega spletnega mesta v več razdelkih, kot so navigacija, glava, glavna vsebina, stranska vrstica in podnožje.

Ko imate spletno stran v razdelkih, lahko naročite (ali uredite) razdelke po želji s pomočjo CSS-ja. Ta postopek je znan kot styling in vključuje dodajanje drugih elementov stila, kot so barva, velikost, obrobe, posebni učinki itd. Takšna je moč CSS, ki je – mimogrede – kratek za kaskadne tabele. Ko svoje datoteke HTMl in CSS sestavite in vržete par slik, ste na koncu popolno spletno mesto.

S temami WordPress se stvari ne razlikujejo zelo dobro. Kot smo videli v 1. delu Kako ustvariti WordPress temo iz HTML-ja, so teme WordPress razdeljene na različne datoteke. Če trenutno ne morete opaziti podobnosti, mi dovolite, da vam razložim.

Statične spletne strani HTML so razdeljene na oddelke (po tem, kar smo prej imenovali odseke)

oznake (ali tabele, če ste res stara šola). Po drugi strani so teme WordPress razdeljene na različne datoteke php, ki jih nato znova sestavimo z uporabo predloge.

Zato namesto da vsi elementi telesa (glava, glavna vsebina, stranska vrstica, podnožje itd.) Živijo v eni datoteki (kot je to primer s statičnim HTML), vsak element telesa (v temah WordPressa) živi v ločenih datotekah.

Torej bo glava živela v header.php, stranska vrstica bo našla dom v sidebar.php, glavna vsebina pa bo v indeksu.php ali single.php (če je to objava) ali page.php (če gre za stran ). Odsek podnožja bo prikazan v footer.php in tako naprej.

Spremljate? Oglejte si spodnjo ilustracijo:

html-wordpress = struktura

Iz naše zgornje ilustracije, , in se imenujejo predloge oznak. Njihovo delo je, da v tem vrstnem redu v svojem tematskem imeniku pridobijo header.php, sidebar.php in footer.php v tem zaporedju in prikažejo vsebino v indeksu.php ter tako dopolnijo spletno stran.

Ne pusti .php vas razširitev prestraši, da je vsebina v php datotekah le HTML koda, ki jo poznate. Na primer, header.php lahko vsebuje značilne navigacije po seznamu HTML. Podobno lahko v tipično kodo HTML postavite footer.php, sidebar.php in index.php.

Prav tako lahko postavite zanka.php v svojem index.php (ali kjer koli želite), da prikažete svoje blogovske objave, vendar bi se moral upočasniti in se vrniti k anatomiji tem WordPress. Nekaj ​​ali dve o zanki sem omenil v drugem delu, kako ustvariti temo WordPress iz HTML-ja. o njej (zanka) in drugih funkcijah pa se bomo pogovarjali v prihodnosti.

Iti naprej…

Osnovno temo WordPress sestavljajo vsaj štiri datoteke predloge, in sicer:

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

Poglejmo, kaj spada v vsako od teh čarobno datoteke:

Datoteka predloge Index.php

To je glavna datoteka, brez katere nimate delujoče teme WordPress. To je prva (ali privzeta) datoteka, ki se naloži ob obisku spletnega mesta WordPress. Upoštevajte ga kot ekvivalent index.html.

Tipičen index.php v WordPress temah bo izgledal tako:





Zanko lahko dodate med in za prikazovanje blogov na domači strani (index.php), kot je prikazano spodaj:




Datoteka predloge Header.php

Te datoteke predloge vsebujejo glavo, kodo in navigacijsko kodo HTML. V bistvu header.php shrani vse, kar želite prikazati na vrhu svojega spletnega mesta. Veste, stvari, kot je naslov vašega spletnega mesta, in podobne stvari.

Prav tako se v header.php povežete s svojo tabelo stilov CSS. Tu je osnovni primer header.php:





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







To je naslov razdelka. Tukaj dodajte svoj logotip in druge podrobnosti.

Datoteka predloge Sidebar.php

Sidebar.php vsebuje vse, kar potrebujete za prikaz na svoji stranski vrstici. Stranska vrstica vsebuje dodatne menije, pripomočke, kategorije, ikone socialnih medijev, vsebino po meri, kodo HTML, kot so oglasi itd..

Sidebar.php lahko vsebuje čiste oznake HTML ali klice funkcij php, odvisno od vaših potreb. Osnovni sidebar.php bi lahko izgledal tako:

Datoteka predloge Footer.php

Kaj mislite, da gre v footer.php? Tu lahko postavite podatke o avtorskih pravicah, dodatne menije, povezave, ikone družbenih medijev – karkoli želite! Bi radi videli, kako izgleda osnovni footer.php? Tukaj:

Tukaj vstavite svojo nogo vsebine, vključno s klici funkcij php (če želite poiskati različne datoteke predloge, npr. Search.php).

Opazite in zapiranje oznak v footer.php? Ali lahko uganite, zakaj jih je treba vključiti v footer.php? Podobno lahko uganite zakaj in odpiralne oznake so vključene v header.php? Sporočite nam vaša ugibanja v razdelku za komentar na koncu te objave ��

Štiri datoteke predloge, ki smo jih pravkar obravnavali, predstavljajo zelo osnovno temo WordPressa. Obstaja veliko drugih datotek predlog; obstaja datoteka predloge za vsak element, ki ga vidite na WordPress temi, bodisi komentarji, rezultati iskanja in 404 strani z napakami, če omenim le nekaj.

Če želite popolnoma razumeti anatomijo teme WordPress, se morate seznaniti z različnimi datotekami predloge. Vse lahko brskate uporabne ploščice predloge na WordPressu.

Nato imamo oznake predlog, s katerimi WordPress pridobi datoteke s predlogi iz imenika tem. Izveste lahko več o tem predloge oznak in vlogo, ki jo igrajo pri WordPressu.

Povzetek

Tema WordPress je sestavljena iz naslednjih anatomskih elementov:

  • Datoteke predlog, kot so index.php, header.php, search.php, category.php itd
  • Oznake predlog, kot so , itd
  • CSS
  • Slike in druge predstavnostne datoteke
  • Datoteke JavaScript

In tukaj je ilustracija, ki povzema anatomijo teme WordPress:

Želite nadaljevati učenje? Oglejte si podrobne podatke tematski anatomski priročnik v WordPress Codexu.

Zaključek

Vsaka WordPress tema, ki jo vidite v spletu, uporablja isto anatomsko strukturo (celo našo priljubljeno Totalno WordPress temo), ki jo lahko prilagodite svojim potrebam. Ko se ovijete z osnovami razvoja teme WordPress, ni omejitev, kaj lahko storite z / na WordPress teme.

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