Good Mood

Tämä on hauskaa opetusohjelma, jossa voimme tarkastaa, miten luoda oman WordPress Teema tyhjästä. Itse asiassa, aloitamme täysin nolla tiedostoja ja nolla riviä koodia. Ainoa tapa ymmärtää, miten WordPress teemoja toimivat, on todella hypätä alhaiselle tasolle ja tehdä jokainen asia itse. Kyllä, se on houkuttelevaa välttää tämän, koska voit tehdä WordPress tehdä kaiken puolestasi ilman ymmärrystä koodi, että voimia se., Tämä voi olla PHP, JavaScript, CSS tai jopa perus HTML. Loppuun mennessä tämän askel askeleelta WordPress teema opetusohjelma, ymmärrät, miten kaikki sopii yhteen ja miten taivuttaa WordPress tahtosi helposti.

on niin monia ilmaisia teemoja käytettävissä, kun olet käynnissä WordPress verkkosivuilla. Beyond ilmaisia teemoja, saatat myös valita maksaa palkkio ammattimaisesti tehty WordPress teemoja, jotka näyttävät hyvältä ja on fantastinen ominaisuuksia. Joten miksi oppia luomaan oman teeman tyhjästä?, Vastaus on, että riippumatta siitä, mitä teemaa käytät, tulee aika, jolloin haluat tehdä yksinkertaisia muutoksia sivustoosi. Jotkut näistä muutoksista voidaan majoittaa yksinkertainen plugin tai widget. Monta kertaa kuitenkin, se tekee enemmän järkeä ymmärtää, mitä se on haluat muuttaa, miten muuttaa sitä, ja välttää kääntämällä WordPress sivuston osaksi sotku plugins ja lisäosat, jotka tullut kömpelö. Vain vähän perustason tietoa, voit luottaa muokkaamalla teema, tai yksinkertaisesti rakentaa oman tyhjästä., Tiedät, mitä tiedostoa muokata, ja mitä koodia lisätä tai muokata luoda haluamasi tulos.

Vaihe 1: Luo kansio pitää teeman tiedostot.

Jos aiomme olla rakentamassa teemoja, meidän täytyy tietää, missä tiedostot, jotka muodostavat WordPress teema elää WordPress Asennus. Tämä on aika helppoa. Tiedämme, että WordPress-installaatiossa on tyypillisesti juurihakemisto nimeltä wordpress. Tältä juurihakemistomme näyttää PHP Stormissa.,

Tämä hakemisto sisältää seuraavat tiedostot ja kansiot:

Tiedostot

Kansiot

• wp-admin
• wp-content
• wp-sisältää

kansio että olemme kiinnostuneita juuri nyt on wp-content-kansioon. Wp-content-kansiossa on kansio nimeltä teemat. Tiedätkö, mitä varten tämä kansio on? Juuri niin! Se on kansio, joka pitää yhden tai useamman teemoja, joita haluat käyttää WordPress verkkosivuilla., Tässä teemat-kansio löydämme kolme lisää kansioita twentyfifteen, twentysixteen, ja twentyseventeen. Nämä kansiot sisältävät kolme teemaa, että WordPress alukset oletuksena. Huomaa alla, että on myös kansio nimeltä customtheme. Mene eteenpäin ja luoda että kansio sekä asennuksen, koska tämä on, jossa luomme WordPress teema tyhjästä.

Vaihe 2: Luo tyyli.css ja indeksi.php mukautetussa teemakansiossasi

tiedämme nyt, missä WordPress – teematiedostot ovat tiedostojärjestelmässä., Olemme myös luoneet uuden kansion nimeltä customtheme teemat-kansiossamme. Aiomme nyt luoda kaksi tyhjää tiedostoa tähän hakemistoon. Yhtä kutsutaan indeksiksi.php ja toinen on nimeltään style.css.

Anna meille nyt kansoittavat nämä tiedostot minimiin meidän täytyy saada uusi teema WordPress.

tyyli.css

WordPress lukee itse asiassa kommentit, jotka asetat tyyliin.css-tiedosto. Tässä tarkennat erityistä tietoa rakentamastasi teemasta.

tyyli.,css on stylesheet (CSS) tiedosto tarvitaan jokaisen WordPress teema. Se ohjaa verkkosivujen esitystapaa (visuaalista suunnittelua ja asettelua).

