Author: Neil Lock

From the word itself, the word shortcode means exactly that: A short code; a shortcut code.

Shortcodes suna ba ka damar ƙara abubuwa a gidan yanar gizonka (kamar widgets, misali), ba tare da buƙatar ƙara manyan ɓangarorin lambobin shiri kamar yadda masu haɓakawa kan yi ba.

Misali, wani sashi na lambar shiri na yau da kullum, dangane da tsayi, zai iya zama kamar haka:

<html>Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Etiam id aliquam turpis. Vivamus quis arcu tincidunt, finibus urna eget, placerat risus.

Aliquam arcu massa, finibus et lacinia sed, scelerisque nec augue. Quisque eu viverra sapien, vel consequat lorem. Integer vel erat tortor.

Phasellus condimentum magna eget congue venenatis. Suspendisse blandit vehicula consectetur.

Nullam sodales eleifend massa, in bibendum purus fermentum id.

Morbi et turpis feugiat, malesuada ipsum sit amet, interdum nulla. In non ante nec nisl mattis gravida sit amet id lectus.

</html>​

A wannan misalin, bari mu ɗauka cewa sashin lambar shirin da ke sama zai ba ka damar ƙara cikakken sakin layi na rubutun wucin gadi na Lorem Ipsum.

Now, a shortcode with the same exact function as the code above will look something like this, in contrast:

[lorem ipsum dolor estat]Lorem Ipsum[/lorem]​

You can see how they’re miles different from each other in terms of length.

Yanzu ka yi tunanin cewa duka ɓangarorin lambobin biyu– Na asali mai tsayi, idan aka kwatanta da shortcode ɗin da ke ɗauke da kalmar “lorem” kawai, duk za su yi abu ɗaya daidai: Ƙara rubutun Lorem Ipsum.

This is what shortcodes do. They make adding widgets, functions, and a bunch of other cool stuff easier for both ordinary WordPress users and developers alike.

Where can I find shortcodes?

Idan kana da wani plugin ko widget da kake so, akwai yiwuwar suna da shortcode da ke akwai don ka yi amfani da shi.

Shortcodes Ultimate, for example, will let you choose from hundreds of shortcodes that you can use on Page Builder Sandwich (or anywhere, actually) by simply grabbing the shortcode of your choice from Shortcode Ultimate’s repository or documentation page.

Adding Custom Shortcodes on PBS

A Page Builder Sandwich, za ka iya ƙara shortcodes kai tsaye a kan shafinka ta hanyar bugawa kawai ko kwafa da liƙa shi a yankin abun cikinka.

Mun yi wannan a ƙasa tare da wani shortcode daga Shortcodes Ultimate, inda muka ƙara akwatin abun ciki a shafin gwaji na Page Builder Sandwich:

Another thing you’ll find handy when using Page Builder Sandwich is our Shortcode Mapping feature.

Daga ɗaya daga cikin labaranmu da suka gabata kan Shortcode Mapping, ma’anar ita ce kamar haka:

Shortcode mapping is like letting Page Builder Sandwich memorize all the shortcodes available on your site: their names, descriptions, their attributes, and what each of these attributes do.

Wani ɓangare na wannan yana nufin cewa ba lallai ne ka nemi shortcodes ɗinka da kanka a cikin takaddun bayanansu ko ma’ajiyoyinsu ba.

Muddin kana da plugin ɗin da ya ƙunshi shortcode ɗin an girka shi a shafinka na WordPress, zai kasance a shirye cikin sauƙi don ka yi amfani da shi a Page Builder Sandwich.

So for example, if I wanted to add a WooCommerce shortcode on my page, all I have to do is make sure that it’s installed on my WordPress site, like so:

And then, to actually add the shortcode, I’ll just go to my page, and drag and drop the Shortcode Element:

Because we already have WooCommerce installed on our WordPress site, you can see that all of the shortcodes that are available on the WooCommerce plugin are already available on Page Builder Sandwich. This is what Shortcode Mapping is.

