Pagbuo ng Home Page Gamit ang Block Theme

Sa tutorial na ito, gagawa tayo ng home page gamit ang block theme nang walang anumang plugins o code.

Mga Matututunan

1. Mag-set up ng static home page.
2. Gumawa ng header at footer para sa page template.
3. Magdagdag ng iba’t ibang uri ng blocks at patterns sa home page at i-edit ang mga ito.
4. Gamitin ang block toolbars at sidebar settings.

Mga Tanong para sa Pag-unawa

1. Anong template ang gusto mong i-assign sa home page mo?
2. Pamilyar ka ba sa paggamit ng header at footer patterns?
3. Ano ang function ng Post Content block?

Transcript

Kumusta at maligayang pagdating sa Learn WordPress. Ngayon ay gagawa tayo ng home page gamit ang block theme. Ang home page ay ang pangunahing hub ng iyong site at nagsisilbing mukha ng brand. Dapat nitong hikayatin ang mga bisita na mag-explore pa sa iyong site, at syempre, makuha ang kanilang atensyon.Sa session na ito, gagawa tayo ng static home page, gagawa ng header at footer template part, tatanggalin ang site title, at bubuuin ang home page gamit ang block editor. Ang plano ay i-recreate ang home page na ito na nagawa ko na. Ginamit ko lang ang blocks para gawin ang travel home page na ito, at sinubukan kong gumawa ng mga pagkakataon para hilahin ang mambabasa na mag-explore pa sa website.

Una, gumawa ako ng tatlong posts. Idinagdag ko ang lahat ng media na gagamitin ko para sa website. Gumawa ako ng mga pages para sa navigation menu, nag-install ako ng block theme na Twenty Twenty-Two, at ngayon ay pupunta tayo sa Settings at i-click ang Reading.

Ang susunod na hakbang ay i-set ang static home page, piliin ang static page at i-set ang Home page at Posts page, at i-click ang Save changes. Kapag bumalik tayo sa pages, mapapansin natin na may nakalagay na Posts page sa tabi ng blog at Front page sa tabi ng home. Kapag binuksan natin ang home page, mapapansin natin na naka-assign ito sa default template na page template, at ibig sabihin nito ay magkakaroon ito ng parehong header at footer tulad ng ibang pages. Kung gusto mo, maaari kang gumawa ng custom unique template na specific sa home page sa pamamagitan ng pag-click sa New.

Kapag na-set mo na ang static home page, pumunta sa Appearance at i-click ang Editor. Ito ay dadalhin ka sa Site Editor. I-click ang List View para mas magkaroon ka ng idea sa structure ng page, at ang unang gagawin natin ay tatanggalin natin ang post title. At kapag na-click natin ang post content, tandaan na dito ipapakita ang content ng iyong page. Gagamit ako ng patterns para palitan ang current header. Kaya kapag na-select mo na ang parent block, i-click ang Replace at hanapin ang relevant pattern na tumutugma sa iyong requirements. Hinahanap ko ang header pattern na may site logo sa gitna at navigation items sa mga gilid. Pagkatapos ay idadagdag ko ang links sa aking pages pati na rin ang site logo. Sa huli, gusto kong baguhin ang background color sa white at ang color ng text at links sa black.

Maaari nating sundin ang parehong proseso para sa footer, piliin ang Footer block, i-click ang Replace at hanapin ang relevant footer pattern. Voila!

Tapos na tayo sa pag-set up ng ating template, ngayon ay maaari na tayong magsimulang magdagdag ng content sa ating site. Kaya i-click ang WordPress icon o site icon at bumalik sa dashboard. Buksan ang home page at ngayon ay maaari na tayong magsimulang gumawa. Ang unang gusto kong idagdag ay feature image kaya magdadagdag ako ng pattern. Pupunta ako sa pattern directory at magta-type ng Hero banner. Kapag nahanap mo na ang pattern na hinahanap mo, maaari mo na lang itong i-copy at i-paste sa iyong page, at simulan ang pag-edit.

Una, papalitan ko ang background image, babaguhin ang opacity at simulan ang pag-personalize ng content, at sa lalong madaling panahon, magkakaroon ka ng hero image na may kasamang text. Susunod, maglalagay ako ng Gallery block at pipili ng tatlong images mula sa Media Library. Pagkatapos ay i-click ko ang List View, piliin ang Gallery block, baguhin ang alignment sa full width at ang block spacing sa zero.