– meidän pätkä täällä me yksinkertaisesti määrittää Teeman Nimi, Kirjailija, Kirjoittaja URI, ja Version numero meidän teema.,

indeksi.,php

tässä tiedostossa haluamme vain lähettää jotain näytölle todistaaksemme, että mukautettu teemamme toimii.

– Hienoa Työtä! Usko tai älä, olet luonut ensimmäisen WordPress Teema.,

Vaihe 3: Aktivoi teema WordPress Kojelautaan

tässä vaiheessa voimme vierailla WordPress Kojelauta ja siirry Ulkonäkö->Teemat ja katso, me näemme, että uusi teema olemme luoneet.

Voimme klikkaa ”Teeman Tiedot” porata alas meidän custom teema ja löytää, että tietoja, joita meillä oli tullut osaksi tyyli.css-tiedosto on toiminut. Voimme nähdä ne on nimi customtheme, Versio 1.0, kirjailija Vegibit, ja linkki URI olimme toimittaneet. Tosi siistiä.,

Ja nyt, totuuden hetki! Mennä eteenpäin ja klikkaa ”Aktivoi” uusi customtheme ja sitten vierailla sivustolla. Se ei voita yhtään Webby awards-palkintoa, mutta meillä itsellämme on hyvä alku uudelle custom-teemalle!

Vaihe 4: Lisää Koodi Lähtö Post Otsikko ja Post Tekstiä

Olemme ottaa vapauden lisätä pari esimerkkiä viesteistä tietokantaan, jotta voimme työskennellä että tietoja aikana tämä opetusohjelma. Juuri nyt, meidän teema vain ulostulot mukautetun teema!, sivulle, kun käymme sivustollamme riippumatta siitä, kuinka monta viestiä tietokannassa on. Siirrytään nyt hakemaan tietoja tietokannasta, ja outputting se sivulle. Erityisesti, haluamme noutaa Post otsikko ja lähettää sisältöä kaikki viestit ja tarkastella niitä kotisivulla. Kokeillaan sitä nyt. Ensin katsotaan, mitä meillä on virkaa WordPress kojelauta.

Hyödyntämällä WordPress Silmukka

Nyt voimme puhua hieman siitä WordPress-Silmukka. WordPress silmukka on todella moottori, joka tekee WordPress ajaa., Se on tämän silmukan kautta, että teema Kehittäjät tarkistaa virkaa ja näyttää ne sivulla tarpeen mukaan. If seuraa muotoa seuraavasti. Jos tietokannassa on virkaa, kierretään ne, kun vielä on virkaa, muuten kerromme käyttäjälle, ettei viestejä ole. Tältä näyttää PHP-koodissa.,

Huomaa, että Silmukka käyttää kaksi tehtävää, sen alkeellisinta muodossa. Ne ovat have_posts() ja the_post(). Have_posts () – funktio tekee vain yhden asian. Se kertoo, jos on olemassa virkaa tietokannassa silmukka yli., Tämä funktio palauttaa joko true tai false ja se on se. Jos se palauttaa true, on virkoja, jotka voidaan kytkeä päälle. Jos se palaa false, niin ei ole mitään virkaa silmukan yli. Toinen funktio, the_post () ei palauta mitään. Se työ on saada WordPress valmis tulostamaan virkaa. Erityisesti, se hakee ensi postitse, asettaa virkaan, asetetaan in_the_loop omaisuutta true., Toistaiseksi sivu ei vielä anna mitään tietoa blogikirjoituksistamme, mutta voimme päivittää sen nyt indeksissämme.php-tiedosto.

Ok cool. Olemme nyt käyttäneet kaksi muuta WordPress toimintoja, the_title() ja the_content(). Useimmiten näitä toimintoja käytetään silmukan sisällä ja mitä he tehdä, on noutaa otsikko ja sisältö kunkin postitse silmukka iteroi jokainen tietokantaan. Kun silmukka kulkee, se törmää ensimmäiseen tolppaan., Tuolloin the_title () – funktion lähtö otsikko postitse sivun ja the_content() tulostaa kehon että post sivulle. Seuraavassa silmukassa nämä toiminnot hakevat jälleen seuraavan otsikon ja sisällön ja tulostavat ne sivulle. Joten kun nämä ovat paikoillaan, meidän pitäisi nyt nähdä joitakin tietoja viestimme lähetetään ruudulle. Kokeillaan! Käymme http://wordpresstutorial.dev ja katso se toimii!,

