Haluatko vain luoda hieman mukautetun teeman tai jotain aivan ainutlaatuista, luomalla WordPressin lasten teema voi suuresti nopeuttaa kehitystyötä.

Lasten teemojen avulla voit aloittaa olemassa olevan teeman perusteet, joten sinun ei tarvitse keksimään pyörää uudelleen. Voit valita teeman, jolla on tarvittavat toiminnot ja perussijainti, mutta muokata sitä kaiken sen jälkeen, kun suunnittelet teeman tyhjästä.

Tätä opetusohjelmaa varten luomme lapsen teeman uusimman WordPress-oletusaiheen, Twenty Eleven perusteella. Käytämme myös käteviä laajennuksia ja muita temppuja, jotta lapsen teema olisi vielä helpompaa.

Tarvitset hyvin perusluonteisia HTML- ja CSS-tietoja, mutta hyvä uutinen on, että perus-lapsen teemassa sinun ei tarvitse tuntea mitään PHP: tä! Luotu teema on hyvin perusmateriaali, mutta antaa sinulle rakennuspalikoita, jotka tarvitset pääset luomaan omia teemoja, vaikka et aiemmin luonut WordPress-teemaa!

Teema, jonka luomme

Seuraavassa on lyhyt katsaus viimeiseen teemaan, jonka luomme:

Sana vanhempien teemojen suhteen

Todennäköisesti tärkein askel lapsen teeman luomisessa on poiminta vanhemman teemasi. Tätä opetusohjelmaa varten, kuten jo mainittiin, käytämme Twenty Eleven -ohjelmaa. Syyt tähän ovat se, että se on helposti saatavilla, ilmainen, on todennäköisesti jo asennettuna päivitettyyn WP-asennusohjelmaan ja on hyvin koodattu.

Tämä viimeinen on tärkein asia harkita, kun poimitaan vanhemman teema: varmista, että se on hyvin koodattu. Tärkein syy tähän on, että jos vanhemasi teema on hyvin koodattu, on äärettömän helpompaa luoda lapsityylinen teema, joka on hyvin koodattu, koska sinun ei tarvitse käyttää hakkereita, jotta asiat toimisivat.

Aina kun haluat tehdä muokkauksia teemalle, sinun on parasta käyttää lapsen teemaa sen sijaan, että muokattaisit vanhemman teemaa suoraan. Tällä tavalla, jos alkuperäisen teeman päivitys annetaan, teema ei murota. Ja jos sekä vanhemman teema että teema ovat hyvin koodattuina, et todennäköisesti huomaa mitään eroja sivustosi etupäässä päivitetyssä teemassa.

One-Click Child Theme

Nopein ja helpoin tapa aloittaa lapsen teema on käyttää One-Click Child Theme kytkeä. Asenna se vain, aktivoi vanhemman teema, jonka haluat lapsesi teeman perustua (jos se ei ole vielä käytössä) ja napsauta WMP-hallintapaneelin kohdassa Ulkoasu-kohdan "Lasten teema".

Sieltä anna uuden lapsesi teeman nimi, lyhyt kuvaus ja nimi ja napsauta "Luo lapsi". Siinä kaikki on. Yksi sana tai varoitus: Sain virheilmoituksen klikkaamalla Luo lapsi, mutta lapsen teema luotiin ilman vetoa.

Vaihtoehtoisesti voit luoda lapsen teeman tyhjästä. Voit tehdä tämän avaamalla valitsemasi tekstin tai koodineditorin ja antamalla seuraavat tiedot (tämä ottaa huomioon, että käytät kaksikymmentäneljä vanhempaa teemaa):

/*Theme Name:     Your Child Theme's NameDescription:    Your theme's description.Author:         Your Name HereTemplate:       twentyeleven(optional values you can add: Theme URI, Author URI, Version)*/@import url("../twentyeleven/style.css");

Template-osa on se, mikä tekee tästä lapsityylin sijasta säännöllisen teeman, joten varmista, että tunnistat aiheen vanhemman.

Teeman asetukset

