Salom. Ushbu darsda biz to'la-to'kis aloqa shaklini qilamiz va u modal oynada sahifadagi tugmachani bosish orqali paydo bo'ladi. Men ushbu darsni noldan boshlab, faqat jQuery ramkasi va bitta "ohm JavaScript" dan foydalangan holda qildim. Dars juda qiziq, shuning uchun iltimos o'tib ketmang! Quyida men olgan shaklning namoyishini tomosha qilishingiz va ish uchun kerakli fayllarni yuklab olishingiz mumkin:

1-qadam  Teskari aloqa shaklining umumiy tavsifi va ishlashi:

Birinchidan, sizga qanday fayllar kerakligini va aslida nima uchun kerakligini aytaman:

• rasmlar  - bizning shaklimizning barcha rasmlari saqlanadigan papka;
• indeks.html  - asosiy, "indeks" fayli, u holda aloqa formasini chaqirish uchun tugma joylashgan bo'ladi;
• aloqa.html  - shaklning o'zi joylashgan fayl. Ushbu fayl modal oynaga ulanadi;
• yuborish.php  - xatlarni yuborishda qatnashadigan fayllarni qayta ishlovchi;
• jquery.js  - asosiy jQuery doirasi;
• uslubi.css  - bizning shakl uchun kaskadli uslublar jadvallari bilan fayl.

Shunday qilib, keling va tartibda bo'laylik ... Shakl quyidagicha ishlaydi: foydalanuvchi modal oynani chaqirish uchun tugma joylashgan sahifaga kirib, uni bosadi, so'ngra shakl paydo bo'ladi, unda tashrif buyuruvchi barcha ma'lumotlarni va xabar matnini kiritadi va yuboradi, keyin u xat muvaffaqiyatli yoki muvaffaqiyatsiz yuborilganligi haqida xabar bilan sahifaga tashlanadi. Hammasi shu, va endi biz o'z shakllarimizni tuzishni boshlaymiz ...

2-qadam  Formani chaqirish tugmasi.

Formali bizning modal oynamiz paydo bo'lishi uchun uni biron bir tarzda majburlashingiz kerak. Buni amalga oshirish uchun sahifaga oddiy tugmachani qo'yish kifoya. Ushbu tugmachaning kodi va unga qo'llanilgan uslublar quyida ko'rsatilgan:

Administratorga xabar yozing

3-qadam  Formaning o'zi + uni sozlash

Endi fikr-mulohazalar shakli qayerda joylashganligini aniqlaylik. Va u faylda bo'ladi aloqa.html, allaqachon darsning dastlabki kodida joylashgan. Ushbu shakl juda kichik, shuning uchun uning kodini pastga joylashtiraman:

Ma'muriyat xabarini yuborish:

O'zingiz kuzatganingizdek, kodni hatto yalang'och ko'z bilan ham ko'rib, shuni ko'rish mumkinki, shaklni yaxshiroq namoyish qilish uchun men jadval jadvalidan foydalandim. Bu men uchun formaning barcha maydonlarini taqqoslash uchun juda foydali bo'ldi.

4-qadam  Elektron pochta xabarlarini yuborish uchun javobgar ishlov beruvchi

Bu erda men sizga xatlarni yuboradigan asosiy ishlov beruvchi haqida tezda aytib beraman. Men uning kodini bu erda bermayman, chunki u manbada. Yuklab oling va tarkibini ko'ring. Agar siz biron bir joyda php-ni o'rtacha darajada bilsangiz, menga o'xshash narsa bo'lsa, unda siz ushbu ishlov beruvchining barcha kodini osongina tahlil qilishingiz mumkin. Agar hamma narsa tayyor bo'lsa, davom eting ...

5-qadam  Asosiy jQuery ramkasini "burish"

Endi har qanday jQuery darsliklarida bo'lgani kabi, biz ham asosiy jQuery ramkasini burishimiz kerak. Buni amalga oshirish uchun keling, bizning tugmachamiz joylashgan joyga va teglar orasiga biroz orqaga qaytsak   va  quyidagi kodni kiriting:

6-qadam  Shaklni shakllantirish

Ko'rinib turibdiki, bizning shaklimizning uslublari alohida-alohida, faylga o'tkaziladi uslubi.csschunki bu uslub juda ko'p joy egallaydi. Quyidagi kodni bizning indeks faylimizga bog'lashimiz kifoya:

7-qadam  jQuery yaxshilanishi

Endi modal form oynasi to'g'ri ishlashi uchun quyidagi jQuery kodini kiritishimiz kerak:

Xulosa

Shunday qilib, bizning qiziqarli aloqa shaklimiz tayyor. Yo'l uzoq va qiyin edi, shuning uchun kimdir biror narsani tushunmasa, men sizning darslaringizni sharhlarida tinglayman. Va bu men uchun yana bir marta uchrashgunimizcha, do'stlar!

Hurmat bilan, sizning jQuery Explorer - M.K.

Salomlar, aziz o'quvchi, ushbu maqolada men sizning WordPress saytingizdagi qalqib chiquvchi oynada qanday qilib aloqa shaklini yaratishni ko'rsataman. Ko'pincha o'z veb-saytingizni yoki blogingizni ishlab chiqishda Internet-resursga tashrif buyuruvchilar bilan tezkor aloqa qilish imkoniyatini yaratishingiz kerak. Bunday holda, wordpress uchun pop-up aloqa shakli yordam beradi, bu foydalanuvchilar bilan tezkor aloqa o'rnatishga yordam beradi.

Nega menga wordpress uchun pop-up geribildirim shakli kerak

Foydalanish sabablari

Ushbu forma nima uchun kerakligini ko'rib chiqing