You can also see on the upper left corner that the ACF (Advanced Custom Fields) and MailChimp shortcodes are available– because we have those instlled on our WordPress site, too.

Don haka idan kana son ƙara shortcodes na musamman, ko shortcodes ɗin da ka ƙirƙira da kanka, za ka iya, muddin kana da su an girka su a shafinka na WordPress.

Here are some other helpful plugins that you can use to create your own custom shortcodes:

Akwai tarin magina shafuka da dama a can, kuma tabbas kana tambayar kanka: mene ne na musamman game da Page Builder Sandwich? Me zai sa ka damu da amfani da shi idan har kana da wani a hannunka?

A cikin wannan makalar, zan lissafa wasu muhimman abubuwa da aka samu a Page Builder Sandwich wadanda suka sa ya zama na musamman, kuma wajibi ne ga masu kirkirar abun ciki da masu zane. Idan ba ka san abin da maginin shafi yake ba da kuma dalilin da ya sa kake bukatarsa, kada ka damu, muna da wasu abubuwa da za su iya taimaka maka.

1. Ba wai kawai za ka ga siffar abun cikinka ba, za ka ga kuma ka gyara ainihin abun cikinka

A cikin sauran magina shafuka, kana ganin sassa ne kawai da ke wakiltar abun cikinka. Galibi kana tsara abun cikinka ne da tubalan gini da sifofin murabba’i mai tsawo, kuma sakamakon yana kama da tsarin inda abun cikinka zai kasance a shafinka. Wannan yana haifar da danna madannin rigar-faci (preview) akai-akai don kawai ka ga yadda sakamakon zai kasance.

Tare da Page Builder Sandwich, ana yin duk gyare-gyare a shafin gaba (front end) na rukunin yanar gizonka kuma kana gyara abun cikinka kai tsaye don samun cikakkiyar kwarewa ta abin-da-ka-gani-shi-ne-abin-da-za-ka-samu.

2. Gyara kai tsaye cikin sauri da sauki ba tare da wadancan akwatunan popup masu tayar da hankali ba

Akwatunan popup sun kasance babban ginshiki ga magina shafuka. A mafi yawansu, idan kana son gyara wani abu a cikin tsarinka, ko taken labari ne, rubutun maballi, ko karamin rubutun taken bayani, da farko dole ne ka jira akwatin popup ya bude sannan ka yi canje-canjenka a ciki.

Mun sanya shi burinmu don rage amfani da akwatunan popup a ko’ina a cikin Page Builder Sandwich. Ta hanyar cire popups, gyara kowane abun ciki ya zama mafi sauki da santsi fiye da kowane lokaci.

Ana yin gyare-gyare a hanya mai sauki – danna kan rubutunka don sanya alamar rubutu a can sannan ka fara bugawa. Ba lallai ne ka sake jiran akwatin popup mai dauke da editan TinyMCE don fara gyara ba. Mafi kyawun bangaren shi ne cewa har yanzu kana iya jan abun cikinka da sauke shi a ko’ina.

Wata sabuwar dabara da ke taimakawa wajen gyara ba tare da wahala ba ita ce ‘inspector’ da ke nan a kowane lokaci. Inspector din tana aiki a matsayin akwatin kayan aiki da editan kaddarori. Kayan aikin tsara abun cikinka: launukan rubutu, lakabi, daidaita girman rubutu, margins, paddings, borders, blockquotes, da sauran su da yawa suna kusa da danna sau daya kawai.

3. Sake amfani da ayyukan WordPress

Wani abin da muka lura da shi a sauran magina shafuka shi ne cewa sukan sake kirkirar keken da aka riga aka kirkira. Wasu suna amfani da nasu kayan zaben launi, masu loda hoto, masu kirkirar kundin hoto da sauran kayan aiki daban-daban. Babu wani laifi game da wannan a karan kansa, amma WordPress taska ce ta gutsutsuran lamba, don haka me zai hana a yi amfani da wadancan?

