salam dostlar! haqqında danışmağı təklif edirəm WordPress-də modal pəncərələrin yaradılması. Pop-up (modal) pəncərələr saytın imkanlarını əhəmiyyətli dərəcədə genişləndirir. Hər bir sayt ziyarətçisinin görməli olduğu bir mesajınız və ya reklamınız varmı? Kampaniyanızı görünən etmək lazımdırmı? Veb saytınızda pop-up qeydiyyat forması və ya sosial şəbəkələrdə məzmun paylaşmaq üçün forma yaratmaq istəyirsiniz? Modal pəncərə yaradın!
Pop-up modalları diqqəti cəlb etmək üçün nəzərdə tutulmuşdur. Səhifədə görünərək əsas məzmunu bloklayır və istifadəçini onların məzmunu (mətn, video, hərəkətə çağırış və s.) ilə tanış olmağa məcbur edirlər.
Diqqət! Bu dərsin uzunluğundan qorxmayın - modal pəncərələrin yaradılmasında heç bir çətinlik yoxdur (özünüz oxuyun və baxın), mən sadəcə hər bir addımı ətraflı təsvir edirəm.
WordPress-də modal pəncərələrin yaradılması alqoritmi
WordPress-də pop-uplarla işləmək üçün daxili alətlər yoxdur. Biz onları plagindən istifadə edərək dizayn edəcəyik və fərdiləşdirəcəyik Popup Maker. Məsələn, video ilə modal pəncərə yaradaq, düyməni basarkən açılan pəncərə(daha sonra konfiqurasiya edə bilərsiniz avtomatik görünüşü).
- Quraşdırın Popup Maker plagini. Aktivləşdirin onun. Xatırladım: biz plaginlərin quraşdırılmasını öyrəndik.
- İdarəetmə panelinin sol tərəfindəki yan menyuda bölməni tapın Popup Maker və onun alt bölməsinə keçin Popup əlavə edin.
- Modal pəncərə redaktoru açılır. Səhifənin yuxarısındakı sahəyə pəncərənin adını daxil edin (ad yalnız admin panelində göstəriləcək - istifadəçilər onu görməyəcək).
- ilə gəl pəncərə başlığı(istifadəçilərə görünəcək) və onu düymənin üstündəki sahəyə daxil edin Media faylı əlavə edin.
- Blokda Şərtlər Açılan menyudan pəncərənin görünəcəyi səhifələri (kateqoriyaları) seçin. Plugin işləməlidirsə saytın bütün səhifələrində, seçin Format: Hamısı.
- Alətlər panelinin altındakı böyük sahəyə əlavə edin mətn, şəkillər, video və ya audio– açılan pəncərədə göstəriləcək istənilən məzmun. Baxılan nümunədə mən YouTube-dan bir video üçün kodu əlavə etdim (biz WordPress saytına video əlavə etməyi öyrəndik).
- Blokda Tətiklər Açılan pəncərənin əl ilə və ya avtomatik açılması (özünü aktivləşdirmə) üçün parametrlər var. Bizim nümunəmizdə dəyəri seçdim Aç klikləyin.
- Zəhmət olmasa aşağıda qeyd edin popup ölçüsü(piksel və ya faizlə). Seçim seçərkən Avtomatik Plugin avtomatik olaraq modal pəncərənin ölçüsünü dəyişəcək.
- Xəttdəki qutuyu yoxlayın Fonu deaktiv edin belə ki, sayt səhifəsi açılan pəncərənin arxasında görünsün (tövsiyə edirəm).
- Quraşdırın animasiya növü və sürəti(lazım deyil: optimal dəyərlər artıq standart olaraq təyin edilmişdir).
- Pəncərənin ekrandakı yerini tənzimləyin. Əvvəlcə plagin onu yuxarı mərkəzdə yerləşdirir.
- Əmlak dəyəri z indeksi, standart olaraq təyin edilir, adətən dəyişdirilməyə ehtiyac yoxdur.
- Açılan pəncərəni bağlamaq üçün seçimləri seçin. "Quşlar" ilə sətirlərdə qeyd qutularını yoxlayın Bağlamaq üçün Overlay klikləyin(ətrafındakı fona tıkladığınız zaman pəncərə bağlanacaq), Bağlamaq üçün F4 düyməsini basın(pəncərə açarla bağlanacaq F4), Bağlamaq üçün ESC düyməsini basın(pəncərə açarla bağlanacaq ESC). Sayt ziyarətçilərini modal pəncərəni bağlamaq tapmacası ilə qıcıqlandırmamaq üçün bütün qutuları yoxlamağı məsləhət görürəm.
- basın dərc et. Təbrik edirik, modal pəncərəniz yaradıldı!
Açılan pəncərə dizaynının fərdiləşdirilməsi haqqında
Yaradılmış modal pəncərənin dizaynını dəyişdirmək üçün alt bölməyə keçin Mövzu bölmə Popup Maker idarəetmə panelinin yan menyusu (solda). 
Açılan redaktorda konfiqurasiya edin istədiyiniz pəncərə fonu, rəng Və şrift ölçüləri, doldurma, kölgələr, düymə adı bağlanması. Dadı və rəngi... bilirsiniz, ona görə də açılan pəncərənin dizaynı üzərində ətraflı danışmayacağam. Suallarınız varsa, şərhlərdə soruşun.
Açılan pəncərəni necə qurmaq olar
Unutmayın ki, plagin parametrlərində modal pəncərənin avtomatik açılması funksiyasını işə salmadıq? Buna görə də, pəncərəmizin necə açılacağını düşünməliyik. Linkə, şəkilə və ya düyməyə kliklədiyiniz zaman açılacaq pəncərəni quraşdıraq.
Popup Make plagini hər bir pəncərəni təyin edir iki unikal CSS sinfi. Bu siniflərdən hər hansı birini veb səhifə elementinə əlavə etsəniz, bu elementə kliklədiyiniz zaman modal pəncərə açılacaqdır.
Instagram şərhlərini harada və necə artırmaq olar – bütün üsullar. Pricemm.com portalı nəyin daha ucuz və daha yaxşı olduğunu öyrəndi: Instagram-da şərhləri özünüz, proqramlarla artırmaq, mübadilə almaq və ya SMM xidmətində xidmət sifariş etmək. Hər bir metodun müsbət və mənfi tərəfləri.
Linkə, şəkilə və düyməyə modal pəncərə CSS kodu əlavə etmək nümunələri:
< a href = "#" class = >Modal pəncərəni açın< / a >Şəklin üzərinə kliklədiyiniz zaman modal pəncərə görünəcək
< img src = "popup-primer.jpg" class = "popmake-obrazets-modalnogo-okna"/ >Düymə kliklədikdən sonra modal pəncərə aktivləşir
< button class = "popmake-obrazets-modalnogo-okna"> Modal pəncərəni açın< / button >HTML elementinə CSS sinfi əlavə etdikdən sonra üzərinə klikləyin popmake-obrazets-modalnogo-okna. Buna bənzər modal pəncərə görünməlidir: 
ortaya çıxdı? Əla! İndi siz pop-up pəncərələri konfiqurasiya edə bilərsiniz. Pəncərə açılmırsa, şərhlərdə problemi təsvir edin - birlikdə işə salacağıq!
Veb saytlarda pop-upları tez-tez görmüsünüz? Beləliklə, əksər internet resursları, xüsusən də xəbərlər və bloq saytları ziyarətçilərə bu və ya digər məlumatların yer aldığı pop-up və ya açılan pəncərələri göstərir. Onlar ümumiyyətlə niyə lazımdır? Tipik olaraq, onların mövcudluğu ziyarətçiləri abunəçilərə (yəni adi istifadəçilər) çevirməyə kömək edir. İnternet marketoloqlarının fikrincə, dönüşümlərin ən böyük faizi, əlbəttə ki, düzgün konfiqurasiya olunarsa, pop-up pəncərələrdən gəlir. Əlbəttə ki, bu cür pəncərələr ziyarətçinin gözü qarşısında saatlarca "uçarsa", o zaman belə bir saytı tərk edəcəyi və geri qayıtmaq istəməyəcəyi aydındır.
WordPress-də pop-upları necə qurmaq olar?
"Mühərrik" standart olaraq pop-up pəncərələri yaratmaq və konfiqurasiya etmək imkanı vermir. Buna görə də, biz üçüncü tərəf həllindən - pulsuz Popup Maker plaginindən istifadə edəcəyik.
Popup Maker plagini
Beləliklə, plaqini quraşdırdıqdan və aktivləşdirdikdən sonra dərhal salamlama pəncərəsini görürük. İşə başlamaq üçün düyməni basın Keç.
Nəticədə, pop-up pəncərələri yaratmaq üçün əsas pəncərəyə aparılacaqsınız.
Pop-up pəncərə yaratmaq üçün düyməni basın Popup əlavə edin, bundan sonra siz pop-up pəncərənin yaradılması səhifəsinə aparılacaqsınız.
Burada aşağıdakı məlumatları daxil etməlisiniz. İlk iki giriş sahəsinə pəncərəmizin adını və başlığını daxil edin. Nəzərə alın ki, başlığa ixtiyari mətn daxil edə bilərsiniz, çünki o, heç bir yerdə göstərilməyəcək.
Blok Şərtlər açılan pəncərənin yerini təyin etməyi nəzərdə tutur. Gördüyünüz kimi, ekranı çevik şəkildə fərdiləşdirməyə imkan verən kifayət qədər geniş parametr seçimi var (saytın bütün səhifələrində, yalnız əsas səhifədə, kateqoriyalarda və s.) Bundan əlavə, parametrləri söndürmək mümkündür. mobil və planşet cihazlarında açılan pəncərənin göstərilməsi (parametrlər Mobil cihazlarda bu Popup-ı deaktiv edin Və Planşet cihazlarında bu pop-up pəncərəsini söndürün müvafiq olaraq).
Parametrlər blokunda Mövzunun qurulması Pluginin təklif etdiyi vizual pəncərə mövzularından birini seçə bilərsiniz.
Blok Parametrləri göstərin açılan pəncərənin ölçüsünü təyin etməyə imkan verir.
Parametrlər Fonu deaktiv edin Açılan pəncərənin altında fonu göstərməyə və ya gizlətməyə imkan verir.
Blok Animasiya pəncərənizin sürətini, həmçinin animasiya effektlərini (solma, artırma və s.) təyin etməyə imkan verir.
Blokda Vəzifə Ekranda pop-up pəncərənizin göstəriləcəyi yeri seçə bilərsiniz.
Beləliklə, bütün parametrlər edildikdən sonra düyməni basmalısınız dərc et.
Pop-up pəncərəmiz yaradıldı və indi vebsaytda baxıla bilər.
Bu yaxınlarda bir sayt üçün məndən modal pəncərədə WordPress üçün rəy forması yaratmağı xahiş etdilər. Yəni, “bizə yaz” linkinə kliklədikdə, istifadəçi müvafiq səhifəyə keçmək əvəzinə, mesaj göndərmə funksiyasının yerləşəcəyi yeni açılan pəncərə açmalıdır. Bu, hər kəsin xoşuna gəlməsə də, daha interaktiv bir həlldir. Mən şəxsən əlaqə səhifəsi ilə klassik tətbiqə üstünlük verirəm, lakin saytlardakı formalar fərqlidir - buna görə də bu problemin həllini nəzərdən keçirmək faydalı olacaq. İşimdə 2 plagindən istifadə etdim: WordPress-də modal pəncərə yaratmaq üçün məşhur Əlaqə Formu 7 və Easy Modal modulu.
Yeniləmə 05/18/2017: Depodakı son rəylərə görə, bəzi hallarda onun işləməsində problemlər ola bilər. Əgər siz də bundan təsirlənirsinizsə, tərtibatçıların Popup Maker adlı yeni həllini sınayın. Başqa bir alternativ nəzərdən keçirilə bilər.
Əlaqə Forması 7-nin quraşdırılması və konfiqurasiyası haqqında ətraflı məlumat verməyəcəyəm. Bloqda faydalı ola biləcək bir məqalə də var idi.
Gəlin birbaşa Easy Modal moduluna keçək. Onu tapacaqsan. Tərtibatçılar iddia edirlər ki, bu, məzmunu təqdim etmək üçün müxtəlif maraqlı variantları olan vebsaytda modal pəncərələr yaratmaq üçün ən yaxşı həll yoludur.
10 mindən çox yükləmə, reytinq 4.6. 3.4-ün etibarlı versiyaları 4.0.8-dir, baxmayaraq ki, mən onu WP 4.3.1-də uğurla işləmişəm. Pluginin indi yeni Popup Maker həllinə çevrilməsinə baxmayaraq, wordpress.org saytında və admin panel daxilində plaginləri axtararkən siz hələ də adi Easy Modal 2.0.17 versiyasını tapa bilərsiniz. Onun nümunəsindən istifadə edərək sizə WordPress-də modal rəy pəncərəsi yaratmaq barədə məlumat verəcəyəm.
Quraşdırıldıqdan sonra eyni adlı bölmə görünəcək, burada bir neçə element var. Onlardan birincisinə ehtiyacımız olacaq - Modallar. Orada Yeni Əlavə et düyməsini sıxın.
Bu hərəkət WordPress saytınız üçün yeni modal pəncərə yaradacaq. Element parametrlərində 4 nişan olacaq:
- Ümumi - ümumi parametrlər.
- Ekran Seçimləri - ekran seçimləri.
- Bağlama Seçimləri - pəncərəni bağlamaq üçün parametrlər (klik və ya Esc düyməsini istifadə edərək).
- Nümunələr - istifadə ediləcək kod nümunələri.
Ümumi parametrlər pəncərənin adını (saytda göstərilmir), onun başlığını, məzmununu və yükləmə növünü ehtiva edir. Məzmun blokunda HTML rejiminə keçərək, modal pəncərədə rəy formanızın qısa kodunu əlavə edin.
Yük növünün 2 variantı var:
- Sayt üzrə yükləyin (bütün sayt üçün).
- Səhifə/Post başına (xüsusi yazılar və səhifələr üçün).
Çox maraqlı variant. Saytın bütün səhifələrində görünəcək bir pop-up pəncərəsinə ehtiyacınız varsa (məsələn, keçid yan paneldə yerləşir), onda birinci seçimi seçin. İkinci halda, redaktə edərkən müvafiq parametrlər bloku saytın səhifələrində / yazılarında görünəcək:
Müəyyən bir səhifə üçün öz pop-up pəncərənizi aktivləşdirə və seçə bilərsiniz. Qutunu qeyd etməsəniz, element sayta yüklənməyəcək.
Modul parametrlərinin ikinci nişanı Ekran Seçimləri.
Burada qeyd edirsiniz:
- pəncərə ölçüsü - avtomatik, orta, adaptiv, kiçik, böyük və s.;
- fon - forma üçün fondan istifadə edə və ya onsuz göstərə bilərsiniz;
- pop-up pəncərə animasiyası;
- mövqe (yer) - yuxarı mərkəz, aşağı sağ və s.; sabit və ya yox;
- ekranın yuxarısındakı girinti.
Easy Modal plaginindən istifadə edərək WordPress-də modal pəncərənin çıxışını göstərmək nümunələri sonuncu tabda tapıla bilər.
Bu kodu yan paneldə və ya mətn redaktorunda vidcet vasitəsilə daxil etməlisiniz. Onun heç bir başqa HTML kodundan heç bir fərqi yoxdur, yeganə məsələ odur ki, burada konkret modal pəncərənin sinfi (eModal-1) göstərilib. Yaratdığınız ikinci element üçün sinif eModal-2 və s. Kodu daxil edərkən səhv etməmək üçün ən asan yol onu bu səhifədən köçürməkdir.
Modal pəncərənin mövzusunun redaktəsi
Easy Modal plaginində, müəyyən element üçün parametrlərə əlavə olaraq, pop-up pəncərələri (Theme) üçün mövzular təyin edə bilərsiniz. Modulun əsas pulsuz versiyasında yalnız bir şablon var, lakin bu, kifayət qədər çoxdur.
Bu alətin 6 nişanı var:
- Ümumi - mövzunun adını göstərin;
- Overlay — fon (burada forma fonunun rəngini və şəffaflığını seçə bilərsiniz);
- Konteyner - modal pəncərənin özünün müxtəlif parametrləri (doldurma, çərçivə, kölgə);
- Title—açılan pəncərənin başlıq parametrləri (şrift, kölgə);
- Məzmun — blokdakı mətnlərin şrifti və rəngi;
- Bağlayın - forma bağlama elementi (mətn və dizayn).
Gördüyünüz kimi, görünüş ehtiyaclarınıza uyğunlaşdırıla bilər. Mən modal pəncərədə bu sadə WordPress formasını bitirdim:
Bütün parametrləri qurduqdan sonra onları yadda saxlamağı unutmayın (Saxla düyməsini klikləyin).
Easy Modal popup-da Əlaqə Forması 7-nin əlavə edilməsi videosu
Yeri gəlmişkən, WordPress-də modal rəy pəncərəsinin yaradılması prosesini nümayiş etdirən Easy Modal plagini ilə işləmək haqqında bir video tapdım. Orada modul interfeysi bir qədər köhnəlmişdir (bəzi parametrlər fərqli görünür), lakin ümumi mahiyyəti əldə edə bilərsiniz. Ola bilsin ki, kimsə videonun köməyi ilə bu məsələni başa düşmək daha asan olacaq.
WordPress üçün modal pəncərələr haqqında cəmi
Yuxarıda qeyd edildiyi kimi, indi Easy Modal plagini (rəsmi səhifəyə görə) Popup Maker-a çevrildi. Mən anbarda eyni adlı modul tapmağı bacardım, amma sınaqdan keçirmədim. Bu barədə sizə deyirəm ki, WordPress-də Easy Modal sonrakı versiyalarda qəflətən işləməyi dayandırarsa nə axtaracağınızı biləsiniz.
Hər iki həll pulsuzdur, baxmayaraq ki, əlavələr pulludur. Onlar sizə hədəfləməni fərdiləşdirməyə, daha çox dizayn mövzuları əlavə etməyə, analitika və bəzi digər funksiyaları ehtiva etməyə imkan verir. Daha təkmil modal pəncərə mexanizminə ehtiyacınız varsa, bu uzantılara daha yaxından baxa bilərsiniz.
Açılan pəncərədə Əlaqə Forması 7 rəy formasının açılması tapşırığına gəlincə, Easy Modal-ın əsas imkanları kifayətdir. Üstəlik, bu həll WordPress-də digər modal pəncərələri göstərmək üçün də istifadə edilə bilər - faydalı məsləhətlər, əlavə məlumatlar və s. HTML kodunu daxil etmək üçün redaktorun mövcudluğunu nəzərə alaraq, açılan pəncərədə videoları, formaları və s. Ümumiyyətlə, faydalı plagin. Bununla bağlı hər hansı bir sualınız varsa, şərhlərdə yazın.
Sergey Arsentiev
Ən yaxşı WordPress Popup Plugin
İstənilən bloqda şəkillər var və onların kifayət qədər çoxu var və müxtəlif genişliklərdədir. Eyni zamanda səhifədəki böyük şəkillər miniatür kimi görünür və onların üzərinə kliklədikdə bütün şəkil yüklənir. WordPress üçün şəkillərin gözəl effektlə açılan pəncərədə açılmasına imkan verən xüsusi plaginlər var.
Yalnız bir problem: bu plaginlər olduqca zərifdir və hər kəs saytınızda "açılmaq" istəməz. Mənim üçün işləyən birini tapmamışdan əvvəl bir çox plaginləri sınadım.
WP Lightbox, Lightbox2, Fancybox, Jquery Lightbox və digər plaginlər şəxsən mənim üçün işləmirdi.
Lakin bu plagin dərhal və heç bir əlavə parametr və ya JavaScript ziddiyyətləri axtarmadan işlədi. Bunun da sizin üçün mükəmməl işləməsi olduqca mümkündür, ona görə də dərhal onu quraşdırmağa çalışmağı məsləhət görürəm, xüsusən də bir çox üstünlüklərə malikdir.
Diqqət! Daha sərin bir plagin tapdım!
Pop-up şəkillər və qalereyalar üçün daha sərin və daha ağıllı bir plagin tapdım - Cavab verən Lightbox dFactory-dən. Odur ki, qalanını oxumağa ehtiyac yoxdur, mən onu tarix kimi buraxacağam
Plugin tamamilə Ruslaşdırılıb, sadə və zəruri parametrlərdir, daha da stabil və daha yaxşı işləyir.
Sadəcə onu adi bir WordPress plagini kimi quraşdırın və hər şey işləməlidir, mən onu bir neçə mövzuda, o cümlədən unikal dizayn və tərtibata malik qeyri-standart mövzularda sınaqdan keçirdim. Digər plaginlərin kənarda dayandığı yerlərdə bu işlədi.
Siz https://ru.wordpress.org/plugins/responsive-lightbox/ deposundan yükləyə bilərsiniz.
5 dəqiqə və hər şey işləyir, uğurlar!
Tarix naminə əvvəlki mətni buraxıram:
İnternetdəki bəzi proqramçıların rəylərinə görə, bu pop-up plagin ən müasir JS skriptlərindən istifadə etdiyi üçün işləmək üçün ən sürətlilərdən biridir. Prinsipcə, hər şey olduqca tez açılır, amma mən saniyəölçən istifadə etmədim və müxtəlif plaginlərin sürətini müqayisə etmədim. Ancaq hər halda, "ən sürətli plaginə" sahib olduğunuzu bilmək xoşdur
Colorbox-un aşkar üstünlüklərindən biri onun çoxlu parametrləridir: mən hətta onları ayrıca alt başlıqda yerləşdirmişəm. Mən hər şeyi təsvir etməyəcəyəm, yalnız hansı parametrləri təyin etdiyimi söyləyəcəyəm, xüsusən də hər bir parametrin təsviri var.
Lightbox Plus Colorbox quraşdırılması və konfiqurasiyası
header.php faylında bağlanma teqindən əvvəl
Footer.php faylında bağlanma teqindən əvvəl