Vaihe 5: Lisää Linkki Kunkin Postitse

Entä yhdistää kunkin yksittäisen postitse, niin voimme tarkastella post se oma pikemminkin kuin osa vain etusivulle. Voimme tehdä sen melko helposti, jälleen erityisiä toimintoja, jotka WordPress tarjoaa. Tätä tehtävää varten voimme hyödyntää the_permalink () – toimintoa. Voimme päivittää koodi kuten so:

nyt, voimme klikata kunkin yksittäisen post otsikko, ja navigoida sivulle, joka on vain että yksi viesti. Hienoa!,

Vaihe 6: Lisää Ylä-ja Alatunniste-Custom Teema

Otsikko ja Post Sisältö on keskeistä luoda hyvä teema. Lähes yhtä tärkeää on ottaa otsikko ja alatunnisteen osa Teema. Nämä osiot sisältäisivät sisällön, joka on aina nähtävissä kaikilla verkkosivuilla verkkosivuilla. Nämä osiot ovat post-sisällön ylä-ja alapuolella. Voit tehdä tämän, arvasit sen, käytämme erityisiä toimintoja tarjoamia WordPress saada otsikko ja saada alatunniste. Näetkö kuvion jo kehittyvän?, Lähes mitään voit tehdä niin WordPress teema kehittäjä on jo tehty sinulle tapa näitä mukautettuja toimintoja. Joten huomaat, että se kannattaa muistaa nämä yleisesti käytetyt toiminnot WordPress teema kehittämiseen. Mennään eteenpäin ja lisätä get_header() ja get_footer () toiminnot meidän teema tiedosto nyt.

No katso, että?! Voimme nähdä, että meidän custom teema on nyt otsikkoalue sekä alatunnisteen alue., Otsikon on nimi ja tagline sivuston, kun alatunnisteessa näemme tutun tekstin, WordPress opetusohjelma on ylpeänä powered by WordPress. Nämä ovat oletusotsikko – ja alatunnisteasetukset näitä toimintoja käytettäessä. Entä kun haluamme mukautetun otsikon ja alatunnisteen? Tulossa!

2 Teema Tiedostoja 4

toistaiseksi tämä opetusohjelma, meillä on kaksi-tiedostot, jotka elävät meidän customtheme kansio (joka itse on teemat-kansio). Ne tiedostot ovat tyyliä.css ja indeksi.php. Tässä vaiheessa meidän on lisättävä lisää tiedostoja, jotta pääsemme eteenpäin., Luo kaksi uutta tiedostoa customtheme-kansioon. Näitä tiedostoja kutsutaan kätevästi otsakkeeksi.php ja alatunniste.php.

Nyt, mitä nämä tiedostot on tehdä, on korvata oletuksena header ja footer ulkoasuja tarjotaan oletuksena kun soitat joko get_header() ja get_footer() toiminnot. Itse asiassa, jos päivitämme sivustomme, näyttää siltä, että otsikko ja alatunniste ovat poissa. Tämä johtuu siitä, että emme ole lisänneet mitään merkintää näihin tiedostoihin vielä. Virnistää, setup tiedostoja niin testata tätä.

header.,php

footer.,php

Working with header.,php

esimerkissä toimi hyvin, ja se näyttää meille, miten tämä tiedosto toimii sen alkeellisinta tasolla. Otsikko.php tiedosto on oikeastaan varsin tärkeä kuitenkin, joten ei kaunistella yksityiskohtia liian nopeasti! Tässä on koodi, johon kaikki sivustosi sivut tarvitsevat pääsyn tavalla tai toisella. Aluksi kaikilla HTML-sivuilla on doctype. Täsmentäisit sen tässä tiedostossa. Lisäksi kaikilla sivuilla on avaus html-tunniste, pääosa ja avaus body-tunniste. Kaikki tämä voi mennä otsikkoon.php-tiedosto., Lisätään nopeasti joitakin näistä asioista, joita kaikki verkkosivut hyödyntäisivät. Käytämme muutamia uusia WordPress toimintoja myös täällä. Ne ovat language_tributes(), bloginfo() ja body_class().

header.php

