WordPress Tutorial: Paano Gumawa ng Tema ng WordPress mula sa HTML (Bahagi 1)

  1. 1. Kasalukuyang nagbabasa: WordPress Tutorial: Paano Gumawa ng Tema ng WordPress mula sa HTML (Bahagi 1)
  2. 2. WordPress Tutorial: Paano Gumawa ng Tema ng WordPress Mula sa HTML (Bahagi 2)
  3. 3. Isang Intro sa Anatomy ng isang Tema ng WordPress

Kung nagsimula ka sa isang website ng HTML (+ CSS), hindi mo na kailangang itapon lahat kapag lumipat sa WordPress. Maaari mong i-convert ang iyong HTML sa WordPress at patakbuhin ang iyong (ngayon mas malakas) na website sa dynamic na platform ng WordPress.


O baka hindi iyon ang kaso. Marahil nagtataka ka lamang kung paano i-convert ang disenyo ng HTML ng kliyente sa isang ganap na tema ng WordPress. O baka gusto mong malaman ang pangunahing pag-programming ng WordPress (+ PHP) mula sa mas pamilyar na HTML na bahagi.

Anuman ang kadahilanan na narito ka ngayon, ipakikilala sa iyo ng WordPress tutorial na ito ang mga pangunahing kaalaman sa paglikha ng isang tema ng WordPress mula sa HTML. Maaari mong sundin ang patnubay na ito upang lumikha ng iyong tema mula sa simula o maaari kang magtungo sa Github at i-download ang tema ng WPExplorer starter na nagbibigay ng isang “walang laman na canvas” upang lumikha ng iyong tema sa lahat ng kinakailangang mga file ng template at code upang magsimula. Kaya kung ikaw ay isa sa mga taong iyon na sa halip ay matuto sa pamamagitan ng pagbabasa sa pamamagitan ng code pagkatapos i-download ang tema ng starter, laktawan ang gabay at makita kung paano gumagana ang mga bagay … Kung hindi, kumuha ng isang editor ng code (Ginagamit at inirerekumenda ko. Notepad++, o SublimeTeksto) at handa na ang isang browser, pagkatapos ay sundin ang simpleng gabay na ito hanggang sa huli.

Pangalan ng Iyong Tema ng WordPress

Una sa mga bagay, kailangan naming bigyan ang iyong tema ng isang natatanging pangalan, na hindi kinakailangan kung gagawa ka ng isang tema para sa iyong website lamang. Anuman, kailangan nating pangalanan ang iyong tema upang madali itong makikilala sa pag-install.

Pangkalahatang mga pagpapalagay sa puntong ito:

  • Mayroon kang handa na index.html at CSS worksheet.
  • Mayroon kang isang gumaganang pag-install ng WordPress na may hindi bababa sa isang tema e.g. Dalawampu’t labing apat
  • Nilikha mo na ang isang folder ng tema kung saan makakatipid ka ng iyong bagong tema ng WordPress

Balik tayo sa pagbibigay ng pangalan sa iyong WordPress tema. Buksan ang iyong code editor at kopyahin-paste ang mga nilalaman ng iyong styleheet sa isang bagong file at i-save ito style.css sa iyong folder ng tema. Idagdag ang sumusunod na impormasyon sa pinakadulo ng bagong nilikha style.css:

/ *
Pangalan ng Tema: Pangalan ng iyong tema
Tema URI: Ang URL ng iyong tema
Paglalarawan: Isang maikling paglalarawan ng iyong tema
Bersyon: 1.0 o anumang iba pang bersyon na gusto mo
May-akda: Ang iyong pangalan o username ng WordPress.org
May-akda URI: Ang iyong web address
Mga Tag: Mga tag upang hanapin ang iyong tema sa imbakan ng tema ng WordPress
* /

Huwag iwanan ang (/ *… * /) mga tag ng komento. I-save ang mga pagbabago. Ang impormasyong ito ay nagsasabi sa WordPress ang pangalan ng iyong tema, ang may-akda at komplimentaryong bagay tulad nito. Ang mahalagang bahagi ay ang pangalan ng tema, na nagbibigay-daan sa iyo upang pumili at buhayin ang iyong tema sa pamamagitan ng WP dashboard.

