Luo WordPress-teema: askel askeleelta mukautettua kehitystä varten

Alkuperäisen julkaisunsa jälkeen vuonna 2003 WordPress on kehittynyt yksinkertaisesta blogityökalusta tehokkaaksi ja suosituksi verkkosivustojen rakentajaksi ja kattavaksi CMS: ksi (sisällönhallintajärjestelmä), jota noin 38% verkkosivustoista käyttää! Kun otetaan huomioon sen suosio, jos sivustosi täytyy erottua joukosta, sinun on luotava ainutlaatuinen WordPress-teema sivustollesi.

Todellisuudessa ei ole ihme, että WordPress pystyi tekemään sen toistaiseksi ja tullut niin suosituksi.

Sen joustavuus ja isännöimät ominaisuudet mahdollistavat sen laajan käytön kaikissa verkkosivustotyypeissä. Lisäksi WordPress on melko helppokäyttöinen, eikä siinä ole juurikaan kokemusta koodauksesta tai verkkokehityksestä.

Nämä ovat syitä WordPressin menestystarinaan ja ovat juuri syitä 40 prosenttia kaikista Web-sivustoista toimii tällä ohjelmistolla. 

WordPressissä on joukko käteviä ominaisuuksia, jotka tekevät web -kehittämisestä ja ohjelmoinnista less monimutkainen ja kaikkien saatavilla.

Johdanto WordPress-teeman kehittämiseen 

Toinen suosittu ominaisuus, joka tekee WordPressistä niin suositun, on sen teemat. Teema on yksinkertaisesti kokoelma tyylitaulukoita ja malleja, jotka määrittelevät, miten WP-pohjainen sivusto näyttää ja näyttää.

Ohjelmisto antaa käyttäjälle laajan valikoiman erilaisia ​​muokkausvaihtoehtoja, kun on kyse teemoista WP-järjestelmänvalvojan alueelta.

Sadat WordPress-teemat ovat täysin ilmaisia ​​tai monien muiden kanssa kohtuullisella hinnalla muutamia kymmeniä dollareita.

Itse asiassa WordPress.org isännöi valtavaa tietokantaa teemahakemistossaan.

Muut sivustot, kuten Themeforest, tarjoavat myös paljon premium-teemoja eri kehittäjiltä.

Jokaisella näistä teemoista on erilainen ulkoasu, suunnittelumalli ja ominaisuudet.

Käyttäjän on löydettävä verkkosivuston tarpeisiin parhaiten sopiva. Useimmissa tapauksissa teemat tehdään tiettyjä aloja tai ammatteja ajatellen, mikä tarkoittaa, että esimerkiksi ravintolan omistajat voivat helposti löytää teemoja, joissa on varausominaisuuksia.

Vaikka on olemassa paljon mahtavia teemoja, jotka saattavat sopia tarpeisiisi, on turvallista sanoa, että jos haluat tehdä jotain erinomaista, sinun on melko paljon tehtävä se itse. Jos et pysty ohjelmoimaan, hyvä vaihtoehto vaihtoehto olisi mennä freelance-ohjelmistokehittäjälle (hinnat voivat vaihdella eri tekijöistä riippuen).

Tässä artikkelissa käymme kuitenkin läpi KAIKKI tarvittavat vaiheet oman mukautetun WordPress-teeman luomiseen WP-pohjaiselle verkkosivustollesi. Tarkastelemme kaikkia tärkeitä näkökohtia varmistaaksemme, että saat parhaan mahdollisen, mitä WordPress tarjoaa. 

Oman teeman luomisen aloittaminen aloittelijana saattaa ensi silmäyksellä tuntua mammutilta.

Mukautetun teeman luominen tyhjästä ei kuitenkaan ole liian monimutkaista WP: ssä. Sinun ei tarvitse olla verkkokehitysvinkki, jos sinulla on PHP-koodauksen perusteet, voit helposti oppia luomaan WordPress-teeman.

Lisäksi oman teeman luominen voi olla varsin palkitsevaa, varsinkin kun näet lopputuloksen verkkosivustollasi.

Ensimmäisen mukautetun WordPress-teeman luominen

Jotta voit aloittaa WordPress-teeman luomisen, tarvitset muutaman perustavan:

• WordPress-verkkosivusto
• Hyvä hosting-suunnitelma
• Hieman aikaisempi kokemus esimerkiksi paikallisista lavastusympäristöistä
• Perustiedot CSS- ja PHP-koodauskielistä
• Aloittelijan teema

WordPress-mallihierarkian ymmärtäminen 

WordPressissä mallitiedostot (teeman rakennusosat) ovat modulaarisia ja uudelleenkäytettäviä.

Mallitiedostot vastaavat WP-sivustosi sivujen luomisesta. Joitakin näistä tiedostoista käytetään melkein kaikilla sivuillasi, kun taas toisia käytetään vain tietyissä olosuhteissa.

Katso alla oleva kaavio - se selittää, miten WordPress-mallihierarkia on järjestetty.

Mallitiedostot määräävät verkkosivuston sisällön yleisen ilmeen. Jos haluat luoda otsikon, käytä a header.php tai jos haluat lisätä kommenttiosion, käytä comments.php tiedosto. 

Mallihierarkian ymmärtämiseksi sinun on tiedettävä, että WordPress käyttää jotain, jota kutsutaan "kyselymerkkijonoksi", päättääksesi, mitä mallia tai mallijoukkoa käytetään tietyn sivun luomiseen ja näyttämiseen.