Ennen kuin aloitat uuden lapsityylin CSS: n mukauttamisen, varmista, että voit tarkastella teemavalintoja ja tehdä joitain muokkauksia siellä. On parasta tehdä muutoksia nykyisen teeman puitteissa, jos se on vaihtoehto, koska se helpottaa teemasi koodin hallintaa.

Tätä muokkausta varten olen valinnut sisällön vasemmanpuolisen asettelun yhdellä sivupalkilla ja jätin värijärjestelmän ja oletusnivelen värin (nyt). Olen myös jättänyt taustan valkoiseksi, otsikon yhdellä oletuskuvasta ja otsikkotekstiväri musta.

Huomaa: Jos haluat poistaa värivalinnan teemavalinnoista, lisää !important CSS: n väriominaisuuksiin.

Teeman muokkaaminen

Jos siirryt WordPress-teemaeditoriksi, näet enimmäkseen tyhjän tyylitiedoston uudelle lapsesi teemalle. Uusi CSS-tiedoston ensimmäinen rivi (lapsen teematiedon jälkeen) tuo tyylitietokannan vanhemmat teemasta. Tämä on elintärkeää, ja sen on pysyttävä yläosassa arkistossasi tai vanhemman tyylitaulukko mitätöidään eikä tuota.

Yksi asia, jonka haluat ehkä tehdä tässä vaiheessa, on asentaa paremman koodinmuokkaussovittimen teeman muokkaamiseen. Värikoodatulla syntaksilla on huomattavasti helpompi koodata suoraan WP: ssä, ja se on erityisen hyödyllinen niille, jotka käyttävät värillistä syntaksia ulkoisten editorien kanssa. Oma valinta on Advanced Code Editor .

Haluat myös jonkinlaisen tekstieditorin toimintojen.php-tiedoston, mieluummin syntaksin korostuksen, määrittämiseen.

Koodin muuttaminen

Tämä voi olla yksi lapsityyppien kehityksen turhaavista osista: selvittää, mitä koodin osia on muokattava ja jotka voidaan jättää yksin. Lapsen teeman koko kohta on tehdä teeman luomisesta ja ylläpidosta helpompaa. Tätä varten haluamme luoda mahdollisimman vähän uutta koodia.

Jotta tämä olisi helpompaa, sinun kannattaa asentaa plugin pyromaani . Tämän avulla voit napsauttaa osaa sivun suunnittelusta ja tarkastella sitä div ja CSS-luokissa. Voit myös kokeilla koodia nähdäksesi, mikä toimii, ja kopioi ja liitä se teemasi CSS: ään. Olen huomannut, että etupään teema on avoinna yhdelle välilehdelle toisen välilehden vieressä WP-kojelaudan kanssa, jossa muokkaat tiedostoja, tehokkain tapa koodin muokkaamiseen.

Perusteet

Aloitetaan määrittelemällä asioita, kuten kehon taustaväri, typografia ja muut perusteet, jotka antavat meille perusta lapsemme teemalle. Tämä koodi määrittää kaiken otsakkeessa, paitsi siirtääksesi navigointivalikon. Let's break it alas muutamia eri vaiheita.

Tämä ensimmäinen koodilohko antaa meille kaiken perustyptografiamme (vedämme "Droid Sans" ja "Dancing Script" Googlen Web-fonttien avulla. functions.php ):

