Alamin kung paano lumikha ng isang malagkit na menu para sa pangunahing nabigasyon ng iyong WordPress website! Nakakatulong ang mga sticky menu na mapabuti ang karanasan ng user sa pamamagitan ng paggawa ng menu ng iyong website na mas madaling magagamit para sa mga bisita sa site. Dagdag pa, makakatulong ito na mapabuti ang pangkalahatang hitsura ng iyong site. Pasukin natin ito!

Talaan ng nilalaman

1. Mag-navigate sa Site Editor

Ang unang hakbang sa prosesong ito ay ang mag-navigate sa “Site Editor” sa loob ng WordPress admin area. Available ang Site Editor para sa “Block Themes” sa WordPress, sa pag-aakalang gumagamit ka ng WordPress na bersyon 5.9 o mas bago.

Upang mag-navigate sa Site Editor, pumunta sa Hitsura> Editor (pulang arrow sa larawan sa itaas) mula sa pangunahing nabigasyon sa lugar ng WP Admin.

Mag-click sa pangunahing bahagi ng nilalaman sa kanang bahagi ng screen (nakabalangkas sa mapusyaw na asul at tinutukoy ng asul na arrow sa imate sa itaas). Dadalhin ka nito sa Block Editor sa loob ng Site Editor.

Sa kanang bahagi, sa ilalim ng tab na “Page,” makakakita ka ng row na may label na “Template” (nakabalangkas sa asul sa larawan sa itaas). Mag-click sa pangalan ng template/link (pulang arrow). Pagkatapos, i-click ang "I-edit ang Template" (berdeng arrow - kung minsan ang "I-edit ang Template" ay isang maliit na asul na link ng teksto sa ibaba ng dropdown na nagpapakita ng pangalan ng iyong template).

2. I-edit ang Iyong Template

Mapapaloob ka na ngayon sa Template Editor para sa homepage ng iyong website. (Kung wala kang homepage na nakatakda para sa iyong site, maaari mong tingnan ang tutorial na ito sa pagtatakda ng isang static na homepage para sa iyong WordPress website).

Sa itaas ng template ay ang iyong pangunahing nabigasyon para sa iyong page – tinatawag ding “Header” ng iyong webpage. Kapag ini-hover mo ang iyong mouse sa elementong ito, makakakita ka ng purple na kahon na binabalangkas ito (pulang arrow sa larawan sa itaas). Ito ay nagpapahiwatig na ang elementong ito ay a "naka-sync na pattern," na nangangahulugan na ang paggawa ng pagbabago sa isang instance ng pattern ay maglalapat ng mga pagbabago sa lahat ng instance sa buong site. Mag-click sa lugar na ito upang piliin ang naka-sync na pattern ng Header.

Kung ito ang pangunahing elemento ng header ng iyong site, dapat mo na ngayong makita na ang naka-sync na pattern ay may label na "Header" sa block toolbar.

3. Idagdag ang Iyong Header sa isang Grupo

Sa loob ng block toolbar para sa napiling pattern ng Header, mag-click sa icon na "Mga Opsyon" (pulang arrow sa larawan sa itaas) at piliin ang "Group" (berdeng arrow). Ilalagay nito ang naka-sync na pattern sa isang bloke ng grupo.

Mapapansin mo na ang block toolbar ay mayroon na ngayong icon ng block ng grupo (asul na arrow sa larawan sa itaas), at ang outline sa paligid ng pangunahing lugar ng nabigasyon ay asul na ngayon sa halip na purple (pulang arrow).

Tandaan na maaaring baguhin nito ang lapad ng iyong pangunahing menu ng nabigasyon. Upang ayusin ang lapad, i-hover ang iyong mouse sa naka-sync na pattern ng Header at i-click upang piliin ito (pulang arrow).

Sa block toolbar para sa naka-sync na pattern ng Header, i-click ang icon na "Align" (berdeng arrow) at baguhin ito pabalik sa nais na lapad (asul na arrow - sa aking kaso pinili ko ang "Wide Width").

Upang bumalik sa block ng Group, mag-click sa icon na "Piliin ang Grupo" sa toolbar ng Header block (pink arrow).

Pinasimpleng WordPress: Paano Bumuo ng Makapangyarihang Mga Website na Kurso ng Davies Media Design

4. Itakda ang Grupo sa “Sticy”

Kapag napili ang pangkat, mag-navigate sa tab na "I-block" sa ilalim ng Sidebar ng Mga Setting sa kanang bahagi ng screen (pulang arrow sa larawan sa itaas).

I-click ang menu item na may label na "Posisyon" (berdeng arrow). Makakakita ka na ngayon ng dropdown dito na may label na "Default" (pink na arrow). I-click ang dropdown at piliin ang opsyong "Sticy" (asul na arrow).

Mag-navigate sa tuktok ng editor at i-click ang pindutang "I-save" (pulang arrow), pagkatapos ay i-click muli ang "I-save". Magkakaroon ka na ngayon ng pangunahing nabigasyon ng stick menu para sa iyong WordPress website!

5. I-istilo ang Sticky Menu

Maaari mong i-customize/istilo ang maraming elemento ng bagong sticky na menu, ngunit para sa tutorial na ito ay magdaragdag lang ako ng background sa likod ng block ng grupo upang matiyak na ang menu ay sumasaklaw sa buong lapad ng webpage.

Upang gawin ito, nang napili ang bloke ng Grupo, mag-navigate ako sa tab na "Mga Estilo" ng Sidebar ng Mga Setting (pulang arrow sa larawan sa itaas).

Sa ilalim ng "Kulay," i-click ko ang opsyong "Background" (asul na arrow), pagkatapos ay piliin ang puting swatch upang itakda ang kulay ng background sa puti (berdeng arrow).

Muli kong i-click ang "I-save" nang dalawang beses upang i-save ang mga pagbabago.

Tandaan na maaari mong palaging isaayos ang lapad, taas, o spacing ng header ng iyong website sa ilalim ng seksyong "Mga Dimensyon" gamit ang mga slider na "Padding" at "Margin".

Maaari mong i-preview ang iyong site sa pamamagitan ng pag-click sa icon ng device (pulang arrow), pagkatapos ay i-click ang “Tingnan ang site” (berdeng arrow).

Maaari kang mag-scroll sa iyong website at panoorin ang sticky navigation menu na nananatili sa lugar sa itaas (berdeng arrow)!

Kapag natapos mo nang i-edit ang iyong malagkit na menu, i-click ang button na "Bumalik" sa tuktok ng editor (pulang arrow). Ibabalik ka nito sa iyong webpage sa loob ng Side Editor.

Upang bumalik sa lugar ng WP Admin, i-click lamang ang logo sa kaliwang sulok sa itaas.

Iyon lang para sa tutorial na ito! Kung nasiyahan ka, magagawa mo matuto ng WordPress gamit ang aking malalim na kurso sa Udemy. O, maaari mong tingnan ang iba pang libre Mga tutorial sa video ng WordPress at Mga artikulo ng tulong sa WordPress sa aking website.

Davies Media Design Libreng Creative Apps Email Newsletter

Mag-subscribe sa DMD Newsletter

Mag-sign up para makatanggap ng mga bagong tutorial, update sa kurso, at pinakabagong balita sa iyong mga paboritong libreng creative app!

Matagumpay mo na Naka-subscribe!

Pin ito ng on Pinterest