Isang Intro sa Anatomy ng isang Tema ng WordPress

  1. 1. 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. Kasalukuyang nagbabasa: Isang Intro sa Anatomy ng isang Tema ng WordPress

Ilang sandali pa, ipinakilala namin sa iyo ang konsepto ng paglikha ng isang tema ng WordPress mula sa HTML. Hinahati namin ang tutorial sa dalawang bahagi at ngayon lahat tayo ay tungkol sa pagpapuno ng dalawang mga tutorial, kaya huwag mag-atubiling isaalang-alang ang post na ito bilang pangatlong paghahatid sa serye ng post. Ang layunin ko ay upang kunin ang tema ng WordPress upang mabigyan ka ng isang malinaw na larawan kung paano ito gumagana (ang tema).


Ipinapalagay ng post na ito na mayroon kang isang kaalaman sa pagtatrabaho ng HTML at CSS. Sige na at ipapahayag ko na ang pagkakaroon ng mga kasanayan sa HTML at CSS ay isang kinakailangan sa pagdidisenyo ng mga tema ng WordPress. Ang isa pang bagay, ang post na ito ay mananatiling malinaw sa mga malalaking salita at mahirap na konsepto – magiging madali itong maunawaan, kaya’t maging handa na magsaya at matuto.

Isang Little HTML Priming

Ang bawat HTML web page ay nahahati sa iba’t ibang bahagi gamit ang

tag. Halimbawa, maaari mong masira ang katawan () ng iyong website sa ilang mga seksyon tulad ng nabigasyon, header, pangunahing nilalaman, sidebar at footer sa gitna ng iba pa.

Kapag nakuha mo ang iyong web page sa mga seksyon, maaari mong i-order (o ayusin) ang mga seksyon na nais mong gamitin ang CSS. Ang prosesong ito ay kilala bilang estilo, at nagsasangkot ito ng pagdaragdag ng iba pang mga elemento ng estilo tulad ng kulay, sukat, hangganan, mga espesyal na epekto atbp. Ito ang kapangyarihan ng CSS, na – sa pamamagitan ng paraan – ay maikli para sa mga Cascading Style Sheets. Kapag inilagay mo ang iyong mga file sa HTMl at CSS at ihagis sa isang pares ng mga imahe, nagtatapos ka sa isang kumpletong website.

Ang mga bagay ay hindi naiiba sa mga tema ng WordPress. Tulad ng nakita namin sa bahagi 1 ng Paano Gumawa ng Isang Tema ng WordPress mula sa HTML, ang mga tema ng WordPress ay nahahati sa iba’t ibang mga file. Kung hindi mo makita ang pagkakapareho sa puntong ito, hayaan akong magpaliwanag.

Ang mga static na web page ng HTML ay nahahati sa mga dibisyon (kung ano ang tinawag naming mga seksyon nang mas maaga) gamit

mga tag (o mga talahanayan kung ikaw ay tunay na paaralan). Sa kabilang banda, ang mga tema ng WordPress ay nahahati sa iba’t ibang mga file ng php, na kung saan ay ibabalik muli gamit ang mga tag ng template.

Samakatuwid, sa halip na magkaroon ng lahat ng mga elemento ng katawan (header, pangunahing nilalaman, sidebar, footer atbp) na naninirahan sa isang solong file (tulad ng kaso ng static HTML), ang bawat isa sa mga elemento ng katawan (sa mga tema ng WordPress) ay nakatira sa isang hiwalay na mga file.

Kaya, ang header ay mabubuhay sa header.php, ang sidebar ay makahanap ng bahay sa sidebar.php, ang pangunahing nilalaman ay mabubuhay sa index.php, o solong.php (kung ito ay isang post) o pahina.php (kung ito ay isang pahina ). Ang seksyon ng footer ay mabubuhay sa footer.php at iba pa.

Sumusunod ka ba? Suriin ang ilustrasyon sa ibaba:

html-wordpress = istraktura

Mula sa aming ilustrasyon sa itaas, , at ay tinatawag na mga template ng tag. Ang kanilang gawain ay upang makuha ang header.php, sidebar.php at footer.php sa pagkakasunud-sunod na iyon mula sa iyong direktoryo ng tema, at ipakita ang nilalaman sa iyong index.php, sa gayon pagkumpleto ng web page.

Huwag hayaan ang .php extension takutin ka, ang nilalaman sa loob ng mga file ng php ay HTML code lamang na pamilyar ka. Halimbawa, ang iyong header.php ay maaaring maglaman ng pangkaraniwang pag-navigate sa listahan ng HTML. Katulad nito, maaari mong ilagay ang karaniwang HTML code sa footer.php, sidebar.php at index.php.

Maaari mo ring ilagay ang loop.php gumana sa iyong index.php (o saanman ka magarbong) upang maipakita ang iyong mga post sa blog, ngunit dapat kong pabagalin at bumalik sa anatomya ng mga tema ng WordPress. Nabanggit ko ang isang bagay o dalawa tungkol sa loop sa bahagi 2 kung paano lumikha ng isang tema ng WordPress mula sa HTML. at pag-uusapan natin ito (ang loop) at iba pang mga pag-andar sa hinaharap.