Kyselymerkkijono on tietoja, jotka on tallennettu muokkaamasi verkkosivuston jokaisen osan linkkiin. Yksinkertaisemmin sanottuna WordPress analysoi tiedot ja suorittaa hakuja mallihierarkian kautta löytääksesi mallitiedoston, joka vastaa kyselymerkkijonossa annettuja tietoja.

Tämä on pohjimmiltaan järjestelmä, jossa WP etsii vastaavia mallitiedostoja aina, kun sivut ladataan.

Esimerkiksi, jos kirjoitat seuraavan URL-osoitteen http://example.com/post/this-post, WordPress etsii tarvittavat mallitiedostot seuraavassa järjestyksessä: 

1. Etanaa vastaavat tiedostot, tässä tapauksessa, Tämä postaus.
2. Viestitunnusta vastaavat tiedostot.
3. Yleinen yhden postin tiedosto, kuten single.php.
4. Tässä tapauksessa arkistotiedosto, arkisto.php.
5. - index.php tiedosto.

Viimeinen tiedosto (index.php) vaaditaan jokaisessa teemassa, koska se on oletusarvo (tai varavara), jos vastaavaa prosessia ei löydy muusta tiedostosta. alaviivojen (WP-aloitusteema) sisältää yleisimmät tiedostot. Nämä tähän teemaan kuuluvat tiedostot toimivat heti laatikosta.

Voit muokata niitä, jos haluat kokeilla tai jos haluat luoda mukautettuja toimintoja sivustollesi.

Mikä on WordPress Starter -teema? 

Aloitusaihe on mukautetun WordPress-teeman paljain luut.

Voit käyttää sitä perustana saadaksesi oman ainutlaatuisen teeman käyttöön. Käynnistysteeman avulla voit rakentaa oman mukautetun WordPress-teeman tarvitsematta suunnitella tai koodata koko teemaa tyhjästä.

WordPress-aloitusteemat sisältävät kaikki tiedostot määriteltyinä yllä olevan hierarkian mukaisesti.

Käynnistysteeman avulla saat paremman käsityksen siitä, miten WordPress toimii, koska se näyttää sinulle perusasiat, teeman rakenteen ja eri osien yhteistyön.

Räätälöityä WordPress-teemaa voidaan soveltaa erilaisiin verkkosivustotyyppeihin, esityksistä ja hakemistoista verkkokauppoihin rakennettu WooCommercen kanssa, sosiaalinen media tai mikä tahansa muu tarvitset verkkosivustoasi.  

Käynnistysaiheiden (kuten UnderStrap, Alaviivat ja Bones) valinta auttaa luomaan WordPress-teeman, joka avaa oven useiden eri vaihtoehtojen käyttämiseen.

Alaviivojen käyttäminen voi olla paras valinta aloittelijoille, koska se tarjoaa tärkeimmät ominaisuudet. Se tulee myös pitkäaikaisesta ja luotettavasta kehittäjältä. Tämä tarkoittaa, että se on todennäköisemmin yhteensopiva, turvallinen ja luotettava, ja sillä on parempi tuki pitkällä aikavälillä.

Miksi sinun pitäisi käyttää aloitusaihetta

Kuten edellä todettiin, aloitusaihe on perusta, suunnitelma, joka auttaa sinua keksimään ainutlaatuisen verkkosivuston. Se on jo täysin toimiva, mutta silti puuttuu määriteltävät tärkeimmät ominaisuudet, jotka tekevät käyttäjäystävällisestä verkkosivustosta. 

Pohjimmiltaan se on edelleen muotoiltava ja määritettävä oikein. 

Starter-teemat ovat ihanteellisia niille, joilla on vain vähän tai ei lainkaan kokemusta WordPressistä tai verkkokehityksestä yleensä. Se on hieno tapa tutustua aiheiden rakentamiseen ja oppia WP-pohjaisten verkkosivustojen perusteet. 

WordPress Starter -teema säästää aikaa ja vaatii vain vähän tai ei lainkaan taustatietoja koodauksesta ja loput WordPress-monimutkaisuudet. 

Voit hyödyntää starttiteeman kehittäjien vuosien kovaa työtä ja käyttää näitä ohjeita saadaksesi paremman käsityksen WordPressin ja teeman suunnittelusta.   

Suosittuja Starter-teeman esimerkkejä

• alaviivojen - Luotettava ja tunnettu aloitusteema, joka antaa aloittelijoille etumatkan teeman kehittäminen. Underscores on melko yksinkertainen ja täydellinen aloittamiseen heti, jos sinulla on kaikki tarvittavat työkalut. Teema sopii erinomaisesti teemojen kehittämisen käsitteiden ymmärtämiseen. Underscoresissa on kyse uuden projektin aloittamisesta, joka tulisi nähdä enemmän jatkuvasti kehittyvän työkalupaketin ja less kuin kehys.
  
  
• Roots - Tämä käynnistin-teema antaa sinulle lähestymistavan, joka on suunnattu enemmän kehittäjille, ja sen merkinnät perustuvat HTML5-kattilalevyyn. Se tukee myös kehittyneempiä työkaluja, kuten Bootstrap ja Murahdus. Roots starter -teemaan kuuluu myös teeman kääre, joka auttaa pitämään prosessisi virtaviivaisena ja poistaa saman malliosan toistuvan kutsumisen.