WordPress babban dandamali ne kuma mai ban mamaki wanda ya kunshi kayan aiki masu kyau da yawa wadanda dimbin masu bayar da gudummawa suka gina. Page Builder Sandwich yana amfani da ayyukan da aka riga aka hada su tare da WordPress gwargwadon iyawa.

Maimakon yin amfani da namu mai zaben launi, muna amfani da Iris color picker. Maimakon namu mai loda hoto, muna amfani da manajan yada labarai (media manager). Sannan akwai kuma backbonejs, underscorejs, wp.hooks da wp.shortcode don ambaton wasu ‘yan rubutattun lambobi masu kyau. Muna amfani da duk wadannan, kuma wannan ya saukaka rayuwarmu sannan kuma wannan yana haifar da tushen lamba mafi karko.

Sake amfani da ayyukan WordPress ya haifar da wasu abubuwan ban mamaki masu kayatarwa kuma. Misali, tun da mun yi amfani da manajan yada labarai don saka hotuna, ya zama abin mamaki mai dadi cewa yanzu za mu iya sarrafa kundayen hotuna na WordPress, jerin waƙoƙi da bidiyo da adiresoshin URL na waje nan take. Hakanan za mu iya amfani da manajan yada labarai kawai don yin gyaran hoto, wanda ya kawar da sa’o’i na ciwon kan ci gaba mara amfani.

4. Kewayawa da gajerun hanyoyin maballin rubutu

A cikin sauran magina shafuka, linzamin kwamfuta (mouse) abokinka ne. Kana jan abubuwa da sauke su da shi sannan ka danna sau biyu a kan abubuwa don gyarawa. Amma galibi ana watsi da maballin rubutu.

Misali, a wasu magina shafukan, ba za ka iya saukaka gyara rubutu sakin layi/sashe daya sama da inda kake gyarawa ba saboda dole ne ka danna fita daga akwatin popup sannan ka danna shiga wani sabo. A Page Builder Sandwich, zaka iya kewayawa da maballin kwamfutarka. Danna makullin kibiya don kewayawa tsakanin abun cikinka, yana aiki ko da kuwa sauran abun cikinka yana kunshe a cikin wani layi ko shafi.

Wani muhimmin fasali shi ne gajerun hanyoyin maballin rubutu na soke (undo) da sake yi (redo). Wataƙila ba su yi kama da wani abu mai yawa ba da farko, amma yi tunani a kan wannan: me zai faru idan ka ja ka sauke abun cikinka bisa kuskure a wurin da ba daidai ba. A wasu magina shafukan, dole ne ka ja shi komawa asalin wurinsa. A cikin Page Builder Sandwich, duka undo da redo suna aiki. Don haka ko kana son sake fasalin abin da ka rubuta, ko kana son dawo da abun cikinka da aka ja (ko abubuwan ciki da yawa da aka ja), kawai danna undo ko redo. Undo da redo suna aiki don abun cikin da aka ja aka sauke har ma da sauye-sauyen kaddarori kamar girman rubutu da row paddings. Wannan ya sa su zama kayan aiki masu karfi a cikin rumbun kayan gyaranka.

5. Maginin shafi na ainihi na gaba – Kwarewar gyara mafi natsuwa kuma ba tare da wahala ba

Tunaninmu yayin ci gaba shi ne cewa gyarawa a shafin gaba (front end) bai kamata ya zama kamar har yanzu kana gyara ta amfani da kayan aikin shafin baya (back end) ba. Bai kamata ya ji kamar an kirkiri maginin shafin ne da farko don shafin baya sannan aka tura shi zuwa shafin gaba ba.

Gaba daya, a wurina, babban bambancin Page Builder Sandwich shi ne cewa mun gina shi da manufar zama “ainihin” maginin shafi na gaba – sake tunanin yadda gyaran shafin gaba ya kamata ya kasance.

