{"id":28293,"date":"2021-05-20T12:33:00","date_gmt":"2021-05-20T09:33:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=28293"},"modified":"2021-10-17T04:47:01","modified_gmt":"2021-10-17T01:47:01","slug":"hur-man-laddar-wordpress-inlagg-med-ajax","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/sv\/hur-man-laddar-wordpress-inlagg-med-ajax\/","title":{"rendered":"Hur man laddar WordPress-inl\u00e4gg med AJAX"},"content":{"rendered":"

Jag driver en YouTube-kanal<\/a> d\u00e4r jag l\u00e4gger upp videor relaterade till programmering och programvara. Nyligen fr\u00e5gade en av prenumeranterna mig hur man laddar WordPress-inl\u00e4gg med AJAX. Som svar till honom best\u00e4mde jag mig f\u00f6r att skriva ett inl\u00e4gg p\u00e5 hans fr\u00e5ga. S\u00e5 i den h\u00e4r artikeln studerar vi hur man laddar WordPress-inl\u00e4gg med AJAX med hj\u00e4lp av en laddningsknapp och sidrullning.<\/p>\n

Skillnaden mellan belastningen mer och en sidrullning \u00e4r ganska enkel. N\u00e4r du anv\u00e4nder ladda mer-knappen m\u00e5ste du klicka p\u00e5 en knapp f\u00f6r att se n\u00e4sta upps\u00e4ttning inl\u00e4gg. Och p\u00e5 sidrullning, n\u00e4r du bl\u00e4ddrar till slutet av en visningsport, ska n\u00e4sta upps\u00e4ttning inl\u00e4gg automatiskt laddas.<\/p>\n

L\u00e5t oss anta att du har ett par inl\u00e4gg och att du m\u00e5ste visa tv\u00e5 inl\u00e4gg vid sidl\u00e4sning och sedan klicka p\u00e5 "Ladda mer" eller p\u00e5 "Sidrullning" n\u00e4sta 2 inl\u00e4gg ska visas. Denna process forts\u00e4tter tills alla dina inl\u00e4gg visas.<\/p>\n

Skapa en ny sida som heter "Blogg". F\u00f6r att visa dina inl\u00e4gg p\u00e5 bloggsidan skapar du en anpassad mall page-blog.php<\/code>i ditt aktiva temas katalog.<\/p>\n

Nu n\u00e4r anv\u00e4ndare bes\u00f6ker din bloggsida b\u00f6r de se tv\u00e5 inl\u00e4gg. S\u00e5 l\u00e4gg till koden nedan i din anpassade mallfil.<\/p>\n

<div class=\"entry-content\">\n\u00a0\u00a0\u00a0\u00a0<?php\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'posts_per_page' => '2',\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'paged' => 1,\n\u00a0\u00a0\u00a0\u00a0);\n\u00a0\u00a0\u00a0\u00a0$blog_posts = new WP_Query( $args );\n\u00a0\u00a0\u00a0\u00a0?>\n\u00a0\n\u00a0\u00a0\u00a0\u00a0<?php if ($blog_posts->have_posts() ): ?>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div class=\"blog-posts\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<?php while ($blog_posts->have_posts() ): $blog_posts->the_post(); ?>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<h2><?php the_title(); ?><\/h2>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<?php the_excerpt(); ?>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<?php endwhile; ?>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div class=\"loadmore\">Load More...<\/div>\n\u00a0\u00a0\u00a0\u00a0<?php endif; ?>\n<\/div><\/code><\/pre>\n
H\u00e4r anv\u00e4nde jag tangenten ’paged’ och skickade v\u00e4rdet ’1’ till den. ’paged’ \u00e4r en nyckel som anv\u00e4nds i WordPress n\u00e4r det g\u00e4ller pagination. ’paged’ => 1 betyder f\u00f6rsta sidan.<\/p>\n
Du skulle m\u00e4rka div-elementet med klassen ’loadmore’. N\u00e4r vi klickar p\u00e5 Ladda mer kommer vi att ringa Ajax och f\u00e5 n\u00e4sta upps\u00e4ttning inl\u00e4gg.<\/p>\n
Ladda WordPress-inl\u00e4gg med Ajax p\u00e5 Load More-knappen<\/h3>\n
F\u00f6r att ringa ett Ajax-samtal m\u00e5ste du inkludera JS-filen i WordPress-milj\u00f6n. Skapa en custom.js<\/code>fil i js<\/code>katalogen och l\u00e4gg sedan till koden nedan i functions.php<\/code>filen.<\/p>\n
function blog_scripts() {\n\u00a0\u00a0\u00a0\u00a0\/\/ Register the script\n\u00a0\u00a0\u00a0\u00a0wp_register_script( 'custom-script', get_stylesheet_directory_uri(). '\/js\/custom.js', array('jquery'), false, true );\n\u00a0\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( 'load_more_posts' ),\n\u00a0\u00a0\u00a0\u00a0);\n\u00a0\u00a0\u00a0\u00a0wp_localize_script( 'custom-script', 'blog', $script_data_array );\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\/\/ Enqueued script with localized data.\n\u00a0\u00a0\u00a0\u00a0wp_enqueue_script( 'custom-script' );\n}\nadd_action( 'wp_enqueue_scripts', 'blog_scripts' );<\/code><\/pre>\n
L\u00e5t oss sedan skriva lite jQuery och ge ett Ajax-samtal som i geng\u00e4ld ger n\u00e4sta inl\u00e4gg.<\/p>\n
custom.js<\/strong><\/p>\n
var page = 2;\njQuery(function($) {\n\u00a0\u00a0\u00a0\u00a0$('body').on('click', '.loadmore', 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_posts_by_ajax',\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'page': page,\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\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\u00a0if($.trim(response) != '') {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$('.blog-posts').append(response);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0page++;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0} else {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$('.loadmore').hide();\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});\n});<\/code><\/pre>\n
Vad vi g\u00f6r h\u00e4r \u00e4r att jag tog en javascript-variabel ’sida’ med initialv\u00e4rde 2 eftersom vi kommer att b\u00f6rja med andra sidan sidor. Jag \u00f6kar den h\u00e4r "sidans" variabel efter att jag f\u00e5tt Ajax-svaret. Efter att ha f\u00e5tt svaret l\u00e4gger jag till det i den befintliga inl\u00e4ggslistan.<\/p>\n
Jag anv\u00e4nde ocks\u00e5 \u00e5tg\u00e4rdsparametern som ’load_posts_by_ajax’ till ett Ajax-samtal som m\u00e5ste kartl\u00e4ggas med WordPress-\u00e5tg\u00e4rder. \u00d6ppna din functions.php<\/code>fil och l\u00e4gg till koden nedan i en fil.<\/p>\n
add_action('wp_ajax_load_posts_by_ajax', 'load_posts_by_ajax_callback');\nadd_action('wp_ajax_nopriv_load_posts_by_ajax', 'load_posts_by_ajax_callback');<\/code><\/pre>\n
I ovanst\u00e5ende WordPress-\u00e5tg\u00e4rder kallar vi \u00e5teruppringningsfunktionen load_posts_by_ajax_callback<\/code>som jag ska definiera i n\u00e4sta steg. Du kan definiera den h\u00e4r funktionen i din functions.php<\/code>.<\/p>\n
function load_posts_by_ajax_callback() {\n\u00a0\u00a0\u00a0\u00a0check_ajax_referer('load_more_posts', 'security');\n\u00a0\u00a0\u00a0\u00a0$paged = $_POST['page'];\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'posts_per_page' => '2',\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'paged' => $paged,\n\u00a0\u00a0\u00a0\u00a0);\n\u00a0\u00a0\u00a0\u00a0$blog_posts = new WP_Query( $args );\n\u00a0\u00a0\u00a0\u00a0?>\n\u00a0\n\u00a0\u00a0\u00a0\u00a0<?php if ($blog_posts->have_posts() ): ?>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<?php while ($blog_posts->have_posts() ): $blog_posts->the_post(); ?>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<h2><?php the_title(); ?><\/h2>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<?php the_excerpt(); ?>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<?php endwhile; ?>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<?php\n\u00a0\u00a0\u00a0\u00a0endif;\n\u00a0\n\u00a0\u00a0\u00a0\u00a0wp_die();\n}<\/code><\/pre>\n
Nu n\u00e4r du klickar p\u00e5 "Load More" -knappen laddas n\u00e4sta inl\u00e4gg via Ajax och returneras tillbaka som svar. JavaScript-koden skriven ovan skulle hantera de \u00e5terst\u00e5ende grejerna.<\/p>\n
Ladda WordPress-inl\u00e4gg med Ajax p\u00e5 sidrullning<\/h3>\n
Vissa anv\u00e4ndare kanske inte vill ha en laddningsknapp f\u00f6r att visa inl\u00e4ggen med Ajax. Ist\u00e4llet f\u00f6redrar de att inl\u00e4ggen ska visas n\u00e4r anv\u00e4ndaren n\u00e5r slutet av en visningsport.<\/p>\n
F\u00f6r att uppn\u00e5 detta m\u00e5ste du skriva logik som f\u00e5ngar h\u00e4ndelsen i slutet av en visningsport, resten av koden \u00e4r densamma som knappen ’Load More’. Nedan finns jQuery-koden f\u00f6r sidrullning.<\/p>\n
jQuery(window).scroll(function($) {\n\u00a0\u00a0\u00a0\u00a0if (jQuery(window).scrollTop() + jQuery(window).height() > jQuery(document).height()) {\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_posts_by_ajax',\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'page': page,\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\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\u00a0if($.trim(response) != '') {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$('.blog-posts').append(response);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0page++;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0} else {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$('.loadmore').hide();\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}\n});<\/code><\/pre>\n
Det \u00e4r allt! Du kan forts\u00e4tta och prova det. Jag skulle vilja veta dina tankar och f\u00f6rslag i kommentarerna nedan.<\/p>\n
relaterade artiklar<\/h4>\n