Roots käyttää myös CSS-esiprosessoreita ja -tukia LESS, CSS: n taaksepäin yhteensopiva kielilaajennus, joka voi merkittävästi nopeuttaa teeman kehittämisprosessia.

Tästä huolimatta Roots antaa käytännönläheisemmän lähestymistavan ja vaatii hieman enemmän taitotietoa kehittäjältä.  

6 perusvaihetta WordPress-teeman kehittämiseen

Kun olet perehtynyt perusteisiin, olet vihdoin valmis aloittamaan WordPress-teeman luomisen.

Koska tämä artikkeli on suunnattu enemmän aloittelijoille, käytämme käynnistin-teemaa, mutta voit myös luoda kaiken tyhjästä ilman käynnistysaiheita.

Jos haluat kuljettaa reitin, älä unohda, että tarvitset paljon enemmän aikaa ja sinun täytyy uppoutua hieman syvemmälle koodaukseen ja verkkokehitykseen yleensä.

1. Kehitysympäristön luominen

Ensimmäinen askel prosessissa on luoda kehitysympäristö.

Tämä on periaatteessa palvelin, joka sinun on asennettava tietokoneellesi paikallisten WP-sivustojen hallitsemiseksi ja kehittämiseksi. Kehitysympäristön avulla voit kehittää verkkosivustoasi turvallisesti sen lisäksi, että sinulla on useita vaihtoehtoja paikallisen ympäristön luomiseen.

Käyttäminen DesktopServer on yksi ihanteellisimmista poluista, joita voit käydä. Se on helppo tapa saada paikallinen ja nopea WP-versio, joka on yhteensopiva sekä Windowsin että Macin kanssa. Valitse ilmainen versio, rekisteröi ja lataa se ja asenna sitten ohjelmisto.

Kun olet asentanut, avaa ohjelma ja määritä paikallinen ympäristö.

Se on melko yksinkertainen prosessi, ja olet valmis muutamassa minuutissa. Asennuksen jälkeen sinulla on verkkosivusto ja kehitysympäristö, joka toimii ja näyttää samanlaiselta kuin mikä tahansa WP-verkkosivusto.

2. Lataa ja asenna Starter-teema

Ensisijaisimmat aloitusaiheet (kuten Alaviivat) on helppo ensikertalaisille aloittaa.

Toisin kuin useimmat perusteemat, Alaviivat sallivat vaihtoehtojen mukauttamisen sen kautta Lisäasetukset (kuten kirjoittaja ja kuvaus) nimeämisen jälkeen. 

Voit myös lisätä Syntactically Awesome StyleSheets tai SASS joka on esikäsiteltävä CSS-kieli, jonka avulla voit esitellä ominaisuuksia, kuten sisäkkäisyydet, matemaattiset operaatiot, muuttujien hyödyntäminen jne.

Tehtyäsi valinnat sinun tarvitsee vain napsauttaa Luo ladataksesi .zip-tiedosto käynnistysaiheesi kanssa.

Asenna tiedosto nyt paikalliselle sivustollesi. Jos olet tehnyt kaiken oikein, näet nyt mukautetun WordPress-teeman paljain luut, perusversio.

WordPress-perusperiaatteiden ymmärtäminen 

Nyt kun perusasiat on määritetty, voit päästä töihin. Ennen kuin sukellat mukautusprosessiin, sinun on kuitenkin perehdyttävä WordPress-teeman luomisen pääperiaatteisiin ja komponentteihin WP: n perusperiaatteiden avulla. 

Ensinnäkin sinun on opittava mallitiedostot, minkä tahansa teeman tärkeimmät rakennuspalikat WP: ssä.

Mallitiedostot määrittelevät periaatteessa, miten ulkoasusi ja sisältösi näytetään sivustollasi. Jos haluat luoda otsikon, sinun on käytettävä header.php tiedosto comments.php käytetään kommenttien näyttämiseen.

Kuten edellä on todettu, WP määrittää mallihierarkiansa määrittääkseen, minkä mallitiedoston se päättää suorittaa käyttäjän pyytämän / tarvitseman sisällön. Voit työskennellä näiden tiedostojen kanssa sellaisina kuin ne ovat, mutta koska olet täällä luomassa WordPress-teemaa, suurin osa työstäsi on muokata näitä tiedostoja tarpeisiisi.

Kun puhumme WP: n perusperiaatteista, sinun tulisi myös ymmärtää taustalla oleva käsite The Loop.

Se on koodi, jota WP käyttää ensisijaisesti sisällön näyttämiseen, ja se löytyy kaikesta sisällöntuotantotiedostoista, kuten index.php or sivupalkki.php. Se on melko monimutkainen aihe, mutta onneksi se toimitetaan mukana käynnistysaiheessa (jos käytät alaviivoja), mikä tarkoittaa, että prosessisi pitäisi olla yksinkertaisempi. 

Sinun on ymmärrettävä käsite ja työskenneltävä sen kanssa. Katso joitain esimerkkejä yllä olevasta linkistä, jotta ymmärrät paremmin, kuinka silmukkaa käytetään ja kuinka voit mukauttaa koodin tarpeisiisi.

3. Luo teeman tiedot

Teemat eivät ole puhtaasti kosmeettisia komponentteja.

