WordPress загваруудыг хаа сайгүй ашигладаг бөгөөд Javascript нь үл хамаарах зүйл биш юм. Энэ нийтлэлд бид WordPress-д суулгасан HTML загваруудыг үүсгэх, дараа нь JS-д ашиглах чадварын талаар ярих болно. Эдгээр загварууд нь WordPress дээрх бусад олон зүйлсийн нэгэн адил үүсгэх, ашиглахад маш хялбар байдаг.
Javascript дээр загвар үүсгэх олон арга байдаг бөгөөд тэдгээрт зориулсан сахал гэж нэрлэгддэг тусдаа тодорхойлолт байдаг. Энэ нь Javascript зэрэг олон хэл дээр хэрэгждэг. Жишээлбэл, Handlebars номын сан нь энэ үзүүлэлтийг ашигладаг бөгөөд бүр үүнийг бага зэрэг өргөжүүлдэг. Эсвэл алдартай Underscore мини номын сан.
3.5 хувилбараас хойш WordPress нь үндсэндээ JS-д зориулсан тохиромжтой загвар хөдөлгүүртэй болсон. Жишээлбэл, медиа дуудагчийг блок үүсгэх үед админ самбарт ашигладаг. Дээр дурдсан Underscore номын санд үндэслэн синтаксийг бага зэрэг шинэчилж, сахалтай техникийн үзүүлэлттэй илүү нийцсэн байна.
WordPress дээр загвар үүсгэхийн тулд wp.template арга байдаг
wp.template(id)HTML кодоос загвар объект үүсгэдэг. JS-д ашиглах бэлэн HTML код авахын тулд та загвараа үүсгэсэн объект руу бөглөх өгөгдлийг дамжуулах хэрэгтэй.
БуцахЧиг үүрэг. Загвар интерполяцид өгөгдөл дамжуулах функц.
var загвар ашиглах = wp.template(id); var HTML = загвар(өгөгдөл); ID(шугам)
Загварын HTML кодыг агуулсан HTML элементийн ID. HTML элемент нь tmpl- угтвартай энд заасан id шинж чанартай байх ёстой.
Жишээлбэл, хэрэв та энд foo гэж зааж өгсөн бол HTML элемент нь id id="tmpl-foo" байх ёстой. Өгөгдөл(объект)
Загварыг бөглөхөд ашиглагдах JS өгөгдлийн объект. Жишээ нь: (текст: "Сайн уу") .- Загвар бөглөх (Интерполяци)
- (((data.unescaped))) - цэвэрлээгүй өгөгдөл.
- ((data.escaped)) - өгөгдлийг устгасан.
Өгөгдлийн угтвар.
загвар дахь өгөгдөл нь эх өгөгдлийн объект юм. Өгөгдлийн түлхүүрийг загварт ашиглах ёстой.
wp_send_json_success() болон wp_send_json_error() функцуудын буцаасан өгөгдлийн бүтэцтэй тааруулахын тулд wp.template нь бүх хүлээн авсан өгөгдлийг өгөгдлийн хувьсагчид орооно. Тиймээс загвар дахь параметр бүрийн өмнө та өгөгдлийг зааж өгөх хэрэгтэй. , эс бөгөөс бид алдаа гарна: (өмч) тодорхойлогдоогүй байна.
Зөв (((өгөгдлийн нэр)))
Буруу (((нэр)))Энэ нь зүгээр л гарах болно.
escapedValue ((data.escapedValue)) хувьсагчийн утгыг харуулъя.
Хэрэв өгөгдөлд тэмдэглэгээ байгаа бол түүнийг орхихгүйгээр хэвлэнэ үү:
(((data.unescapedValue)))Та ямар нэгэн логик хийх хэрэгтэй үед.
Зөвхөн data.trueValue = үнэн тохиолдолд л хэвлэгдэх болно.
Загвар үүсгэх, үүсгэх Загвар үүсгэхЗагвар нь DOM модонд ямар ч байдлаар харагдахгүй байхын тулд үүнийг type="text/html" гэсэн төрлийн скрипт таг дээр үүсгэх нь заншилтай байдаг.
Сайн байна уу (((дата.нэр)))
id атрибут нь tmpl- -ээр эхлэх ёстой бөгөөд энэ угтвараас хойшхи бүх зүйлийг wp.template("my-template") функцэд ашиглах болно.
Скрипт таг дээр загвар үүсгэх нь маш сайн хакердах ажиллагаа юм html үүсгэххөтөч ямар ч байдлаар ашигладаггүй элемент. Хөтөчид ойлгомжгүй төрлийг зааж өгөхөд энэ нь бидэнд хэрэгтэй зүйл болох html тагийг зүгээр л үл тоомсорлодог.
Загварыг өөр ямар ч HTML элемент дээр үүсгэж болно (жишээ нь, -д, дараа нь нууж болно), таны хийх цорын ганц зүйл бол id атрибутыг зааж өгөх явдал юм.
Үүсгэх загварууд бас байдаг тусгай HTMLшошго, гэхдээ IE дээр үүнийг дэмждэггүй. Гэхдээ ерөнхийдөө энэ нь нэлээд хамааралтай юм.
Загвар үүсгэхwp.template() функц буцаадаг тул үр дүнг дамжуулах гэж бүү оролдоорой html элементэсвэл үр дүнг консол дээр хэвлэх. Ихэвчлэн wp.template()-ийн үр дүнг хувьсагч руу дамжуулж, дараа нь тухайн хувьсагчийг функц болгон ашиглаж, загварыг бөглөх ёстой өгөгдлийг дамжуулдаг.
Жишээ (дээр үзүүлсэн загвар)
// JS var template = wp.template("my-template"), data = (нэр: "Виктор"); jQuery(".миний элемент").html(загвар(өгөгдөл));
Үүний үр дүнд бид HTML-д:
Сайн уу Виктор
Загвар ашиглан AJAX тайлбар хийх жишээЗагвар үүсгээд скриптийг тухайн сэдвийн functions.php файлд оруулна уу:
Үйл ажиллагаа
