Kielet: বাংলা • englanti • español • 日本語 한국어 • Português do Brasil • Русский • 中文 (简体) •中文 (繁體) • (Lisää kieli)

Tämä artikkeli koskee WordPress-teemojen kehittämistä. Jos haluat lisätietoja teemojen asentamisesta ja käytöstä, katso Teemojen käyttö. Tämä aihe eroaa Teemojen käytöstä, koska siinä keskustellaan koodin kirjoittamisen teknisistä näkökohdista omien teemojen luomiseen pikemminkin kuin siitä, miten teemat aktivoidaan tai mistä uusia teemoja hankitaan.

Miksi WordPress-teemat

WordPress-teemat ovat tiedostoja, jotka toimivat yhdessä WordPress-sivuston suunnittelun ja toiminnallisuuden luominen. Jokainen teema voi olla erilainen, ja se tarjoaa sivuston omistajille monia vaihtoehtoja muuttaa verkkosivustonsa ulkoasua.

Voit halutessasi kehittää WordPress-teemoja omaan käyttöön, esimerkiksi asiakasprojekti tai lähetettävä WordPress-teemahakemistoon. Miksi muuten sinun pitäisi rakentaa WordPress-teema?

• Ainutlaatuisen ilmeen luominen WordPress-sivustollesi.
• Mallien, mallimerkkien ja WordPress Loopin hyödyntäminen eri verkkosivustojen tulosten ja ulkonäön luomiseksi.
• Tarjota vaihtoehtoisia malleja tiettyjä sivuston ominaisuuksia, kuten luokkasivuina ja hakutulossivuina.
• Voit siirtyä nopeasti kahden sivustoasettelun välillä tai hyödyntää teeman tai tyylin vaihtajaa, jotta sivuston omistajat voivat muuttaa sivustosi ulkoasua.

WordPress-teemalla on myös monia etuja.

• Se erottaa esitystyylit ja mallitiedostot järjestelmätiedostoista, jotta sivusto päivittyy ilman dramaattisia muutoksia Sivusto.
• Se mahdollistaa kyseisen teeman ainutlaatuisen sivuston toiminnallisuuden mukauttamisen.
• Se mahdollistaa nopean WordPress-sivuston visuaalisen ulkoasun ja asettelun muuttamisen.
• Se poistaa tarpeen, että tyypillisen WordPress-sivuston omistajan on opittava CSS, HTML ja PHP, jotta hänellä olisi upean näköinen verkkosivusto.

Miksi sinun pitäisi rakentaa oma WordPress-teema? Tämä on todellinen kysymys.

• Se on tilaisuus oppia lisää CSS: stä, HTML: stä ja PHP: stä.
• Se on mahdollisuus laittaa asiantuntemustasi CSS, HTML ja PHP toimimaan.
• Se on luovaa.
• Se on hauskaa (suurimman osan ajasta).
• Jos vapautat sen yleisölle, voit tuntea olosi hyväksi, että jaoit ja annoit jotain takaisin WordPress-yhteisölle (ok, kerskumisoikeudet)

Teemakehitysstandardit

WordPress-teemojen tulisi olla koodattu seuraavilla standardeilla:

• Käytä hyvin jäsenneltyä, virheetöntä PHP: tä ja kelvollista HTML-koodia. Katso WordPress-koodausstandardit.
• Käytä puhdasta, kelvollista CSS: ää. Katso CSS-koodaus Standardit.
• Noudata sivuston suunnittelun ja asettelun suunnitteluohjeita.

Teeman anatomia

WordPress-teemat elävät WordPress-teemahakemiston alihakemistoissa. (wp-content / themes / oletusarvoisesti), jota ei voida siirtää suoraan wp-config.php-tiedostolla. Teeman alihakemisto sisältää kaikki Teeman tyylit eet-tiedostot, mallitiedostot ja valinnaiset funktiotiedosto (functions.php), JavaScript-tiedostot ja kuvat. Esimerkiksi teema nimeltä ”testi” asuisi hakemistossa wp-content / themes / test /. Älä käytä numeroita teeman nimessä, koska se estää sen näkymisen käytettävissä olevassa teemaluettelossa.

WordPress sisältää oletusteeman jokaiseen uuteen asennukseen. Tutki oletusteeman tiedostoja huolellisesti saadaksesi paremman käsityksen omien teematiedostojesi luomisesta.

Katso visuaalinen opas tästä WordPress-teeman anatomian infografiikasta.

WordPress Teemat koostuvat tyypillisesti kolmesta päätyyppisestä tiedostosta kuvien ja JavaScript-tiedostojen lisäksi.