Idan kai ƙwararren marubucin blog ne inda dukkan ƙirƙirar abun ciki da kake yi ya shafi rubuta cikakkun maƙaloli masu ɗauke da hotuna lokaci-lokaci, to watakila editan abun ciki na TinyMCE da ake da shi a yanzu ya ishe buƙatunka. Kayan aikin da ke akwai a yanzu sun riga sun ƙunshi muhimman kayan aiki don rubuta maƙaloli, kana da kayan aikin tsara rubutu na asali kamar bold, italic, headings, da sauransu. Amma iya abin da yake da shi ke nan.

Babu sauƙin tsara fasalin shafi

Duk da cewa za ka iya rubuta maƙaloli tare da editan abun ciki na TinyMCE na yanzu, babu wata ingantacciyar hanya da za ka tsara fasalin abun cikinka banda kasancewar shafi ɗaya tilo mai gudana na rubutu. A yadda yake, ba za ka iya raba rubutunka zuwa ginshiƙai biyu ko fiye ba, kuma ba za ka iya ƙirƙirar abun ciki da aka raba shi da launi daban na bango ba. Idan kana son sauran sassan gidan yanar gizonka kamar shafukan sauka (landing pages) da shafukan tuntuɓa su kasance na musamman, za ka buƙaci wani nau’i na damar tsara fasali ta asali.

Wasu sun yi ƙoƙarin magance wannan matsalar ta hanyar amfani da fasalin shortcode na WordPress. A taƙaice, shortcodes suna ba da damar shigar da ƴan lambobin lamba (code) ta hanyar amfani da alamomi na musamman. Akwai plugin ɗin WordPress da ke kawo shortcodes daban-daban waɗanda za ka iya amfani da su don ƙirƙirar abun ciki mai ginshiƙai. Misali, za ka iya lulluɓe abun cikinka da alamomin ginshiƙai masu yawa idan kana son sanya su a cikin fasalin ginshiƙi biyu. Duk da cewa wannan hanyar na “aiki”, ba ta da sauƙin gani da fahimta domin a ƙarshe, yayin da kake ƙara abun ciki, komai zai zama kamar babban tarin rikici.

Don cike wannan giɓi na tsara fasali, aka ƙirƙiri masu gina shafi (page builders).

Masu gina shafi suna sauƙaƙa ƙirƙirar abun ciki mai tsari

Masu gina shafi suna ba ka ƙarin kayan aiki waɗanda ke sa tsara abun cikinka zuwa fasalai na musamman cikin sauƙi. Masu gina shafi galibi suna cire editan abun ciki na TinyMCE na back end tare da maye gurbinsa da (ko ƙara) wani sabo wanda zai taimaka maka ganin yadda abun cikinka zai kasance. Idan ba ka taɓa amfani da mai gina shafi na back end ba a baya, ka kwatanta tarin tubalan gini inda kowane tubali ke wakiltar wani nau’in abun ciki: hoto, rubutu, ko kuma shortcode. Daga nan zai ba ka damar janyewa da sauke su zuwa fasalai da ginshiƙai daban-daban.

Baya ga tsara fasali, masu gina shafi suna sauƙaƙa ƙirƙira da sanya shortcodes. A baya, za ka riƙa ganin shortcodes a ainihin siffarsu marar fasali. Za ka ga baƙaƙen baka na murabba’i tare da duk wasu sassa (attributes) da ƙimomi (values) a gauraye a cikin abun cikinka. Masu gina shafi galibi suna sanya masu ƙirƙirar shortcode – akwatunan magana masu tashi (popup dialogs) waɗanda ke sa zaɓar sassan shortcode ya fi sauƙin amfani maimakon rubuta su da hannu kawai.

Masu gina shafi na front end sune makoma