Voit lisätä sivustollesi runsaasti erilaisia ​​ominaisuuksia, jotka voivat parantaa toiminnallisuutta. Aiomme keskustella siitä, kuinka muutama perusominaisuus otetaan käyttöön verkkosivustosi piristämiseksi.

Lisääminen Koukut voi antaa sinun suorittaa erilaisia ​​PHP-toimintoja, näyttää muita tietoja tai lisätä muotoilutietoja tarpeen mukaan.

Koukut ovat koodikatkelmia, jotka lisätään mallitiedostoihin. Suurin osa niistä toteutetaan suoraan osana WordPressin ydintä, mutta jotkut koukut ovat melko hyödyllisiä myös teemojen mukauttamisessa.

Tässä on luettelo yleisimmistä koukkuista ja niiden rooleista:

• wp_head () - lisätään elementti otsikossa.php. Se mahdollistaa komentosarjat, tyylit ja muut tiedot, jotka suoritetaan, kun sivusto alkaa ladata.
• wp_footer () - lisätään yleensä footer.php-tiedostoon ennen -tunniste, jota käytetään useimmiten Google Analytics -koodin tai muun koodin lisäämiseen, joka täytyy näkyä jokaisella sivulla, mutta joka on liian raskas ladattavaksi otsikkoon.  
• wp_meta () - Yleensä löytyy sivulta barbar.php, ja sitä käytetään useimmiten lisäämään komentosarjoja (esimerkiksi tagipilvi).
• comment_form () - Lisätty comments.php-tiedostoon suoraan ennen tiedoston sulkemista tag kommenttien näyttämiseksi. 

Kun käytät alaviivoja, nämä koukut sisältyvät jo teemaan, mutta on aina hyvä oppia lisää niistä ja nähdä kaikki saatavilla olevat koukut. Koukkujen avulla voit laajentaa mukautetun teeman ominaisuuksia.  

4. Tyylien lisääminen CSS: n avulla

CSS tai CSS määrittelee luomasi sivuston sisällön ulkonäön.

Käyttämällä style.css tiedosto, joka sisältyy jo teemaan, voit muokata mitä tahansa täältä löytyneitä tyylejä ja tallentaa ne nähdäksesi, miten se muuttaa suunnittelua. Oletusarvoisesti se sisältää vain perusmuotoilun.

CSS: ää käytetään mahdollistamaan verkkosivustosi sisällön esittely ja erottelu kaikesta ulkoasusta fontteihin ja sisältöön. CSS voi auttaa tekemään sivustosi sisällöstä helpompaa ja joustavampaa.

Muotoilun käyttäminen WordPress-teemojen kanssa voi olla melko karvaista ja on tämän artikkelin ulkopuolella. Jos et ole liian varma tästä, kannattaa ehkä lukea lisää CSS: stä ennen kuin jatkat.

5. Mukana JavaScript

JavaScript-tiedostojen lisääminen teemaan tarvittaessa voi parantaa interaktiivisia ominaisuuksia ja ominaisuuksia ja saada toimivan sivuston. Se on erityisen kätevä, kun haluat sisällyttää sivustoihisi kolmannen osapuolen laajennuksia, kuten tiettyjä video- tai äänisoittimia, kuten liukusäätimiä, ponnahdusikkunatukea ja muita kolmannen osapuolen kirjastoja kehittyneiden toimintojen luomiseksi.

Jos haluat käyttää Javascriptia mukautetun sivuston kanssa, voit luoda komentotiedoston teemaan luomalla puhelun alla olevan syntaksin avulla.

Vaihtoehtoisesti voit käyttää komentosarjaa suoraan omassa header.php metatunnisteiden ja tyylisivulinkin välinen mallitiedosto, kuten tekisit HTML-sivun tapauksessa. Kun sitä käytetään otsikkotiedostossa, sen pitäisi näyttää tältä: 

Jos haluat käyttää JS: ää, lisää tiedostojen kutsu suoraan alla olevien ohjeiden mukaan. Jos haluat asettaa Lähetä tämä ystävälle -ominaisuuden, voit laittaa sen viestin otsikon alle. Se näyttäisi samanlaiselta kuin tämä: 

" rel="bookmark">

<!--

sähköpostisivu ();

// ->

Voit myös luoda komentosarjoja tämän artikkelin jäljempänä esitetyllä syntaksilla.

6. Testaa teema ja vie se

Kun kaikki edellä mainitut toimet on tehty, on viimeinkin aika testata luomasi mukautettu WordPress-teema varmistaaksesi, että se toimii sujuvasti.

Tähän tarkoitukseen voit käyttää Teemayksikön testi Tiedot, joukko näennäistietoja, jotka voit ladata sivustollesi. Tiedot koostuvat tyylivaihtoehdoista ja erilaisesta sisällöstä, joiden avulla voit nähdä, kuinka tehokkaasti teemasi pystyy käsittelemään sekä ennakoitavia että arvaamattomia tietoja.

Testaa kaikki perusteellisesti (yllä olevan Codex-linkin mukaan), jotta voit olla varma, että luomasi teema täyttää vaaditut standardit ja täyttää odotuksesi ennen kuin viet sen.

Kun olet varma testauksesta, voit viedä teeman.

Voit tehdä viennin etsimällä paikan, johon olet asentanut verkkosivustokehitysympäristön paikallisesti.

Avaa kansio ja käytä sitä  / wp-content / themes /, josta löydät työskentelemäsi teeman.