1. Tyylitaulukko nimeltä style.css, joka ohjaa verkkosivujen esitystä (visuaalista suunnittelua ja asettelua).
2. WordPress-mallitiedostot, jotka hallitsevat tapaa, jolla sivustosivut tuottavat tietoja WordPress-tietokannastasi näytettäväksi sivustossa.
3. Valinnainen toimintotiedosto (functions.php) osana WordPress-teematiedostoja.

Tarkastellaan näitä erikseen.

Lapsiteemat

Yksinkertaisin mahdollinen teema on lapsiteema, joka sisältää vain tyylin.css tiedosto ja kaikki kuvat. Tämä on mahdollista, koska se on toisen teeman lapsi, joka toimii vanhempana.

Yksityiskohtainen opas lapsiteemoista on kohdassa Lapsiteemat.

Teema Tyylitaulukko

Teemasi CSS-tyylitietojen lisäksi style.css tarjoaa tietoja teemasta kommenttien muodossa. Tyylitaulukon on annettava yksityiskohdat teemasta kommenttien muodossa. Kahta teemaa ei ole sallitaan olla samat tiedot kuin kommenttiotsikoissaan, koska tämä aiheuttaa ongelmia Teeman valinta -valintaikkunassa. Jos teet oman teeman kopioimalla olemassa olevan, muista muuttaa nämä tiedot ensin.

Seuraava on esimerkki tyylitaulukon ensimmäisistä riveistä, joita kutsutaan tyylitaulukon otsikoiksi, teemalla ”Kaksikymmentä kolmetoista”:

HUOMAUTUS: Kirjoittajan nimi on ehdotti olevan sama kuin teeman tekijän WordPress.org-käyttäjätunnus, vaikka se voi olla myös kirjoittajan oikea nimi. Valinta on Teeman tekijä.

Huomaa luettelo tunnisteista, joita käytetään teeman kuvaamiseen. Niiden avulla käyttäjä voi löytää teeman tagisuodattimen avulla. Löydät täydellisen luettelon Teeman tarkastelukäsikirjasta. .

Style.css-tiedostojen kommenttiotsikkorivit vaaditaan, jotta WordPress pystyy tunnistamaan teeman ja näyttämään sen hallintapaneelin Suunnittelu > Teemat -kohdassa. käytettävissä oleva Teema-vaihtoehto yhdessä muiden asennettujen teemojen kanssa.

Tyylitaulukon ohjeet

• Noudata CSS-koodausstandardeja kirjoittaessasi CSS: ää.
• Käytä kelvollista CSS: ää, kun mahdollista. Käytä poikkeuksellisesti toimittajakohtaisia etuliitteitä CSS3-ominaisuuksien hyödyntämiseen.
• Minimoi CSS-hakkerointi. Ilmeinen poikkeus on selainkohtainen tuki, yleensä IE-versiot. Jos mahdollista, erilliset CSS-hakkerit erilliset osiot tai erilliset tiedostot.
• Kaikkien mahdollisten HTML-elementtien tulee olla tyyliltään teeman mukaisia (ellei se ole aliteema), sekä viestin / sivun sisällössä että yhdessä
  • Taulukot, kuvatekstit, kuvat, luettelot, lainausmerkit jne.
• Tulostukseen sopivien tyylien lisääminen on erittäin suositeltavaa.
  • Voit sisällyttää tulostustyylisivun media = ”print” tai lisätä tulostusmateriaalilohkoon päätyylitaulukkoon.

Funktiotiedosto

Teema voi vaihtoehtoisesti käyttää funktiotiedostoa, joka sijaitsee teeman alihakemistossa ja jonka nimi on function.php. Tämä tiedosto toimii periaatteessa kuin laajennus, ja jos se esiintyy käyttämässäsi teemalla, se ladataan automaattisesti WordPress-alustuksen aikana (sekä järjestelmänvalvojan sivuille että ulkoisille sivuille). Ehdotetut käyttötavat tälle tiedostolle:

• Houkuttele teeman tyylitaulukoita ja komentosarjoja. Katso wp_enqueue_scripts.
• Ota käyttöön teemaominaisuudet, kuten sivupalkit, siirtymisvalikot, postin pikkukuvat, postimuodot, mukautetut otsikot, mukautetut taustat ja muut.
• Määritä toiminnot, joita käytetään useissa mallipohjatiedostoissa. teema.
• Määritä asetusvalikko, joka antaa sivuston omistajille vaihtoehtoja väreille, tyyleille ja muille teeman ominaisuuksille.

WordPress-oletusteema sisältää toiminnot. php-tiedosto, joka määrittelee monet näistä ominaisuuksista, joten kannattaa ehkä käyttää sitä mallina. Koska functions.php toimii periaatteessa laajennuksena, Function_Reference-luettelo on paras paikka saada lisätietoja siitä, mitä voit tehdä tällä tiedostolla.

