Vodič za WordPress: Kako stvoriti WordPress temu iz HTML-a (2. dio)

  1. 1. Vodič za WordPress: Kako stvoriti WordPress temu iz HTML-a (1. dio)
  2. 2. Trenutno čitam: Vodič za WordPress: Kako stvoriti WordPress temu iz HTML-a (2. dio)
  3. 3. Uvod u anatomiju WordPress teme

U prvom dijelu ovog vodiča obradili smo osnove pretvaranja HTML predloška u WordPress temu. Ako ste i najmanji znatiželjnik, naučili smo nekoliko stvari o dijeljenju HTML predložaka u PHP datoteke, njihovom ponovnom sastavljanju, oblikovanju i imenovanju WordPress tema. Zaista smo puno naučili, a vi ćete se htjeti upoznati s konceptima koje smo opisali u našem prvom vodiču kako biste uživali u ovom drugom posluživanju. U današnjem postu uzimat ćemo stvari znatno višim. Pokrivat ćemo još nekoliko područja tako da možete stvoriti potpuno funkcionalnu WordPress temu. Dakle, bez daljnjeg divljanja, evo nas.


Konfiguriranje slika i JavaScript datoteka

Ako ste imali slike u izvornom HTML predlošku (index.html), vjerojatno ste primijetili da su se prestali prikazivati ​​nakon rezanja predloška u PHP datoteke. Ne brinite se uopće, to je samo takav PHP. Na primjer, ako ste imali logotip u zaglavlju, tako …

your_logo_alt_text

… morat ćete se malo poigrati s kôdom. Kôd koji ću vam otkriti u trenu pomoći će preglednicima da pronađu vaš logotip (ili bilo koju drugu sliku) u vašem slika mapu koja je (ili bi trebala biti) podmapa glavnog direktorija vaše teme. Dakle, za prikaz vašeg logotipa u odjeljku zaglavlja otvorite datoteku header.php i gornji kôd zamijenite sljedećim:

your_logo_alt_text

Funkcija get_template_directory_uri () vraća URL za direktorij tema. Dakle, ako svoj logotip dodate u mapu sa slikama, tada će kôd zgrabiti taj logotip.

Primjećujete li razliku? Očito će ovaj dio koda popraviti samo vaš logo. Da biste popravili ostale slike, morat ćete na sličan način preraditi njihove kodove. Jednostavne grašak.

Prijeđite na JavaScript. Ako je vaša HTML web lokacija koristila JavaScript, stvorite mapu pod nazivom js i tamo stavi svoje skripte. Možete ih pozvati u datoteku header.php koristeći sljedeći kôd:

Gornji kod koristi example.js kao ilustracija. Ne zaboravite zamijeniti taj dio s imenom vaše JavaScript datoteke.

Ako, ako stvarate temu za nekog drugog, doista biste trebali učitati svoje js datoteke wp_enqueue_scripts. Provjerite postove AJ-a o dodavanju JavaScripta u WordPress teme za više informacija i savjeta.

Datoteke predložaka

U prvom dijelu ovog vodiča, naime, spomenuli smo četiri osnovne datoteke predloška index.php, header.php, sidebar.php i footer.php. Datoteke predložaka kontroliraju način prikazivanja vaše web stranice na webu. Predlošci dobivaju informacije iz MySQL baze podataka WordPress-a i prevode ih u HTML kôd koji se prikazuje u web preglednicima. Drugim riječima, datoteke predložaka su sastavni dijelovi WordPress tema. Da bismo bolje razumjeli predloške, prodremo u koncept poznat kao predložak hijerarhija.

Koristit ćemo analogiju. Ako posjetitelj klikne na kategorijsku vezu (tj. Poveznicu na kategoriju), kao što je http://www.yoursite.com/blog/category/your-category/, WordPress koristi hijerarhiju predložaka za generiranje prave datoteke (i sadržaja) kao objašnjeno u nastavku:

  • Prvo, WordPress će tražiti datoteku predloška koja odgovara ID-u kategorije
  • Ako je, primjerice, ID kategorije 2, WordPress će tražiti datoteku predloška pod nazivom kategorija-2.php
  • Ako kategorija-2.php nije dostupna, WordPress će potražiti datoteku predloška generičke kategorije poput kategorije.php
  • Ako i ova datoteka predloška nije dostupna, WordPress će tražiti generički predložak arhive, poput archive.php
  • Ako predložak generičke arhive ne postoji, WordPress će se vratiti na datoteku glavne predloške, index.php

Tako funkcioniraju WordPress predloške, a te datoteke možete koristiti za prilagodbu svoje WordPress teme prema svojim potrebama. Ostale datoteke predloška uključuju:

home.php ili index.phpKoristi se za prikazivanje indeksa blogova
prednji page.phpKoristi se za prikazivanje statičnih stranica ili najnovijih postova postavljenih na prikazima na naslovnoj stranici
single.phpKoristi se za prikaz jedne stranice posta
single {post-tipa} .phpKoristi se za prikazivanje prilagođenih vrsta posta, npr. ako je post-tip proizvod, WordPress bi upotrijebio single-product.php
page.phpKoristi se za prikazivanje statičkih stranica
kategorija.php ili arhiva.phpKoristi se za prikaz indeksa Arhiva kategorija
author.phpKoristi se za prikaz autora
date.phpKoristi se za prikaz datuma
search.phpKoristi se za prikazivanje rezultata pretraživanja
404.phpKoristi se za prikaz stranice o pogrešci poslužitelja 404

Ovo je samo kratki popis, postoje i mnogi drugi Predlošci WordPressa. Tema predložaka je velika, a najbolji način da naučite igrati s datotekama predložaka je čitanjem opsežnih Razvoj tema knjižnica na WordPressu. Alternativno, možete pročitati i kraće Odjeljak za predloške u WordPress Codexu.

Oznake predloška

Budući da smo upravo predstavili Predložene datoteke, jedino je fer spomenuti nešto ili dvije o oznakama predložaka i ulozi koju oni igraju u WordPress temi. Prema WordPress.org, “… oznake predložaka koriste se unutar predloška bloga za dinamičko prikazivanje informacija ili na drugi način prilagođavanje bloga pružajući alate kako bi ih učinili što individualnijima i zanimljivijima.”

U našem prethodnom vodiču upoznali ste nekoliko oznaka predložaka poput get_header, get_sidebar, get_footer i bloginfo. U sljedećem ćemo odjeljku dodati nekoliko oznaka predložaka našoj novostvorenoj WordPress temi. Pretpostavljam da ste već uključili DOCTYPE deklaraciju u svoju header.php datoteku. Ako još niste, evo koda:

Izjava DOCTYPE daje značenje vašem HTML kodu. Izbjegavajući to, modificirajte početnu HTML oznaku. Uključit ćemo atribut lang koristeći language_attributes oznaka ovako:

Gornji kod generira sljedeće:

Kad je na mjestu postavljena oznaka DOCTYPE i oznaka language_attribute, struktura vaše teme je zakonita i preglednici će razumjeti vaš kôd. Ako stvarate temu za blog, važno je da u glavu stavite poveznice na svoj pingback i RSS feed. U svoj header.php dodajte sljedeći kôd:

Jeste li primijetili kako zapošljavamo zaposlenike bloginfo tag kako biste uključili RSS feed (‘rss2_url’) i pingback (‘pingback_url’)? Prije spremanja datoteke header.php dodajte i sljedeći kôd:

Gornja oznaka wp_head povlači tablice stilova i JavaScript datoteke potrebne za vaše dodatke. Ako izostavite ovaj mali dio koda, vaši dodaci možda neće raditi po želji. Izbjegavajući to, dodajmo naslove stranica u našu WordPress temu koristeći – još jednom – oznakom bloginfo. U svoju header.php datoteku dodajte sljedeći kôd:

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

Prva oznaka wp_title dodat će naslov vaše stranice ili posta a druga oznaka bloginfo (‘ime’) dodati će ime vašeg bloga. Sada kada vaša WordPress tema ima naslove stranica, kako ćemo stvoriti snimku zaslona za našu temu, prepakivati ​​temu i odmoriti se?

Izrada snimke zaslona za vašu temu

Kad ste prvi put postavili svoju testnu temu, sigurno ste primijetili kako joj nedostaje snimka zaslona na WordPress tematskoj ploči. Izgledalo je nevjerojatno, pogotovo ako ste imali druge teme s raznobojnim snimkama zaslona. Ali ne brinite, izrada snimke zaslona za vašu temu vrlo je jednostavna. Samo stvorite sliku pomoću svog omiljenog uređivača slika (npr. Adobe Photoshop) ili snimite svoju temu na zaslonu. Osigurajte da je slika široka 600px i visoka 450px. Spremite sliku kao screenshot.png u mapi s temama. Spremite sve promjene, stisnite mapu teme u ZIP arhivu. Prenesite temu i aktivirajte je da biste vidjeli nove promjene ��

Zaključak

Želim vjerovati da vam je ovaj drugi vodič pružio dublji uvid u stvaranje WordPress teme iz statičkog HTML-a. U skoroj budućnosti upoznat ću vas s ostalim aspektima WordPress teme, ali u međuvremenu sam za vas pripremio sljedeće resurse:

Sretno stvarajući!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me