1. Saytda bo'sh joyni tejash. Kontakt shakli istalgan joyga joylashtirilishi mumkin: pastki yoki pastki qismlarda, sahifaning asosiy tarkibida, suzuvchi tugma shaklida va boshqalar.
2. Samarali ko'rinish. Yangi oynaning animatsiyasi qiziqarli va g'ayrioddiy ko'rinadi
3. Mavjudligi Ushbu shaklda yozuvlarni saytning istalgan joyidan qoldirishingiz mumkin, foydalanuvchilar asosiy sahifaga qaytishlari shart emas.

Qo'shimcha bonus: shaklni saytingiz ehtiyojlariga qarab o'zgartirish va sozlash oson. Wordpress uchun pop-up formasi qo'ng'iroq, xizmat yoki mahsulotga buyurtma berish, obuna bo'lish uchun ochiladigan oyna ko'rinishida taqdim etilishi mumkin. Agar so'ralsa, siz vizual effektlarni, turli xil rasmlarni va boshqalarni qo'shishingiz mumkin.

Qalqib chiquvchi plaginlar

Wordpress-da pop-uplarni yaratish uchun zarur bo'lgan vositalarni ko'rib chiqing - veb-saytlarni yaratish va yaratish uchun maxsus dastur.

7-shakl formasi

Ushbu plagin to'g'ridan-to'g'ri forma qurish uchun ishlatiladi. Uni o'rnatish uchun quyidagi amallarni bajaring:

Oson farasingiz

Ushbu plagin qalqib chiquvchi oyna effektini ishlab chiqish uchun javob beradi. Easy FancyBox-ni o'rnatish tartibi avvalgi plaginni o'rnatishga o'xshaydi.

Plagin sozlamalari

Siz media-fayllar orqali Easy FancyBox plaginlarini sozlashingiz mumkin. "Sozlamalar" -\u003e "Media" menyusidan foydalaning.

Ochilgan blokda, standart sozlamalarning pastki qismida, plaginning parametrlari joylashgan bo'ladi. Bu erda odatda "Tasvirlar" bandiga qarama-qarshi belgi qo'yiladi, bu rasmni bosganingizda qalqib chiquvchi oynaning faollashishini anglatadi. Uni olib tashlash tavsiya etiladi, chunki agar pop-up animatsiyalarini yaratish uchun boshqa qo'shimcha vositalar mavjud bo'lsa, rasmlar ikki marta ochiladi.

Ammo bu hammasi emas. "Ichki tarkib" yonidagi katakchani belgilang

Har kim qo'shimcha ravishda plagin sozlamalarini ko'rib chiqishi va ularni o'z xohishiga ko'ra o'rnatishi mumkin.

Maslahat: Agar shakl doimo ochiq bo'lishini xohlasangiz, sichqonchani tashqariga bosganingizda oynani yopish funktsiyasini bajaradigan Easy FancyBox sozlamalarida "FancyBox-ni bosish paytida yopish" ni belgilang.

Bosqichma-bosqich ko'rsatmalar

Xo'sh, "zerikarli" oldindan tayyorgarlik tugadi, endi eng "mazali" qismga o'tamiz - aslida wordpress pop-pop-ning qanday shakllantirilganligi.

Formani derazalarga ishlov berish

Nimadan boshlaymiz? Albatta, shaklni oldindan belgilash bilan. O'ng menyuda "Contact Form 7" -ni tanlang, so'ng "Add new" variantini tanlang.

Forma uchun yangi nom yarating, masalan, "Tajriba", uni "Sarlavha" matni joylashgan oynaning kirish maydoniga kiriting va "Saqlash" tugmachasini bosing. Boshqa parametrlarni, shu jumladan forma shablonini o'zgartirishingiz mumkin, ammo biz unga tegmaymiz. Endi bizning asosiy maqsadimiz shunchaki pop-up shakllarini yaratishni o'rganishdir.

Natijani ko'rib chiqing. Ko'rib turganingizdek, plagin formaning keyingi chiqishi uchun ishlatiladigan maxsus kodni yaratdi. Uni nusxalashingiz kerak.

Formaning paydo bo'lishi

Endi dasturlashni bajaramiz. Yangi dastur kodini saytning istalgan joyiga, masalan, Kontaktlarga va boshqalarga kiritish mumkin. Bizning misolimizda, yangi shakl vidjetda ko'rsatiladi. Menyuda "Tashqi ko'rinish" -ni tanlang, so'ng "Vidjetlar" -ni bosing, so'ng ochilgan oynada "Matn" variantini bosing.

Endi "Vidjet qo'shish" tugmachasini bosing

Kontentni kiritish maydoniga quyidagi kodni qo'ying:

Natija quyidagicha bo'ladi:

Shuni yodda tutingki, misolda ko'rsatilgan qisqa kod o'rniga, siz yangi shaklni yaratish natijasida hosil bo'lgan kodni ko'rsatishingiz kerak.

Bundan tashqari, shaklni tahrirlash mumkin: kiritish maydonlarini qo'shish yoki olib tashlash, shakldan oldin va keyin boshlang'ich va / yoki tugatish matnini kiritish, matnni sarlavhaga aylantirish yoki alohida blokda ko'rsatish, turli xil uslublardan, to'ldiruvchilardan foydalanish va hk. Vaqt va xohish bo'ladi!

Bog'lanish uslubi

Vizual ekranni yaxshilash uchun havolani tugmachaga aylantirishning ikkita usulini ko'rib chiqamiz.

1 usul - qo'shimcha mavzulardan foydalanish.

Dastur kodini quyidagi tarzda kiritish mumkin:

Dastur kodini o'zi shunday ko'rinadi:

/ *** Tugmachada havolani ko'rsatish **** / .contact-us a (margin: auto; / * blokni o'rtada tekislang * / displey: blok; kengligi: 199px; / * tugma o'lchami * / to'ldirish: 11px 22px ; / * ichki yozuv * / chegara: 1px qattiq qora; / * ramkaning rangi * / fon: # 3399ff; / * fon naqsh * / matnni bezatish: yo'q; / * matnni belgi qo'yilmagan * / text-align: center; / * label centering * / color: #ffffff; / * label hue * / -moz-o'tish: barchasi 0,6 sekund; -webkit-o'tish: barchasi 0.6 sessiya; o'tish: barchasi 0.6 sessiya;) / ** rangni o'zgartiring havolalarni ochganda havolalar ** / .contact-us a: hover (-moz-box-shadow: 0 0 7px # 111; -webkit-box-shadow: 0 0 7px # 111; box-shadow: 0 0 7px # 111 ; -moz-o'tish: barchasi 0.6s qulaylik; -webkit-o'tish: barchasi 0.6s qulaylik; o'tish: hamma 0.6s qulaylik;)

Ushbu tugma paydo bo'ldi:

Kod allaqachon uning parametrlari uchun javob beradigan narsani aytadi. Endi har kim kodni o'z xohishiga ko'ra o'zgartirishi, turli xil uslublar va ranglar bilan tajriba o'tkazishi va qalqib chiquvchi oynada eng mos keladigan havolani yaratishi mumkin.

2-usul - rasmni tugma shaklida ishlatish. Avval saytga kerakli rasmni yuklang (istalgan sizning xohishingizga, tugma shaklida bo'lishi shart emas - bu unchalik muhim emas). Buning uchun "Media" -\u003e "Yangisini qo'shish" ni bosing va kerakli rasmni tanlang. Faylning doimiy havolasi rasmning o'ng tomonida paydo bo'ladi (ushbu misolda http://www.sait.ru/wp-content/uploads/2017/04/depositphotos_2169498-E-mail-internet-icon.jpg), nusxa oling va qo'shing. kod (tirnoqlarni olib tashlamang):

Olingan kodni "Xat yozish" matni o'rniga forma chiqishining asosiy kodini kiriting.

1

Mening saytimda quyidagi skrinshotda tugma paydo bo'ldi:

Agar siz birinchi usulda tasvirlangan qo'shimcha uslubni qoldirsangiz, tugma qanday ko'rinishda bo'ladi:

Menyuga qo'shish

WordPress uchun "qayta-qayta aloqa shakli" to'g'ridan-to'g'ri menyudan qo'ng'iroq qilish uchun siz quyidagi koddan foydalanishingiz kerak

Avval siz ushbu kodni qaerga kiritishni aniqlab olishingiz kerak. "Tashqi ko'rinish" orqali "Muharrir" ga o'ting va shablonlar orasidan "Header (header.php)" -ni tanlang.

Endi menyu kodi joylashgan joyni toping. Quyidagi ma'lumotlarni toping:

O'zingizning kodingizni quyida yopiladigan yorliqdan oldin kiriting.



Umuman olganda, veb-saytingizga aloqa formasini qo'shish qiyin emas, asosiysi ozgina bo'sh vaqt va barcha jihatlarni sinchkovlik bilan o'rganish istagi. Endi siz aloqa formasi nima ekanligini, nima uchun kerakligini, uni saytda qanday ishlatish kerakligini va pop-up effektli oynani ochish uchun havolani qanday ishlashni bilasiz. Sayt yaratishning ushbu qiyin, ammo qiziqarli biznesida omad va muvaffaqiyat.

Ko'pincha, uni yashirishda aloqa shaklini yaratish talab qilinadi. Ushbu forma siz tugmachani yoki saytdagi yozuvni pop-up yoritgichini bosganingizda paydo bo'lishi kerak. Ushbu maqolada biz quyidagini yozamiz: WordPress uchun ochiladigan oynada qanday qilib geribildirim shaklini qanday qilish kerak. Feedburner obuna shaklining natijasi. Qanday qilib bir sahifada bir nechta shaklda qo'ng'iroq qilish kerak. Qayta aloqa shakli (fancybox) bilan oynani qanday yuborganimizdan keyin yopish kerak va biz barcha mumkin bo'lgan xatolar va ularning echimlarini tahlil qilamiz.

CMS WP-da sayt uchun aloqa shaklini yoki boshqa shakllarni yaratish uchun Dvizhok dizayn studiyasi "Contact Form 7" plaginini tavsiya qiladi va "Lightbox" effekti bilan ochilgan oynada "Easy FancyBox" dan foydalanamiz.

Eng mashhur, yuqori sifatli va sozlash va ishlatish oson, bu "Contact Form 7" plaginidir - uning yordami bilan siz har qanday aloqa shakllarini va boshqalarni yaratishingiz mumkin. Plagin juda ko'p turli xil shakllar va maydonlarga ega bo'lganligi sababli, uni ko'plab vazifalar uchun ishlatish mumkin.

Bunday holda, bir nechta shakllarni chaqirish uchun kodning ushbu qismlariga e'tibor bering:

6. Feedburner-ning obuna shaklini ko'rsating

Obuna bo'ling

Obuna bo'lish:

Siz obuna shaklingiz uchun ushbu koddan faqatgina o'z veb-saytingiz manzili https://feedburner.google.com/fb/a/mailverify?uri\u003dCms-info-ni o'zgartirish orqali foydalanishingiz mumkin.

Agar siz fancybox-ga ega plagin foydalanayotgan bo'lsangiz, masalan, Easy Fancybox:
   on_sent_ok: $ .fancybox.close ();
  shaklingizning Kengaytirilgan sozlamalar bo'limiga o'ting.


Agar xato yuz bersa: Talab qilingan tarkibni yuklab bo'lmaydi. Keyinroq qayta urinib ko‘ring

Bunday xato WordPress dvigatelining so'nggi versiyalarida bo'lishi mumkin, havoladagi sinfni o'zgartirish tavsiya etiladi:
   qayta aloqa
  ga o'zgartirish:
   qayta aloqa

Biz farasingiz qutisini fancybox-in-ga o'zgartirdik.

Yuzaga kelgan muammolar va echimlar:

1. Forma bilan havolani bosganda, hech narsa sodir bo'lmadi - manzil satrida http: // site / # contact_form_pop paydo bo'ldi.
  Muammo plaginni almashtirish orqali hal qilindi Oson farasingiz  WordPress uchun FancyBox-da

2. Agar sizda galereya ulangan bo'lsa (masalan, NextGEN galereyasi) yoki allaqachon yorug'lik qutisi effektiga ega bo'lgan mavzu o'rnatilgan bo'lsa, quyidagi natijalar paydo bo'ladi: fotosuratlar o'rnatilgan yorug'lik qutisi va LightFancy Box yorug'lik qutisi bilan ochiladi, ya'ni ularni ikki marta yopishingiz kerak.
  Bunga yo'l qo'ymaslik uchun EasyFancy Box sozlamalarida tasdiq belgisini o'chirib qo'ying. Rasmlar  va qalqib chiquvchi forma kodining yuqori qismida fancybox sinfini fancybox-inline bilan almashtiring. Sizning kodingiz quyidagicha bo'ladi:.

qayta aloqa

Bularning barchasi, agar siz bizning "minnatdorchiligimizni" bildirmoqchi bo'lsangiz - sizda imkoniyat bor: o'ng tomonda portalni rivojlantirish uchun xayr-ehson qilish imkoniyatlari mavjud. Quyidagi xizmatlar orqali social.styles-da maqolani baham ko'ring.

Salom, do'stlar. Bugungi dars sizning wordpress saytingizga yoqimli va funktsional aloqa shaklini olishga yordam beradi. Biz buni "Contact Form 7" plaginidan foydalanib bajaramiz Bir vaqtlar men oddiy kontakt formasini qidirish uchun ko'p vaqt sarfladim va ushbu plaginga munosib alternativ topa olmadim.

Plagin xususiyatlari

Yana bir bor eslatib o'tamanki, biz plagin bilan ishlaymiz, shuning uchun siz plaginsiz fikr-mulohazangiz bo'lsa, bu haqda maqolaga tashrif buyurishingiz kerak, sozlash biroz murakkabroq, ammo boshqa tomondan, variant yanada universal (har bir sayt uchun mos) va serverni kamroq yuklaydi.

Contact Form 7-dagi aloqa shaklining asosiy afzalligi uning konfiguratsiyasining soddaligi, deyarli cheksiz funksionalligi va har qanday WordPress shablonlariga dizaynni avtomatik sozlashidir. Uning yordami bilan siz nafaqat saytdan xabarlarni yuborish shaklini yaratishingiz mumkin. Plagin buyurtma tugmachasini, qo'ng'iroqni qaytarish yoki tasdiqlash qutisi va ochiladigan ro'yxati bilan murakkab anketani yaratish uchun ishlatilishi mumkin. Shuningdek, uzatish uchun fayllarni biriktirish mumkin.

Bir so'z bilan aytganda, plagin megafunktsionaldir.

Agar siz hali ham "aloqa formasini tuzish kerakmi yoki qilmasligingiz kerakmi?" Degan savol sizni tashvishga solayotgan bo'lsa (buni shunchaki aloqa ma'lumotlarini kerakli sahifalarga joylashtirish orqali amalga oshirishingiz mumkin), unda men aniq aytaman - buni amalga oshirish kerak.