Jos me ladata sivu uudelleen ja sitten tarkastella lähde sivun myös selaimen, voimme saada käsityksen siitä, mitä nämä toiminnot ovat tekemässä. Emme korosta rivejä, jotka ovat tuotos, joka tuli ne toiminnot alla:

Jälleen, voimme nähdä hyvin liberaali käyttää WordPress toimintoja, kun kehittää omia teemoja WordPress., Itse asiassa, emme ole kirjoittaneet mitään custom koodi vielä lainkaan. Olemme yksinkertaisesti oppia, mitä eri WordPress toimintoja voi tarjota meille, ja sitten laittaa ne toimimaan mukautetun teema.

Myös wp_head()

wp_head() on erityinen toiminto, kun olet työskennellyt WordPress Teemoja. Se ei ole aivan niin yksinkertaista kuin kaikki muut, joita olemme tähän mennessä katsoneet. Tämän tehtävä on viimeistellä tuotos <pään> jakson otsikon.php-tiedosto., Itse asiassa se on tarkoitus mennä juuri ennen sulkevaa </head> – tagin. Tämä on tärkeää, kun aloitat lisäämällä erilaisia plugins sivustoosi. Se tulostaa komentosarjoja tai dataa etupään päätyyn. Se on hyvä käytäntö aina myös wp_head() oman teemoja kuin monet muut plugins voi luottaa tämä koukku lisätä tyylejä, skriptejä, tai meta elementtejä <pään> alueen pinta-ala. Lisäämme sen sellaisenaan tähän:

header.php

täydennetään alatunnistetta.,php

olemme lopettaneet lisäämme perusasiat siitä, mitä tarvitsemme otsikossa.php-tiedosto. Käydään jalkapöytä läpi.php-tiedosto. Meidän on tehtävä muutamia asioita. Muista se otsikossamme.php-tiedosto meillä on avaaminen html ja Body tunnisteet. Ne on suljettava jossain vaiheessa. Alatunniste.php tiedosto on täydellinen paikka tehdä, että. Joten me lisäämme sulkeminen </html> ja </body> tunnisteet tekemisen lisäksi puhelun wp_footer () – funktio.
footer.,php

Muuttaa Sivuston Tietoja WordPress Kojelautaan

saatat ihmetellä, miksi meidän piti käyttää kaikki nämä hienot toiminnot rakentaa up meidän teema. Esimerkiksi, kun halusimme listata nimi ja mainoslause sivustollemme, olemme käyttäneet bloginfo () – funktio kulkee parametrit nimi ja kuvaus., Syynä tähän on se, että yleensä et koskaan halua koodata näitä arvoja sivustoosi. Tämä tieto saattaa muuttua. Lisäksi, jos saat teeman yleisön saataville, heillä on oma nimi ja tagline niiden verkkosivuilla. Heidän pitäisi pystyä yksinkertaisesti käydä admin kojelauta WordPress ja päivittää Yleiset asetukset nähdä tämä data populate automaattisesti.

Tehdä Sivuston Nimi Linkki Etusivulle

Useimmat teemat tarjoavat mahdollisuuden klikkaa otsikkoa teksti verkkosivuilla ja ohjaa käyttäjän etusivulle sivuston., Näin, riippumatta siitä, missä käyttäjä voi olla sivustolla, he voivat aina klikata otsikkotekstiä ja palata suoraan kotisivun etusivulle. Lisätään linkki nyt otsikkoon.php.

Vaihe 7: Lisää funktiot.php tiedosto teema

tässä vaiheessa, meillä on neljä tiedostoa meidän custom teema. Ne ovat indeksejä.php, tyyli.css, otsake.php ja alatunniste.php. Luultavasti seuraavaksi tärkein tiedosto meidän täytyy olla on toiminnot.php-tiedosto.

funktiot.php tiedosto WordPress tekee monia asioita teema. Se on tiedosto, jossa laitat koodin muokata oletuskäyttäytymistä WordPress., Voit melkein ajatella toimintoja.php muodossa plugin, WordPress kanssa muutamia keskeisiä kohtia muistaa:

• ei vaadi ainutlaatuinen Header-tekstiä
• Tallennetaan kansioon, joka pitää teeman tiedostot
• Suorittaa vain, kun tällä hetkellä käytössä teeman hakemistoon
• Koskee vain nykyinen teema
• Voit kutsua PHP toimintoja, WordPress toiminnot, tai mukautettuja toimintoja

