Opas WordPressin lasten teemakehitykseen

On olemassa useita syitä, joiden vuoksi WordPressin kehittäjät alkavat käyttää lasten teemoja. Ne antavat sinulle mahdollisuuden muokata ainutlaatuista ulkoasua toisen olemassa olevan teeman päälle. Tämä sopii erinomaisesti aloittelijoille, jotka haluavat leikkiä omien teemojensa rakentamisessa.

Lisäksi monet premium-mallit julkaisevat uusia päivityksiä ajan myötä. Jos teet muutoksia keskeisiin teematiedostoihin, ne korvataan päivityksen yhteydessä, mutta lasten teemat ovat erillisiä ja siististi. Tämä tarkoittaa sitä, että voit rakentaa nykyisiä palkkioaiheita ja säästää aikaa prosessissa.

Tässä oppaassa haluan esitellä peruskäsitteet WordPress-lasten teeman rakentamisesta ja miksi se on niin hyvä idea.

Päästä alkuun

Lapsi-teemat eivät ole niin vaikeita kuin ne voivat näkyä. Vanhemman teeman käytöstä hyötyminen tarkoittaa sitä, että sinun ei tarvitse kirjoittaa kaikkia HTML / CSS: ää tyhjästä. Lapsiteema käyttää automaattisesti kaikkia sisältämiäsi mallitiedostoja, kuten sidebar.php tai footer.php. Mutta jos ne puuttuvat, lapsesi teema vetää samat tiedostot vanhemmaltaan.

Tämä toiminto tarjoaa valtavan vapauden muokata jo olemassa olevia malleja. Se on myös hyvä koskettamalla sivustosi ympärillä olevia alueita erityistapahtumiin, kuten suunnittelumallien lisäämiseen joulun tai uudenvuoden aikaan.

Vaaditut tiedostot

Tarvitset vain yhden .css-tyylitaulukon, jos haluat määrittää lapsi-teeman WordPressissa. Sinun on myös luotava uusi hakemisto / Wp-content / themes kansio, jossa on lapsesi teema. Kiinnitä huomiota siihen, että sinä eivät luodaan tämä kansio vanhemman teeman sisällä, mutta sen rinnalla samassa teeman hakemistossa.

Kehittäjät sisältävät usein funktioita.php ja screenshot.png samaan kansioon kuin uusi CSS-tiedosto. Kuvakaappaus näkyy WordPress-järjestelmänvalvojapaneelissa ja toimintojen teematiedostoa voidaan käyttää taustamuutosten tonneina.

Mutta nyt meidän pitäisi keskittyä tärkeimpään tyylitaulukkoon. Tämä on yleisesti nimetty style.css ja sisältää kommentin otsikon, jossa on keskeiset metatiedot. Tämä on tärkeää, koska teema näkyy vain lapsena, jos lisäät vanhemman hakemiston nimen. Alla on esimerkki otsikon kommentista:

 / * Teeman nimi: Kaksikymmentä Eleven Lapsi -teemaa URI: http: //esimerkki.fi/ Kuvaus: Lapsi-teema Kaksikymmentä Eleven-mallia varten Tekijä: Jake Rocheleau Kirjoittaja URI: http: //www.hongkiat.com/blog/ Malline: twentyeleven Versio: 0.1 * / 

Arvo sapluuna pitäisi olla mukana olevan vanhemman teeman hakemiston nimi. Muut kuin kaikki muut tunnisteet pitäisi tuntea tavallisille WordPress-teemoille.

Vaikka kaikkia vanhempia PHP-malleja käytetään, alkuperäisen vanhemman tyyli.css tulee ei tuodaan automaattisesti. Jos haluat poistaa alkuperäiset tyylit, sinun on sisällytettävä se lapsen style.css-asiakirjan yläreunaan. Alla on esimerkki WP Twenty Eleven -teemasta.

 @import url ("… /twentyeleven/style.css"); 

Uusien tyylien määrittäminen

CSS-sääntöjen soveltaminen teemaan on yhtä helppoa kuin alkuperäisen muokkaaminen. Jos tiedät, mitä elementtejä sinun on kohdennettava, käytä samoja valintoja omassa lapsesi teemassa.

