Vodič za WordPress: Kako ustvariti WordPress temo iz HTML-ja (2. del)

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

V prvem delu te vadnice smo obravnavali osnove pretvorbe predloge HTML v temo WordPress. Če ste najbolj majceni radovedni, smo izvedeli nekaj o delitvi predlog HTML v datoteke PHP, njihovem združevanju, oblikovanju in poimenovanju tem WordPress. Res smo se veliko naučili, zato se boste želeli seznaniti s koncepti, ki smo jih obravnavali v naši prvi vadnici, da boste uživali v tej drugi postrežbi. V današnjem postu bomo stvari povišali višje. Zajeli bomo še nekaj področij, tako da lahko ustvarite popolnoma funkcionalno temo WordPress. Torej, brez nadaljnjega oboževanja, tu gremo.


Konfiguriranje slik in datotek JavaScript

Če ste imeli slike v izvirni predlogi HTML (index.html), verjetno ste opazili, da so se prenehali prikazovati po sestavljanju predloge v datoteke PHP. Brez skrbi, sploh je PHP. Če imate na primer logotip v razdelku zaglavlja …

vaš_logo_alt_text

… S kodo se boste morali nekoliko poigrati. Koda, ki jo bom razkril v trenutku, bo brskalnikom pomagala najti vaš logotip (ali katero koli drugo sliko) v vašem slike mapo, ki je (ali bi morala biti) podmapa glavnega imenika teme. Torej, če želite prikazati svoj logotip v razdelku za glavo, odprite datoteko header.php in nadomestite zgornjo kodo z naslednjim:

vaš_logo_alt_text

Funkcija get_template_directory_uri () vrne URL za vašo temo. Torej, če dodate svoj logotip v mapo s slikami, bo koda zagrabila ta logotip.

Opažate kakšno razliko? Očitno bo ta del kode popravil samo vaš logotip. Če želite popraviti druge slike, boste morali na podoben način prepisati njihove kode. Enostavne grahove.

Pojdimo na JavaScript. Če je vaše spletno mesto HTML uporabljalo JavaScript, ustvarite mapo z imenom js in tam postavite svoje skripte. Pokličete jih lahko v datoteki header.php z naslednjo kodo:

Zgornja koda uporablja example.js kot ponazoritev. Ne pozabite nadomestiti tega dela z imenom datoteke JavaScript.

Seveda, če ustvarjate temo za koga drugega, morate resnično naložiti svoje datoteke js z wp_enqueue_scripts. Za več informacij in nasvetov si oglejte objave AJ o dodajanju JavaScripta v WordPress teme.

Datoteke predloge

V prvem delu te vadnice smo omenili štiri osnovne datoteke s predlogi index.php, header.php, sidebar.php in footer.php. Datoteke predlog podpirajo, kako bo vaše spletno mesto prikazano v spletu. Predloge dobivajo informacije iz MySQL baze podatkov WordPress in jih prevedejo v kodo HTML, ki je prikazana v spletnih brskalnikih. Z drugimi besedami, predloge so sestavni deli tem WordPress. Da bi bolje razumeli predloge, se poglobimo v koncept, znan kot hierarhija predloge.

Uporabili bomo analogijo. Če obiskovalec klikne povezavo na kategorijo (tj. Povezavo do kategorije), na primer http://www.yoursite.com/blog/category/your-category/, WordPress uporabi hierarhijo predloge za ustvarjanje prave datoteke (in vsebine) kot pojasnjeno spodaj:

  • Najprej bo WordPress poiskal datoteko predloge, ki ustreza ID-ju kategorije
  • Če je na primer ID kategorije 2, bo WordPress poiskal datoteko predloge z imenom kategorija-2.php
  • Če kategorija-2.php ni na voljo, bo WordPress poiskal datoteko s splošnim predlogom kategorije, kot je kategorija.php
  • Če tudi ta datoteka predloge ni na voljo, bo WordPress poiskal splošno predlogo za arhiv, kot je archive.php
  • Če splošne predloge za arhiv ne obstaja, bo WordPress vrnil na glavno datoteko predloge, index.php

Tako delujejo predloge za WordPress in te datoteke lahko uporabite za prilagajanje svoje WordPress teme glede na vaše potrebe. Druge datoteke predloge vključujejo:

home.php ali index.phpUporablja se za upodabljanje indeksa objav na spletnem dnevniku
naslovnica.phpUporablja se za upodabljanje statičnih strani ali najnovejših objav v nastavitvah na sprednji strani
single.phpUporablja se za upodabljanje ene strani objav
eno- {post-type} .phpUporablja se za upodabljanje vrst objav po meri, npr. če bi bil post-type izdelek, bi WordPress uporabil single-product.php
page.phpUporablja se za upodabljanje statičnih strani
kategorija.php ali arhiv.phpUporablja se za upodabljanje indeksa Arhiv kategorij
avtor.phpUporablja se za upodabljanje avtorja
date.phpUporabljen za upodabljanje datuma
search.phpUporablja se za upodabljanje rezultatov iskanja
404.phpUporablja se za prikaz strani o napaki strežnika 404

To je le kratek seznam, veliko je še drugih Predloge WordPress. Tema predlog je velika, najboljši način igranja datotek s predlogi pa je z branjem obširnih Razvoj teme knjižnica pri WordPressu. Lahko pa preberete tudi krajše Oddelek za predloge v WordPress Codexu.

Oznake predlog

Glede na to, da smo pravkar predstavili predloge datotek, je pošteno omeniti nekaj ali dve o oznakah predlog in vlogi, ki jo igrata v WordPress temi. Po besedah ​​WordPress.org se “… oznake predloge uporabljajo v predlogi vašega spletnega dnevnika za dinamično prikazovanje informacij ali kako drugače prilagajanje spletnega dnevnika in zagotavljajo orodja, da postanejo tako individualni kot zanimivi kot ste.”

V naši prejšnji vadnici ste spoznali nekaj oznak predloge, kot so get_header, get_sidebar, get_footer in bloginfo. V naslednjem razdelku bomo dodali nekaj oznak predloge v našo novo ustvarjeno temo WordPress. Predvidevam, da ste že vključili izjavo DOCTYPE v datoteko header.php. Če še niste, je tu koda:

Izjava DOCTYPE pomeni pomen kode HTML. S tem ne bomo več spremenili začetne oznake HTML. Vključili bomo atribut lang z uporabo language_attributes oznaka tako:

Zgornja koda bo ustvarila naslednje:

Z oznako DOCTYPE in oznako language_attribute je vaša tema zakonita in brskalniki bodo razumeli vašo kodo. Če ustvarjate temo za blog, je pomembno, da v glavo postavite povezave do vašega URL-ja pingback in RSS. V svoj header.php dodajte to kodo:

Ste opazili, kako smo zaposlili podjetje bloginfo tag ali želite vključiti vir RSS (‘rss2_url’) in pingback (‘pingback_url’)? Pred shranjevanjem datoteke header.php dodajte tudi to kodo:

Zgornja oznaka wp_head bo vlekla v tabele stilov in datoteke JavaScript, ki jih zahtevajo vtičniki. Če pustite ta majhen delček kode, vaši vtičniki morda ne bodo delovali po želji. S tem ne bomo več dodali naslovov strani v našo WordPress temo z – še enkrat – oznako bloginfo. V datoteko header.php dodajte to kodo:

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

Prva oznaka wp_title bo dodal naslov vaše strani ali objave in druga oznaka bloginfo (“ime”) doda ime vašega spletnega dnevnika. Zdaj, ko ima vaša WordPress tema naslove strani, kako ustvariti posnetek zaslona za našo temo, ponovno pakirati temo in si privoščiti počitek?

Ustvarjanje zaslona za vašo temo

Ko ste prvič naložili svojo preizkusno temo, ste gotovo opazili, da na tematski plošči WordPress ni posnetka zaslona. Izgledalo je brezhibno, še posebej, če imate druge teme s pisanimi posnetki zaslona. Brez skrbi, ustvarjanje posnetka zaslona za vašo temo je zelo enostavno. Samo ustvarite sliko s svojim najljubšim urejevalnikom slik (npr. Adobe Photoshop) ali zajemite temo zaslona. Poskrbite, da bo slika široka 600px in visoka 450px. Sliko shranite kot screenshot.png v mapi teme. Shranite vse spremembe, stisnite tematsko mapo v arhiv ZIP. Naložite temo in jo aktivirajte, da si ogledate svoje nove spremembe ��

Zaključek

Želim verjeti, da vam je ta druga vadnica ponudila globlji vpogled v ustvarjanje teme WordPress iz statičnega HTML-ja. V bližnji prihodnosti vas bom seznanil z drugimi vidiki tematike WordPressa, vmes pa sem za vas pripravil naslednje vire:

Veselo ustvarjanje!

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