Kung ikaw ay bumubuo ng WordPress na site para sa isang kliyente, malamang na magkakaroon ka ng mga shortcode para gamitin ng iyong mga kliyente. Ang problema ay na maraming mga nagsisimula ay hindi alam kung paano magdagdag ng mga shortcode at kung may mga komplikadong parameter na kasangkot, pagkatapos ay mas mahirap pa rin. Ang shortcake ay nagbibigay ng isang solusyon sa pamamagitan ng pagdaragdag ng isang user interface para sa mga shortcode. Sa artikulong ito, ipapakita namin sa iyo kung paano magdagdag ng isang user interface para sa mga shortcode sa WordPress na may Shortcake.
Ano ang Shortcake?
Nag-aalok ang WordPress ng isang mas madaling paraan upang magdagdag ng executeable code sa loob ng mga post at mga pahina sa pamamagitan ng paggamit ng mga shortcode. Maraming mga tema at plugin ng WordPress ang nagpapahintulot sa mga user na magdagdag ng karagdagang pag-andar gamit ang mga shortcode. Gayunpaman, kung minsan ang mga shortcode na ito ay maaaring maging kumplikado kapag ang isang gumagamit ay kailangang ipasok ang mga parameter para sa pagpapasadya.
Halimbawa, sa isang tipikal na tema ng WordPress kung mayroong isang shortcode upang magpasok ng isang pindutan, kung gayon ang user ay malamang na kailangan upang magdagdag ng hindi bababa sa dalawa hanggang limang parameter. Ganito:
[themebutton url = “http://example.com” title = “I-download na Ngayon” color = “purple” target = “newwindow”]
Shortcake ay isang WordPress plugin at isang iminungkahing hinaharap na tampok ng WordPress. Nilalayon nito na malutas ang problemang ito sa pamamagitan ng pagbibigay ng isang user interface upang ipasok ang mga halagang ito. Magagawa nito ang mga shortcode na mas madaling gamitin.
Nagsisimula
Ang tutorial na ito ay naglalayong para sa mga gumagamit na bago sa pag-unlad ng WordPress. Ang mga gumagamit ng level beginner na gustong mag-tweak sa kanilang mga tema sa WordPress ay makikita rin ang tutorial na ito na kapaki-pakinabang.
Sinabi na, magsimula tayo.
Ang unang bagay na kailangan mong gawin ay i-install at i-activate ang plugin ng Shortcake (Shortcode UI).
Kakailanganin mo na ngayon ng isang shortcode na tumatanggap ng ilang mga parameter ng input ng user. Kung kailangan mo ng isang maliit na refresher, dito ay kung paano magdagdag ng isang shortcode sa WordPress.
Para sa kapakanan ng tutorial na ito gagamitin namin ang isang simpleng shortcode na nagbibigay-daan sa mga gumagamit upang magsingit ng isang pindutan sa kanilang mga post sa WordPress o mga pahina. Narito ang sample code para sa aming shortcode, at magagamit mo ito sa pamamagitan ng pagdaragdag nito sa file ng mga function ng iyong tema o sa isang plugin na tukoy sa site.
add_shortcode ('cta-button', 'cta_button_shortcode');
function cta_button_shortcode ($ atts) {
Extract (shortcode_atts (
array (
'pamagat' => 'Pamagat',
'url' => ''
),
$ atts
));
bumalik ' ';
}
Kakailanganin mo ring magdagdag ng ilang CSS upang estilo ang iyong pindutan. Maaari mong gamitin ang CSS sa iyong stylesheet ng iyong tema.
.cta-button {
padding: 10px;
laki ng font: 18px;
border: 1px solid #FFF;
border-radius: 7px;
kulay: #FFF;
background-color: # 50A7EC;
}
Ito ay kung paano gagamitin ng isang user ang shortcode sa kanilang mga post at pahina:
[cta-button title = "I-download Ngayon" url = "http://example.com"]
Ngayon na mayroon kami ng isang shortcode na tumatanggap ng mga parameter, lumikha ng isang UI para dito.
Nirerehistro ang iyong Shortcode User Interface sa Shortcake
Pinapayagan ka ng Shortcake API na irehistro ang user interface ng iyong shortcode. Kakailanganin mong ilarawan kung anong mga katangian ang tinatanggap ng iyong shortcode, mga uri ng field ng input, at kung aling mga uri ng post ang magpapakita ng shortcode UI.
Narito ang isang sample code snippet na gagamitin namin upang irehistro ang aming shortcode ng UI. Sinubukan naming ipaliwanag ang bawat hakbang na may mga inline na komento. Maaari mong i-paste ito sa file ng mga function ng iyong tema o sa isang plugin na tukoy sa site.
shortcode_ui_register_for_shortcode (
/ ** Ang iyong shortcode handle * /
'cta-button',
/ ** Ang iyong shortcode label at icon * /
array (
/ ** Label para sa iyong shortcode user interface. Ang bahaging ito ay kinakailangan. * /
'label' => 'Magdagdag ng Pindutan',
/ ** Icon o isang attachment ng imahe para sa shortcode. Opsyonal. src o dashicons- $ icon. * /
'listItemImage' => 'dashicons-lightbulb',
/ ** Mga Katangian ng Shortcode * /
'attrs' => array (
/ **
* Ang bawat katangian na tumatanggap ng input ng user ay magkakaroon ng sarili nitong array na tinukoy tulad nito
* Ang aming shortcode ay tumatanggap ng dalawang mga parameter o mga katangian, pamagat at URL
* Hinahayaan muna tukuyin ang UI para sa field ng pamagat.
* /
array (
/ ** Ang label na ito ay lilitaw sa user interface * /
'label' => 'Pamagat',
/ ** Ito ang aktwal na attr na ginamit sa code na ginamit para sa shortcode * /
'attr' => 'pamagat',
/ ** Tukuyin ang uri ng pag-input. Ang mga suportadong uri ay teksto, checkbox, textarea, radyo, piliin, email, url, numero, at petsa. * /
'type' => 'text',
/ ** Magdagdag ng kapaki-pakinabang na paglalarawan para sa mga gumagamit
'paglalarawan' => 'Mangyaring ipasok ang pindutan ng teksto',
),
/ ** Ngayon ay tutukuyin natin ang UI para sa patlang ng URL * /
array (
'label' => 'URL',
'attr' => 'url',
'type' => 'text',
'paglalarawan' => 'Buong URL',
),
),
),
/ ** Maaari mong piliin kung aling mga uri ng post ay magpapakita ng shortcode UI * /
'post_type' => array ('post', 'pahina'),
)
);
Iyon lang, maaari mo na ngayong makita ang shortcode user interface sa aksyon sa pamamagitan ng pag-edit ng isang post. I-click lamang ang pindutan ng Add Media sa itaas ng editor ng post. Dadalhin nito ang uploader ng media kung saan mapapansin mo ang isang bagong item na ‘Magsingit ng Post Element’ sa haligi ng kaliwang kamay. Ang pag-click dito ay magpapakita sa iyo ng isang pindutan upang ipasok ang iyong code.
Ang pag-click sa thumbnail na naglalaman ng icon ng lightbulb at ang iyong label ng shortcake ay magpapakita sa iyo ng shortcode UI.
Pagdaragdag ng Shortcode Gamit ang Maramihang Input
Sa unang halimbawa, ginamit namin ang isang napaka pangunahing shortcode. Ngayon ay nagbibigay-daan sa gawin itong isang maliit na mas kumplikado at mas maraming kapaki-pakinabang. Magdagdag ng shortcode na nagbibigay-daan sa mga gumagamit na pumili ng isang kulay ng button.
Una naming idagdag ang shortcode. Ito ay halos parehong shortcode, maliban na ngayon ito excepts input ng gumagamit para sa kulay.
add_shortcode ('mybutton', 'my_button_shortcode');
function my_button_shortcode ($ atts) {
Extract (shortcode_atts (
array (
'Kulay' => 'asul',
'pamagat' => 'Pamagat',
'url' => ''
),
$ atts
));
bumalik ' ';
}
Dahil ang aming shortcode ay nagpapakita ng mga pindutan sa iba’t ibang kulay kaya kailangan naming i-update ang aming CSS masyadong. Maaari mong gamitin ang CSS sa iyong stylesheet ng iyong tema.
.mybutton {
padding: 10px;
laki ng font: 18px;
border: 1px solid #FFF;
border-radius: 7px;
kulay: #FFF;
}
.blue-button {
background-color: # 50A7EC;
}
.orange-button {
background-color: # FF7B00;
}
.green-button {
background-color: # 29B577;
}
Ganito ang hitsura ng mga pindutan:
Ngayon na handa na ang aming shortcode, ang susunod na hakbang ay upang magrehistro ng shortcode UI. Gagamitin namin ang mahalagang parehong code, maliban sa oras na ito mayroon kaming isa pang parameter para sa kulay at kami ay nag-aalok ng mga gumagamit upang pumili mula sa asul, orange, o berde na mga pindutan.
shortcode_ui_register_for_shortcode (
/ ** Ang iyong shortcode handle * /
'mybutton',
/ ** Ang iyong shortcode label at icon * /
array (
/ ** Label para sa iyong shortcode user interface. Ang bahaging ito ay kinakailangan. * /
'label' => 'Magdagdag ng makulay na button',
/ ** Icon o isang attachment ng imahe para sa shortcode. Opsyonal. src o dashicons- $ icon. * /
'listItemImage' => 'dashicons-flag',
/ ** Mga Katangian ng Shortcode * /
'attrs' => array (
/ **
* Ang bawat katangian na tumatanggap ng input ng user ay magkakaroon ng sarili nitong array na tinukoy tulad nito
* Ang aming shortcode ay tumatanggap ng dalawang mga parameter o mga katangian, pamagat at URL
* Hinahayaan muna tukuyin ang UI para sa field ng pamagat.
* /
array (
/ ** Ang label na ito ay lilitaw sa user interface * /
'label' => 'Pamagat',
/ ** Ito ang aktwal na attr na ginamit sa code na ginamit para sa shortcode * /
'attr' => 'pamagat',
/ ** Tukuyin ang uri ng pag-input. Ang mga suportadong uri ay teksto, checkbox, textarea, radyo, piliin, email, url, numero, at petsa. * /
'type' => 'text',
/ ** Magdagdag ng kapaki-pakinabang na paglalarawan para sa mga gumagamit * /
'paglalarawan' => 'Mangyaring ipasok ang pindutan ng teksto',
),
/ ** Ngayon ay tutukuyin natin ang UI para sa patlang ng URL * /
array (
'label' => 'URL',
'attr' => 'url',
'type' => 'text',
'paglalarawan' => 'Buong URL',
),
/ ** Sa wakas kami ay tukuyin ang UI para sa Kulay Pinili * /
array (
'label' => 'Kulay',
'attr' => 'kulay',
/ ** Gagamitin namin ang piling field sa halip na teksto * /
'type' => 'piliin',
'Mga pagpipilian' => array (
'blue' => 'Blue',
'orange' => 'Orange',
'green' => 'Green',
),
),
),
/ ** Maaari mong piliin kung aling mga uri ng post ay magpapakita ng shortcode UI * /
'post_type' => array ('post', 'pahina'),
)
);
Iyan lang, maaari mo na ngayong i-edit ang isang post o pahina at mag-click sa pindutan ng Add Media. Mapapansin mo ang iyong bagong idinagdag na shortcode sa ilalim ng ‘Ipasok ang Mga Sangkap ng Post’.
Ang pag-click sa iyong bagong nilikha shortcode ay magdadala ng shortcode UI, kung saan maaari mong ipasok lamang ang mga halaga.
Maaari mong i-download ang code na ginamit sa tutorial na ito bilang isang plugin.
wpb-shortcake-tutorial
Isinama namin ang CSS, kaya maaari mo itong gamitin upang pag-aralan o gamitin ito upang idagdag ang iyong sariling tawag sa mga pindutan ng pagkilos sa WordPress gamit ang isang mas madaling interface ng gumagamit. Huwag mag-atubiling baguhin ang pinagmulan at maglaro dito.