Integreerige modaalne dialoogiboks WordPressi sisseehitatud ThickBoxi abil

Viimati uuendatud okt. 17, 2021

Modaalsed dialoogid peavad mõnikord tingimata integreeruma WordPressi veebisaidiga. Modaalse dialoogi abil saame sisu kuvada praeguse lehe ülaosas.

Kui tegemist on modaalse hüpikaknaga, eelistavad inimesed tavaliselt kasutada valguskasti või Fancyboxi teeki. Need on populaarsed raamatukogud ja töötavad üsna hästi.

Nende raamatukogude kaasamiseks WordPressi peame alla laadima JS- ja CSS-failid ning kaasama selle projekti tavapärasel viisil. Pärast seda, vastavalt raamatukogu dokumentatsioonile, peame sisu pakkima, modaalse akna avamiseks helistama meetodile.

WordPressi tuum sisaldab muudetud versiooniga pistikprogrammi ThickBox jQuery. Ja seda saab kasutada väliste raamatukogude asemel. Selle põhifunktsiooni abil saame liidese, mis on sama mis WordPressi administraatori modaalsed hüpikaknad nagu meediuminupul.

Võite seda sisseehitatud funktsiooni proovida. Kui see täidab teie vajadusi, säästab see välise teegi integreerimise aega.

Kasutades ThickBoxi sisemise sisuga, saate väljundi umbes nagu allpool oleval ekraanipildil näidatud.

Modaalne dialoogiboks ThickBoxi abil

WordPress ThickBox töötab hästi sisemise sisuga. Lühikoodi saab kasutada ka modaalses dialoogis. Näiteks saate modaalses aknas näidata kontaktivormi, kasutades kontaktivormi 7 lühikoodi.

Seda öeldes vaatame, kuidas kasutada WordPressis ThickBoxi.

Näiteks kuvame ankrumärgi klikil näiva sisemise sisu. Niisiis, sisestage allolev kood kõikjale, kuhu soovite ThickBoxi kasutada.

<?php add_ThickBox(); ?>
<div id="dummy-content-id" style="display:none;">
    <p>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </p>
</div>
 
<a href="#TB_inline?width=600&height=350&inlineId=dummy-content-id" title="Inline Content" class="ThickBox">View dummy content!</a>

Thichboxi kasutamiseks peame lisama esimese add_ThickBox()meetodi. See funktsioon laadib teegi põhiosast. Järgmisena peame ankrumärgendil href atribuudil edastama # TB_inline koos konteineri laiuse, kõrguse ja ID-ga, millesse meie sisemine sisu on mähitud.

Samamoodi, kui peate modaalses dialoogiboksis kuvama kontaktivormi, peate näiva sisu asemel do_shortcode()WordPressi funktsiooni abil sisestama lühikoodi .

<?php echo do_shortcode('[shortcode_here]'); ?>

See selleks! Loodame, et mõistate, kuidas lisada modaalset dialoogiboksi WordPressi ThickBoxi abil. Tahaksime teie mõtteid kuulda allpool olevas kommentaaris.

Samuti võiksite lugeda meie artikleid Suunamine tänulehele pärast kontaktivormi 7 esitamist ja kontaktivormi 7 esildiste salvestamine WordPressi andmebaasi

: artisansweb.net