{"id":25885,"date":"2021-06-06T17:39:00","date_gmt":"2021-06-06T14:39:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=25885"},"modified":"2021-10-17T18:27:02","modified_gmt":"2021-10-17T15:27:02","slug":"laadige-dunaamiline-sisu-rakendusse-bootstrap-modal-wordpressis","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/et\/laadige-dunaamiline-sisu-rakendusse-bootstrap-modal-wordpressis\/","title":{"rendered":"Laadige d\u00fcnaamiline sisu rakendusse Bootstrap Modal WordPressis"},"content":{"rendered":"

Bootstrap Modali kasutatakse teie veebisaidile dialoogi lisamiseks. Bootstrap Modali saate kasutada valguskastide, m\u00e4rguannete ja kohandatud sisu jaoks. Hiljuti t\u00f6\u00f6tasin WordPressi projekti kallal, kus soovisime kohandatud sisu d\u00fcnaamiliselt laadida Bootstrap Modali. Selles artiklis uurime, kuidas laadida d\u00fcnaamilist sisu Bootstrap Modalisse, kasutades WordPressi Ajaxi.<\/p>\n

On palju stsenaariume, kus v\u00f5ite soovida d\u00fcnaamilise sisuga Bootstrapi modaali. V\u00f5tame n\u00e4iteks WordPressi postitused.<\/p>\n

WordPress s\u00f5ltub sisu haldamiseks enamasti postituste t\u00fc\u00fcpidest. Tavaliselt hoiame WordPressis postituse vaatamiseks \u00fcksikasjalikku lehte. Kuid m\u00f5nel juhul ei pruugi postituse jaoks piisavalt sisu olla. Seega, selle asemel, et kuvada postituse sisu teisel lehel, eelistate seda n\u00e4idata h\u00fcpikaknas. Teil v\u00f5ib olla paar postitust ja nii peaks iga postituse sisu h\u00fcpikaknas d\u00fcnaamiliselt laadima.<\/p>\n

Siit tuleb Bootstrapi moodul, mida saate kasutada postituse sisu kuvamiseks l\u00f5ppkasutajatele. See n\u00f5uab, et j\u00e4rgiksite m\u00f5ningaid p\u00f5hijuhiseid, nagu on n\u00e4idatud \u00f5petuse j\u00e4rgmises osas.<\/p>\n

V\u00f5imaldage Bootstrap Style ja JS<\/h3>\n

Alustamiseks oleksite pidanud oma WordPressi projekti lisama Bootstrapi CSS- ja JS-faili. N\u00f5utavate JS- ja CSS-failide kaasamiseks kasutan WordPressi standardit. Lisaks Bootstrapi failidele lisan ka sinna, custom.js<\/code>kuhu me JavaScripti loogika kirjutame.<\/p>\n

Avage oma functions.php<\/code>fail ja lisage sellesse allolev kood.<\/p>\n

function artisansweb_scripts() {\n\u00a0\u00a0\u00a0\u00a0wp_enqueue_style( 'bootstrapcss', 'https:\/\/stackpath.bootstrapcdn.com\/bootstrap\/4.5.2\/css\/bootstrap.min.css', array(), false, 'all' );\n\u00a0\u00a0\u00a0\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0wp_register_script('bootstrapjs', 'https:\/\/stackpath.bootstrapcdn.com\/bootstrap\/4.5.2\/js\/bootstrap.min.js', array('jquery'), false, true);\n\u00a0\u00a0\u00a0\u00a0wp_enqueue_script('bootstrapjs');\n\u00a0\n\u00a0\u00a0\u00a0\u00a0wp_register_script('custom-script', get_stylesheet_directory_uri(). '\/js\/custom.js', array('jquery'), false, true);\n\u00a0\u00a0\u00a0\u00a0\/\/ Localize the script with new data\n\u00a0\u00a0\u00a0\u00a0$script_data_array = array(\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'ajaxurl' => admin_url( 'admin-ajax.php' ),\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'security' => wp_create_nonce( 'view_post' ),\n\u00a0\u00a0\u00a0\u00a0);\n\u00a0\u00a0\u00a0\u00a0wp_localize_script( 'custom-script', 'blog', $script_data_array );\n\u00a0\u00a0\u00a0\u00a0wp_enqueue_script('custom-script');\n}\nadd_action( 'wp_enqueue_scripts', 'artisansweb_scripts' );<\/code><\/pre>\n
Siia lisan Bootstrapi failid otse CDN-ist. V\u00f5iksite selle lisada kohapeal. Kui teete seda kohapeal, kohandage rada vastavalt sellele. Et custom.js<\/code>faili, ma m\u00e4\u00e4ratud vaikimisi Ajax URL WordPress ja nonsi.<\/p>\n
Laadige d\u00fcnaamiline sisu rakendusse Bootstrap Modal WordPressis<\/h3>\n
Nagu \u00f6eldud, laadin postituse sisu D\u00fcnaamiliselt Bootstrap Modali. Oletame, et olete loonud malli postituste loendamiseks. Igal postitusel on nupp \u201eKuva rohkem". Selle nupu kl\u00f5psamisel peaks Bootstrap Modal koos sisuga avanema.<\/p>\n
Selle kirje jaoks peaks teil olema oma HTML. K\u00f5ik, mida peate tegema, on lisada nuppudele \u00fcks andmete atribuut ja \u00fchine klass. See v\u00f5ib olla nagu allpool toodud v\u00e4ited.<\/p>\n
<button data-id=\"YOUR_POST_ID\" class=\"view-post\"><?php _e('View More'); ?><\/button>\n<button data-id=\"YOUR_POST_ID\" class=\"view-post\"><?php _e('View More'); ?><\/button><\/code><\/pre>\n
Kasutaja peab data-id<\/code>atribuudi jaoks hoidma austatud postituse ID-d. Klassinimi, mida siin kasutasin, on ‘view-post’. J\u00e4rgmisena peate lisama Bootstrap Modali m\u00e4rgistuse kas oma mallifaili v\u00f5i jalusesse.<\/p>\n
<!-- Modal -->\n<div class=\"modal fade\" id=\"postModal\" tabindex=\"-1\" role=\"dialog\" aria-labelledby=\"postModalLabel\" aria-hidden=\"true\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div class=\"modal-dialog\" role=\"document\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div class=\"modal-content\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div class=\"modal-header\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<h5 class=\"modal-title\" id=\"postModalLabel\"><\/h5>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-label=\"Close\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<span aria-hidden=\"true\">\u00d7<\/span>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/button>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div class=\"modal-body\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\n<\/div><\/code><\/pre>\n
Kui m\u00e4rkate, j\u00e4tsin modaalse pealkirja ja mudeli keha t\u00fchjaks, mille laadime d\u00fcnaamiliselt. M\u00e4\u00e4rasin modaalile id ‘postModal’.<\/p>\n
Kui keegi kl\u00f5psab nuppu \u201eVaata veel”, peame saatma Ajaxi k\u00f5ne. Ajaxi vastuses saadame postituse pealkirja ja sisu, mis seej\u00e4rel lisatakse jQuery abil Modalis. Nii kirjutage custom.js<\/code>faili allpool olev jQuery kood .<\/p>\n
jQuery(function($) {\n\u00a0\u00a0\u00a0\u00a0$('body').on('click', '.view-post', function() {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0var data = {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'action': 'load_post_by_ajax',\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'id': $(this).data('id'),\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'security': blog.security\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0};\n\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$.post(blog.ajaxurl, data, function(response) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0response = JSON.parse(response);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$('#postModal h5#postModalLabel').text(response.title);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$('#postModal .modal-body').html(response.content);\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$('#postModal').modal({show:true});\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0});\n\u00a0\u00a0\u00a0\u00a0});\n});<\/code><\/pre>\n
Ajaxi k\u00f5ne WordPressis<\/h4>\n
\u00dclaltoodud jQuery koodist saadab see Ajaxi k\u00f5ne toiminguga ‘load_post_by_ajax’. Peame selle toimingu deklareerima ja sellele lisama tagasihelistamismeetodi. Tagasihelistamismeetodis kirjutatakse meie tegelik kood.<\/p>\n
Kirjutage functions.php<\/code>faili allolev kood .<\/p>\n
add_action('wp_ajax_load_post_by_ajax', 'load_post_by_ajax_callback');\nadd_action('wp_ajax_nopriv_load_post_by_ajax', 'load_post_by_ajax_callback');\n\u00a0\nfunction load_post_by_ajax_callback() {\n\u00a0\u00a0\u00a0\u00a0check_ajax_referer('view_post', 'security');\n\u00a0\u00a0\u00a0\u00a0$args = array(\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'post_type' => 'post',\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'post_status' => 'publish',\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'p' => $_POST['id'],\n\u00a0\u00a0\u00a0\u00a0);\n\u00a0\n\u00a0\u00a0\u00a0\u00a0$posts = new WP_Query( $args );\n\u00a0\n\u00a0\u00a0\u00a0\u00a0$arr_response = array();\n\u00a0\u00a0\u00a0\u00a0if ($posts->have_posts()) {\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0while($posts->have_posts()) {\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$posts->the_post();\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$arr_response = array(\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'title' => get_the_title(),\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'content' => get_the_content(),\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0wp_reset_postdata();\n\u00a0\u00a0\u00a0\u00a0}\n\u00a0\n\u00a0\u00a0\u00a0\u00a0echo json_encode($arr_response);\n\u00a0\n\u00a0\u00a0\u00a0\u00a0wp_die();\n}<\/code><\/pre>\n
See selleks! Proovige seda lahendust proovida ja n\u00e4ete, et see laadib d\u00fcnaamilise sisu Bootstrap Modalisse. Tahaksin kuulda teie m\u00f5tteid ja ettepanekuid allpool olevas kommentaaride jaotises.<\/p>\n
seotud artiklid<\/h4>\n