Birinchidan, to'g'ridan-to'g'ri saytdan xabar yuborish pochta dasturini ochishdan va hamma narsani qo'lda to'ldirishdan ko'ra qulayroqdir. Vaqtni tejash hech kimga zarar qilmaydi.

Ikkinchidan, aloqa formasini sozlash mumkin va bu sizga standart namunadagi harflarni olish imkonini beradi - ular ichida harakatlanish osonroq bo'ladi. Masalan, siz "Buyurtma" xabariga standart sarlavha qo'yishingiz mumkin va buyurtma sahifasidagi barcha harflar shunday sarlavha bilan birga keladi.

Uchinchidan, aloqa formasidan foydalanish elektron pochta manzilingizni yashirishga imkon beradi va shu bilan elektron pochta qutisi bepul kirishga kirishganda muqarrar ravishda paydo bo'lishi mumkin bo'lgan spamlardan xalos bo'lishga imkon beradi.

To'rtinchidan, bu shunchaki zamonaviy va zamonaviy.

Contact form 7 plaginini o'rnating va sozlang

Plagin umumiy wordpress ma'lumotlar bazasida joylashgan, shuning uchun biron bir joyda uning fayllarini qidirishning hojati yo'q, ularni o'zingiz yuklab oling va keyin ularni hostingga yuklang. Hammasi soddalashtirilgan - wordpress boshqaruv paneli orqali plaginlar bo'limiga o'ting, qidiruv maydoniga "Aloqa formasi 7" yozing va o'rnating. Agar siz hech qachon plaginlarni o'rnatmagan bo'lsangiz, unda plaginni qanday o'rnatish haqida batafsil ko'rsatmalar mavjud.



Contact form 7 plaginini sozlang

Plagin konfiguratsiyasi ikki bosqichdan iborat.

