Johdanto WordPress-teeman anatomiaan

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

Jonkin aikaa sitten esittelimme sinulle käsitteen WordPress-teeman luomisesta HTML: stä. Jaoimme opetusohjelman kahteen osaan ja olemme tänään kyseisten kahden oppaan täsmentämisestä, joten pidä rohkeasti tätä viestiä kolmantena postisarjan näyttelyssä. Tavoitteenani on irrottaa WordPress-teema erikseen saadaksesi selkeän kuvan sen (teema) toiminnasta.


Tämä viesti olettaa, että sinulla on tuntemus HTML: stä ja CSS: stä. Aion jatkaa ja julistaa, että HTML- ja CSS-taidot ovat ennakkoedellytys WordPress-teemojen suunnittelulle. Vielä yksi asia, tämä viesti pysyy poissa isoista sanoista ja vaikeista käsitteistä – se on helppo ymmärtää, joten ole valmis pitämään hauskaa ja oppimaan.

Pieni HTML-pohjainen

Jokainen HTML-verkkosivu on jaettu eri osiin käyttämällä

tag. Voit esimerkiksi rikkoa kehon () verkkosivustollesi useiksi osioiksi, kuten navigointi, otsikko, pääsisältö, sivupalkki ja alatunniste.

Kun verkkosivustosi on osioina, voit tilata (tai järjestää) osiot haluamallasi tavalla CSS: n avulla. Tämä prosessi tunnetaan muotoiluna, ja siihen sisältyy muiden tyyliosien, kuten värin, koon, reunusten, erikoistehosteiden jne. Lisääminen. Tällainen on CSS: n voima, joka muuten on lyhyt Cascading-tyylitaulukoille. Kun laitat HTMl- ja CSS-tiedostosi yhteen ja heität pari kuvaa, päädyt kokonaiseen verkkosivustoon.

Asiat eivät ole kovin erilaisia ​​WordPress-teemoissa. Kuten näimme osiossa Kuinka luoda WordPress-teema HTML-tiedostosta, WordPress-teemat jaetaan eri tiedostoihin. Jos et huomaa samankaltaisuutta tässä vaiheessa, anna minun selittää.

Staattiset HTML-verkkosivut jaetaan osiin (joita kutsuttiin osioiksi aiemmin) käyttämällä

tunnisteet (tai taulukot, jos olet todella vanha koulu). Toisaalta WordPress-teemat jaetaan erilaisiin php-tiedostoihin, jotka sitten kootaan takaisin mallilappujen avulla.

Siksi sen sijaan, että kaikki runkoelementit (otsikko, pääsisältö, sivupalkki, alatunniste jne.) Elävät yhdessä tiedostossa (kuten staattisessa HTML-muodossa), jokainen runkoelementti (WordPress-teemoissa) asuu erillisessä tiedostossa.

Joten otsikko elää header.php: ssä, sivupalkki löytää kotisivun sidebar.php: ssä, pääsisältö elää index.php: ssä tai single.php: ssä (jos se on viesti) tai page.php: ssä (jos se on sivu ). Alatunnisteosio tulee alatunnisteeseen footer.php ja niin edelleen.

Seuraatko sinua? Katso alla oleva kuva:

html-wordpress = rakenne

Yllä olevasta kuvastamme, , ja kutsutaan mallitunnisteiksi. Heidän työnsä on hakea header.php, sidebar.php ja footer.php samassa järjestyksessä teemahakemistasi ja näyttää sisältö index.php: ssä siten, että verkkosivu täydentyy.

Älä anna .php laajennus pelottaa sinua, php-tiedostojen sisältämä sisältö on vain tuttua HTML-koodia. Esimerkiksi header.php voi sisältää tyypillisen HTML-luettelonavigoinnin. Samoin voit laittaa tyypillisen HTML-koodin footer.php-, sidebar.php- ja index.php-tiedostoihin.

Voit myös asettaa loop.php toiminto index.php: ssä (tai missä tahansa haluat) näyttääksesi blogiviestisi, mutta minun pitäisi hidastaa ja palata takaisin WordPress-teemojen anatomiaan. Olen maininnut osan tai kaksi silmukasta osassa 2 siitä, kuinka WordPress-teema luodaan HTML: stä. ja puhumme siitä (silmukka) ja muista toiminnoista tulevaisuudessa.

Siirtyminen eteenpäin …