Voisimme demoida joitakin todella helppoja muutoksia linkkeihin ja kappaleisiin. Olen käyttänyt koodia alkuperäisestä Twenty Eleven -teemasta kohdistaaksesi eri elementtejä. Joskus on tarpeen käyttää tarkempaa valitsinta ohittamaan vanhempi muotoilu.

 body padding: 0 1.4em;  #page margin: 1.667em auto; max-leveys: 900px;  a väri: # 5281df; teksti-koristelu: ei; font-perhe: Calibri, Tahoma, Arial, sans-serif;  a: tarkennus, a: aktiivinen, a: hover text-decoration: alleviivattu;  

Näissä muutoksissa olen vähentänyt koko kehon kokoa ja poistanut myös joitakin pehmusteita reunoista. Kaikki nämä valitsimet löytyvät alkuperäisestä .css-asiakirjasta. On huomattava, että olen myös muuttanut joitakin ominaisuuksia kaikille ankkurilinkeille, jotka sisältävät eri kirjasinipinon ja värivalinnan.

Tärkeitä asioita

CSS: llä on erityinen ilmoitus, joka merkitsee etusijalle muita tyylejä. Syntaksi näytetään !tärkeä alkaa huutomerkillä ja päättyy CSS-ominaisuutesi lopussa. Tämä on välttämätöntä, jos sinulla on vanhemman teeman kaskadityylejä, jotka ohittavat omat mukautetut säännöt.

 a color: # 5281df! tärkeää; teksti-koristelu: ei; font-perhe: Calibri, Tahoma, Arial, sans-serif;  

