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ä:
- Etanaa vastaavat tiedostot, tässä tapauksessa, Tämä postaus.
- Viestitunnusta vastaavat tiedostot.
- Yleinen yhden postin tiedosto, kuten single.php.
- Tässä tapauksessa arkistotiedosto, arkisto.php.
- – 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”>