{"id":25379,"date":"2021-06-06T18:00:00","date_gmt":"2021-06-06T15:00:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=25379"},"modified":"2021-10-17T20:25:26","modified_gmt":"2021-10-17T17:25:26","slug":"lataa-dynaaminen-sisalto-bootstrap-modaliin-wordpressissa","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/fi\/lataa-dynaaminen-sisalto-bootstrap-modaliin-wordpressissa\/","title":{"rendered":"Lataa dynaaminen sis\u00e4lt\u00f6 Bootstrap Modaliin WordPressiss\u00e4"},"content":{"rendered":"

Bootstrap Modalia k\u00e4ytet\u00e4\u00e4n lis\u00e4\u00e4m\u00e4\u00e4n valintaikkuna verkkosivustoosi. Voit k\u00e4ytt\u00e4\u00e4 Bootstrap Modalia valop\u00f6ytiin, ilmoituksiin ja mukautettuun sis\u00e4lt\u00f6\u00f6n. Viime aikoina ty\u00f6skentelin WordPress-projektissa, jossa halusimme ladata mukautetun sis\u00e4ll\u00f6n dynaamisesti Bootstrap Modaliin. T\u00e4ss\u00e4 artikkelissa tutkitaan, kuinka dynaaminen sis\u00e4lt\u00f6 ladataan Bootstrap Modaliin k\u00e4ytt\u00e4m\u00e4ll\u00e4 Ajaxia WordPressiss\u00e4.<\/p>\n

On monia tilanteita, joissa saatat haluta Bootstrap-modeemin, jolla on dynaaminen sis\u00e4lt\u00f6. Otetaan esimerkki WordPress-viesteist\u00e4.<\/p>\n

WordPress riippuu l\u00e4hinn\u00e4 postityypeist\u00e4 sis\u00e4ll\u00f6n hallinnassa. WordPressiss\u00e4 pid\u00e4mme yleens\u00e4 yksityiskohtaisen sivun n\u00e4hd\u00e4ksesi viestin. Joissakin tapauksissa sinulla ei ehk\u00e4 kuitenkaan ole tarpeeksi sis\u00e4lt\u00f6\u00e4 viesti\u00e4 varten. Joten sen sijaan, ett\u00e4 n\u00e4yt\u00e4t sis\u00e4lt\u00f6\u00e4 eri sivulla, haluat mieluummin n\u00e4ytt\u00e4\u00e4 sen ponnahdusikkunassa. Sinulla voi olla pari viesti\u00e4, joten jokaisen viestin sis\u00e4ll\u00f6n pit\u00e4isi latautua dynaamisesti ponnahdusikkunassa.<\/p>\n

T\u00e4\u00e4lt\u00e4 tulee Bootstrap-tila, jonka avulla voit n\u00e4ytt\u00e4\u00e4 sis\u00e4lt\u00f6\u00e4 viesti\u00e4 kohti loppuk\u00e4ytt\u00e4jille. Se vaatii sinua noudattamaan joitain perusvaiheita opetusohjelman seuraavassa osassa esitetyll\u00e4 tavalla.<\/p>\n

Korosta Bootstrap Style ja JS<\/h3>\n

Aloittamiseksi sinun on pit\u00e4nyt sis\u00e4llytt\u00e4\u00e4 Bootstrapin CSS- ja JS-tiedosto WordPress-projektiisi. Aion k\u00e4ytt\u00e4\u00e4 WordPress-standardia tarvittavien JS- ja CSS-tiedostojen sis\u00e4llytt\u00e4miseen. Bootstrap-tiedostojen lis\u00e4ksi lis\u00e4t\u00e4\u00e4n my\u00f6s custom.js<\/code>mihin kirjoitamme JavaScript-logiikan.<\/p>\n

Avaa functions.php<\/code>tiedosto ja lis\u00e4\u00e4 siihen alla oleva koodi.<\/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
T\u00e4ss\u00e4 olen Bootstrap-tiedostot suoraan CDN: lt\u00e4. Voit lis\u00e4t\u00e4 sen paikallisesti. S\u00e4\u00e4d\u00e4 polkua vastaavasti, jos teet sen paikallisesti. Voit custom.js<\/code>tiedoston, olen osoitettu oletus Ajax URL WordPress ja nonce.<\/p>\n
Lataa dynaaminen sis\u00e4lt\u00f6 Bootstrap Modaliin WordPressiss\u00e4<\/h3>\n
Kuten sanottu, aion ladata postisis\u00e4ll\u00f6n dynaamisesti Bootstrap Modaliin. Oletetaan, ett\u00e4 olet luonut mallin, johon luet viestej\u00e4. Jokaisessa viestiss\u00e4 on painike ’N\u00e4yt\u00e4 lis\u00e4\u00e4’. Napsauttamalla t\u00e4t\u00e4 painiketta Bootstrap Modalin pit\u00e4isi avautua sis\u00e4ll\u00f6n kanssa.<\/p>\n
Sinulla pit\u00e4isi olla oma HTML t\u00e4lle listalle. Sinun tarvitsee vain lis\u00e4t\u00e4 yksi tietoattribuutti ja yhteinen luokka painikkeisiin. Se voi olla kuin alla olevat lausunnot.<\/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
K\u00e4ytt\u00e4j\u00e4n on s\u00e4ilytett\u00e4v\u00e4 arvostettu post-tunnus data-id<\/code>attribuutille. Luokan nimi, jota k\u00e4ytin t\u00e4\u00e4ll\u00e4, on ’view-post’. Seuraavaksi sinun on lis\u00e4tt\u00e4v\u00e4 Bootstrap Modalin merkint\u00e4 joko mallitiedostoon tai alatunnisteeseen.<\/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
Jos huomaat, pidin modaalisen otsikon ja mallin rungon tyhj\u00e4n\u00e4, jonka lataamme dynaamisesti. M\u00e4\u00e4ritin modaalille id postModal.<\/p>\n
Kun joku napsauttaa N\u00e4yt\u00e4 lis\u00e4\u00e4 -painiketta, meid\u00e4n on l\u00e4hetett\u00e4v\u00e4 Ajax-puhelu. Ajax-vastauksessa l\u00e4het\u00e4mme postin otsikon ja sis\u00e4ll\u00f6n, joka sitten liitet\u00e4\u00e4n Modaliin jQuery\u00e4 k\u00e4ytt\u00e4m\u00e4ll\u00e4. Kirjoita siis alla oleva jQuery-koodi custom.js<\/code>tiedostoon.<\/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-puhelu WordPressiss\u00e4<\/h4>\n
Yll\u00e4 kirjoitetusta jQuery-koodista se l\u00e4hett\u00e4\u00e4 Ajax-puhelun toiminnolla ’load_post_by_ajax’. Meid\u00e4n on ilmoitettava t\u00e4m\u00e4 toiminto ja liitett\u00e4v\u00e4 siihen soittomenetelm\u00e4. Soittomenetelm\u00e4ss\u00e4 kirjoitetaan todellinen koodi.<\/p>\n
Kirjoita alla oleva koodi functions.php<\/code>tiedostoon.<\/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
Se siit\u00e4! Kokeile t\u00e4t\u00e4 ratkaisua ja n\u00e4et sen lataavan dynaamista sis\u00e4lt\u00f6\u00e4 Bootstrap Modaliin. Haluaisin kuulla ajatuksesi ja ehdotuksesi alla olevassa kommenttiosassa.<\/p>\n
Aiheeseen liittyv\u00e4t artikkelit<\/h4>\n