{"id":29056,"date":"2021-06-06T17:37:00","date_gmt":"2021-06-06T14:37:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=29056"},"modified":"2021-10-18T03:36:45","modified_gmt":"2021-10-18T00:36:45","slug":"zaladuj-dynamiczna-zawartosc-na-bootstrap-modal-w-wordpress","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/pl\/zaladuj-dynamiczna-zawartosc-na-bootstrap-modal-w-wordpress\/","title":{"rendered":"Za\u0142aduj dynamiczn\u0105 zawarto\u015b\u0107 na Bootstrap Modal w WordPress"},"content":{"rendered":"

Bootstrap Modal s\u0142u\u017cy do dodawania okna dialogowego do Twojej witryny. Mo\u017cesz u\u017cy\u0107 Bootstrap Modal do lightbox\u00f3w, powiadomie\u0144 i niestandardowych tre\u015bci. Ostatnio pracowa\u0142em nad projektem WordPress, w kt\u00f3rym chcieli\u015bmy dynamicznie \u0142adowa\u0107 niestandardowe tre\u015bci na Bootstrap Modal. W tym artykule dowiemy si\u0119, jak za\u0142adowa\u0107 dynamiczn\u0105 zawarto\u015b\u0107 w Bootstrap Modal za pomoc\u0105 Ajax w WordPress.<\/p>\n

Istnieje wiele scenariuszy, w kt\u00f3rych mo\u017cesz potrzebowa\u0107 modu Bootstrap z zawarto\u015bci\u0105 dynamiczn\u0105. We\u017amy przyk\u0142ad post\u00f3w WordPress.<\/p>\n

WordPress w wi\u0119kszo\u015bci zale\u017cy od typ\u00f3w post\u00f3w do zarz\u0105dzania tre\u015bci\u0105. W WordPress zwykle prowadzimy szczeg\u00f3\u0142ow\u0105 stron\u0119, aby wy\u015bwietli\u0107 post. Ale w niekt\u00f3rych przypadkach mo\u017cesz nie mie\u0107 wystarczaj\u0105cej ilo\u015bci tre\u015bci dla posta. Dlatego zamiast pokazywa\u0107 tre\u015b\u0107 posta na innej stronie, wolisz pokaza\u0107 j\u0105 w wyskakuj\u0105cym okienku. Mo\u017cesz mie\u0107 kilka post\u00f3w, wi\u0119c tre\u015b\u0107 ka\u017cdego posta powinna \u0142adowa\u0107 si\u0119 dynamicznie w wyskakuj\u0105cym okienku.<\/p>\n

Oto Bootstrap Modal, kt\u00f3rego mo\u017cesz u\u017cy\u0107 do wy\u015bwietlania tre\u015bci na post u\u017cytkownikom ko\u0144cowym. Wymaga wykonania kilku podstawowych krok\u00f3w, jak pokazano w nast\u0119pnej cz\u0119\u015bci samouczka.<\/p>\n

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

Na pocz\u0105tek powiniene\u015b do\u0142\u0105czy\u0107 plik CSS i JS Bootstrap do swojego projektu WordPress. U\u017cyj\u0119 standardu WordPress do do\u0142\u0105czania wymaganych plik\u00f3w JS i CSS. Opr\u00f3cz plik\u00f3w Bootstrap dodaj\u0119 te\u017c, custom.js<\/code>gdzie napiszemy logik\u0119 JavaScript.<\/p>\n

Otw\u00f3rz sw\u00f3j functions.php<\/code>plik i dodaj do niego poni\u017cszy kod.<\/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
Tutaj do\u0142\u0105czam pliki Bootstrap bezpo\u015brednio z CDN. Mo\u017cesz doda\u0107 go lokalnie. Dostosuj odpowiednio \u015bcie\u017ck\u0119, je\u015bli robisz to lokalnie. Do custom.js<\/code>pliku przypisa\u0142em domy\u015blny adres URL Ajax WordPressa i jednorazowy.<\/p>\n
Za\u0142aduj dynamiczn\u0105 zawarto\u015b\u0107 na Bootstrap Modal w WordPress<\/h3>\n
Jak powiedzia\u0142em, zamierzam dynamicznie \u0142adowa\u0107 tre\u015b\u0107 posta w Bootstrap Modal. Za\u0142\u00f3\u017cmy, \u017ce utworzy\u0142e\u015b szablon, w kt\u00f3rym wystawiasz posty. Ka\u017cdy post ma przycisk \u201eWy\u015bwietl wi\u0119cej". Po klikni\u0119ciu tego przycisku powinien otworzy\u0107 si\u0119 Bootstrap Modal z zawarto\u015bci\u0105.<\/p>\n
Powiniene\u015b mie\u0107 w\u0142asny kod HTML dla tego wpisu. Wszystko, co musisz zrobi\u0107, to doda\u0107 jeden atrybut danych i wsp\u00f3ln\u0105 klas\u0119 do przycisk\u00f3w. To mo\u017ce by\u0107 jak poni\u017csze stwierdzenia.<\/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
U\u017cytkownik musi zachowa\u0107 szanowany identyfikator posta dla data-id<\/code>atrybutu. Nazwa klasy, kt\u00f3rej tutaj u\u017cy\u0142em, to \u201eview-post”. Nast\u0119pnie musisz doda\u0107 znacznik Bootstrap Modal w pliku szablonu lub w stopce.<\/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
Je\u015bli zauwa\u017cysz, pozostawi\u0142em tytu\u0142 modalny i tre\u015b\u0107 modelu puste, kt\u00f3re b\u0119dziemy \u0142adowa\u0107 dynamicznie. Do Modalu przypisa\u0142em id 'postModal’.<\/p>\n
Gdy kto\u015b kliknie przycisk \u201eWy\u015bwietl wi\u0119cej”, musimy wys\u0142a\u0107 wywo\u0142anie Ajax. W odpowiedzi Ajax wysy\u0142amy tytu\u0142 posta oraz tre\u015b\u0107 posta, kt\u00f3ra nast\u0119pnie do\u0142\u0105czana jest w Modalu za pomoc\u0105 jQuery. Zapisz wi\u0119c poni\u017cszy kod jQuery w custom.js<\/code>pliku.<\/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 w WordPressie<\/h4>\n
Z kodu jQuery napisanego powy\u017cej, wysy\u0142a wywo\u0142anie Ajax z akcj\u0105 'load_post_by_ajax’. Musimy zadeklarowa\u0107 t\u0119 akcj\u0119 i do\u0142\u0105czy\u0107 do niej metod\u0119 wywo\u0142ania zwrotnego. W metodzie wywo\u0142ania zwrotnego zostanie zapisany nasz rzeczywisty kod.<\/p>\n
Zapisz poni\u017cszy kod w functions.php<\/code>pliku.<\/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
Ot\u00f3\u017c \u200b\u200bto! Wypr\u00f3buj to rozwi\u0105zanie, a zobaczysz, \u017ce \u0142aduje dynamiczn\u0105 zawarto\u015b\u0107 na Bootstrap Modal. Chcia\u0142bym us\u0142ysze\u0107 wasze przemy\u015blenia i sugestie w sekcji komentarzy poni\u017cej.<\/p>\n
Powi\u0105zane artyku\u0142y<\/h4>\n