WordPress-opetusohjelma: Kuinka luoda WordPress-teema HTML: stä (osa 1)

  1. 1. Luettu tällä hetkellä: WordPress-opetusohjelma: Kuinka luoda WordPress-teema HTML: stä (osa 1)
  2. 2. WordPress-opetusohjelma: Kuinka luoda WordPress-teema HTML: stä (osa 2)
  3. 3. Johdanto WordPress-teeman anatomiaan

Jos aloit HTML (+ CSS) -sivustolla, sinun ei tarvitse heittää sitä kaikkea muutettaessa WordPressiin. Voit muuntaa HTML-koodisi WordPressiksi ja käyttää (nyt tehokkaampaa) verkkosivustoasi dynaamisessa WordPress-alustalla.


Tai ehkä niin ei ole. Ehkä mietit vain, kuinka muuntaa asiakkaan HTML-muotoilu täysimittaiseksi WordPress-teemaksi. Tai ehkä haluat oppia WordPressin (+ PHP) perusohjelmoinnin tutummalta HTML-puolelta.

Mistä syystä olet täällä tänään, tämä WordPress-opetusohjelma antaa sinulle perustan WordPress-teeman luomisesta HTML: stä. Voit seurata tätä opasta luodaksesi teema tyhjästä tai voit siirtyä Githubiin ja ladata WPExplorer-aloitusteeman, joka tarjoaa “tyhjän kankaan” luodaksesi teemasi kaikilla tarvittavilla mallitiedostoilla ja koodilla aloittamista varten. Joten jos olet yksi niistä ihmisistä, jotka mieluummin oppivat lukemalla koodia, lataa sitten aloitusteema, ohita opas ja katso miten asiat toimivat… Muutoin hanki koodieditori (käytän ja suosittelen Muistilehtiö++, tai SublimeText) ja selain on valmis, seuraa tätä yksinkertaista opasta loppuun.

WordPress-teeman nimeäminen

Ensinnäkin, meidän on annettava aiheellesi yksilöllinen nimi, jota ei tarvita, jos rakennat teemaa vain verkkosivustollesi. Meidän on kuitenkin nimettävä teema, jotta se olisi helposti tunnistettavissa asennuksen yhteydessä.

Yleiset oletukset tässä vaiheessa:

  • Sinulla on index.html- ja CSS-tyylitaulukko valmis.
  • Sinulla on toimiva WordPress-asennus, jossa on ainakin yksi teema, esim. Kaksikymmentätoista
  • Olet jo luonut teemakansion, johon tallennat uuden WordPress-teeman ��

Palatkaamme takaisin WordPress-teeman nimeämiseen. Avaa koodieditori ja kopioi-liitä tyylitaulukon sisältö uuteen tiedostoon ja tallenna se nimellä style.css teemakansioon. Lisää seuraavat tiedot vasta luotu style.css:

/ *
Teeman nimi: Teeman nimi
Teeman URI: Teeman URL-osoite
Kuvaus: Lyhyt kuvaus teemaasi
Versio: 1.0 tai mikä tahansa muu haluamasi versio
Kirjoittaja: Nimesi tai WordPress.org-käyttäjänimesi
Kirjoittajan URI: Web-osoitteesi
Tunnisteet: Tunnisteet, joiden avulla voit etsiä teeman WordPress-teeman arkistosta
* /

Älä jätä (/ *… * /) -merkintöjä pois. Tallenna muutokset. Nämä tiedot kertovat WordPress-teeman nimen, kirjoittajan ja vastaavat ilmaiset jutut. Tärkeä osa on teeman nimi, jonka avulla voit valita ja aktivoida teeman WP-kojelaudan kautta.

Hajottaa HTML-mallisi PHP-tiedostoiksi

Tämä opetusohjelma olettaa lisäksi, että HTML-mallisi on järjestetty vasemmalta oikealle: otsikko, sisältö, sivupalkki, alatunniste. Jos sinulla on erilainen muotoilu, saatat joutua pelaamaan koodilla vähän. Se on hauskaa ja erittäin helppoa.

Seuraava vaihe sisältää neljän PHP-tiedoston luomisen. Luo koodieditorillasi index.php, header.php, sidebar.php ja footer.php ja tallenna ne teemakansioon. Kaikki tiedostot ovat tässä vaiheessa tyhjiä, joten älä odota niiden tekevän mitään. Esimerkkejä varten käytän seuraavia index.html- ja CSS-tyylitiedostoja:

index.html




Kuinka muuntaa HTML-malli WordPress-teemaan - WPExplorer



Tämä on otsikkoosa. Pane logo ja muut tiedot tähän.

Tämä on pääsisältöalue.

Ja tämä on alatunniste.

CSS STYLESHEET