Huomaa, kun haluat päättää, milloin funktiot lisätään toiminnoille.php tai tiettyyn laajennukseen: Saatat huomata, että tarvitset saman toiminnon, jotta se olisi käytettävissä useammalle kuin yhdelle pääteemalle. Jos näin on, funktio tulisi luoda laajennuksessa funktion.php sijaan tietylle teemalle. Tämä voi sisältää mallimerkkejä ja muita erityistoimintoja. Laajennusten sisältämät toiminnot näkyvät kaikki teemat.

Mallitiedostot

Mallit ovat PHP-lähdetiedostoja, joita käytetään kävijöiden pyytämien sivujen luomiseen, ja ne tulostetaan HTML-muodossa. Mallitiedostot koostuvat HTML-, PHP- ja WordPress-mallitunnisteista.

Tarkastellaan erilaisia malleja, jotka voidaan määrittää osana teemaa.

WordPress antaa sinun määrittää erilliset mallit sivustosi eri osa-alueille. Se ei ole Olennaista on kuitenkin, että kaikki nämä eri mallipohjatiedostot toimivat sivustosi toimiakseen täydellisesti. Mallit valitaan ja luodaan mallihierarkian perusteella sen mukaan, mitä malleja tietyssä teemassa on käytettävissä.

Teemana kehittäjä, voit valita mukautuksen määrän, jonka haluat toteuttaa mallien avulla. Esimerkiksi äärimmäisenä tapana voit käyttää vain yhtä mallipohjatiedostoa nimeltä index.php mallina kaikille sivuston luomille ja näyttämille sivuille. yleisempi käyttö on, että eri mallipohjatiedostot tuottavat erilaisia tuloksia maksimaalisen mukauttamisen mahdollistamiseksi.

Mallitiedostoluettelo

Tässä on luettelo WordPressin tunnistamista teematiedostoista. teemasi voi sisältää mitä tahansa muita tyylitaulukoita, kuvia tai tiedostoja. Muista vain, että Seuraavilla on erityinen merkitys WordPressille – katso lisätietoja mallihierarkiasta.

style.css Päätyylitaulukko. Tämä on sisällytettävä teemaan, ja sen on sisällettävä teeman tietotunniste. rtl.css rtl-tyylitaulukko. Tämä sisällytetään automaattisesti, jos verkkosivuston tekstisuunta on oikealta vasemmalle. Se voidaan luoda käyttämällä RTLer-laajennusta. Index.php Päämalli. Jos Teemasi tarjoaa omat mallit, index.php: n on oltava läsnä. comments.php Kommenttimalli. etusivu.php Etusivumalli. home.php Kotisivumalli, joka on oletusarvoisesti etusivu.Jos käytät staattista etusivua, tämä on sivun malli uusimmilla viesteillä. single.php Yhden viestin malli. Käytetään, kun yksittäistä viestiä kysytään. Tätä ja kaikkia muita kyselymalleja varten käytetään index.php-tiedostoa, jos kyselymallia ei ole. single- {post-type} .php Yhden postin malli, jota käytetään, kun kysytään yksittäistä viestiä mukautetusta postityypistä. Esimerkiksi single-book.php-tiedostoa käytettäisiin näyttämään yksittäisiä viestejä mukautetusta postityypistä nimeltä ”kirja”. index.php käytetään, jos mukautetun postityypin kyselymallia ei ole. page.php Sivumalli. Käytetään, kun yksittäiselle sivulle kysytään. category.php Luokkamalli. Käytetään kun kysytään luokkaa. tag.php Tagimalli. Käytetään, kun tagia kysytään. taxonomy.php Termimalli. Käytetään, kun mukautetun taksonomian termiä kysytään. author.php Kirjoittajamalli. Käytetään, kun kirjoittajaa kysytään. date.php Päivämäärä- ja aikamalli. Käytetään, kun päivämäärää tai aikaa kysytään. Vuosi, kuukausi, päivä, tunti, minuutti, sekunti. archive.php Arkistomalli. Käytetään, kun kysytään luokkaa, tekijää tai päivämäärää. Huomaa, että category.php, author.php ja date.php ohittavat tämän mallin omille kyselytyypeilleen. search.php Hakutulosmalli. Käytetään, kun haku suoritetaan. attachment.php Liitteen malli. Käytetään tarkasteltaessa yhtä liitettä. image.php Kuvaliitteen malli. Käytetään yksittäisen kuvaliitteen katselemiseen. Jos sitä ei ole, käytetään attachment.php-tiedostoa. 404.php 404-mallia ei löydy. Käytetään, kun WordPress ei löydä kyselyä vastaavaa viestiä tai sivua.