Luo nyt pakkaustyökalulla a ZIP-tiedosto kansion perusteella pakkaamalla se. Kun olet valmis, sinun on vain ladattava ja asennettava se mille tahansa WordPress-sivustolle. Voit myös lähettää sen WordPressiin Teemahakemisto. 

Yksityiskohtainen WordPress-teeman kehitysopas

Nyt kun olet suorittanut perusasiat, seuraavissa vaiheissa luetellaan lisätietoja WordPress-teeman luomisesta.

Mukautettujen teematiedostojen / hakemistojen luominen

Kuten jo tiedätte, WP-teemat luodaan erilaisista mallitiedostoista, jotka sisältävät ainakin a sidebar.php, header.php.ja footer.php. Voit soittaa näille mallitagien avulla (get_header (), kun soitat otsikkoa, get_sidebar (), kun soitat sivupalkkiin jne.).

Voit myös luoda mukautettuja versioita näistä tiedostoista pienillä muutoksilla, kuten nämä: sivupalkki-{your_custom_template} .php, otsikko-{your_custom_template} .php ja alatunniste-{oma_kustomoitu_mallisi} .php. 

Voit myös kutsua mallin tunnisteita samalla tavalla kuin mallin nimi parametrina:

get_header ( 'oma_ mukautettu_mallisi' ); 

Sivut luodaan erilaisilla tiedostoilla, mikä tarkoittaa, että voit myös luoda muita mukautettuja mallitiedostoja ja kutsua niitä missä tahansa sivun kohdassa yksinkertaisesti käyttämällä get_template_part (). Anna tiedostolle vain oikea nimi ja käytä samaa mukautettua menetelmää kuin otsikko-, alatunniste- ja sivupalkkitiedostoissa. 

Oletetaan, että haluat luoda mallin, joka käsittelee sisältöäsi - sinun tarvitsee vain luoda tiedosto nimeltä content.php ja laajenna sitten tiedostonimi lisätäksesi tietyn asettelun. Tässä tapauksessa olkoon niin content-product.php.

Loppujen lopuksi, kun lataat mallitiedoston teemaan, se näyttää tältä:

get_template_part ('sisältö', 'tuote') ;.

Hakemistojen käyttäminen

Voit linkittää teemahakemistoihin yksinkertaisesti käyttämällä toimintoa get_theme_file_uri ();

Tämä toiminto palauttaa koko URI-teeman pääkansioon ja voit käyttää sitä tiedostojen ja alikansioiden viittaamiseen seuraavan esimerkin avulla:

echo get_theme_file_uri ('kuvat / logo.png');

Korosta komentosarjoja ja tyylitaulukoita

Kun keksit oman teeman, voit myös luoda mukautettuja tyylitaulukoita ja omia JavaScript-tiedostojasi.

Aina kun teet tämän, muista ladata ne tavallisella WordPress-menetelmällä, muuten on mahdollista, että teema ja laajennukset eivät välttämättä toimi oikein kaikissa olosuhteissa.

Sinun tarvitsee vain luoda toiminto, joka houkuttelee kaikki tyylit ja komentosarjat. Tätä varten WP luo sekä kahvan että polun tiedoston ja riippuvuuksien löytämiseksi (jos sellaisia ​​on), kun tämä tapahtuu, sinun on käytettävä koukkua tyylitaulukoiden ja komentosarjojen lisäämiseksi. 

Tyyliin viehättävä perustoiminto:

wp_enqueue_style ($ kahva, $ src, $ deps, $ ver, $ media);

Skriptien houkutteleminen:

wp_enqueue_script ($ kahva, $ src, $ deps, $ ver, $ in_footer); 

Ota käyttöön Google-fontit

Google-fontit ovat erinomainen ilmainen fonttien lähde web-suunnittelijoille, ja ne voidaan yksinkertaisesti lisätä mukautettuun teemaan.

Ensin sinun on löydettävä haluamasi kirjasintyyppi Google-fonttikirjastosta. Kun olet löytänyt fontin, jota haluat käyttää, napsauta "Valitse tämä tyyli" -painiketta, joka vie sinut uudelle sivulle.

Jos vierität tätä alaspäin, löydät ohjeet niiden käytöstä laatikossa, jossa on tarvittava koodi, jonka voit lisätä sivustoosi.   

Voit lisätä fontit joko tavallisella ja suositellulla menetelmällä tai voit valita joko @import CSS -menetelmän tai käyttämällä Javascript-menetelmää.

Voit myös lisätä sen WP: hen kiinnittämällä fontin teeman aiheisiin toimintoja. php.tiedosto tai käyttämällä tiettyä laajennusta.

function wpb_add_google_fonts () {

wp_enqueue_style ('wpb-google-fonts', 'https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,400,700,300', väärä);

}

add_action ('wp_enqueue_scripts', 'wpb_add_google_fonts');

Jos haluat, voit lukea lisää kuinka muuttaa fontteja WordPress-teemassa tästä.

Sivusi jakaminen osioihin (Header.php / Footer.php)

Useimmissa sivustoissa otsikko, alatunniste ja sivupalkki ovat samat kaikilla sivuilla. On totta, että joissakin tapauksissa haluat muokata muutamia asioita, mutta yleensä ne ovat johdonmukaisia.

Joten jakaa sivu otsikkoon ja alatunnisteeseen, jonka haluat leikata ja liittää index.php -sivun otsikot / alatunniste ja sivupalkki. Tämä riippuu hieman nykyisestä index.php-tiedostostasi.