#kääre {marginaali: 0 automaattinen; leveys: 95%; margin-top: -10px; korkeus: 100%;}
.header {leveys: 99,8%; reunus: 1px kiinteä # 999; korkeus: 135px;}
.pitoisuus {leveys: 70%; reuna: 1px kiinteä # 999; marginaali-yläosa: 5xx;}
.sivupalkki {float: oikea; margin-top: -54px; leveys: 29%; reunus: 1px kiinteä # 999;}
.alatunniste {leveys: 99,8%; reunus: 1px kiinteä # 999; marginaalikansi: 10px;}

Voit napata molemmat koodit, jos sinulla ei ole mitään tekemistä. Kopioi ja liitä ne vain koodieditoriin, tallenna ne, luo neljä äskettäin mainittua PHP-tiedostoa ja ole valmis seuraavaan osaan. Avaa juuri luomasi (ja tyhjä) header.php. Kirjaudu nykyiseen WordPress-asennukseen, siirry kohtaan Ulkonäkö – >> Toimittaja ja avaa header.php. Kopioi kaikki koodit tunnisteet ja liitä se header.php-tiedostoon. Seuraava on koodi, jonka sain header.php-tiedostosta kaksikymmentätoista teemassa:




<?php wp_title( '|', true, 'right' ); ?>




Avaa sitten index.html tiedosto ja kopioi otsikkokoodi (ts. koodi

-osiossa) otsikkoosi .php tunnisteet alla esitetyllä tavalla:




<?php wp_title( '|', true, 'right' ); ?>







Tämä on otsikkoosa. Pane logo ja muut tiedot tähän.

Sen jälkeen lisää…

… missä tahansa tunnisteet otsikko.php-tiedostossa linkittääksesi tyylitaulukon. Muista myös laittaa ja avataan tunnisteet otsikossa.php yllä esitetyllä tavalla. Tallenna kaikki muutokset.

Kopioi toinen osa (ts.

hakemistosta index.html hakemistoon vasta luotu index.php , ja lisää …

… Ylhäällä ja…


… Absoluuttiseen pohjaan. Nämä kolme riviä hakevat header.php, sidebar.php ja footer.php (samassa järjestyksessä) ja näyttävät ne index.php: ssä, joka koodaa koodisi takaisin. Tallenna kaikki muutokset. Tässä vaiheessa index.php-tiedostosi pitäisi näyttää seuraavalta:



Kopioi sitten sisältö index.html-sivupalkin ja alatunniste-osioista sivupalkkiin.php ja alatunnisteeseen.php.

Viestien lisääminen

HTML-mallisi on muuttamassa WordPress-teemaan. Meidän on vain lisättävä viestisi. Jos blogissasi on viestejä, miten näyttäisit ne räätälöityyn HTML-to-WordPress-teemaan? Käytät erityistä PHP-toimintoa, joka tunnetaan nimellä silmukka. Loop on vain erikoistunut koodi, joka näyttää viestisi ja kommenttisi missä tahansa.

Nyt näyttää viestisi sisältöosa kopioi ja liitä seuraava koodi

ja

tunnisteet alla esitetyllä tavalla:

>

Se huolehtii viesteistäsi. Helppo kuin ABC. Tässä vaiheessa (ja käyttämällä tässä opetusohjelmassa annettuja mallitiedostoja) header.php-tiedostosi tulisi näyttää tältä:




<?php wp_title( '|', true, 'right' ); ?>




Sivupalkisi.php: n pitäisi näyttää tältä:

Footer.php: n pitäisi näyttää tältä:

Ja tämä on alatunniste

Huomasitko sulkemisen ja tunnisteet alatunnisteessa? Älä unohda sisällyttää niitä myös.

Style.css -sovelluksesi tulisi näyttää tällaiselta:

/ *
Teeman nimi: WordPress-teeman luominen HTML: stä
Teeman URI: http://wpexplorer.com
Kuvaus: Tämä teema näyttää kuinka luoda WordPress-teemoja HTML: stä
Versio: 1.0
Kirjoittaja: Freddy @WPExplorerille
Kirjoittajan URI: http://WPExplorer.com/create-wordpress-theme-html-1/
Tunnisteet: wpexplorer, mukautettu teema, HTML WordPressiin, luo WordPress-teema
* /
vartalo {
kirjasinperhe: arial, helvetica, verdana;
fonttikoko: 0,8em;
leveys: 100%;
korkeus: 100%;
}

.otsikko {
taustaväri: # 1be;
marginaali-vasen: 14%;
alkuun: 0;
reunan leveys: 0.1em;
reunan väri: # 999;
reunatyyli: vankka;
leveys: 72%;
korkeus: 250 kuvapistettä;
}

.sisältö {
taustaväri: # 999;
marginaali-vasen: 14%;
marginaalikansi: 5px;
kellua: vasen;
leveys: 46%;
reunan leveys: 0.1em;
reunan väri: # 999;
reunatyyli: vankka;
}

.sivupalkki {
taustaväri: # 1d5;
marginaalioikeus: 14%;
marginaalikansi: 5px;
kellua: oikea;
reunan leveys: 0.1em;
reunan väri: # 999;
reunatyyli: vankka;
yläosa: 180 kuvapistettä;
leveys: 23%;
}

.alatunniste {
taustaväri: punainen;
marginaali-vasen: 14%;
kellua: vasen;
marginaalikansi: 5px;
leveys: 72%;
korkeus: 50px;
reunan leveys: 0.1em;
reunan väri: # 999;
reunatyyli: vankka;
}

Ja index.php: n pitäisi näyttää samanlaiselta kuin:





Jälleen – tämä perustuu vasemmalta oikealle verkkosivustoon, jonka otsikko, sisältö, sivupalkki ja alatunniste on asetettu. Seuraatko sinua? Kaikki viisi tiedostoa tulisi tallentaa teemakansioon. Nimeä kansio mitä haluat ja pakata se ZIP-arkistoon WinRarilla tai vastaavalla ohjelmalla. Lataa uusi teema WordPress-asennukseen, aktivoi se ja näe muunnettu teema teoksessa!

Se oli helppoa, eikö niin? Voit muotoilla teeman haluamallasi tavalla, mutta suurin osa WordPressin rakastamista ominaisuuksista on edelleen passiivisia, koska… tämä opetusohjelma kattaa HTML-mallien muuntamisen WordPressiksi perusteet ja sen tulisi olla arvokasta sinulle aloittelijana. Seuraavassa opetusohjelmassa otamme asiat astetta korkeammalle ja pelaamme muiden WordPress-ohjelmoinnin näkökohtien (kuten Mallitiedostot ja Mallimerkinnät), joiden avulla voit kääntää HTML-malleja haluamallasi tavalla. Pysy kanavalla!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map