{"id":29176,"date":"2021-06-06T17:26:00","date_gmt":"2021-06-06T14:26:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=29176"},"modified":"2021-10-17T04:24:38","modified_gmt":"2021-10-17T01:24:38","slug":"ladda-dynamiskt-innehall-pa-bootstrap-modal-i-wordpress","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/sv\/ladda-dynamiskt-innehall-pa-bootstrap-modal-i-wordpress\/","title":{"rendered":"Ladda dynamiskt inneh\u00e5ll p\u00e5 Bootstrap Modal i WordPress"},"content":{"rendered":"

Bootstrap Modal anv\u00e4nds f\u00f6r att l\u00e4gga till dialog p\u00e5 din webbplats. Du kan anv\u00e4nda Bootstrap Modal f\u00f6r ljusl\u00e5dor, aviseringar och anpassat inneh\u00e5ll. Nyligen arbetade jag med ett WordPress-projekt d\u00e4r vi ville ladda anpassat inneh\u00e5ll dynamiskt p\u00e5 Bootstrap Modal. I den h\u00e4r artikeln studerar vi hur man laddar dynamiskt inneh\u00e5ll i Bootstrap Modal med Ajax i WordPress.<\/p>\n

Det finns m\u00e5nga scenarier d\u00e4r du kanske vill ha ett Bootstrap-modal med dynamiskt inneh\u00e5ll. L\u00e5t oss ta exemplet p\u00e5 WordPress-inl\u00e4gg.<\/p>\n

WordPress beror mest p\u00e5 inl\u00e4ggstyper f\u00f6r hantering av inneh\u00e5llet. I WordPress brukar vi h\u00e5lla en detaljerad sida f\u00f6r att se inl\u00e4gget. Men i vissa fall kanske du inte har tillr\u00e4ckligt med inneh\u00e5ll f\u00f6r inl\u00e4gget. S\u00e5 ist\u00e4llet f\u00f6r att visa inl\u00e4ggsinneh\u00e5ll p\u00e5 en annan sida, f\u00f6redrar du att visa det i en popup. Du kan ha ett par inl\u00e4gg och varje inl\u00e4ggs inneh\u00e5ll b\u00f6r laddas dynamiskt i popup-f\u00f6nstret.<\/p>\n

H\u00e4r kommer Bootstrap Modal som du kan anv\u00e4nda f\u00f6r att visa inneh\u00e5ll per inl\u00e4gg f\u00f6r slutanv\u00e4ndarna. Det kr\u00e4ver att du f\u00f6ljer n\u00e5gra grundl\u00e4ggande steg som visas i n\u00e4sta del av en sj\u00e4lvstudie.<\/p>\n

Enqueue Bootstrap Style och JS<\/h3>\n

F\u00f6r att komma ig\u00e5ng borde du ha inkluderat CSS- och JS-filen f\u00f6r Bootstrap i ditt WordPress-projekt. Jag ska anv\u00e4nda WordPress-standarden f\u00f6r att inkludera n\u00f6dv\u00e4ndiga JS- och CSS-filer. F\u00f6rutom Bootstrap-filer l\u00e4gger jag ocks\u00e5 till custom.js<\/code>var vi skriver JavaScript-logiken.<\/p>\n

\u00d6ppna din functions.php<\/code>fil och l\u00e4gg till koden nedan i den.<\/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
H\u00e4r inkluderar jag Bootstrap-filer direkt fr\u00e5n CDN. Du kanske vill l\u00e4gga till det lokalt. Justera banan d\u00e4refter om du g\u00f6r det lokalt. Till custom.js<\/code>filen tilldelade jag standard Ajax-webbadressen f\u00f6r WordPress och en nonce.<\/p>\n
Ladda dynamiskt inneh\u00e5ll p\u00e5 Bootstrap Modal i WordPress<\/h3>\n
Som sagt ska jag ladda ett inl\u00e4ggsinneh\u00e5ll dynamiskt i Bootstrap Modal. L\u00e5t oss anta att du har skapat en mall d\u00e4r du listar inl\u00e4gg. Varje inl\u00e4gg har knappen "Visa mer". N\u00e4r du klickar p\u00e5 den h\u00e4r knappen b\u00f6r Bootstrap Modal \u00f6ppnas med inneh\u00e5llet.<\/p>\n
Du b\u00f6r ha din egen HTML f\u00f6r den h\u00e4r listan. Allt du beh\u00f6ver g\u00f6ra \u00e4r att l\u00e4gga till ett dataattribut och en gemensam klass till knapparna. Det kan vara som nedanst\u00e5ende uttalanden.<\/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
Anv\u00e4ndaren m\u00e5ste beh\u00e5lla ett respekterat inl\u00e4ggs-id f\u00f6r data-id<\/code>attributet. Klassnamnet jag anv\u00e4nde h\u00e4r \u00e4r "view-post". D\u00e4refter m\u00e5ste du l\u00e4gga till en markering av Bootstrap Modal antingen i din mallfil eller i sidfoten.<\/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
Om du m\u00e4rker h\u00f6ll jag modaltiteln och modellkroppen tom som vi laddar dynamiskt. Jag tilldelade id: t ’postModal’ till Modal.<\/p>\n
N\u00e4r n\u00e5gon klickar p\u00e5 knappen "Visa mer" m\u00e5ste vi skicka ett Ajax-samtal. I Ajax-svaret skickar vi inl\u00e4ggstitel och inl\u00e4ggsinneh\u00e5ll som sedan l\u00e4ggs till i Modal med jQuery. S\u00e5 skriv nedanst\u00e5ende jQuery-kod i custom.js<\/code>filen.<\/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
Ajax Call i WordPress<\/h4>\n
Fr\u00e5n jQuery-koden skriven ovan skickar den ett Ajax-samtal med \u00e5tg\u00e4rden ’load_post_by_ajax’. Vi m\u00e5ste f\u00f6rklara denna \u00e5tg\u00e4rd och bifoga en \u00e5teruppringningsmetod till den. I \u00e5teruppringningsmetoden kommer v\u00e5r faktiska kod att skrivas.<\/p>\n
Skriv koden nedan i functions.php<\/code>filen.<\/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
Det \u00e4r allt! Testa den h\u00e4r l\u00f6sningen s\u00e5 ser du den ladda dynamiskt inneh\u00e5ll p\u00e5 Bootstrap Modal. Jag skulle vilja h\u00f6ra dina tankar och f\u00f6rslag i kommentarsektionen nedan.<\/p>\n
relaterade artiklar<\/h4>\n