Yllä olen kopioinut alkuperäiset muutokset ja muokannut ankkuritekstin värin tärkeällä lausekkeella. Tämä on etusijalla kaikkiin muihin saman valintasyvyyden tyyleihin. Enemmän määriteltyjä elementtejä (kuten #access li: hover> a) on yleensä oma tyylinsä, ellei väri- oli edelleen peritty alkuperäisestä valitsimestamme. Tällöin vanhemman teema ei asenna fonttiperheen omaisuutta ankkurilinkeissä, joten emme mene perintöongelmiin.

Jos sinulla on vaikeuksia tehdä muutoksia, yritä avata yksi näistä tärkeistä merkkeistä omaisuutta koskevan ilmoituksen lopussa. Tämä ei ole täydellinen korjaus jokaiselle perintöongelmalle, mutta se on kätevä paljon useammin kuin luulisi.

Kloonausfunktiot.php

Toisin kuin tärkein tyylitaulukko, lapsesi teema tuo vanhempiensa toiminnot automaattisesti. Tämä tarkoittaa sitä, että sinun ei tarvitse kopioida mitään PHP-koodia, jotta se pysyy aktiivisena uudessa teoksessa. Kuitenkin, jos haluat määrittää joitakin toimintoja, voit luoda toisen toiminnon.php ja kirjoittaa uudessa koodissasi muutoksia.

Esimerkiksi olen rakentanut funktion, joka jäsentää muutamia JavaScript-tiedostoja, kun malli käynnistyy. Tämä poistaa kaikki vanhemmat jQuery- ja SWFObject-komentosarjojen versiot lisäämällä samalla uusimmat versiot wp_head alue.

 // jonon js-tiedostot kuormitustoiminnolle mytheme_js () if (is_admin ()); wp_deregister_script (jquery '); wp_register_script ('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'); wp_enqueue_script (jquery '); wp_deregister_script (swfobject '); wp_register_script ('swfobject', 'http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js'); wp_enqueue_script (swfobject ');  add_action ('init', mytheme_js); 

Haluaisin huomauttaa, että jos tuot koodia vanhemmista funktioista.php, sinun on käytettävä eri funktion nimeä. Muuten PHP antaa kuolemaan johtavan virheen, ja sinun on FTP: tä palvelimeen korjaamaan virhe.

Teematiedostojen käyttö

Laajin kategoria aiheita on mukautettujen ulkoasujen ja sivutyyppien rakentaminen. Oletuksena lapsesi teema perii kaikki sen vanhemman teematiedostot. Mutta sinulla on mahdollisuus luoda uusia lasten teematiedostoja, ja WP rekisteröi ne "ensisijaiseksi" malliksi.

Esimerkiksi archive.php ja index.php käytetään arkistojen ja kotisivun näyttämiseen. Jos haluat tehdä muutoksia, jotka edellyttävät HTML: n muokkaamista, olisit turvallisempi vanhempien tiedostojen kloonaaminen ja muokkaaminen lapsen teeman hakemistossa.

Mukautetut sivumallit

Vaikka puhumme mallitiedostoista, haluan myös esitellä WordPress-toiminnon, jota monet eivät tunne. Voit luoda sivu- ja postimalleja, jotka valitaan hallintapaneelista, kun luot uutta sisältöä. Vaikka vanhemmassa teoksessa ei ole uutta mukautettua mallitiedostoa, WordPress käyttää edelleen lapsen sijasta a page.php tai single.php.

Luo ensin uusi tiedosto nimeltä page-offer.php. Tämä on a “erikoistarjous” myynninedistämissivu, joka on erilainen kuin kaikki muut. Täällä voit kopioida alkuperäisen sivukoodisi tai rakentaa teeman kokonaan tyhjästä. Ainoa koodi, jonka täytyy antaa WordPressille tietää tästä uudesta mallista, on kommenttiasetus PHP: ssä.

Toinen vaihtoehto tähän menetelmään on yksilöllisen tunnusnumeron mukaan nimettyjen mukautettujen sivujen rakentaminen. Joten sen sijaan, että olet ladannut oletusasetuksen archive.php tekijän sivuille voit luoda tiedoston, kuten kirjailija-ID.php jossa ID on käyttäjän ainutlaatuinen WordPress-tunnusnumero. Vaikka tämä järjestelmä verottaa enemmän, koska sinun on luotava uusi mallitiedosto jokaiselle sivustosi tekijälle.

Se tulee hyödyllisemmäksi, jos voit yhdistää nämä kaksi tekniikkaa muiden mallitiedostojen kanssa. Erityisesti luokat ja tunnisteet toimivat hyvin omien teematiedostojensa avulla. Jos linkit sisällön liitetiedostoihin, sinun kannattaa harkita eri mime-tyypin eri mallipohjia. Olen sisällyttänyt alla olevan mallin hierarkian yksinkertaisen JPEG-kuvan liitetiedostoon:

• image.php
• jpeg.php
• image_jpeg.php
• attachment.php

Hyödyllisiä WordPress-työkaluja

Itse WordPressissä on monipuolinen plugins-järjestelmä, joka voi hallita paljon mukautuksia. Koska lasten teemat ovat niin uusia, kolmansien osapuolten julkaisuja ei ole vielä hyökätty. On kuitenkin olemassa muutamia työkaluja, joiden avulla voit tarkistaa kehitysajan hieman lyhyemmäksi.

Ilmeinen maininta on yhdellä napsautuksella varustettu lapsi-teeman laajennus, joka on rakennettu ja testattu uusimman WordPress 3.x -versiota varten. Se lisää valikkolinkin Admin-järjestelmään “Teemat” osio rakentaa lapsen automaattisesti aktiivisen teeman avulla. Tämä on fantastinen, jos et halua sotkea FTP: n kanssa ja haluavat pelata noin uusia ideoita.

Jos aiot muokata näitä tiedostoja admin-paneelissa, voit myös nauttia selkeämmästä syntaksi korostuksesta. Tätä ei tarjota oletusarvoisesti WordPressissa, mutta voit asentaa Advanced Code Editorin jonkin verran parannettua toimintoa varten. Tämä tekee wadingin PHP-koodilohkojen ja HTML / CSS: n kautta paljon helpommin hallittavaksi.

Lisäresurssit

Tämän oppaan kaikkien vinkkien lisäksi haluan jakaa tärkeitä linkkejä teemankehittäjille. On jo niin paljon hienoja artikkeleita ja vapaita lapsia, joita voit tarkistaa opiskelemaan syvemmälle tähän aiheeseen. Lisäsin upean kokoelman näistä resursseista alla:

• 8 Vapaita kaksikymmentätoista lapsia
• WordPress Online Codex »Lasten teemat
• Miten rakentaa WordPress-lapsiteema käyttämällä koukkuja ja suodattimia
• Muutamia sanoja lapsen teemoista
• Kuinka luoda, muokata ja käyttää lapsia koskevia teemoja WordPressissa

johtopäätös

Toivon, että WordPress-lasten teemojen rakentamisprosessi on sinulle selvempi tämän artikkelin lukemisen jälkeen. Olen yrittänyt selittää, miten lapsen teemat voivat periä sekä CSS- että PHP-mallit vanhemmalta. Lisäksi on hyvin helppoa käsitellä tiettyjä tiedostoja ja luoda omia ainutlaatuisia teemoja.

.