Výučba WordPress: Ako vytvoriť tému WordPress z HTML (2. časť)

  1. 1. Výukový program WordPress: Ako vytvoriť tému WordPress z HTML (1. časť)
  2. 2. Aktuálne čítanie: Výučba WordPress: Ako vytvoriť tému WordPress z HTML (2. časť)
  3. 3. Úvod do anatómie témy WordPress

V prvej časti tohto tutoriálu sme sa venovali základom prevodu šablóny HTML na tému WordPress. Ak ste nepatrne zvedaví, dozvedeli sme sa niekoľko vecí o rozdelení šablón HTML do súborov PHP, ich opätovnom zložení, navrhovaní a pomenovaní tém WordPress. Naozaj sme sa toho veľa naučili a budete sa chcieť zoznámiť s konceptmi, ktoré sme si prečítali v našom prvom tutoriále, aby ste si túto druhú porciu mohli užiť. V dnešnom príspevku budeme brať veci o stupeň vyššie. Pokrývame niekoľko ďalších oblastí, takže si môžete vytvoriť plne funkčnú tému WordPress. Takže, bez ďalších okolkov, ideme.


Konfigurácia obrázkov a súborov JavaScript

Ak ste mali obrázky v pôvodnej šablóne HTML (index.html), pravdepodobne ste si všimli, že sa prestali zobrazovať po nasekaní šablóny na súbory PHP. Nerobte si starosti, je to len spôsob PHP. Napríklad, ak ste v sekcii hlavičky mali podobné logo …

your_logo_alt_text

… budete sa musieť trochu pohrať s kódom. Kód, ktorý odhalím o chvíľu, pomôže prehliadačom nájsť logo (alebo iný obrázok) vo vašom prehliadači snímky priečinok, ktorý je (alebo by mal byť) podpriečinkom hlavného adresára témy. Ak chcete v časti hlavičky zobraziť svoje logo, otvorte súbor header.php a vyššie uvedený kód nahraďte nasledujúcim:

your_logo_alt_text

Funkcia get_template_directory_uri () vráti webovú adresu pre váš adresár témy. Ak teda pridáte svoje logo do priečinka s obrázkami, kód ho uchopí.

Všimnite si nejaký rozdiel? Tento kód samozrejme opraví iba vaše logo. Ak chcete opraviť ďalšie obrázky, budete musieť podobným spôsobom prepísať ich kódy. Ľahké roľnícke veci.

Poďme na JavaScript. Ak váš web HTML používa JavaScript, vytvorte priečinok s názvom js a umiestnite tam svoje skripty. Môžete ich volať v súbore header.php pomocou nasledujúceho kódu:

Vyššie uvedený kód používa example.js ako ilustrácia. Nezabudnite túto časť nahradiť názvom súboru JavaScript.

Samozrejme, ak vytvárate tému pre niekoho iného, ​​mali by ste svoje súbory js skutočne načítať pomocou skriptov wp_enqueue_scripts. Ďalšie informácie a tipy nájdete v príspevkoch AJ o pridávaní JavaScriptu do tém WordPress.

Súbory šablón

V prvej časti tohto tutoriálu sme spomenuli štyri základné súbory šablón index.php, header.php, sidebar.php a footer.php. Súbory šablón určujú, ako sa bude web zobrazovať na webe. Šablóny získavajú informácie z vašej databázy MySQL WordPress a prekladajú ich do kódu HTML, ktorý sa zobrazuje vo webových prehľadávačoch. Inými slovami, súbory šablón sú stavebnými kameňmi tém WordPress. Aby sme lepšie porozumeli šablónam, ponorme sa do koncepcie známej ako šablóna hierarchie.

Použijeme analógiu. Ak návštevník klikne na odkaz na kategóriu (napr. Odkaz na kategóriu), napríklad http://www.yoursite.com/blog/category/your-category/, WordPress použije hierarchiu šablón na vygenerovanie správneho súboru (a obsahu) ako vysvetlené nižšie:

  • Po prvé, WordPress vyhľadá súbor šablóny, ktorý sa zhoduje s ID kategórie
  • Ak je ID kategórie napríklad 2, WordPress vyhľadá súbor šablóny s názvom category-2.php
  • Ak nie je k dispozícii kategória 2.php, WordPress vyhľadá všeobecný súbor šablóny kategórie, ako je kategória.php
  • Ak tento súbor šablóny tiež nie je k dispozícii, WordPress vyhľadá všeobecnú šablónu archívu, napríklad archive.php
  • Ak všeobecná archívna šablóna neexistuje, WordPress sa vráti späť na hlavný súbor šablóny index.php

Takto fungujú šablóny WordPress a pomocou týchto súborov môžete prispôsobiť svoju tému WordPress tak, aby vyhovovala vašim potrebám. Medzi ďalšie súbory šablón patria:

home.php alebo index.phpPoužíva sa na vykreslenie indexu príspevkov blogu
predné page.phpPoužíva sa na vykreslenie statických stránok alebo najnovších príspevkov nastavených na predných stránkach
single.phpPoužíva sa na vykreslenie jednej stránky s príspevkom
jedno {post-typ} phpPoužíva sa na vykreslenie vlastných typov príspevkov, napr. ak bol post-type produkt, WordPress by použil single-product.php
page.phpPoužíva sa na vykreslenie statických stránok
category.php alebo archive.phpPoužíva sa na vykreslenie indexu archívu kategórie
author.phpPoužíva sa na vykreslenie autora
date.phpPoužíva sa na vykreslenie dátumu
search.phpPoužíva sa na vykreslenie výsledkov vyhľadávania
404.phpPoužíva sa na vykreslenie chybovej stránky servera 404

Toto je len krátky zoznam, existuje mnoho ďalších WordPress šablóny. Téma šablón je veľká a najlepší spôsob, ako sa naučiť hrať so súbormi šablón, je prečítanie rozsiahlych textov Téma rozvoj knižnica na WordPress. Prípadne si môžete prečítať kratšie Sekcia šablón na WordPress Codex.

Značky šablón

Keďže sme práve predstavili súbory šablón, je spravodlivé spomenúť niečo o značkách šablón a o úlohe, ktorú zohrávajú v tematike WordPress. Podľa WordPress.org „… značky šablón sa používajú v šablóne blogu na dynamické zobrazovanie informácií alebo na iné prispôsobenie blogu, ktorý poskytuje nástroje na jeho vytvorenie tak individuálneho a zaujímavého, ako ste vy.“

V našom predchádzajúcom návode ste sa stretli s niekoľkými značkami šablón, napríklad get_header, get_sidebar, get_footer a bloginfo. V nasledujúcej časti pridáme k našej novovytvorenej téme WordPress niekoľko značiek šablón. Predpokladám, že ste už do svojho súboru header.php zahrnuli vyhlásenie DOCTYPE. Ak ste tak ešte neurobili, tu je kód:

Vyhlásenie DOCTYPE dáva vášmu HTML kódu zmysel. Ak tak neurobíme, upravme úvodnú značku HTML. Budeme zahrnúť atribút lang pomocou language_attributes tag ako:

Vyššie uvedený kód vygeneruje nasledujúce:

Vďaka deklarácii DOCTYPE a značke language_attribute je štruktúra vašej témy legitímna a prehliadače pochopia váš kód. Ak vytvárate tému pre blog, je dôležité, aby ste do svojej hlavičky umiestnili odkazy na svoju pingback URL a informačný kanál RSS. Do súboru header.php pridajte nasledujúci kód:

Všimli ste si, ako sme zamestnali značka bloginfo zahrnúť informačný kanál RSS („rss2_url“) a pingback („pingback_url“)? Pred uložením súboru header.php pridajte aj nasledujúci kód:

Vyššie uvedená značka wp_head natiahne šablóny štýlov a súbory JavaScript, ktoré vyžadujú vaše doplnky. Ak tento malý kúsok kódu vynecháte, vaše doplnky nemusia fungovať podľa potreby. Ak to znemožníme, pridajme k téme WordPress názvy stránok pomocou znova – pomocou značky bloginfo. Do súboru header.php pridajte nasledujúci kód:

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

Prvá značka wp_title pridá názov stránky alebo príspevku a druhá značka bloginfo („name“)) pridá názov vášho blogu. Teraz, keď má vaša téma WordPress nadpisy stránok, ako to, že vytvoríme snímku obrazovky s našou témou, upravíme obal a odpočineme si?

Vytvorenie snímky obrazovky pre váš motív

Keď ste prvýkrát odovzdali svoju testovaciu tému, musíte si všimnúť, že jej na paneli Téma WordPress chýba snímka obrazovky. Vyzeralo to fádne, najmä ak ste mali iné témy s farebnými snímkami obrazovky. Ale nebojte sa, vytvorenie snímky obrazovky pre vašu tému je veľmi jednoduché. Stačí vytvoriť obrázok pomocou vášho obľúbeného editora obrázkov (napr. Adobe Photoshop) alebo si zobrať obrazovku s témou. Uistite sa, že je váš obrázok široký 600px a vysoký 450px. Uložte obrázok ako Screenshot.png v priečinku s témami. Uložte všetky zmeny a skomprimujte priečinok s témou do archívu ZIP. Odovzdajte tému a aktivujte ho, aby sa zobrazili vaše nové zmeny ��

záver

Chcem veriť, že tento druhý tutoriál vám ponúkol hlbší pohľad na vytvorenie témy WordPress zo statického HTML. V blízkej budúcnosti vás oboznámim s ďalšími aspektmi tematických programov WordPress, ale zatiaľ som pre vás pripravil tieto zdroje:

Happy vytváranie!

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