Näillä tiedostoilla on erityinen merkitys WordPressin suhteen, koska niitä käytetään index.php: n korvaajana, jos ne ovat käytettävissä, mallihierarkian mukaan ja kun vastaava ehdollinen tunniste palauttaa arvon true. Jos esimerkiksi näytetään vain yksi viesti, funktio is_single () palauttaa arvon ”true”, ja jos aktiivisessa teemalla on single.php-tiedosto, sivua luodaan kyseisellä mallilla.

Perusmallit

WordPress-teema koostuu vähintään kahdesta tiedostosta:

• style.css
• index.php

Molemmat näistä tiedostoista menevät Teemahakemistoon. Index.php-mallitiedosto on erittäin joustava. Sitä voidaan käyttää sisällyttämään kaikki viitteet otsikkoon, sivupalkkiin, alatunnisteeseen, sisältöön, luokkiin, arkistoihin, hakuun, virheisiin ja muihin WordPressissä luotuihin sivuihin.

Tai se voidaan jakaa moduulimalliksi tiedostot, joista kukin ottaa osan työmäärästä. Jos et tarjoa muita mallitiedostoja, WordPressillä voi olla oletustiedostoja tai -toimintoja työnsä suorittamiseksi. Esimerkiksi, jos et anna searchform.php-mallitiedostoa, WordPressillä on oletustoiminto hakulomakkeen näyttämiseen.

Tyypillisiä mallitiedostoja ovat:

• kommentit. php
• comments-popup.php
• footer.php
• header.php
• sidebar.php

Näiden mallitiedostojen avulla voit laittaa mallitunnisteet index.php-päätiedostoon sisällyttääksesi nämä muut tiedostot sinne, missä haluat niiden näkyvän lopullisella luotavalla sivulla.

Tässä on esimerkki sisältää käytön:

<?php get_sidebar(); ?><?php get_footer(); ?>

Joidenkin mallitoimintojen oletustiedostot voivat olla vanhentuneita tai niitä ei ole, ja sinun on annettava nämä tiedostot teemalla. Vanhentuneet oletustiedostot sijaitsevat versiosta 3.0 alkaen wp-includes/theme-compat. Sinun on esimerkiksi annettava header.php, jotta funktio get_header () toimii turvallisesti, ja comments.php funktiolle comments_template ().

Lisätietoja näiden eri mallien toiminnasta ja erilaisten luomisesta lue Templates-ohjeet.

Mukautetut sivumallit

Kunkin sivumallin määrittävät tiedostot löytyvät Teemat-hakemistosta. Luo uusi mukautettu sivumalli sivulle luomalla tiedosto. Soitetaan ensimmäisen sivumallin sivumme snarfer.php. Laita snarfer.php-tiedoston yläosaan seuraava:

<?php/*Template Name: Snarfer*/?>

Yllä olevat code määrittelee tämän snarfer.php-tiedoston ”Snarfer” -malliksi. Luonnollisesti ”Snarfer” voidaan korvata useimmilla teksteillä sivumallin nimen muuttamiseksi. Tämän mallin nimi näkyy Teemaeditorissa linkkinä tämän muokkaamiseen. tiedosto.

Tiedosto voidaan nimetä melkein mille tahansa .php-laajennuksella (katso varattujen teemojen tiedostonimet niille tiedostonimille, joita sinun ei pitäisi käyttää; nämä ovat erityisiä tiedostonimiä, jotka WordPress varaa tiettyihin tarkoituksiin).

Yllä olevien viiden koodirivin noudattaminen on sinun tehtäväsi. Loput kirjoittamasi koodi hallitsee sitä, miten Snarfer-sivumallia käyttävät sivut näytetään. Katso WordPress-mallin eri toimintojen kuvaus kohdasta Mallitunnisteet. Voit käyttää tätä tarkoitusta varten. Saatat olla helpompaa kopioida jokin muu malli (ehkä sivu.php tai index.php) sivulle snarfer.php ja sitten lisää edellä mainitut viisi koodiriviä tiedoston alkuun.Tällä tavoin sinun tarvitsee vain muuttaa HTML- ja PHP-koodia sen sijaan, että luot kaiken tyhjästä. Esimerkkejä on esitetty alla. Kun olet luonut sivumallin ja sijoittanut sen teeman hakemistoon, se on valittavissa, kun luot tai muokkaat sivua. (Huomaa: Kun luot sivua tai muokkaat sitä, Sivumalli-vaihtoehto ei tule näkyviin, ellei vähintään yksi malli on määritelty yllä olevalla tavalla.)

Kyselypohjaiset mallitiedostot

WordPress voi ladata erilaisia malleja eri kyselytyypeille. Voit tehdä tämän kahdella tavalla: osana sisäänrakennettua mallihierarkiaa ja käyttämällä ehdollisia tunnisteita mallitiedoston silmukassa.