WordPress-perusteema koostuu vähintään neljästä mallitiedostosta, nimittäin:

  1. index.php
  2. header.php
  3. sidebar.php
  4. footer.php

Katsotaanpa mitä näihin kuuluu maaginen tiedostot:

Index.php-mallitiedosto

Tämä on päätiedosto, jota ilman sinulla ei ole toimivaa WordPress-teemaa. Se on ensimmäinen (tai oletus) tiedosto, joka latautuu, kun vierailet WordPress-verkkosivustolla. Pitäkää sitä yhtä suurena kuin index.html.

WordPress-teemojen tyypillinen index.php näyttää tältä:





Voit lisätä silmukan välille ja näyttää blogikirjoitukset kotisivulla (index.php) seuraavasti:




Header.php-mallitiedosto

Tämä mallitiedosto sisältää otsikkokoodisi, navigointi- ja HTML-pääkoodisi. Periaatteessa head.php tallentaa kaiken, mitä haluat näyttää verkkosivustosi yläosassa. Tiedät esimerkiksi Web-sivustosi otsikon ja vastaavat.

Voit myös linkittää CSS-tyylitaulukkoosi otsikossa.php. Tässä on perus esimerkki header.php:





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







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

Sivupalkki.php-mallitiedosto

Sidebar.php sisältää kaiken, mitä tarvitset näkyäksesi sivupalkissasi. Sivupalkki sisältää lisävalikkoja, widgettejä, luokkia, sosiaalisen median kuvakkeita, mukautetun sisällön, HTML-koodin, kuten ilmoitukset jne.

Sivupalkki.php voi sisältää puhtaita HTML-merkintöjä tai php-toimintopuheluja tarpeistasi riippuen. Sellaisena perussivupalkki.php voi näyttää seuraavalta:

Footer.php-mallitiedosto

Mitä mieltä olet footer.php: stä? Voit laittaa tekijänoikeustietosi tähän, lisävalikot, linkit, sosiaalisen median kuvakkeet – mitä haluat! Haluatko nähdä miltä perusjalat.php näyttää? Tässä:

Laita alatunnisteen sisältö tähän, mukaan lukien php-funktiopuhelut (hakeaksesi erilaisia ​​mallitiedostoja, esimerkiksi search.php) tarvittaessa.

Huomaa ja sulkevat tunnisteet alatunnisteessa.php? Voitko arvata, miksi ne on sisällytettävä footer.php-tiedostoon? Samoin voitko arvata miksi ja avaustunnisteet sisältyvät header.php: hen? Kerro meille arvauksesi tämän viestin lopussa olevassa kommenttiosassa ��

Neljä mallitiedostoa, jotka juuri käsittelimme yllä, ovat erittäin perustana oleva WordPress-teema. On olemassa monia muita mallitiedostoja; jokaiselle WordPress-teemassa näkemällesi elementille on mallitiedosto, olipa kyse sitten kommentista, hakutuloksista ja 404 -virhesivulta..

Jotta WordPress-teeman anatomia voidaan ymmärtää täysin, sinun on perehdyttävä eri mallitiedostoihin. Voit selata kaikkia käyttökelpoisia mallilaattoja WordPressissä.

Sitten meillä on mallitunnisteet, joita WordPress käyttää hakemaan mallitiedostoja teemahakemistosta. Voit oppia lisää mallitunnisteet ja niiden rooli WordPressissä.

Yhteenveto

WordPress-teema koostuu seuraavista anatomisista elementeistä:

  • Mallitiedostot, kuten index.php, header.php, search.php, category.php jne
  • Mallimerkinnät, kuten , jne
  • CSS
  • Kuvat ja muut mediatiedostot
  • JavaScript-tiedostot

Ja tässä on esimerkki, joka tiivistää WordPress-teeman anatomian:

Haluatko jatkaa oppimista? Checkout yksityiskohtainen teeman anatomian opas WordPress-koodeksissa.

johtopäätös

Jokainen Webissä näkemäsi WordPress-teema käyttää samaa anatomista rakennetta (jopa suosittua Total WordPress -teemaamme), jota voit mukauttaa tarpeitasi vastaavaksi. Kun olet kiertänyt pääsi WordPress-teeman kehittämisen perusteiden ympärille, WordPress-teemoille / rajatyölle ei ole mitään rajoituksia..

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