Jos esimerkiksi käytät alaviivoja, otsikko ja alatunniste on jo määritelty oikein otsikoissa.php ja footer.php.

Jatketaan tätä esimerkkiä ikään kuin luomme otsikon sisältöä.

Useimmilla verkkosivustoilla otsikot sisältävät olennaiset päätyylit ja navigoinnin verkkosivustolle.   

Aloita lisätä ennen sulkemista . Sinulla pitäisi olla jotain tällaista. Tämä perustuu alaviivojen aloitusaiheeseen, mutta sinun on ehkä mukautettava otsikkoa tarpeen mukaan omien mukautusten luomiseksi.

header.php

<?php
/ **
* Teemamme otsikko
*
* Tämä on malli, joka näyttää kaikki ja kaikki siihen saakka
*
* @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
*
* @paketti Daves_Theme
*/

?>

>

">

>

<?php
the_custom_logo ();
if (is_front_page () && is_home ()):
?>
" rel="home">
<?php
muuten:
?>
" rel="home">
<?php
endif;
$ daves_theme_description = get_bloginfo ('kuvaus', 'näyttö');
if ($ daves_theme_description || is_customize_preview ()):
?>

<?php
wp_nav_menu (
array (
'theme_location' => 'valikko-1',
'menu_id' => 'ensisijainen-valikko',
)
);
?>

Samaa prosessia tulisi soveltaa myös alatunnisteeseen.

Funktioiden käyttäminen.php

Teema functions.php tiedosto on WP-teeman mallitiedosto, joka toimii kuin "päällikkö", joka latautuu automaattisesti sekä järjestelmänvalvojille että sivuston etusivuille.

Yleensä se määrittelee toiminnot, toiminnot, suodattimet ja luokat, joita muut mallitiedostot käyttävät teemassa. Sitä voidaan käyttää myös teeman toiminnallisuuden laajentamiseen lisäkoukkujen, toimintojen ja suodattimien avulla.

Löydät funktiot.php -tiedoston helposti teemakansiosta. Voit lisätä sisäänrakennettua WP: tä ja tavallisia PHP-toimintoja suodattimiin ja koukkuihin, jotka on jo määritelty WP-ytimessä.

Voit luoda funktiot.php yksinkertaisesti luomalla pelkkätekstisen tiedoston, jonka nimeät funktiot.php ja laittamalla sen teeman hakemistoon. Tämän tiedoston avulla voit ottaa käyttöön viestimuodot, navigointivalikot ja pikkukuvat sekä WP-toiminnot ja suodattimet. 

Katso käynnistysteeman funktiot.php-tiedosto nähdäksesi muutamia esimerkkejä siitä, mitä voidaan tehdä. Voit myös etsiä artikkeleita, jotka käyttävät funktioita.php, jotka laajentavat WordPress-sivuston toimintoja funktiotiedoston avulla.

Pääteeman käyttäminen teemalla

Pääasetukset sallivat tiettyjen teema-asetusten muuttamisen muuttamatta teematiedostoja tai joutumatta muuttamaan mitään koodia. Yksityiskohtainen kuvaus tästä on tämän artikkelin ulkopuolella, joten viittaamme muutamaan artikkeliin, jotka selittävät tämän käsitteen yksityiskohtaisesti.

1. Asetukset API kuvaus WordPress Codexista.
2. Täydellinen opas WordPress Settings -sovellusliittymä

WordPress-silmukka

Kuten olemme aiemmin keskustelleet, Loop on oletusmekanismi, jota WP käyttää viestien näyttämiseen mallitiedostojen kautta.

Silmukkamekanismin avulla WP hakee viestit nykyisiltä sivuilta ja muotoilee ne silmukassa olevien "ohjeiden" mukaisesti.

Pohjimmiltaan se selaa nykyisten sivujen viestejä yksi kerrallaan suorittamalla teemalla määritetyn toiminnon. 

Voit käyttää silmukkaa

• Sisällön ja kommenttien näyttäminen
• Näytetään viestien otsikot ja otteet blogin etusivulla
• Näytä tiedot mukautetuista kentistä ja muokatuista postityypeistä
• Näytä yksittäisten sivujen sisältö mallimerkkien avulla.
• Mukauta silmukka näyttämään ja käsittelemään sisältöä mallitiedostoissa

Jos käytät Alaviivat-aloitusteemaa, löydät WordPress-silmukan, jota käytetään single.php- ja page.php-tiedostoissa. Voit halutessasi tarkastella näitä tiedostoja ymmärtääksesi miten se toimii ja / tai voidaan käyttää.

get_header ();
?>

<?php
while (have_posts ()):
Posti();

get_template_part ('malli-osat / sisältö', get_post_type ());

the_post_navigation (
array (
'prev_text' => ' '. esc_html __ ('Edellinen:', 'daves-teema'). ' % title ',
'seuraava_teksti' => ' '. esc_html __ ('Seuraava:', 'daves-teema'). ' % title ',
)
);

// Jos kommentit ovat avoimia tai meillä on ainakin yksi kommentti, lataa kommenttimalli.
jos (comments_open () || get_comments_number ()):
comments_template ();
endif;

lopulta; // Silmukan loppu.
?>

<?php
get_sidebar ();
get_footer ();

Valikko ja sivut

Ensisijainen valikko

