Paano gumawa ng interactive product guide sa WordPress nang walang developer
Help guide na nagpapakita sa halip ng nagsasalaysay sa WordPress: checklist ng mga how-to na paksa, bawat isa ay nagbubukas ng tamang page at gumagabay gamit ang tooltip.
- Oras
- ● 30 minuto
- Presyo
- 14-araw na free trial, walang card
- Sino ang gagawa
- Administrator ng WordPress
Halimbawa: interactive guide sa WordPress
Nagbibigay ang WordPress agency ng site sa mga client na nakakalimot paano mag-publish. Sa /docs page, naglilista ang guide ng paksa; binubuksan ng “Mag-publish ng post” ang /wp-admin/post-new.php?tutorial=publish-post na may tour ng editor.
Ang format na ito ay bahagi ng Pro plan. Bawat bagong account ay nagsisimula sa 14-araw na free trial na may lahat na format at audience rules, walang card. Kapag nagtapos ang trial, walang nabubura at patuloy na ipinapakita ang mga naka-publish; nananatiling libre ang mga tour at tooltip sa Free plan.
Paano gumawa ng interactive guide sa WordPress, step by step
- Step 01
Kopyahin ang inyong Clew snippet
Gumawa ng libreng account (o mag-sign in), idagdag ang inyong site at buksan ang Buod sa admin. I-click ang line sa card na Walang signal mula sa widget pa. para kopyahin: nasa loob na ang tunay na site key sa halip ng placeholder.
<!-- Clew: palitan ang ILAGAY_ANG_SITE_KEY ng site key mula sa Admin > Buod --> <script src="https://tryclew.io/widget/ILAGAY_ANG_SITE_KEY.js" async></script>
Step 1 · eskematikong ilustrasyon - Step 02
Mag-install ng header code plugin
Sa Plugins → Add New i-install at i-activate ang libreng plugin na WPCode (o gamitin ang “header scripts” option ng inyong theme). Huwag i-edit ang
header.php: pinapalitan ito ng mga update ng theme.
Step 2 · eskematikong ilustrasyon - Step 03
I-paste ang line sa Header box
Buksan ang Code Snippets → Header & Footer, i-paste ang line ng Clew sa Header at i-click ang Save Changes.
Step 3 · eskematikong ilustrasyon - Step 04
I-purge ang cache
Kung gumagamit ng WP Rocket, LiteSpeed Cache, W3 Total Cache o CDN, i-purge ang cache. Sa “delay JavaScript” setting, i-exclude ang
tryclew.io/widget.
Step 4 · eskematikong ilustrasyon - Step 05
Gawin ang mga tour, pagkatapos ang guide checklist
Unang gawin ang isang Step-by-step na tooltip tour bawat paksa gamit ang I-edit sa iyong site at Pumili ng element, at itala ang Slug (ginagamit sa link) ng bawat tour. Pagkatapos gumawa ng Onboarding checklist: isang item bawat paksa, at sa URL ng link ang address ng page plus
?tutorial=at ang slug ng tour.
Step 5 · eskematikong ilustrasyon - Step 06
Piliin kung saan, kailan at para kanino ipapakita
Sa parehong editor, sagutan ang Saan ipakita (URL ng page), Kailan ipakita, Pag-target ng audience at Frequency. Ito ang mga setting ng halimbawa sa itaas:
Setting Value Checklist Format Onboarding checklist Saan ipakita (URL ng page) Seksyon ayon sa prefix /docsKailan ipakita Kaagad kapag nag-load ang page Pag-target ng audience Walang rule: lahat na nagbukas sa page Frequency Bawat pagbisita Product tour Format Step-by-step na tooltip Saan ipakita (URL ng page) Seksyon ayon sa prefix /wp-admin/post-new.phpKailan ipakita Kaagad kapag nag-load ang page Pag-target ng audience Walang rule: lahat na nagbukas sa page Frequency Minsan bawat bisita 
Step 6 · eskematikong ilustrasyon - Step 07
I-publish at tingnan sa live na site
Itakda ang Status sa Naka-publish at i-save. Buksan ang page sa private window: tinatandaan ng Clew kung sino ang nakakita na ng item na “minsan”, kaya maaaring hindi ito ipakita sa inyong karaniwang browser. Ang mga view, completion at drop-off ay nasa stats.
Step 7 · eskematikong ilustrasyon
Mga dapat iwasan: interactive product guide sa WordPress
Itinatago ng “Delay JavaScript” ang interactive product guide hanggang interaction
Maaaring ipagpaliban ng WP Rocket, LiteSpeed at Perfmatters ang script hanggang unang scroll o click. Huli nagsisimula ang widget, at ang item na Kaagad kapag nag-load ang page ay mukhang sira. Idagdag ang tryclew.io/widget sa exclusions.
Ang mga page para naka-log-in ay kadalasang naiiba
Ang members area (WooCommerce /my-account, LMS course page) ay may ibang markup kaysa nakikita ng anonymous na bisita. Buuin ang mga step na naka-log-in bilang karaniwang member, hindi administrator na may dagdag na toolbar.
Panatilihin ang mga query parameter
Ilang site ay nag-redirect at nag-aalis ng query string (halimbawa, pinipilit ang trailing slash). Buksan ang bawat link ng paksa nang minsan: kung nawala ang ?tutorial= sa address bar, i-link ang final na URL.
Kailangan ng stable na selector ang help button
Nakikinig ang Kapag i-click ang element sa mga click sa selector na inilagay. Gumamit ng id o data-tour attribute sa help button, hindi class na maaaring palitan ng pangalan kapag binago ang style.
Mga tanong at sagot
Tumatakbo ba ang tour sa loob ng wp-admin?
Kung ang line ay naglo-load din sa admin area lamang — idagdag gamit ang admin-side snippet sa WPCode.
Gumagana ba sa WordPress.com?
Ang plugin gaya ng WPCode ay nangangailangan ng WordPress.com Business plan o mas mataas. Ang self-hosted WordPress ay gumagana sa anumang hosting.
Makikita ba sa wp-admin?
Ang header plugin ay kadalasang nagdadagdag ng code sa public site lamang. Para guide sa loob ng /wp-admin, idagdag ang line gamit ang admin-side snippet (maaaring target ng WPCode ang admin area).
Magkano?
Libre ang mga tour; ang guide checklist ay bahagi ng Pro. Bawat bagong account ay may 14-araw na trial para sa dalawa, walang card.
Maaari bang kusang ipakita ang parehong tour sa mga bagong user?
Maaari. Ang tour na binuksan gamit ang ?tutorial= ay hindi sumusunod sa mga rule nito, kaya ang parehong tour ay maaari pa may sariling URL rule at Minsan bawat bisita para sa mga unang bisita.
Iba pang maaaring idagdag sa WordPress
- Paano magdagdag ng popup sa WordPress site nang walang developer
- Paano gumawa ng product tour sa WordPress nang walang developer
- Paano magdagdag ng tooltip sa WordPress site nang walang developer