body, input, textarea, p {color: #000000;font-family: 'Droid Sans', sans-serif;}p {font-size: 14px;line-height: 24px;}h1, h2, h3, h4, h5, h6 {font-family: 'Dancing Script', cursive;}

Seuraava osio asettaa pääsisällön ja pudota varjo .

#page {background: #f5f5dc;-moz-box-shadow: 0 0 10px #67949c;-webkit-box-shadow: 0 0 10px #67949c;box-shadow: 0 0 10px #67949c;}

Sitten tehdään joitain muutoksia blogin otsikkoon ja kuvaukseen sekä otsikon ylärivin muuttamiseen ja hakulomakkeen poistamiseen (joka korvataan navigointivalikollamme seuraavassa vaiheessa).

#site-title a {font-size: 48px;font-weight: 700;line-height: 60px;}#branding {border-top: 2px solid #67949c;}#branding #searchform {display: none;}#site-description {font-size: 18px;margin: 0 270px 3em 0;}

Tämä antaa meille otsikon, joka näyttää tältä:

Siirrä päävalikkoa

Seuraava muutos, jonka haluamme tehdä, on siirtyä navigointivalikosta oletusasemaan otsikkokuvan alla oikealla ylhäällä, vastapäätä blogin otsikkoa tai logoa.

Tämä muoto toimii parhaiten sivustoille, joilla on vain pieni määrä sivuja. Suuremmat sivustot tai sivut, joissa on sivuja, tarvitsevat lisäkysymystä ja eivät todennäköisesti toimi hyvin tämäntyyppisen ulkoasun kanssa.

Täältä tarvitset koodin:

#access {clear: both;display: block;float: right;margin: 0 auto 6px;position: relative;top: -410px;width: 500px;background: none;box-shadow: none;}

Sinun navigointi-valikon pitäisi nyt istua ylätunnisteen yläpuolella, logon vieressä. Seuraavaksi lisäämme tyylejä navigointiin ja siirrämme ne painikkeiksi kiinteän palkin sijaan. Tässä on perusfontin muotoilu:

 #access a {font-family: 'Dancing Script', 'Helvetica Neue',Helvetica,Arial,sans-serif;font-size: 1.4em;font-weight: 700;padding: 0 1em;line-height: 2.666em;}

Tässä on tekstin taustalla olevan painikkeen perusmuotoilu, mukaan lukien mukava sisäinen varjo:

#access li {background: #84bbc5;margin-right: 15px;-moz-box-shadow: inset 0 0 3px 3px #739ca3;-webkit-box-shadow: inset 0 0 3px 3px #739ca3;box-shadow: inset 0 0 3px 3px #739ca3;}

Ja tässä on koodi, jolla lisätään pudotus varjon painikkeiden taakse, kun ne ovat lyöneet (mikä antaa todella vaikutelman animaation vaikutuksesta käytössä):

#access li:hover > a, #access a:focus {background: #84bbc5;color: #EEEEEE;-moz-box-shadow: 0 0 3px 3px #739ca3;-webkit-box-shadow: 0 0 3px 3px #739ca3;box-shadow: 0 0 3px 3px #739ca3;}

Nyt otsake näyttää tältä:

Perussanasto sivupalkille

Lisätään joitain perusstylejä sivupalkkiisi. Muutokset, joita teemme täällä, ovat ensisijaisesti tekemällä sivupalkit vastaamaan muuhun sivuston muotoiluun. Tässä on koodi:

.widget a {font-weight: 400;font-family: 'Droid Sans', sans-serif !important;}.widget-title {color: #282828;letter-spacing: 0.1em;line-height: 1.5em;text-transform: none;}

.widget-title is already in an H3 tag, so it takes on the font already specified there. on jo H3-tunnisteessa, joten siinä on jo määritetty fontti.

Ja näin näyttää siltä,

Muutokset postin muotoon

Ensin haluamme vaihtaa pehmusteita viestien päälle, joten ensimmäinen viesti riviin sivupalkin yläosaan.

.entry-title {padding-top: 0px;}

Seuraavaksi vaihdamme komentosymbolin, joka näkyy kotisivun postin otsikon vieressä. Tämä on yksinkertainen: vain luo uusi kuvake (olen luonut versiot aktiivisille ja ei-aktiivisille versioille) ja lataa ne sitten WP: n mediaeditoriin. Ota URL-osoite kustakin, ja lisää ne näin:

.entry-header .comments-link a {background: url("https://blogetic.com/site/wp-content/uploads/2011/11/comment-link.png") no-repeat scroll 0 0;top: 0;}.entry-header .comments-link a:hover, .entry-header .comments-link a:focus, .entry-header .comments-link a:active {background: url("https://blogetic.com/site/wp-content/uploads/2011/11/comment-active.png") no-repeat scroll 0 0;background-color:  #f5f5dc !important;}

Sinun on lisättävä !important on background-color attribuutti leijuvasta tilasta, jotta ohjataan muotoilua muille teemoille. Hover-kuva on täytetty teksti-kupla, kun taas normaali tila on vain ääriviiva. Tässä on tulos:

Seuraavaksi työskentelemme kommenttien tyylillä. Tämä on yksinkertaista, koska kaikki, mitä teemme, on värimallin muuttaminen. Tässä on koodi:

#respond {background: none repeat scroll 0 0 #dadabe;border: 1px solid #67949c;}#respond input[type="text"], #respond textarea {background: none repeat scroll 0 0 #FFFFFF;border: 4px solid #b3b398;}#respond .comment-form-author label, #respond .comment-form-email label, #respond .comment-form-url label, #respond .comment-form-comment label {background: none repeat scroll 0 0 #b3b398;box-shadow: 1px 2px 2px rgba(204, 204, 204, 0.8);color: #555555;}#respond input#submit {background: none repeat scroll 0 0 #67949c;}

Ja tässä on lopputulos:

Koodin lisääminen päähänsi tai muualle teemaan

Tämä on luultavasti teknisin osa lapsen teeman luomiseen, ja se on välttämätön vain, jos haluat tehdä jotain sellaista kuin lisää Google Web -fontteja sivustoosi. Juuri tästä me aiomme tehdä täällä. Tämä on ainoa tapa luoda lapsesi teema, jonka täytyy työskennellä PHP: n kanssa, ja jos sinun ei tarvitse lisätä mitään teemasi otsikkoon tai muualle, sinun ei tarvitse työskennellä PHP: n kanssa lainkaan.

Luo ensin funktio.php-tiedosto tekstin tai valitsemasi koodinmuokkaustilaan. Käytettävä peruskoodi näyttää jotain tällaiselta:

Edellä olevan lapsen teemaa varten tarvitsemme koodin lisäämisen otsikkoon, jotta linkit sopivat Google-verkko-fontit, jotta voimme kutsua ne CSS: ään. Näin me teemme sen (voit saada link suoraan Googlelta käyttäen mitä fontteja haluat käyttää):

Nyt fonttisi pitäisi toimia kunnolla! Ja kaikki alkuperäisen emootion sisältämät toiminnot toimivat edelleen.

Lataa teematiedostot

Jos haluat nähdä kaikki koodin sekä CSS: n että functions.php-tiedoston, voit ladata ne tässä . Mukana ovat myös kommenttikuplan kuvakkeet.

johtopäätös

Lapsen teeman luominen on uskomattoman helppoa verrattuna teeman suunnitteluun ja koodaamiseen tyhjästä. Jotkut perus CSS-tietämys ja vain vähän PHP, voit luoda periaatteessa minkä tahansa teeman haluat. Lapsen teemoja voidaan monissa tapauksissa käyttää myös kaupallisesti (niin kauan kuin vanhemman teema sallii tällaisen käytön) tai myydään varastoteemina (vain mainita ostajat tietävät, että teema vaatii vanhemman teeman).

Varmista, että koodisi on hyvin kirjoitettu, kommentoinut ja järjestetty. Tällä tavoin, jos vanhemasi teema päivitetään, lapsesi teema ei todennäköisesti hajoa.

Tässä opetusohjelmassa luodun lapsen teema on hyvin, hyvin perustiedot. Mutta se antaa sinulle tarvittavat tiedot aloittaaksesi omien teemiesi suunnittelun. Aloita perus-restylingilla saadaksesi jalkasi märkäksi ja sitten selvittämään, mitä voit tehdä PHP: n funktion.php-tiedostossa. Lapsi teemoja, kun ne on rakennettu erinomaiseen vanhemman teemaan, voivat olla yhtä voimakkaita kuin muut käytettävissä olevat teemat. Lisätietoja lapsiaiheista on osoitteessa WordPress Codex .

Onko sinulla lisää vinkkejä loistavien lasten teemojen luomiseen? Kerro meille kommentit!