Yksi asia, mitä tarvitsemme kipeästi meidän teema on vähän parempi tyyli! Luodaan funktio funktioihimme.php tiedosto sisällyttää tyyli.css tiedosto meidän teema., Näin voimme saavuttaa tämän tavoitteen.

tämä koodinpätkä Sisältää tai tekee aktiiviseksi Oman teemamme stylesheet. Nyt saatat ihmetellä, miksi käytämme mukautetun toiminnon, kun näyttää siltä, että voisimme yhtä helposti manuaalisesti linkittää stylesheet itse otsikossa.php-tiedosto. No, tämä tulee tekemään hieman enemmän työtä etukäteen isompi tuotto vaivaa myöhemmin. Kun teemat monimutkaistuvat ja lisää omaisuutta lisätään, sinulla on mielellään tämä yksi toiminto, joka voi käsitellä kaikki raskas nosto sinulle.,

nyt on aika saada asiat näyttämään hieman nätimmiltä. Ensimmäinen, katsotaanpa lisätä kääre <div> luokan säiliö. Aukko <div> tulee otsikossa.php, kun taas sulkeminen <div> tulee footer.php. Paketoimme myös postin tuotoksen indeksiin.php jossa <artikkeli> – tagin, joka on luokan postitse. Tämä antaa meille luokat kohdistaa meidän tyyliin.,css-tiedosto, jotta voimme asettaa sivun leveys muun muassa. Lisäämme tyyliin myös parempaa stailausta.css tässä vaiheessa.

Vaihe 8: Lisää jokin Tyyli teemaasi

otsikko.php
Lisääminen avaa <div> otsikon.php-tiedosto.

alatunniste.php
Lisäämällä sulkeminen </div> footer.php-tiedosto.

indeksi.php
Sidonta post-lähtö, jossa <artikkeli> tag

tyyli.,css
lopuksi, lisäämme joitakin erilaisia CSS – tyylin parannuksia, jotta teema näyttää hieman mukavammalta.

Kun vierailemme testi sivusto nyt selaimessa, voimme nähdä, että WordPress Teema, että olemme kehittäneet askel askeleelta tämä opetusohjelma on näyttää hyvältä!

WordPress Theme Development Tutorial Askel askeleelta Yhteenveto

kerrataanpa kaikki, että olemme oppineet tämän perus askel askeleelta WordPress Theme opetusohjelma aloittelijoille., Olemme oppineet luomaan ensimmäisen mukautetun teema WordPress tekemällä oman kansion puolella teemoja kansio meidän WordPress asennus. Tähän kansioon, lisäsimme erilaisia tiedostoja, jotka vastaavat eri osioita sivuston. Meidän opetusohjelma, olemme aloittaneet paljain minimums sinun pitäisi olla WordPress teema. Tulevaisuudessa, voit lisätä paljon enemmän tiedostoja tähän kansioon kuin mitä olemme kattaneet. Katsotaanpa tarkistaa jokaisen tiedoston olemme luoneet tässä opetusohjelma, ja mitä he tekivät meille.

• tyyli.,css-tiedosto on, jossa voit lisätä joitakin css kommentit niin, että WordPress tietää joitakin tietoja mukautetun teeman. Se on myös custom CSS muotoilu, että voit soveltaa teema.
• indeksi.php tämä tiedosto ohjaa html ja yleinen tuotos teema. Se on tärkein tiedosto, jota käytetään tietojen avaamiseen kotisivullasi.
• header.,php Avulla voit määrittää alue, pitää tärkeää tietoa sivuston <pään> alueella sekä myös avaus <html>, <kehon>, ja ,<div class=”container”> tunnisteet.
• footer.php alatunniste sulkee kaikki otsikkoalueella määrittämäsi avaustunnisteet sekä antaa sinulle paikan kutsua wp_footer () – funktiota.
• toiminnot.,php Avulla voit soittaa toimintoja, sekä PHP ja sisäänrakennettu WordPress, ja määritellä omia toimintoja, jotta muuttaa oletuksena käyttäytymistä, WordPress

Joten sinulla on se! Pystyimme luomaan täysin toimiva mukautetun WordPress teema vain 5 tiedostoja. Tämä antaa meille perustason tietoa rakentaa kehittyneempiä WordPress teemoja ja toimintoja. Hienoa Työtä!