Birinchisi, ma'lum bir shaklni o'rnatish. Turli xil shakllar bo'lishi mumkin, ularning har biri o'z maydonlarini o'z ichiga olishi mumkin. Bir so'z bilan aytganda, har bir vazifa va saytning har bir sahifasi uchun alohida aloqa shaklini yaratishingiz mumkin, wordpress bunga imkon beradi - ularning ro'yxati plagin ma'lumotlar bazasida saqlanadi.

Ikkinchi bosqich - bu sayt sahifalariga shaklni kiritish. Plagin ichidagi biz yaratgan har bir shakl o'ziga xos qisqa kodga ega bo'ladi. Sahifaga kiritish uchun faqat uni kiritish kifoya.

Shunday qilib, ketaylik.

Birinchidan, boshqaruv panelining chap menyusida biz Kontakt formasi 7 yorlig'ini topamiz, uning ostida ikkita elementdan iborat menyu paydo bo'ladi - "Formalar" va "Yangisini qo'shish".



Bizda tayyor shakllar mavjud emas, shuning uchun "Yangisini qo'shish" bo'limiga o'ting. U erda siz tilni tanlashni taklif qiladigan sahifa ochiladi va u erda standart til ham ko'rsatiladi. Ko'k rangda "Yangisini qo'shish" tugmasini bosing.



Formani sozlash alohida bloklarga bo'linadi. Men ularni tartibda ko'rib chiqaman.

"Shakl nomi" bloki

Birinchi blok sizning shaklingiz nomi uchun javobgardir - kursorni "Untitled" yozuviga qo'ying va kerakli ismni kiriting. Ushbu nom faqat sizga plagin bilan bog'lanish shakllari ro'yxatida ko'rsatiladi, shuning uchun kelgusida uning barcha xilma-xilligi bilan aralashib ketmaslik uchun uni tushunarli qilib qo'ying.



"Andoza" ni bloklash

Dastlab, ushbu blokda standart maydon konfiguratsiyasi ko'rsatilgan. Unda xatni yuboruvchining ismi, elektron pochta manzili, xat mavzusi, xatning mazmuni va yuborish tugmasi mavjud.



Yulduzcha satrlari kerakli maydonlarni bildiradi. Agar ushbu maydon bo'sh qoldirilgan bo'lsa, xabar yuborilmaydi.

Maydonlar o'rnini odatiy html belgilash yordamida sozlash mumkin.

Maydonlarning sozlamalariga kelsak, keraksizlarini olib tashlashingiz va kerakli narsalarni qo'shishingiz mumkin. Agar siz xatning mavzusini qo'lda kiritishni xohlamasangiz, tegishli blokni o'chiring.

Maydonlarni qo'shish ham juda oddiy. O'ng tomonda teg yaratish tugmasi mavjud, ustiga bosib, ushbu plagin qo'llab-quvvatlaydigan barcha mumkin bo'lgan maydonlar ro'yxatini ko'rasiz.



Kerakli narsani tanlang va sozlamalarini sozlang. Plagin rus tilida, shuning uchun barcha sozlamalar intuitivdir.

Birinchi belgilash katakchasi majburiy yoki ixtiyoriyligini bildiradi (yulduzcha qo'shadi).

Maydonni o'rnatganingizdan so'ng, siz ikkita qisqa kodlarga ega bo'lasiz:

• "Ushbu koddan nusxa oling va uni chap tomondagi shakl shabloniga qo'ying" - bu kod hamma uchun bo'lgani kabi shakl kodiga solinadi;
• "Va quyidagi harflar shabloniga quyidagi kodni kiriting" - bu xatni keyingi blokda to'ldirish uchun bizga kerak bo'ladi.



Shunday qilib, har qanday shaklda maydonlar, bayroqchalar, ochiladigan ro'yxatlar, fayllarni biriktirish uchun elementlar va boshqalarni qo'shishingiz mumkin.

"Xat" ni bloklash

Endi bizning vazifamiz qabul qilinadigan xatni sozlashdir. Maktub geribildirim shaklining ishiga ta'sir qilmaydi, u faqat siz kiritgan ma'lumotni uzatish uchun xizmat qiladi.

Bizning vazifamiz xatdagi barcha ma'lumotlarni kiritishdir.



Birinchi xatboshida biz xabar yuboriladigan elektron pochta manzilini ko'rsatamiz (har qanday bo'lishi mumkin).

Ikkinchi xatboshida xat sizga yuboriladigan elektron pochta qutisi ko'rsatilgan. Men bu erda hech narsani o'zgartirmasdim, odatda sizning blogingizning pochta qutisi ko'rsatilgan va unga xabar yuborgan shaxsning nomi yozilgan yorliq qo'shilgan.

Keyin biz xatning mavzusini ko'rsatamiz. Odatiy bo'lib, mavzu forma to'ldirilgan maydondan olinadi. Ammo siz ushbu elementni formadan olib tashlashingiz va har bir harfda avtomatik ravishda o'rnatiladigan sohaga ma'lum bir mavzuni kiritishingiz mumkin. Buni xizmatlar va reklama haqidagi sahifalardagi aloqa shakllari uchun qildim. U erdan kelgan xabarlar doimo bir xil mavzularda keladi, "Xizmatlarga buyurtma berish" yoki "Buyurtmaga buyurtma berish" - oddiy va aniq.

Qo'shimcha sarlavhalar satrida "Javob berish:" yorlig'i mavjud, shunda siz blogingizdan kelgan xatga javob yozganingizda, blogga xabarni va xabarni yuborgan manzilni forma maydonida yuborishingiz mumkin. Ushbu maydonni o'zgartirish bunga loyiq emas.