Voit valita ensisijaisen valikon WP Menu Editorissa (sijaitsee Ulkoasu - valikossa). Teemasi voi tukea useampaa kuin yhtä navigointivalikkoa eri paikoissa teemalla. 

On myös tapoja rekisteröidä muita valikoita, esimerkiksi haluat ehkä luoda alatunnistevalikon.

Katso WordPress-koodeksi ymmärtääksesi, miten tämä tehdään: https://codex.wordpress.org/Navigation_Menus

Mukautettu sivu

WP sallii oletusarvoisesti sivujen ja viestien luomisen. Se ohjaa sivun ulkonäköä page.php mallitiedosto.

Vaikka tämä tiedosto vaikuttaa kaikkiin teeman yksittäisiin sivuihin, voit muokata niiden asettelua ja ulkonäköä. Näiden mukautettujen sivumallien muokkaaminen WP: ssä vaatii hieman HTML: ää, PHP: tä ja CSS: ää, mutta jälleen kerran sen pitäisi olla melko suoraviivaista.

index.php

Tämä malli on WordPressin oletusvaratoimintamalli minkä tahansa sivun näyttämiseen, kun mallihierarkia ei löydä muuta annettua parametriä vastaavaa sivua.

Sinun on käytettävä tätä palvelemaan kaikkea, mitä muut mallitiedostot eivät käsittele.

Arkisto.php

- arkisto.php mallia käytetään tunnisteen, tekijän, luokan ja muiden mukautettujen arkistosivujen näyttämiseen.

Arkistosivun luominen voi olla hyvä tapa kerätä kaikki sisältösi yhdelle sivulle.

Kategoria

WP-verkkokehityksessä ei ole harvinaista käyttää erilaisia ​​malleja luokkiin, mukautettuihin postityyppeihin, taksonomioihin ja tunnisteisiin. Luomalla erilaisia ​​malliluokkia voit sisällyttää erilaisia ​​ominaisuuksia jokaiselle luokkasivulle.   

Tyypillinen category.php-malli näyttää tältä:

<?php

/ **

* Yksinkertainen luokkamalli

*/

get_header (); ?>

<?php

// Tarkista, onko näytettäviä viestejä

jos (have_posts ()):?>

Kategoria:

<?php

// Näytä valinnainen luokan kuvaus

 if (luokan_kuvaus ()):?>

<?php

// Silmukka

while (have_posts ()): the_post (); ?>

mennessä

 <?php

  comments_popup_link ('Ei vielä kommentteja', '1 kommentti', '% kommentteja', 'comments-link', 'Kommentit suljettu');

?>

<?php endwhile;

muuta:?>

Pahoittelemme, yksikään kirjoitus ei vastaa kriteereitäsi.

Sivupalkki. Php

Sivupalkki on alue, johon voit laittaa widgetit WP-teemaan. Useimmiten se on kaikilla sivuilla sisällön oikealla puolella tai alapuolella.

Sivupalkkeja käytetään sellaisten asioiden näyttämiseen, jotka eivät ole suoraan yhteydessä viestiin tai sivun sisältöön, mutta esimerkiksi linkkejä sivustosi eri alueille, rekisteröintilomakkeita, mainoksia, sosiaalisen median linkkejä ja niin edelleen.

Tyypillisesti sivupalkkia käytetään yhdessä WP-widgetien kanssa.   

Näin voit lisätä widget-valmiin sivupalkin teemaan:

function wpb_widgets_init () {

    register_sidebar (taulukko (

        'nimi' => __ ('Pääsivupalkki', 'wpb'),

        'id' => 'sivupalkki-1',

        'description' => __ ('Pääsivupalkki näkyy oikealla jokaisella sivulla paitsi etusivumalli', 'wpb'),

        'before_widget' => ' ",

        'after_widget' => ' ",

        'before_title' => ' ",

        'after_title' => ' ",

    ));

    register_sidebar (taulukko (

        'nimi' => __ ('Etusivun sivupalkki', 'wpb'),

        'id' => 'sivupalkki-2',

        'description' => __ ('Näkyy staattisessa etusivumallissa', 'wpb'),

        'before_widget' => ' ",

        'after_widget' => ' ",

        'before_title' => ' ",

        'after_title' => ' ",

    ));

    }

add_action ('widget_init', 'wpb_widgets_init');

Yksittäiset postisivut (single.php)

Oletetaan, että haluat käyttää eri mallia tai asettelua tietylle verkkosivustosi artikkelille.

Tätä varten sinun on luotava mukautettu yhden viestin malli. Tämä on melko samanlainen kuin mukautettujen sivujen luominen. Noudattamalla siellä sovellettuja perusohjeita voit helposti luoda myös yksittäisiä viestejä. 

Suositellun kuvan luominen

Jos haluat lisätä tuettujen kuvien tuen, lisää seuraava koodi teemaan functions.php tiedosto:

add_theme_support ('pikkukuvien jälkeiset kuvat'); 

Nyt voit siirtyä sivuillesi tai viesteihisi ja tarkistaa, onko esillä oleva kuva-vaihtoehto käytettävissä. Mahdollisuudet ovat, WP ei näytä sitä automaattisesti, joten kuvan näyttämiseksi sinun on ehkä tehtävä pieniä muokkauksia malleihisi, joissa sivut ja viestit näytetään lisäämällä tämä koodi:

Sivunumerointi 