Jos haluat käyttää mallihierarkiaa, sinun on periaatteessa annettava erikoiskäyttöiset mallitiedostot, jotka käytetään automaattisesti indeksin.php ohittamiseen. Jos esimerkiksi Teemasi tarjoaa mallin nimeltä category.php ja luokkaa kysytään, category.php ladataan index.php: n sijaan. Jos category.php ei ole läsnä, index.php -ohjelmaa käytetään tavalliseen tapaan.

Saat tarkempia tietoja mallihierarkiassa tarjoamalla af iile kutsui esimerkiksi kategoria-6.php – tätä tiedostoa käytetään luokan.php sijaan, kun luodaan sivu luokalle, jonka tunnistenumero on 6. (Löydät luokan tunnistenumerot kohdasta Hallitse > Luokat, jos olet kirjautunut sisään sivuston järjestelmänvalvojana WordPress-versiossa 2.3 ja sitä vanhemmissa versioissa. WordPress 2.5: ssä ID-sarake poistettiin Järjestelmänvalvoja-paneeleista. Voit etsiä luokan tunnuksen napsauttamalla Muokkaa luokkaa ja etsimällä URL-osoiteriviltä cat_ID-arvoa. Se näyttää ”… categories.php? Action = edit & cat_ID = 3” missä ”3” on luokan tunnus). Katso tarkemmin tämän prosessin toiminnasta kohdasta Luokkamallit.

Jos teemallasi on oltava vielä enemmän hallintaa käytetyissä mallitiedostoissa kuin mitä mallihierarkiassa on tarjolla, voit käyttää ehdollista Tunnisteet. Ehdollinen tunniste tarkistaa periaatteessa, onko jokin tietty ehto totta WordPress Loopissa, ja voit sitten ladata tietyn mallin tai laittaa tietyn tekstin näytölle kyseisen ehdon perusteella.

Esimerkiksi, jos haluat luoda erottuvan tyylitaulukon postista, joka löytyy vain tietystä luokasta, koodi voi näyttää tältä:

Tai kyselyn avulla se voi näyttää tältä:

<?php$post = $wp_query->post;if ( in_category( "9" ) ) { get_template_part( "single2" );} else { get_template_part( "single1" );}?>

Kummassakin tapauksessa tämä esimerkkikoodi saa aikaan erilaisia malleja riippuen näytettävän viestin luokasta. Kyselyehdot eivät rajoitu luokkiin, mutta katso kaikki ehdot vaihtoehdoista Ehdolliset tagit -artikkelista.

Mukautettujen mallien määrittely

Voit määrittää WordPress-laajennusjärjestelmän avulla lisää malleja, jotka näytetään omien mukautettujen ehtojesi perusteella. Tämä lisäominaisuus voidaan suorittaa käyttämällä ”template_include” -toimintokoukkua. Lisätietoja laajennusten luomisesta löytyy Plugin API -sovelluksesta.

Sisältävät mallitiedostot

Toisen mallin lataaminen (muu kuin otsikko, sivupalkki, alatunniste, jossa on ennalta määritetyt komennot, kuten get_header ()) malliksi, voit käyttää get_template_part (). Tämän ansiosta teeman on helppo käyttää koodiosia uudelleen.

Tiedostoihin viittaaminen mallista

Kun viitat muihin saman teeman tiedostoihin, vältä kovakoodattuja URI-tiedostoja ja tiedostopolkuja. Sen sijaan viittaa URI-tiedostoihin ja tiedostopolkuihin bloginfo (): katso Tiedostoihin viittaaminen mallista.

Huomaa, että tyylitaulukossa käytetyt URI: t ovat suhteessa tyylitaulukkoon, ei sivuun, joka viittaa tyylitaulukkoon. Jos esimerkiksi sisällytät teemaan teema / hakemiston, sinun on määritettävä CSS: ssä vain tämä suhteellinen hakemisto, kuten:

h1 { background-image: url(images/my-background.jpg);}

Laajennussovellusliittymän koukut

Teemoja kehitettäessä on hyvä pitää mielessä, että teema on määritettävä siten, että se toimii hyvin kaikkien WordPress-laajennusten kanssa, jotka käyttäjät saattavat päättää asentaa. Laajennukset lisäävät toiminnallisuutta WordPressiin Toiminto Koukut ”(lisätietoja on Plugin-sovellusliittymässä).

Useimmat toimintokoukut ovat WordPressin PHP-ydinkoodin sisällä, joten teemalla ei tarvitse olla mitään erityisiä tunnisteita toimiakseen. Mutta muutama toiminto Koukkujen on oltava läsnä teemalla, jotta laajennukset voivat näyttää tietoja suoraan otsikossa, alatunnisteessa, sivupalkissa tai sivun rungossa. Tässä on luettelo erityisistä Action Hook -mallimerkkeistä, jotka sinun on sisällytettävä:

wp_enqueue_scripts Käytetään teematoimintotiedostossa. Käytetään ulkoisten komentosarjojen ja tyylitaulukoiden lataamiseen. wp_head () Siirry < -päähän > teeman elementti otsikossa.php. Esimerkki laajennuksen käytöstä: lisää JavaScript-koodi. wp_footer () Siirry footer.php-tiedostoon juuri ennen viimeistä < / body > -tunnistetta. Esimerkki laajennuksen käytöstä: lisää PHP-koodi, joka on suoritettava kaiken muun jälkeen, alatunnisteen alaosaan.Hyvin yleisesti käytetty verkkotilastokoodin, kuten Google Analytics, lisäämiseen. wp_meta () Menee tyypillisesti < li > Meta < / li > osio Teeman valikosta tai sivupalkista; sidebar.php-malli. Esimerkki laajennuksen käytöstä: sisälly pyörivä mainos tai tunnisteiden pilvi. Comment_form () Siirtyy comments.php-tiedostoon suoraan ennen tiedostoa ” s viimeinen tagi (< / div >). Esimerkki laajennuksen käytöstä: näytä kommentin esikatselu.

Tosielämän käyttöesimerkkinä löydät nämä plugin-koukut oletusteemojen malleihin.

Teeman mukauttamisen sovellusliittymä

WordPress 3.4: sta alkaen uusi Teeman räätälöintiominaisuus on oletusarvoisesti käytettävissä melkein kaikille WordPress-teemoille. Teeman mukauttamisen järjestelmänvalvojan sivu täytetään automaattisesti asetuksilla, joille teema julistaa tuen add_theme_support (): lla tai Asetukset-sovellusliittymällä, ja antaa järjestelmänvalvojille mahdollisuuden nähdä reaaliajassa tekemiensä muutosten pysyvät esikatselut.

Teema- ja laajennuskehittäjien, jotka ovat kiinnostuneita lisäämään uusia vaihtoehtoja teeman Teeman mukauttaminen -sivulle, tulisi nähdä Teeman mukauttamisen sovellusliittymän ohjeet. Teeman mukauttamisen sovellusliittymän lisäoppaat ovat saatavilla Ottopress.com-verkkosivustolla.

Epäluotettavat tiedot

Sinun tulisi välttää teeman dynaamisesti luotua sisältöä, etenkin HTML-määritteisiin tuotavaa sisältöä. Kuten WordPress-koodausstandardeissa todetaan, attribuutteihin menevä teksti tulisi suorittaa esc_attr (): n kautta siten, että yksi tai kaksoislainausmerkit eivät lopeta attribuutin arvoa ja mitätöivät XHTML: n ja aiheuttavat tietoturvaongelman. Yleisiä tarkistettavia paikkoja ovat otsikko-, alt- ja arvo-attribuutit.

Yleisiä tapauksia varten on vain vähän erityisiä mallimerkintöjä Tarvitaan turvallinen lähtö. Yksi tällainen tapaus liittyy julkaisun otsikon kirjoittamiseen otsikkomääritteeseen käyttämällä_title_attribute () -tunnusta (), jotta vältetään tietoturva-aukko. Tässä on esimerkki viestin otsalinkin otsikkomääritteen oikeasta pakenemisesta, kun käytetään käännettävää tekstiä:

<a href="<?php the_permalink(); ?>" title="<?php sprintf( __( "Permanent Link to %s", "theme-name" ), the_title_attribute( "echo=0" ) ); ?>"><?php the_title(); ?></a>

käännöstuki / I18n

Varmista kielen lokalisoinnin sujuva siirtyminen käyttämällä WordPressin gettext-pohjaisia i18n-toimintoja kaiken käännettävän tekstin käärimiseksi mallitiedostoihin.Tämä helpottaa käännöstiedostojen liittämistä ja kääntämistä tarrojen, otsikoiden ja muun mallin tekstin sivuston nykyinen kieli. Katso lisää: WordPress Localization ja I18n for WordPress Developers.

Teemaluokat

Toteuta seuraavat mallimerkinnät lisätäksesi WordPressin luomia luokan määritteitä body-, viesti- ja kommenttielementteihin. Käytä postikursseja vain The Loop -elementteihin.

• body_class ()
• post_class ()
• comment_class ()

Mallitiedostojen tarkistuslista

Kun kehität teemaa, tarkista mallitiedostosi seuraavien mallitiedostostandardien mukaisesti.

Document Head (header.php)