Paglipat sa …

Ang isang pangunahing tema ng WordPress ay binubuo ng hindi bababa sa apat na mga file ng template na:

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

Tingnan natin kung ano ang pumapasok sa bawat isa sa mga ito mahiwagang mga file:

File File ng Index.php

Ito ang pangunahing file kung wala kang isang tema na gumaganang WordPress. Ito ang una (o default) na file na naglo-load kapag binisita mo ang isang website ng WordPress. Isaalang-alang ito ang katumbas ng index.html.

Ang isang karaniwang index.php sa mga tema ng WordPress ay magiging ganito:





Maaari mong idagdag ang loop sa pagitan at upang ipakita ang mga post sa blog sa homepage (index.php) tulad ng ipinakita sa ibaba:




File File ng header.php

Ang mga file na template na ito ay naglalaman ng iyong header code, nabigasyon at HTML head code. Karaniwan, ang header.php ay nag-iimbak ng lahat ng nais mong ipakita sa tuktok ng iyong website. Alam mo, ang mga bagay tulad ng pamagat ng iyong website at mga bagay na tulad nito.

Nag-link ka rin sa iyong CSS styleheet sa header.php. Narito ang isang pangunahing halimbawa ng header.php:





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







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

File ng Sidebar.php na template

Ang Sidebar.php ay naglalaman ng lahat ng kailangan mo upang lumitaw sa iyong sidebar (s). Ang sidebar ay naglalaman ng karagdagang mga menu, mga widget, kategorya, mga icon ng social media, pasadyang nilalaman, HTML code tulad ng adverts atbp.

Ang Sidebar.php ay maaaring maglaman ng purong HTML markup o php function na tawag depende sa iyong mga pangangailangan. Tulad nito, ang isang pangunahing sidebar.php ay maaaring magmukhang:

File ng template ng Footer.php

Ano sa palagay mo ang napupunta sa footer.php? Maaari mong ilagay ang iyong impormasyon sa copyright dito, karagdagang mga menu, mga link, mga icon ng social media – kahit anong gusto mo! Nais mo bang makita kung paano ang isang pangunahing footer.php? Narito:

Ilagay ang nilalaman ng iyong footer kasama na ang mga tawag sa php function (upang makuha ang iba't ibang mga file ng template e.g. search.php) kung kinakailangan.

Pansinin ang at pagsasara ng mga tag sa footer.php? Maaari mo bang hulaan kung bakit dapat silang isama sa footer.php? Katulad nito, maaari mong hulaan kung bakit ang at ang pagbubukas ng mga tag ay kasama sa header.php? Ipaalam sa amin ang iyong mga hula sa seksyon ng komento sa pagtatapos ng post na ito ��

Ang apat na mga file ng template na sakop lamang namin sa itaas ay bumubuo ng isang napaka pangunahing tema ng WordPress. Maraming iba pang mga file ng template; mayroong isang template file para sa bawat elemento na nakikita mo sa isang tema ng WordPress maging mga komento, mga resulta ng paghahanap at 404 na mga pahina ng error para lamang mabanggit ang ilang.

Upang lubos na maunawaan ang anatomya ng isang tema ng WordPress, kailangan mong maging pamilyar sa iba’t ibang mga file ng template. Maaari mong i-browse ang lahat magagamit na mga tile ng template sa WordPress.

Pagkatapos mayroon kaming mga template ng tag, na ginagamit ng WordPress upang makuha ang mga file ng template mula sa direktoryo ng tema. Maaari kang matuto nang higit pa tungkol sa mga tag ng template, at ang papel na ginagampanan nila sa WordPress.

Buod

Ang isang tema ng WordPress ay binubuo ng mga sumusunod na elemento ng anatomical:

  • Mga file ng template tulad ng index.php, header.php, search.php, kategorya.php atbp
  • Mga tag ng template tulad ng , atbp
  • CSS
  • Mga imahe at iba pang mga file ng media
  • Mga file ng JavaScript

At narito ang isang paglalarawan na nagbubuod sa anatomya ng isang tema ng WordPress:

Naghahanap upang magpatuloy sa pag-aaral? Checkout ang detalyado gabay ng anatomya ng tema sa WordPress Codex.

Konklusyon

Ang bawat tema ng WordPress na nakikita mo sa web ay gumagamit ng parehong anatomical na istraktura (kahit na ang aming tanyag na Total WordPress Theme), na maaari mong ipasadya upang matugunan ang iyong mga pangangailangan. Sa sandaling ibalot mo ang iyong ulo sa paligid ng mga pangunahing kaalaman sa pag-unlad ng tema ng WordPress, walang limitasyon sa maaari mong gawin sa / sa mga tema ng WordPress.

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