Duk da cewa duk wannan kyakkyawar ƙwarewa ce ga masu ƙira da masu ƙirƙirar abun ciki, mai gina shafi na back end yana da babbar matsala a cikinsa. Duk da cewa kana iya ganin wakilcin yadda abun cikinka zai kasance, abin da kake gani ba ainihin abun cikinka bane. Wannan yana kai mutane ga duba samfotin shafukansu a kai a kai don ganin ko abin da suke yi daidai ne. Lokacin amfani da masu gina shafi na back end, ni kaina nakan danna maɓallin samfoti aƙalla sau 20 cikin sauƙi kawai don duba ko abun cikina ya daidaita yadda ya kamata ko kuma ko gefunan rubutuna sun daidaita sararinsu. Wannan wata babbar damuwa ce mai ɓata lokaci.

Don warware wannan matsala, ya kamata a kawo masu gina shafi zuwa front end. Idan aka yi hakan, wannan zai kawar da ɓangaren zato wajen tsara fasalin shafi tun da za ka iya ganin sakamakonka nan take.

Ya zuwa yanzu akwai masu gina shafi na back end da yawa kuma ƙalilan ne kawai masu gina shafi na front end. Daga cikin waɗancan ƙalilan akwai Page Builder Sandwich. Idan kana son ƙarin koyo game da abin da ya sa Page Builder Sandwich ta kasance ta musamman da kuma dalilin da ya sa ta zama kayan aiki da ya dace da kai, karanta maƙalar Yadda Page Builder Sandwich Ta Bambanta da Sauran.

Wannan labarin zai ba da taƙaitaccen bayani kan yadda Page Builder Sandwich ke aiki, kuma an yi shi ne domin ya zama gabatarwa ga waɗanda ke da sha’awar yadda mai gina shafinmu yake haɗuwa da abubuwa daban-daban a cikin WordPress. Ba zan tsaya daki-daki kan kowace sifa ta Page Builder Sandwich ba, idan kuna son waɗancan, ku ziyarci shafin bidiyonmu inda muke nuna kowace sifa daban-daban tare da gajerun bidiyon allon kwamfuta.

Idan kuna son sanin yadda Page Builder Sandwich ya bambanta da sauran masu gina shafuka da ke akwai, duba labarinmu Yadda Page Builder Sandwich Ya Bambanta da Sauran.

A ina yake? Kuma me zan iya gyarawa da shi?

Ba kamar sauran masu gina shafuka da yawa ba, Page Builder Sandwich yana nan ne a ɓangaren gaba (front end) na rukunin yanar gizonku. Idan kuna ɓangaren baya (back end), mun samar da maɓallin “Frontend” kusa da maɓallan editan abun ciki wanda zai kawo ku zuwa ɓangaren gaba na shafinku.

Page Builder Sandwich yana ba ku damar gyara rubutunku, shafukanku da kuma nau’ikan rubutu na musamman (custom post type content). Sai dai kuma, ba ya ba ku damar gyara kai tsaye jerin rubutun shafin farko na blog ɗinku, da sauran wurare marasa shafi ɗaya na rukunin yanar gizonku. Kawai ku yi tunaninsa ta wannan hanyar: idan abin da kuke son gyarawa yana da editan abun ciki a ɓangaren baya (kamar “New Post” da “New Page”), to za a iya amfani da Page Builder Sandwich. Kuna iya gyara kowane ɗayan shafukanku da rubutun blog, kuma idan misali kuna da wani plugin da ke gabatar da menu na gidan abinci ko kayan aikin portfolio, kuna iya gyara su ma.

Yayin da kuke a ɓangaren gaba, mun sanya wani shuɗin maɓalli na “Edit with Page Builder Sandwich” a sandar gudanarwanku (adminbar). Kawai ku danna shi domin fara gyara shafinku.

Gyaran abun ciki kai tsaye

Tare da Page Builder Sandwich, mun sanya gyaran abun ciki ya kasance mai sauƙi da rashin wahala sosai. Gyara abun ciki yana da sauƙi kuma a bayyane yake, kawai danna ka rubuta. Yana da sauƙi haka.

Gabatar da, the inspector