• Käytä oikeaa DOCTYPE-tunnusta.
• Avautuvan < html > -tunnisteen tulisi sisältää language_attributes ( ).
• < meta > -sarjaelementti tulisi sijoittaa ennen kaikkea muuta, mukaan lukien < title > -elementti.
• Määritä < -meta bloginfolla () > merkistö- ja kuvauselementit.
• Käytä wp_title () -asetusta < -otsikon > -elementti. Katso miksi.
• Lisää syötelinkkejä automaattisten syötelinkkien avulla.
• Lisää kutsu osoitteeseen wp_head () ennen viimeistä < / head > -tunniste. Laajennukset käyttävät tätä toimintokoukkua omien komentosarjojen, tyylitaulukoiden ja muiden toimintojen lisäämiseen.
• Älä linkitä teeman tyylitaulukoita otsikkomalliin. Käytä sen sijaan teematoiminnossa wp_enqueue_scripts -toimintokoukkua.

Tässä on esimerkki oikein muotoilusta HTML5-yhteensopivasta pääalueesta:

siirtymisvalikot (header.php )

• Teeman päävalikossa on tuettava mukautettua valikkoa, jossa on wp_nav_menu ().
  • Valikoiden tulisi tukea pitkiä linkkien otsikoita ja suurta määrää luettelokohteita. Nämä kohteet eivät saa rikkoa ulkoasua tai ulkoasua.
  • Alivalikon kohteiden tulisi näkyä oikein. Jos mahdollista, tuki avattavien valikkojen tyylejä alivalikkokohteille. Pudotusvalikot, joiden avulla valikon syvyys voidaan näyttää sen sijaan, että näytetään vain ylätaso.

• Teema tulisi widgetoida mahdollisimman täydellisesti. Kaikkien asettelun alueiden, jotka toimivat kuten widget (tagipilvi, blogroll, luokkaluettelo) tai voivat hyväksyä widgetejä (sivupalkki), tulisi sallia widgetit.
• Sisältö, joka näkyy oletuksena widgetoiduilla alueilla (kovakoodattu) esimerkiksi sivupalkkiin) pitäisi kadota, kun widgetit otetaan käyttöön Ulkoasu > -widgeteistä.

Alatunniste (footer.php)

• Käytä wp_footer () -kutsua ilmestyäksesi juuri ennen vartiotunnisteen sulkemista.

<?php wp_footer(); ?></body></html>

Hakemisto (index.php)

• Näytä luettelo viesteistä ote tai täyspitkä. Valitse yksi tai toinen sopivaksi.
• Sisällytä wp_link_pages () tukemaan navigointilinkkejä viesteissä.

Arkisto (archive.php)

• Näytä arkiston otsikko (tunniste-, luokka-, päiväys- tai tekijäarkisto).
• Näytä luettelo viesteistä ote tai täyspitkä muoto. Valitse yksi tai toinen sopivaksi.
• Lisää wp_link_pages () tukemaan navigointilinkkejä viesteissä.

Sivut (page.php)

• Näytä sivun otsikko ja sivun sisältö.
• Näytä kommenttilista ja kommenttilomake (ellei kommentit ole pois päältä).
• Sisällytä wp_link_pages () tukemaan navigointilinkkejä sivulla.
• Metatietoja, kuten tunnisteita, luokkia, päivämäärää ja tekijää, ei tule näyttää.
• Näytä Muokkaa-linkki kirjautuneille käyttäjille, joilla on muokkausoikeudet.

Yksi viesti (single.php)

• Sisällytä wp_link_pages () tukemaan viestin navigointilinkkejä.
• Näytä viestin otsikko ja sisällön sisältö.
  • Otsikon tulee olla pelkkää tekstiä itsensä osoittavan linkin sijaan.
• Näytä julkaisupäivä.
  • Noudata päivämäärän ja kellonajan asetuksia ellei se ole tärkeää suunnittelulle. (Päivämäärä- ja aikamuodon käyttäjäasetukset ovat hallintapaneeleissa > Asetukset Yleistä).
  • Käyttäjäasetuksiin perustuvassa tuotoksessa käytä the_time (get_option (”date_format”)).
• Näytä tekijän nimi (tarvittaessa).
• Näytä viestiluokat ja postitunnisteet.
• Näytä Muokkaa-linkki kirjautuneille käyttäjille, joilla on muokkausoikeudet.
• Näytä kommenttiluettelo ja kommenttilomake.
• Näytä navigointilinkit seuraavalle ja edelliselle postaukselle edellisen_post_link () ja next_post_link () avulla.

• Kirjoittajan kommentti on korostettava eri tavalla.
• Näytä tarvittaessa gravatareja (käyttäjän avatareja).
• Tuki kierteitettyjä kommentteja.
• Näytä takaisin- / pingbackeja.
• Tämä tiedosto ei saa sisältää funktion määritelmiä, ellei tarkista function_exist (), jotta vältetään uudelleenilmoitusvirheet. Ihannetapauksessa kaikkien toimintojen tulisi olla functions.php: ssä.

Hakutulokset (search.php)

JavaScript

