WordPress Tutorial: Paano Gumawa ng Tema ng WordPress Mula sa HTML (Bahagi 2)

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

Sa bahagi ng isang tutorial na ito, nasaklaw namin ang mga pangunahing kaalaman sa pag-convert ng isang template ng HTML sa isang tema ng WordPress. Kung ikaw ang pinakamadalas na kakaiba, natutunan namin ang ilang mga bagay tungkol sa paghahati ng mga template ng HTML sa mga file ng PHP, na pinagsama ang mga ito, pag-istilo at pagbibigay ng pangalan sa WordPress. Talagang, marami kaming natutunan, at nais mong maging pamilyar sa mga konsepto na nasaklaw namin sa aming unang tutorial upang tamasahin ang pangalawang paglilingkod na ito. Sa post ngayon, kukuha tayo ng mga bagay na mas mataas. Sakupin namin ang ilang higit pang mga lugar upang makagawa ka ng isang ganap na functional na tema ng WordPress. Kaya, nang walang karagdagang ado, narito kami pupunta.


Pag-configure ng Mga Larawan at Mga File ng JavaScript

Kung mayroon kang mga imahe sa iyong orihinal na template ng HTML (index.html), marahil ay napansin mo na tumigil sila sa pagpapakita matapos na i-chup up ang template sa mga file ng PHP. Huwag kang mag-alala, ito lang ang paraan ng PHP. Halimbawa, kung mayroon kang isang logo sa seksyon ng iyong header tulad nito …

your_logo_alt_text

… kakailanganin mong i-play sa paligid ng code ng kaunti. Ang code na ihahayag ko sa isang sandali ay makakatulong sa mga browser upang mahanap ang iyong logo (o anumang iba pang imahe) sa iyong mga imahe folder, na (o dapat ay) isang subfolder ng pangunahing direktoryo ng iyong tema. Kaya, upang maipakita ang iyong logo sa seksyon ng header, buksan ang header.php file at palitan ang code sa itaas sa mga sumusunod:

your_logo_alt_text

Ang function na get_template_directory_uri () ay nagbabalik sa url para sa iyong direktoryo ng tema. KAYA kung idagdag mo ang iyong logo sa isang folder ng mga imahe, pagkatapos ay kukunin ng code ang logo na iyon.

Pansinin ang anumang pagkakaiba? Malinaw, ang piraso ng code na ito ay ayusin ang iyong logo lamang. Upang ayusin ang iba pang mga imahe, kakailanganin mong muling isulat ang kanilang mga code sa katulad na paraan. Madaling matamis na bagay.

Lumipat tayo sa JavaScript. Kung ginamit ng iyong HTML website ang JavaScript, lumikha ng isang pangalang folder js at ilagay ang iyong mga script doon. Maaari mong tawagan ang mga ito sa file ng header.php gamit ang sumusunod na code:

Gumagamit ang code sa itaas halimbawa.js bilang isang paglalarawan. Huwag kalimutang palitan ang bahaging iyon sa pangalan ng iyong file na JavaScript.

Siyempre kung gagawa ka ng isang tema para sa ibang tao, dapat mo talagang i-load ang iyong mga file ng js gamit ang wp_enqueue_scripts. Mga post ng Checkout AJ sa pagdaragdag ng JavaScript sa mga tema ng WordPress para sa karagdagang impormasyon at mga tip.

Mga File ng Mga template

Sa bahagi ng isang tutorial na ito, binanggit namin ang apat na pangunahing mga file ng template na index.php, header.php, sidebar.php at footer.php. Kinokontrol ng mga file ng template kung paano ipapakita ang iyong website sa web. Nakukuha ng mga template ang impormasyon mula sa MySQL database ng WordPress at isalin ang pareho sa HTML code na ipinapakita sa mga web browser. Sa madaling salita, ang mga file ng template ay ang mga bloke ng gusali ng mga tema ng WordPress. Upang makakuha ng isang mas mahusay na pag-unawa sa mga template, hayaan nating suriin ang isang konsepto na kilala bilang hierarchy ng template.

Gumagamit kami ng isang pagkakatulad. Kung ang isang bisita ay nag-click sa isang link na kategorya (ibig sabihin, link sa isang kategorya) tulad ng http://www.yoursite.com/blog/category/your-category/, gumagamit ang WordPress ng hierarchy ng template upang makabuo ng tamang file (at nilalaman) bilang ipinaliwanag sa ibaba:

  • Una, maghanap ang WordPress para sa isang file na template na tumutugma sa kategorya ng ID
  • Kung ang ID ng kategorya ay, halimbawa 2, hahanapin ng WordPress ang isang template ng file na pinangalanang kategorya-2.php
  • Kung hindi magagamit ang kategorya-2.php, ang WordPress ay pupunta para sa isang pangkaraniwang file na template ng kategorya tulad ng kategorya.php
  • Kung hindi magagamit ang template file na ito, ang WordPress ay maghahanap para sa isang pangkaraniwang template ng archive tulad ng archive.php
  • Kung ang pangkaraniwang template ng archive ay hindi umiiral, ang WordPress ay mahuhulog sa pangunahing file ng template, index.php

Iyon kung paano gumagana ang mga template ng WordPress, at maaari mong gamitin ang mga file na ito upang ipasadya ang iyong tema ng WordPress upang umangkop sa iyong mga pangangailangan. Kasama sa iba pang mga file ng template:

tahanan.php o index.phpGinamit upang i-render ang index ng mga post sa blog
harap-pahina.phpGinamit upang mag-rati ng mga static na pahina o pinakabagong mga post na itinakda sa mga display sa harap ng pahina
solong.phpGinamit upang mag-render ng isang solong pahina ng post
solong- {post-type} .phpGinamit upang mag-render ng mga pasadyang uri ng post e.g. kung ang post-type ay isang produkto, gagamitin ng WordPress ang solong-product.php
pahina.phpGinamit upang i-rati ang mga static na pahina
kategorya.php o archive.phpGinamit upang mag-render Index Archive index
may akda.phpGinamit upang i-render ang may-akda
date.phpGinamit upang i-render ang petsa
paghahanap.phpGinamit upang mag-render ng mga resulta ng paghahanap
404.phpGinamit upang mag-render ng 404 error na pahina ng error

Ito ay isang maikling listahan lamang, maraming iba pa Mga template ng WordPress. Ang paksa ng mga template ay isang malaki, at ang pinakamahusay na paraan upang malaman kung paano maglaro sa mga file ng template ay sa pamamagitan ng pagbabasa ng malawak Pag-unlad ng Tema library sa WordPress. Bilang kahalili, maaari mong basahin ang mas maikli Mga Seksyon ng Mga template sa WordPress Codex.

Mga Tag ng Mga template

Nang makita na ipinakilala lamang namin ang Mga File Files, makatarungan lamang na banggitin ang isang bagay o dalawa tungkol sa mga tag ng template, at ang papel na ginagampanan nila sa WordPress theming. Ayon sa WordPress.org, “… ang mga tag ng template ay ginagamit sa loob ng template ng iyong blog upang ipakita ang impormasyon nang pabago o kung hindi man ay ipasadya ang iyong blog, na nagbibigay ng mga tool upang gawin itong indibidwal at kagiliw-giliw na katulad mo.”

Sa aming nakaraang tutorial, nakilala mo ang ilang mga template ng tag tulad ng get_header, get_sidebar, get_footer at bloginfo. Sa sumusunod na seksyon, magdagdag kami ng ilang mga tag ng template sa aming bagong nilikha na tema ng WordPress. Inaakala kong isinama mo na ang deklarasyon ng DOCTYPE sa iyong header.php file. Kung wala ka, narito ang code:

Ang deklarasyon ng DOCTYPE ay nagbibigay ng kahulugan sa iyong HTML code. Sa labas ng paraan, baguhin natin ang pagbubukas ng tag ng HTML. Isasama namin ang isang katangian lamang gamit ang wika_attributang tag tulad ng:

Ang code sa itaas ay bubuo ng mga sumusunod:

Gamit ang deklarasyon ng DOCTYPE at tag ng wika_attribute sa lugar, lehitimo ang istraktura ng iyong tema at mauunawaan ng mga browser ang iyong code. Kung lumikha ka ng isang tema para sa isang blog, mahalaga na maglagay ng mga link sa iyong pingback URL at RSS feed sa iyong ulo. Sa iyong header.php, idagdag ang sumusunod na code:

Napansin mo ba kung paano namin ginamit ang tag ng bloginfo upang isama ang RSS feed (‘rss2_url’) at pingback (‘pingback_url’)? Bago i-save ang iyong header.php file, idagdag din ang sumusunod na code:

Ang nasa itaas na wp_head tag ay hilahin sa mga styleheet at mga file ng JavaScript na kinakailangan ng iyong mga plugin. Kung iniwan mo ang maliit na piraso ng code na ito, maaaring hindi gumana ang iyong mga plugin ayon sa nais. Sa labas ng paraan, magdagdag tayo ng mga pamagat ng pahina sa aming WordPress tema gamit – muli – ang bloginfo tag. Sa iyong header.php file, idagdag ang sumusunod na code:

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

Ang unang tag wp_title ay idagdag ang pamagat ng iyong pahina o post at ang pangalawang tag bloginfo (‘pangalan’) ay idagdag ang pangalan ng iyong blog. Ngayon na ang iyong WordPress tema ay may mga pamagat ng pahina, kung paano tungkol sa paglikha kami ng isang screenshot para sa aming tema, muling i-repack ang tema at magpahinga?

Paglikha ng Screenshot Para sa Iyong Tema

Kapag nai-upload mo ang tema ng iyong pagsubok sa unang pagkakataon, napansin mo na kulang ito ng isang screenshot sa Panel ng Tema ng WordPress. Tila malabo, lalo na kung mayroon kang iba pang mga tema na may makulay na mga screenshot. Ngunit huwag magalala, ang paglikha ng isang screenshot para sa iyong tema ay napakadali. Lumikha lamang ng isang imahe gamit ang iyong paboritong editor ng imahe (hal. Adobe Photoshop) o kumuha ng isang sunggaban sa screen ng iyong tema. Tiyakin na ang iyong imahe ay 600px ang lapad at 450px ang taas. I-save ang imahe bilang screenshot.png sa iyong folder ng tema. I-save ang lahat ng mga pagbabago, i-compress ang iyong folder ng tema sa isang archive ng ZIP. I-upload ang tema at isaaktibo ito upang makita ang iyong mga bagong pagbabago ��

Konklusyon

Nais kong naniniwala na ang pangalawang tutorial na ito ay inaalok sa iyo ng mas malalim na pananaw sa paglikha ng isang tema ng WordPress mula sa static na HTML. Sa malapit na hinaharap, ipapakilala ko sa iyo ang iba pang mga aspeto ng WordPress na nangangalaga, ngunit sa pansamantala, inihanda ko ang mga sumusunod na mapagkukunan para lamang sa iyo:

Maligayang paglikha!

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