"Xat shablonlari" maydoni siz olgan xabarning ichki mazmuni uchun javobgardir. Odatiy bo'lib, unda jo'natuvchi, mavzu va xabar maydoniga kiritilgan xabarlar haqidagi ma'lumotlar mavjud.

Oxirida xat yuborilgan sayt ko'rsatiladi.

Agar siz sukut bo'yicha belgilanmagan shaklga biron bir qo'shimcha maydonlar kiritgan bo'lsangiz, unda harflar shabloniga tegishli yorliqni qo'shishni unutmang. Sizga "Forma shablonlari" blokida berilgan, unda siz tegishli yorliqni yaratgansiz ("Va quyidagi kodni shablon shabloniga pastga qo'ying" maydoniga qo'ying).

Ushbu blokning har qanday matn ma'lumotlari (teglardan tashqari) sizning xohishingizga o'zgartirilishi mumkin. Siz har qanday tavsiflarni qo'shishingiz va teglarni almashtirishingiz mumkin, ularni sizga mos keladigan tartibda joylashtiring.

"Harf 2" blokirovkasi

Agar kimdir sizga yuborilgan xabarni olishini istasangiz, ushbu katakchani belgilashingiz mumkin.

Ushbu blok avvalgisiga o'xshash tarzda tuzilgan. Odatiy bo'lib, undagi barcha maydonlar to'ldirilgan, shunda xat formani to'ldirgan odamga yuboriladi (ehtimol uni unutmasligi uchun).

Siz nusxasini, masalan, menejeringiz yoki buxgalteringizga yuborishni sozlashingiz mumkin.

"Shaklni yuborishda bildirishnomalar" blokirovkasi

Ushbu blokda foydalanuvchi xabar yuborish tugmachasini bosgandan so'ng ko'radigan xabarlarni sozlashingiz mumkin. Biror narsani o'zgartirishni xohlaysizmi - iltimos, men hamma narsani avvalgidek qoldirdim.

Formani faollashtirish

Barcha maydonlarni to'ldirgandan so'ng, "Forma nomi" blokining boshiga qayting va o'ng tomonda joylashgan "saqlash" tugmachasini bosing.

Plagin siz yaratgan shaklni mavjud bo'lganlar ro'yxatiga kiritadi va unga taxminan quyidagi turdagi maxsus kodni tayinlaydi:

[contact - form - 7 id \u003d "5464" title \u003d "(! LANG: Tekshirish" ] !}

Ushbu kodni saytingizning istalgan joyiga kiritib, siz potentsial mijozlaringiz bilan muloqot qilish uchun tayyor shaklni olasiz.

Fighting Spam - Akismet va Captcha

Spamerlar sayt egalariga juda ko'p muammo tug'diradi va biron narsa yozishga imkon beradigan har bir yangi shakl faqat spam-botlarning soniga ko'payadi.

Agar siz kontakt formasi plaginini asosiy versiyada qoldirsangiz, bir muncha vaqt o'tgach, sizga ko'plab bo'sh va ma'nosiz xabarlar tushadi.

Spamerlardan qutulishning ikki yo'li mavjud:

1. Kerakli captcha-ni qo'ying (bu qo'shimcha plagin yordamida amalga oshirilishi mumkin - Really Simple CAPTCHA).
2. Spamga qarshi wordpress plaginidan foydalaning - Akismet.

Birinchi variant noqulay, chunki u tashrif buyuruvchilarni qo'shimcha belgilar kiritishga majbur qiladi. Bu unchalik qiyin emas, lekin ba'zilarga bu yoqmaydi.

Akismet plaginidan foydalanish qulayroq, chunki u kirish ma'lumotlarini (ismlar, elektron pochta manzillari, havolalar) mustaqil ravishda tahlil qiladi va to'plangan ma'lumotlar bazasi asosida spam yoki spam bo'lmagan xabarlar to'g'risida xulosalar chiqaradi.

Bundan tashqari, akismet maqolalarni sharhlashda spamdan himoya qilish uchun aksariyat wordpress saytlarida ishlaydi. Shunday qilib, uni ishlatganda, siz qo'shimcha plaginlarni o'rnatishingiz va saytga qo'shimcha yuk yaratishingiz shart emas.

Akismet bilan spamdan himoya qilish

1. Akismet plaginini veb-saytingizga o'rnating va uni faollashtiring.

2. Kontakt shakli teglariga qo'shimcha ma'lumotlar qo'shing:

• sohada muallif nomi bilan akismet: muallif
• xat yuboruvchining elektron pochtasi bilan maydonda akismet: muallif_ elektron pochta
• sayt manzili uchun maydonda akismet: muallif_url

Bu quyidagicha ko'rinishi kerak:



Saqlagandan so'ng, aloqa formasi spammerlar tomonidan yuborilgan barcha xabarlarni blokirovka qilishi kerak. Siz filtrni "viagra-test-123" maxsus test nomidan tekshirishingiz mumkin. - unga kirishda xato xabari paydo bo'lishi kerak.

Tekshirishni qat'iyroq qilish uchun siz maydonlarning faqat bir qismini, masalan, ism va elektron pochtani tekshirishingiz va sayt manzilini tekshirishsiz qoldirishingiz mumkin. Bunday holda, spam xabarlarni yuborish ehtimoli oshadi, ammo siz kerakli xabarlarni yo'qotish ehtimoli kamroq.

Really Simple CAPTCHA yordamida spamdan himoyalanish

Agar siz Akismet sizga mos kelmasligini aniqlasangiz (juda ko'p spamlarni o'tkazib yuboradi yoki kerakli xabarlarni bloklaydi), unda siz captcha-ni yoqishingiz mumkin. Buning uchun Really Simple CAPTCHA plaginini o'rnating.