• JavaScript-koodin tulisi olla sijoitetaan ulkoisiin tiedostoihin aina kun mahdollista.
• Lataa komentosarjat wp_enqueue_script () -ominaisuudella.
• Suoraan HTML-dokumentteihin (mallitiedostoihin) ladatun JavaScriptin tulee olla CDATA-koodattu, jotta vältetään virheet vanhemmissa selaimissa. .

<script type="text/javascript">/* <!]> */</script>

Näyttökuva

Luo kuvakaappaus teemallesi. Kuvakaappauksen nimi tulisi olla screenshot.png, ja se tulisi sijoittaa ylätason hakemistoon. Kuvakaappauksen tulisi näyttää tarkasti teeman suunnittelu ja tallentaa PNG-muodossa. Vaikka .jpg, .jpeg ja .gif ovat myös kelvollisia laajennuksia ja tiedostomuotoja kuvakaappaukselle, niitä ei suositella.

Suositeltu kuvakoko on 1 200 x 900 pikseliä. Kuvakaappaus näytetään yleensä pienempänä, mutta liian suuri kuva mahdollistaa korkean resoluution katselun HiDPI-näytöissä. Huomaa, että koska Teemojen hallinta -näyttö on reagoiva, kuvakaappauksen kuvan ylä- ja alaosa eivät ehkä ole näkyvissä, joten pidä grafiikkaa lähellä keskustaa.

Teeman asetukset

Teemat voivat vaihtoehtoisesti tukea Teeman mukautusnäyttö. Katso esimerkkikoodi kohdasta WordPress-teeman vaihtoehtosivujen esimerkki.

Kun otat käyttöön Teeman mukauttaminen -näytön saatavuuden käyttäjäroolille, käytä ”edit_theme_options” -ominaisuutta ”switch_themes” -ominaisuuden sijaan, ellei käyttäjän roolin pitäisi myös pystyä vaihtamaan teemoja. Katso lisätietoja kohdasta Roolit ja ominaisuudet ja Hallintovalikkojen lisääminen.

Jos käytät ”edit_themes” -ominaisuutta missä tahansa teemalla, pääkäyttäjän roolin käyttöoikeus Teeman mukautusnäyttöön (tai ehkä joihinkin mukautettuihin näyttöihin) on käytettävissä. Huomaa, että versiosta 3.0 lähtien tätä ominaisuutta ei ole oletusarvoisesti määritetty järjestelmänvalvojan roolille WordPress Multisite -asennuksen yhteydessä. Katso selitys. Käytä tällöin sen sijaan ”edit_theme_options” -ominaisuutta, jos haluat, että järjestelmänvalvoja näkee ”Teeman asetukset” -valikon. Katso järjestelmänvalvojan roolin lisäominaisuudet käytettäessä WordPress Multisite -ohjelmaa.

Teeman testausprosessi

1. Korjaa PHP- ja WordPress-virheet. Lisää seuraava virheenkorjausasetus wp-config.php -tiedostoon nähdäksesi vanhentuneet funktiokutsut ja muut WordPressiin liittyvät virheet: define (”WP_DEBUG”, true) ;. Katso lisätietoja käytöstä poistettujen toimintojen koukusta.
2. Tarkista mallitiedostot mallitiedostojen tarkistusluettelosta (katso yllä).
3. Suorita läpikäynti käyttämällä Teemayksikkö-testiä.
4. Vahvista HTML ja CSS. Katso Verkkosivuston vahvistaminen.
5. Tarkista JavaScript-virheet.
6. Testaa kaikissa kohdeselaimissasi. Esimerkiksi IE9, Safari, Chrome, Opera, Firefox ja Microsoft Edge.
7. Siivoa kaikki vieraat kommentit, virheenkorjausasetukset tai TODO-kohteet.
8. Katso Teemakatsaus, jos olet julkisesti julkaisemalla teema lähettämällä se Teemahakemistoon.

Resurssit ja viitteet

Koodistandardit

• Tunne lähteesi
• WordPress-koodausstandardit
• CSS-koodausstandardit

Teeman suunnittelu

• Sivuston suunnittelu ja asettelu

CSS

• CSS
• CSS-lyhenne
• WordPressin luomat luokat

Mallit

• Siirtyminen malleihin
• Mallit
• Mallihierarkia
• Mallimerkit
• Silmukka
• Ehdolliset tunnisteet
• Toimintoviitteet
• I18n WordPress-kehittäjille
• Tietojen vahvistus

Funktioiden luettelo

• Toimintoviite

Testaus ja laadunvarmistus

• Teemayksikkö Te st
• Verkkosivuston vahvistaminen
• CSS-selainvirheiden korjaaminen
• CSS-vianetsintä
• moderni.IE: IE: n testaaminen eri alustoilla avoimilla -lähdetyökalut

Vapauta & -kampanja

• Teeman tarkistusprosessi