Paghiwalayin ang Iyong HTML na template sa Mga File ng PHP

Ang tutorial na ito ay karagdagang ipinapalagay na ang iyong template ng HTML ay nakaayos na pakaliwa sa kanan: header, nilalaman, sidebar, footer. Kung mayroon kang ibang disenyo, maaaring kailanganin mong i-play ang code nang kaunti. Masaya at napakadali.

Ang susunod na hakbang ay nagsasangkot ng paglikha ng apat na mga file ng PHP. Gamit ang iyong editor ng code, lumikha ng index.php, header.php, sidebar.php at footer.php, at i-save ang mga ito sa iyong folder ng tema. Lahat ng mga file ay walang laman sa puntong ito, kaya huwag asahan na gawin nila ang anumang bagay. Para sa mga layunin ng paglalarawan, gumagamit ako ng mga sumusunod na index.html at CSS styleheet files:

INDEX.HTML




Paano Upang I-convert ang HTML na template sa Tema ng WordPress - WPExplorer



Ito ang seksyon ng header. Ilagay ang iyong logo at iba pang mga detalye dito.

Ito ang pangunahing lugar ng nilalaman.

At ito ang footer.

CSS STYLESHEET

#wrap {margin: 0 auto; lapad: 95%; margin-tuktok: -10px; taas: 100%;}
.header {lapad: 99.8%; hangganan: 1px solid # 999; taas: 135px;}
.nilalaman {lapad: 70%; hangganan: 1px solid # 999; margin-top: 5px;}
.sidebar {float: tama; margin-top: -54px; lapad: 29%; hangganan: 1px solid # 999;}
.footer {lapad: 99.8%; hangganan: 1px solid # 999; margin-tuktok: 10px;}

Maaari mong kunin ang parehong mga code kung wala kang makikipagtulungan. Kopyahin lamang ang pag-paste ng mga ito sa iyong editor ng code, i-save ang mga ito, lumikha ng apat na mga file ng PHP na nabanggit lamang namin at maghanda para sa susunod na bahagi. Buksan ang iyong bagong nilikha (at walang laman) header.php. Mag-login sa iyong umiiral na pag-install ng WordPress, mag-navigate sa Hitsura – >> Editor at nakabukas header.php. Kopyahin ang lahat ng code sa pagitan ng mga tag at i-paste ito sa iyong header.php file. Ang sumusunod ay ang code na nakuha ko mula sa header.php file sa Dalawampu’t labing apat na tema:




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




Pagkatapos ay buksan ang iyong index.html file at kopyahin ang code ng header (i.e. ang code sa

seksyon) sa iyong header.php sa ibaba lamang ng mga tag na ipinapakita sa ibaba:




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







Ito ang seksyon ng header. Ilagay ang iyong logo at iba pang mga detalye dito.

At idagdag…

… saanman sa pagitan ng mga tag sa header.php file upang mai-link ang iyong styleheet. Tandaan din na ilagay ang at pagbubukas ng mga tag sa header.php tulad ng ipinakita sa itaas. I-save ang lahat ng mga pagbabago.

Kopyahin ang pangalawang seksyon (i.

mula sa index.html hanggang sa bagong nilikha na index.php , at idagdag …

… sa tuktok at …


… hanggang sa ganap na ilalim. Ang tatlong linya na ito ay kumukuha ng header.php, sidebar.php at footer.php (sa pagkakasunud-sunod na iyon) at ipakita ang mga ito sa index.php, na pinagsasama ang iyong code. I-save ang lahat ng mga pagbabago. Sa puntong ito, ang iyong index.php file ay dapat magmukhang:



Pagkatapos ay kopyahin ang nilalaman mula sa mga seksyon ng sidebar at footer sa iyong index.html hanggang sa sidebar.php at footer.php ayon sa pagkakabanggit..

Pagdaragdag ng Mga Post

Ang iyong HTML template ay malapit nang mag-morph sa isang tema ng WordPress. Kailangan lang naming idagdag ang iyong mga post. Kung mayroon kang mga post sa iyong blog, paano mo maipapakita ang mga ito sa iyong pasadyang “HTML-to-WordPress” na tema? Gumagamit ka ng isang espesyal na uri ng pag-andar ng PHP na kilala bilang Loop. Ang Loop ay lamang ng isang dalubhasang piraso ng code na nagpapakita ng iyong mga post at komento kung saan mo mailagay ito.

Ngayon, upang ipakita ang iyong mga post sa seksyon ng nilalaman ng template ng index.php, kopyahin at i-paste ang sumusunod na code sa pagitan ng

at

mga tag na ipinapakita sa ibaba:

>

Na bahala sa iyong mga post. Madali bilang ABC. Sa oras na ito (at gamit ang mga sample file na ibinigay sa tutorial na ito), dapat ganito ang hitsura ng iyong header.php:




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




Dapat magmukhang ganito ang iyong sidebar.php:

Dapat ganito ang hitsura ng iyong footer.php:

At ito ang footer

Napansin mo ba ang pagsasara at mga tag sa footer? Huwag kalimutang isama ang mga iyon.

Ang iyong style.css ay dapat magmukhang isang bagay tulad nito:

/ *
Pangalan ng Tema: Paglikha ng Tema ng WordPress mula sa HTML
Tema URI: http://wpexplorer.com
Paglalarawan: Ipinapakita ng temang ito kung paano lumikha ng mga tema ng WordPress mula sa HTML
Bersyon: 1.0
May-akda: Freddy para sa @WPExplorer
May-akda URI: http://WPExplorer.com/create-wordpress-theme-html-1/
Mga tag: wpexplorer, pasadyang tema, HTML sa WordPress, lumikha ng tema ng WordPress
* /
katawan {
font-family: arial, helvetica, verdana;
laki ng font: 0.8em;
lapad: 100%;
taas: 100%;
}

.header {
kulay ng background: # 1be;
kaliwang margin: 14%;
tuktok: 0;
lapad ng hangganan: 0.1em;
kulay na hangganan: # 999;
istilo ng hangganan: solid;
lapad: 72%;
taas: 250px;
}

.nilalaman {
kulay ng background: # 999;
kaliwang margin: 14%;
margin-tuktok: 5px;
lumutang pakaliwa;
lapad: 46%;
lapad ng hangganan: 0.1em;
kulay na hangganan: # 999;
istilo ng hangganan: solid;
}

.sidebar {
kulay ng background: # 1d5;
margin-kanan: 14%;
margin-tuktok: 5px;
lumutang: tama;
lapad ng hangganan: 0.1em;
kulay na hangganan: # 999;
istilo ng hangganan: solid;
tuktok: 180px;
lapad: 23%;
}

.footer {
kulay ng background: pula;
kaliwang margin: 14%;
lumutang pakaliwa;
margin-tuktok: 5px;
lapad: 72%;
taas: 50px;
lapad ng hangganan: 0.1em;
kulay na hangganan: # 999;
istilo ng hangganan: solid;
}

At ang iyong index.php ay dapat magmukhang katulad sa:





Muli – ito ay batay sa isang kaliwa sa kanang website na may header, nilalaman, sidebar, layout ng footer. Sumusunod ka ba? Ang lahat ng limang mga file ay dapat mai-save sa iyong folder ng tema. Pangalanan ang folder kahit anong gusto mo at i-compress ito sa isang archive ng ZIP gamit ang WinRar o isang katumbas na programa. Mag-upload ng iyong bagong tema sa iyong pag-install ng WordPress, buhayin ito at makita ang iyong na-convert na tema sa pagkilos!

Madali iyon, di ba? Maaari mong istilo ang iyong tema subalit nais mo ngunit ang karamihan sa mga tampok na gusto namin sa WordPress ay hindi pa rin aktibo dahil … ang tutorial na ito ay sumasakop sa mga pangunahing kaalaman sa pag-convert ng mga template ng HTML sa WordPress at dapat na maging mahusay sa iyo bilang isang nagsisimula. Sa susunod na tutorial, kukuha kami ng mga bagay na mas mataas sa takbo at maglaro sa iba pang mga aspeto ng WordPress programming (tulad ng Mga File ng Mga template at Mga Tag Mga template) na hahayaan mong i-on ang iyong mga template ng HTML alinman sa gusto mo. Manatiling nakatutok!

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