Laadige dünaamiline sisu rakendusse Bootstrap Modal WordPressis
Bootstrap Modali kasutatakse teie veebisaidile dialoogi lisamiseks. Bootstrap Modali saate kasutada valguskastide, märguannete ja kohandatud sisu jaoks. Hiljuti töötasin WordPressi projekti kallal, kus soovisime kohandatud sisu dünaamiliselt laadida Bootstrap Modali. Selles artiklis uurime, kuidas laadida dünaamilist sisu Bootstrap Modalisse, kasutades WordPressi Ajaxi.
On palju stsenaariume, kus võite soovida dünaamilise sisuga Bootstrapi modaali. Võtame näiteks WordPressi postitused.
WordPress sõltub sisu haldamiseks enamasti postituste tüüpidest. Tavaliselt hoiame WordPressis postituse vaatamiseks üksikasjalikku lehte. Kuid mõnel juhul ei pruugi postituse jaoks piisavalt sisu olla. Seega, selle asemel, et kuvada postituse sisu teisel lehel, eelistate seda näidata hüpikaknas. Teil võib olla paar postitust ja nii peaks iga postituse sisu hüpikaknas dünaamiliselt laadima.
Siit tuleb Bootstrapi moodul, mida saate kasutada postituse sisu kuvamiseks lõppkasutajatele. See nõuab, et järgiksite mõningaid põhijuhiseid, nagu on näidatud õpetuse järgmises osas.
Võimaldage Bootstrap Style ja JS
Alustamiseks oleksite pidanud oma WordPressi projekti lisama Bootstrapi CSS- ja JS-faili. Nõutavate JS- ja CSS-failide kaasamiseks kasutan WordPressi standardit. Lisaks Bootstrapi failidele lisan ka sinna, custom.jskuhu me JavaScripti loogika kirjutame.
Avage oma functions.phpfail ja lisage sellesse allolev kood.
function artisansweb_scripts() {
wp_enqueue_style( 'bootstrapcss', 'https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css', array(), false, 'all' );
wp_register_script('bootstrapjs', 'https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js', array('jquery'), false, true);
wp_enqueue_script('bootstrapjs');
wp_register_script('custom-script', get_stylesheet_directory_uri(). '/js/custom.js', array('jquery'), false, true);
// Localize the script with new data
$script_data_array = array(
'ajaxurl' => admin_url( 'admin-ajax.php' ),
'security' => wp_create_nonce( 'view_post' ),
);
wp_localize_script( 'custom-script', 'blog', $script_data_array );
wp_enqueue_script('custom-script');
}
add_action( 'wp_enqueue_scripts', 'artisansweb_scripts' );Siia lisan Bootstrapi failid otse CDN-ist. Võiksite selle lisada kohapeal. Kui teete seda kohapeal, kohandage rada vastavalt sellele. Et custom.jsfaili, ma määratud vaikimisi Ajax URL WordPress ja nonsi.
Laadige dünaamiline sisu rakendusse Bootstrap Modal WordPressis
Nagu öeldud, laadin postituse sisu Dünaamiliselt Bootstrap Modali. Oletame, et olete loonud malli postituste loendamiseks. Igal postitusel on nupp „Kuva rohkem". Selle nupu klõpsamisel peaks Bootstrap Modal koos sisuga avanema.
Selle kirje jaoks peaks teil olema oma HTML. Kõik, mida peate tegema, on lisada nuppudele üks andmete atribuut ja ühine klass. See võib olla nagu allpool toodud väited.
<button data-id="YOUR_POST_ID" class="view-post"><?php _e('View More'); ?></button>
<button data-id="YOUR_POST_ID" class="view-post"><?php _e('View More'); ?></button>Kasutaja peab data-idatribuudi jaoks hoidma austatud postituse ID-d. Klassinimi, mida siin kasutasin, on ‘view-post’. Järgmisena peate lisama Bootstrap Modali märgistuse kas oma mallifaili või jalusesse.
<!-- Modal -->
<div class="modal fade" id="postModal" tabindex="-1" role="dialog" aria-labelledby="postModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="postModalLabel"></h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
</div>
</div>
</div>
</div>Kui märkate, jätsin modaalse pealkirja ja mudeli keha tühjaks, mille laadime dünaamiliselt. Määrasin modaalile id ‘postModal’.
Kui keegi klõpsab nuppu „Vaata veel”, peame saatma Ajaxi kõne. Ajaxi vastuses saadame postituse pealkirja ja sisu, mis seejärel lisatakse jQuery abil Modalis. Nii kirjutage custom.jsfaili allpool olev jQuery kood .
jQuery(function($) {
$('body').on('click', '.view-post', function() {
var data = {
'action': 'load_post_by_ajax',
'id': $(this).data('id'),
'security': blog.security
};
$.post(blog.ajaxurl, data, function(response) {
response = JSON.parse(response);
$('#postModal h5#postModalLabel').text(response.title);
$('#postModal .modal-body').html(response.content);
$('#postModal').modal({show:true});
});
});
});Ajaxi kõne WordPressis
Ülaltoodud jQuery koodist saadab see Ajaxi kõne toiminguga ‘load_post_by_ajax’. Peame selle toimingu deklareerima ja sellele lisama tagasihelistamismeetodi. Tagasihelistamismeetodis kirjutatakse meie tegelik kood.
Kirjutage functions.phpfaili allolev kood .
add_action('wp_ajax_load_post_by_ajax', 'load_post_by_ajax_callback');
add_action('wp_ajax_nopriv_load_post_by_ajax', 'load_post_by_ajax_callback');
function load_post_by_ajax_callback() {
check_ajax_referer('view_post', 'security');
$args = array(
'post_type' => 'post',
'post_status' => 'publish',
'p' => $_POST['id'],
);
$posts = new WP_Query( $args );
$arr_response = array();
if ($posts->have_posts()) {
while($posts->have_posts()) {
$posts->the_post();
$arr_response = array(
'title' => get_the_title(),
'content' => get_the_content(),
);
}
wp_reset_postdata();
}
echo json_encode($arr_response);
wp_die();
}See selleks! Proovige seda lahendust proovida ja näete, et see laadib dünaamilise sisu Bootstrap Modalisse. Tahaksin kuulda teie mõtteid ja ettepanekuid allpool olevas kommentaaride jaotises.