Mun lura cewa masu gina shafuka da yawa suna da tagogi masu buɗewa (popups) da yawa. A ra’ayina, ba na son popups saboda suna ɗauke hankali kuma ainihin suna gaya muku ne “kai, dakata da abin da kake yi har sai ka cika waɗannan guraben tukunna”. Suna lalata tafiyar kyakkyawan aikin gyara mai sauƙi. Saboda haka, mun rage amfani da popups a ko’ina, kuma a maimakon haka mun ƙirƙiri the inspector.

The inspector wani ɓangare ne mai kama da gefen shafi (sidebar) wanda ke ɗauke da duk kayan aikin tsara rubutu da shimfidawa da za ku taɓa buƙata. Za a iya maƙala inspector ɗin a gefen hagu ko dama na allonku domin ku iya ganin abin da kuke gyarawa cikin sauƙi.

Daga inspector, za ku iya daidaita abubuwa daban-daban na rubutu kamar manyan lakabi (headings), girman rubutu, kauri (bold), karkatacce (italic), launukan rubutu, da sauran su da yawa. Bayan waɗannan, yana ba ku damar ƙara hotuna da ƙirƙirar layuka ko abun ciki mai ginshiƙai. Haka kuma yana iya yin gyare-gyare masu zurfi kamar mai da layuka su cika faɗin shafi, launukan bango na layi da ginshiƙi, daidaita tsayin abun ciki a tsaye, gami da tazara (margins) da bango (backgrounds). Yana da ƙarfi sosai kuma za ku tsinci kanku kuna amfani da shi mafi yawan lokuta.

Haɗawa da jigogin WordPress

A dabi’ance Page Builder Sandwich kusan ba ya ɗauke da wani salo na musamman da aka haɗa da shi. Yayin da kuke gyara abun cikinku, salon da kuke gani galibi yana fitowa ne daga jigonku (theme).

Haɗawa da Shortcodes

Shortcodes wani muhimmin ɓangare ne a WordPress kuma mai yiwuwa za ku yi amfani da shortcodes da yawa a cikin rukunin yanar gizonku. Page Builder Sandwich yana kula da waɗannan da kyau sosai inda shortcodes ɗinku za su bayyana a nunannensu a ɓangaren gaba. Har ila yau, shortcodes na kasancewa masu iya gyarawa, kuma mafi kyawun abu shi ne, bayan kun gyara shortcodes ɗinku, za su sake bayyana a zahiri tare da sauye-sauyenku.

Don sauƙaƙawa, za ku iya gyara shortcodes ɗinku ta amfani da inspector. Idan kuna son ƙarin iko, za ku iya danna shortcodes sau biyu don gyara su a ainihin siffarsu ta asali. Bayan wannan, duk shortcodes da ke akwai a rukunin yanar gizonku an jera su a cikin inspector don sauƙin sakawa a cikin abun cikinku.

Me kuma game da nauyin rukunin yanar gizo?

Waye ke son rukunin yanar gizo mai jinkiri? Ba mu ba, kuma tabbas ba ku ba. Mun tabbatar da cewa Page Builder Sandwich ba shi da wani tasiri mai cutarwa kan aikin rukunin yanar gizonku. Idan an fita daga asusu, aƙalla, salon CSS na layi da ginshiƙi kawai ake lodawa, tare da rubutun JS da CSS masu mahimmanci don shortcodes ɗin da kuka yi amfani da su da aka loda.

Ga masu haɓakawa

Idan kai mai haɓakawa ne kuma kana da shortcodes a cikin plugins ɗinka na WordPress, Page Builder Sandwich yana samar da Shortcode API domin ka iya samar wa abokan cinikinka gurabe cikin sauƙi don ƙirƙira da gyara shortcodes ɗinka.

Idan kuna son ƙara faɗaɗa ƙwarewarsa ko haɗa shi da wasu ɓangarorin Page Builder Sandwich, muna kuma da tarin action da filter hooks masu amfani da za ku iya amfani da su.