Pagkatapos ng Gallery block, gusto kong magdagdag ng special offer at para gawin ito ay gagamit ako ng heading at Columns block. Magta-type ako ng Special offer, babaguhin ang alignment sa center at i-hit ang enter. Pagkatapos ay magdadagdag ako ng Columns block na may dalawang columns. Bubuksan ko ang List View para siguraduhing na-select ko ang parent block. Babaguhin ko ang alignment ng block sa full width. Sa left column, magdadagdag ako ng image, babaguhin ang style para maging rounded, magdagdag ng caption, magdadagdag ako ng Buttons block at sasabihin na makakakuha ka ng 15% off sa special offer na ito. Babaguhin ko ang alignment sa center, ang radius sa 100, magdagdag ng link at baguhin ang background sa black; at gagawin ang eksaktong pareho sa right column. Bago ako magpatuloy, gusto kong gumawa ng space gamit ang Spacer blocks.

Ngayon ay maglalagay ako ng Query Loop block para ipakita ang ilan sa aking latest posts. Kaya magdagdag tayo ng heading at pangalanan itong Where to next, babaguhin ko ang alignment sa full width at ang text alignment sa center. Pagkatapos i-hit ang Enter, maglalagay ako ng Query Loop block at i-click ang Start blank. At pagkatapos ay pipiliin ko ang image date at title option pati na rin ang grid view. Pagkatapos ay babaguhin ko ang alignment sa full width. Pumili ng isa sa mga images at sa sidebar settings, baguhin ang height para siguraduhing pare-pareho ang laki ng lahat ng images at tumutugma sa iyong requirements. Sa huli, i-click ang List View at tanggalin ang anumang blocks na hindi mo itinuturing na mahalaga. Halimbawa, ang Pagination block, ang No results block at ang Post date block.

Pagkatapos magdagdag ng isa pang Spacer block, maglalagay ako ng Cover block. Pipili ako ng isa sa mga images mula sa Media Library, babaguhin ang alignment sa full width at pagkatapos ay palakihin ito, at baguhin ang focal point picker nang naaayon. Babaguhin ko rin ang opacity para medyo mas madilim. At kapag tapos na tayo, maaari na tayong magsimulang magdagdag ng content. Sa kasong ito, ipapakilala ko sa mga tao ang ilan sa mga top travel destinations sa 2022. Tulad ng napansin mo, maaari mong baguhin ang laki ng iyong text sa sidebar settings. Pagkatapos ay magdadagdag ako ng Buttons block. Babaguhin ko ang text sa bold, ang text color sa black at ang background color sa white. Pagkatapos ay gagawin kong 100 ang radius at magdadagdag ako ng link.

Susunod, gusto nating ipakilala ang mga bisita sa ating team kaya magdadagdag ako ng Media and Text block. Pagkatapos baguhin ang alignment sa full width, magdadagdag tayo ng image sa left-hand side at ang appropriate text at button sa right. Susundin natin ang parehong steps o proseso tulad ng sa mga naunang halimbawa.

Susunod, gusto kong maglagay ng call-to-action pattern kaya i-click ang Browse all at pagkatapos ay pumunta sa patterns. Maghahanap ako ng buttons pattern at kapag na-click mo ang pattern, agad itong ilalagay sa iyong page. At ngayon ay magsisimula na akong i-edit ang content. Ang pag-set up ng subscription sa iyong newsletter ay isa pang paraan para makipag-engage sa iyong mga bisita at makipag-ugnayan sa kanila. Literal na binago ko lang ang text at tandaan na magdagdag ng URL link sa iyong button.

Sa huli, magdadagdag ako ng Gallery block na may anim na images. Siguraduhing napili mo ang parent block sa List View at baguhin ang iyong gallery para mag-display ng anim na columns. Pagkatapos ay bumaba at i-set ang block spacing sa zero at kapag nabago mo na ang alignment sa full width, pwede ka nang magpatuloy. Kapag na-click ko ang Preview in a new tab, makikita ko ang aking tapos na home page na ginawa nang walang anumang plugins o code.

Good luck sa paggamit ng block theme para gumawa ng iyong sariling home page at website.