Tämän ominaisuuden avulla voit selata edestakaisin sisältösivujasi. Voit käyttää tätä ominaisuutta tarkastellessasi postituslistoja, joissa on enemmän merkintöjä kuin yhdelle sivulle mahtuu, tai kun haluat erottaa pidemmät viestit käyttämällä tag.

Yksinkertaisin sivutusmuoto on sijoittaa posts_nav_link (). -Funktio malliin silmukan jälkeen. Tämä luo linkkejä sekä seuraavalle viestisivulle (kun hajotat postituslistoja) että edellisiin viesteihin tarvittaessa.  

posts_nav_link ();

Voit myös käyttää next_posts_link & prev_posts_link -toimintoa hallitaksesi, missä edellinen ja seuraava viesti -sivulinkki näkyy.

next_posts_link ();

edellinen_viestien_linkki ();

Kommentit 

Kommentit ovat olennainen osa blogia tai sivua. Se antaa verkkosivuston kävijöille mahdollisuuden ottaa sinuun yhteyttä, antaa palautetta, esittää kysymyksiä ja yleensä luoda syvempi side verkkosivustoosi ja sisältösi.

Kaikki kommentit näkyvät järjestelmänvalvoja-alueella, ja voit lisätä useita ominaisuuksia, alkaen kommentoinnin sallimisesta vain tietyille käyttäjille kommenttien valvomiseen.

Voit käyttää comments.php-tiedostoa mukauttamaan teeman kommenttien ulkoasua.

Muut sivut ja tiedostot 

Tarpeidesi mukaan voit etsiä tai luoda erilaisia ​​sivuja ja tiedostoja ja räätälöidä ne mieltymyksiisi käyttämällä samoja tai samankaltaisia ​​yllä mainittuja ohjeita. 

Vanhempi / lapsi-teeman käyttäminen

Pääteema

WP: n pääteemat ovat teemoja, jotka muut teemat, nimittäin lapsiteemat, julistavat "vanhemmiksi".

Lapsiteeman avulla suunnittelijat ja kehittäjät voivat luoda mukautuksia teemoihin rikkomatta mahdollisuutta päivittää pääteemaa. Tämä johtuu siitä, että jos kehittäjä muuttaa alkuperäisiä teematiedostoja, teeman päivityksen yhteydessä muutokset menetetään.

Vanhempateemat välittävät kuitenkin ominaisuudet ja toiminnot lapsiteemoilleen. Kehittäjät voivat vapaasti tehdä muutoksia aliteeman toimintoihin ja ominaisuuksiin vaikuttamatta pääteeman päivitettävyyteen.

Lasten teema

Lapsiteemat perivät vanhempien teemojen toiminnallisuuden. Niitä käytetään ensisijaisesti olemassa olevan teeman muokkaamiseen menettämättä aiemmin lisättyjä mukautettuja tyyliä teemapäivitysten aikana.  

Lapsiteemat nopeuttavat kehitysprosessia, koska niiden avulla on helppo luoda muutoksia.

Useimmat teemat luovat lapsiteeman ja tekevät sen saataville teeman kanssa, jotta kuka tahansa, joka käyttää teemaa, voi muokata sitä lapsiteeman kautta. Määritämme, miten lapsi-teema luodaan, artikkelissamme täällä.

Kehityskehysten käyttö

Tämä termi viittaa koodikirjastoihin, joita käytetään teeman kehittämisessä. 

Kehityskehykset luotiin toimimaan pääteemamalleina kaikilla toiminnoilla. Periaatteessa, kuten vanhempien teemojen kohdalla, kehykset pysyvät koskemattomina, kun kehittäjät voivat tehdä muutoksia lapsiteemoihin.

Tämä nopeuttaa kehitystä ja helpottaa vikojen poistamista tietyissä teemakehyksissä. Merkittäviin kehityskehyksiin kuuluu Genesis-teema, Themify ja Divi Elegant Themes.

WordPress-teeman luominen

Edellä on ollut yksityiskohtainen vaiheittainen opas oman mukautetun WordPress-teeman kehittämisen aloittamiseen.

Kaiken kaikkiaan, vaikka sinulla on oltava hyvä tuntemus WordPressistä ja PHP: stä, se ei ole niin vaativa prosessi. Verkkokehityksen perusteiden tunteminen on tärkeää, ja voit ymmärtää WordPress-ytimen tarkemmin kehittäessäsi. Jos et vielä halua olla tehtävän tasalla, se on ok, ota aikaa ja kokeile vähän.

Kun olet tehnyt muutaman virheen, alat oppia enemmän ja enemmän. On myös hyvä tarkastella muiden suosittujen teemojen koodipohjaa ymmärtääkseen, mitä he tekevät, ja saada hyvä käsitys järkevistä käytännöistä.

Kerro meille, jos sinulla on kysyttävää alla olevista kommenteista.

kirjailijasta

Kirjoittaja: David AttardVerkkosivu: https://www.linkedin.com/in/dattard/Sähköposti: David@collectiveray.com

David on työskennellyt verkko- / digitaalialalla tai sen ympäristössä viimeiset 18 vuotta. Hänellä on laaja kokemus ohjelmisto- ja verkkosuunnitteluteollisuudesta WordPressin, Joomlan ja niitä ympäröivien markkinarakojen käytöstä. Digitaalisena konsulttina hän keskittyy auttamaan yrityksiä saamaan kilpailuetua käyttämällä verkkosivustonsa ja tänään saatavilla olevien digitaalisten alustojen yhdistelmää.