O'zgartirish uchun kerakli aloqa shaklini oching

Teglar ro'yxatida Captcha-ni tanlang. Yorliq sozlamalarida siz rasmning o'lchamini belgilar bilan tanlashingiz mumkin, aks holda hech narsa o'zgartirilmasligi kerak. O'rnatish oynasining pastki qismida 2 teglar paydo bo'ladi, biri tasvirni ko'rsatish uchun javob beradi, ikkinchisi ushbu rasmdan ma'lumotlarni kiritish uchun maydonni ko'rsatadi.



Captcha ishlay boshlashi uchun ushbu teglarning ikkalasini ham nusxa ko'chirishingiz va shakl shablonining chap oynasiga joylashtirishingiz kerak va keyin o'zgarishlarni saqlashingiz kerak.

Qayta aloqa shaklini qalqib chiquvchi oynada joylashtirish

Har doim ham aloqa formasi saytning biron bir qismida joylashtirilmasligi kerak, ba'zida mijoz unga resursning har bir sahifasidan kirish huquqiga ega bo'lishi kerak.

Bunday hollarda, to'liq shaklni yuborish har doim ham qulay emas. E'tiborni jalb qiladigan tugmachani taniqli joyga joylashtirish osonroq. Ushbu tugmani bosish allaqachon shaklning ochilishiga olib kelishi kerak.

Shunday qilib, bir kishi kerakli sahifadan chiqmasdan saytdan xabarlarni yuborishi mumkin.

Bu boshqa plagin yordamida amalga oshiriladi - Easy FancyBox.

1. Plaginni o'rnatish



Avvalo, biz plaginni o'zi o'rnatamiz, u umumiy plagin ma'lumotlar bazasida, shuning uchun plaginlarni qidirishda o'z nomini blogingizning boshqaruv paneliga kiritish kifoya. Plaginni o'rnatgandan so'ng, "sozlash" qismida "media fayllari" yorlig'i paydo bo'ladi.



Ushbu yorliqda siz ochilgan oynada ko'rsatilishi kerak bo'lgan tarkib turlarining ro'yxatini topishingiz kerak. Odatdagidek faqat rasmlar, Inline tarkibini qo'shishingiz kerak.

Bu plagin konfiguratsiyasini yakunlaydi, fikr-mulohaza tugmachasini sozlash-ga o'ting.

2. Kodni saytga qo'ying

Aslida, siz oddiy matnli havoladan foydalanishingiz mumkin, ammo rasm tugmachasi yanada yaxshi ko'rinadi.

Aloqa formasi uchun tugmachani ko'rsatmoqchi bo'lgan saytingizga (sarlavha, podval yoki yon panelda) quyidagi kodni kiriting:



< a href = "#contact_form_pop" class = "fancybox-inline" > < img title = aloqa shaklialt \u003d aloqa shaklisrc \u003d "http: // rasmga havola"> < / a > < div style = "display:none" class = "fancybox-hidden" > < div id = "contact_form_pop" > [aloqa - forma - 7 id \u003d "shaklingizning identifikatori" sarlavha \u003d "shaklingiz nomi"] < / div > < / div >

Kodda siz geribildirim tugmasi sifatida foydalanadigan rasmning manzilini ko'rsatishingiz va formaning qisqa kodini o'zgartirishingiz kerak - id va sarlavhangizni ro'yxatdan o'tkazing.

3. Biz yon panelidagi qisqa kodlarga cheklovni olib tashlaymiz

Agar siz tugmachani yon panelga o'rnatmoqchi bo'lsangiz, ushbu element kerak bo'ladi. Har doim ham WordPress-ning yon paneli sizga qisqa kodlarni bajarishga imkon bermaydi.

Ushbu funktsiyani yoqish uchun function.php faylini tahrirlash uchun ochishingiz kerak (to'g'ridan-to'g'ri wordpress admin maydonidan) va qavsning yopilishidan oldin quyidagi kodni kiriting: "?"

add_filter ("widget_text", "do_shortcode");

add_filter ("widget_text", "do_shortcode");

Bu yon panelidagi barcha qisqa kodlarni bajarishga imkon beradi.

Menda shunday yoqimli pop-up shakli bor:



Bir sahifada bir nechta turli xil qalqib chiquvchi shakllar.

Ba'zan saytga turli xil sozlamalar va maydonlar bilan bir nechta shakllarni joylashtirish kerak bo'ladi.

Masalan, bitta tugma ism va telefonga ega bo'lgan shaklga olib keladi va saytdan qo'ng'iroqni buyurtma qilish uchun xizmat qiladi, ikkinchisi boshqa shaklni ochishi kerak, u erda buyurtma uchun batafsil so'rov mavjud (manzil, tavsif maydoni, faylni biriktirish imkoniyati va boshqalar). ) Kontakt Form 7 plaginining o'zida cheksiz ko'p shakl variantlarini qilishingiz mumkin, ammo ularni bitta sahifaning turli tugmalariga qanday kiritish mumkin?

Buni amalga oshirish uchun avvalgi xatboshidan tugma kodini moslashtirish kerak. Birinchi tugma yuqoridagi variantni ishlatadi. Ikkinchisida ikkita qiymat o'zgaradi:

1. O'zgarishlarni o'zgartiring, href-ni # contact_form_pop_2 ga o'rnating
2. ID identifikatorini # contact_form_pop_2 qiymatiga o'zgartiring

(So'nggi yangilanish: 07/08/2016)

Hammaga salom! Bu yana menga, foydali xabar bilan - wordPress qalqib chiquvchi oynasi  - Yangi boshlanuvchilar uchun va nafaqat WordPress foydalanuvchilari uchun. Agar qiziqsangiz wordPress qalqib chiqadigan plagin, u shuningdek modal oyna plagini deb nomlanadi, shunda siz, do'stlar, kerakli joyga etib oldingiz.

Men quyida taqdim etadigan plaginni quyidagi maqsadlarda ishlatishingiz mumkin. Modal oynasida 7-shakl formasi; modal (ochilgan) oynada har qanday aloqa shakli (geribildirim); modal oynada video; Rasmlar qalqib chiquvchi oynada foydali ma'lumotlarni havolalar bilan joylashtirish; modal oynasida yangi maqolalar uchun pochta obuna shakli  va hokazo va hokazo har bir narsa, va siz ro'yxatga kiritmaysiz. Plagin juda sodda, murakkab sozlashsiz va deyarli saytga qo'shimcha yuk yaratmaydi.

Easy Modal plagin - WordPress uchun popup / modal oyna


  WordPress Modal plagin - Easy Modal

Siz ushbu plaginni standart usulda, ma'mur paneli orqali o'rnatishingiz mumkin - Plaginlar - Yangisini qo'shing va Plaginlarni qidirish maydoniga Easy Modal nomini kiriting, Enter ni bosing. Ro'yxatda u birinchi bo'lishi kerak. Odatdagidek uni o'rnating va yoqing. Va keyin siz yangi modal oynani yaratishga o'tishingiz mumkin.

Buning uchun paydo bo'lgan yangi Easy Modal qismini bosing va Modallarni tanlang:

  Easy Modal - yangi modal oynani yaratish

Shundan so'ng, sahifaning yuqori qismida "Yangi qo'shish" tugmachasini bosing:


  Yangi oyna qo'shish

Va bu erda hamma narsa oddiy:


  Video bilan qalqib chiquvchi oynani yarating

Umumiy sozlamalarda (Umumiy yorlig'i) yangi oynaning nomini bering (u ko'rinmaydi, bu siz uchun, masalan, agar siz bir necha modal oynalarni yaratsangiz); yuk turi Sitewide (butun sayt uchun); oynaning sarlavhasini tanlang va nihoyat muharrirga kerakli kodni qo'ying (Matn rejimi). Men misolga YouTube video kodini kiritdim.


  Modal oynani o'rnatish

Parametrlarda siz deraza hajmini tanlashingiz mumkin; fondan foydalaning yoki yo'q; modal / pop-up uchun animatsiya turi; oynaning joylashishini aniqlashingiz mumkin, shuningdek siz oynani tuzatishingiz mumkin (katakchani belgilang va ekranning yuqori qismidan pastga yozuvni belgilang).

Misollar ko'rinishida, WordPress-da qalqib chiquvchi oynani namoyish qilish uchun kod namunalarini topasiz:

  WordPress modal chiqish kodi

Bu erda siz oddiy matn havolasini, tugmachasini yoki belgisini tanlashingiz mumkin. E'tibor bering, yangi yaratilgan har bir oynaga eModal - klass beriladi. Birinchi oynada eModal sinfi - 1, ikkinchi eModal - 2 va hokazo bo'ladi. Faqatgina belgidan keyin raqamni almashtirish kerak. Siz ushbu kodni maqolangizning biron bir joyiga yoki har qanday joyiga qo'yishingiz mumkin. Tabiiyki, kodda har qanday matnni yozishingiz mumkin. Ha, men deyarli unutdim, sahifaning o'ng tomonida modal oynani yaratgandan so'ng, "Nashr" tugmachasini bosishni unutmang.

Men tugma sifatida yon panelga modal oynaning kodini kiritdim:

  Blogning yon panelidagi tugma

Tashrif buyurgan kishi bosadi va video bilan oyna ochiladi:


  Modali oyna

Umid qilamanki, do'stlar va o'rtoqlar, siz Easy Modal plaginlari bilan ishlashning umumiy printsipini tushunasiz. Mavzuni ochish uchun Mavzuni bosish orqali tashqi ko'rinishini o'zgartirish uchun darhol yoki darhol o'zgartirishingiz mumkin. Afsuski, plaginning bepul versiyasida bezatish uchun faqat bitta mavzu mavjud, ammo uni xohlaganingizcha tartibga solishingiz mumkin, etarli sozlamalar mavjud. Modal oynaning ko'rinishini sozlaganingizda, darhol o'ng tomonda dizaynni oldindan ko'rishni ko'rishingiz mumkin:


  Mavzuni tahrirlash - modal / pop-up oyna dizayni

Oynaning paydo bo'lishi uchun barcha sozlashlardan so'ng, Saqlash o'ng tomonidagi tugmachani bosing. Va nihoyat, xonimlar va janoblar, men Modal oynasida Kontakt Form 7 aloqa formasining chiqish namunasini ko'rsataman.

Yuqorida ko'rsatilgandek yangi modal oynani yarating va shunchaki Kontakt Formasi 7 qisqa kodini matn muharririga qo'ying (agar sizda bu plagin o'rnatilgan bo'lsa, yo'q bo'lsa).


  Kontakt formasi 7 qalqib chiquvchi oynasini yarating
  Xabar tugaganidan keyin tugma muallifga yozadi

Agar o'quvchi siz bilan bog'lanishni xohlasa, u tugmani bosadi va aloqa oynasi modal oynada ochiladi:

  Modal oynasida muallif bilan bog'lanish uchun forma

Mana, qandaydir tarzda. Shuningdek, siz yaratgan barcha pop-uplar sahifada ko'rsatiladi (Modals elementi), bunda, har bir modal oyna uchun sinflar ko'rsatilgan:


  WordPress-da modal oynalar yaratildi