Ajax technology for WordPress: plugins and their purpose. Page navigation with asynchronous loading of posts in WordPress

As you probably already guessed, today we will talk about the continuous loading of new posts when scrolling on WordPress. That is, instead of page navigation, entries will appear automatically as you scroll. Loading new records without reloading is achieved using AJAX. We'll do all this without using plugins.

Now I will show two ways of such loading. Essentially this is the same method, but with slightly different properties. The loading will occur either automatically when scrolling or when you press a button, for example - Show more. What exactly is suitable for your site is up to you to decide.

Automatic loading of records when scrolling Step 1

First you need to find where you want to display autoloading. Most often, it needs to be installed wherever there is a loop output with page navigation. For example, for me this is the content.php file. It can also be - index.php, archive.php, loop.php, category.php, search.php, etc. These files may contain standard WordPress navigation, or a custom functionality. There are examples in the article -.

So, if you have something like this, it is located at the very end of the cycle. Instead, you need to insert the following code.

var ajaxurl = "/wp-admin/admin-ajax.php"; var true_posts = ""; var current_page = ; var max_pages = "";

The upper part of the code does not need to be touched, but the lower part is responsible for the animation during loading. If you don’t need it, just delete everything inside the block - load_more_gs , or replace everything inside it, not load_more_gs itself, but its contents with your own code and you will have your own animation.

UPD: If, after implementing loading, it works fine on the category page, but not on the search page, you can try replacing line 4 in the code above with two new ones:

// Replace this var true_posts = ""; // On this $str = serialize($wp_query->query_vars); var true_posts = "";

Step 2

Now let's add styles for our animation. If you deleted it, you can skip this point.

#load_more_gs( width: 53px; padding:50px 0; margin:0 auto; ) .cssload-container( position:relative; ) .cssload-whirlpool, .cssload-whirlpool::before, .cssload-whirlpool::after ( position : absolute; top: 50%; left: 50%; border: 1px solid rgb(255,255,255); border-left-color: rgb(0,225,255); border-radius: 974px; -o-border-radius: 974px; -ms -border-radius: 974px; -webkit-border-radius: 974px; -moz-border-radius: 974px; ) .cssload-whirlpool ( margin: -24px 0 0 -24px; height: 49px; width: 49px; animation: cssload-rotate 1150ms linear infinite; -o-animation: cssload-rotate 1150ms linear infinite; -ms-animation: cssload-rotate 1150ms linear infinite; -webkit-animation: cssload-rotate 1150ms linear infinite; -moz-animation: cssload- rotate 1150ms linear infinite; ) .cssload-whirlpool::before ( content: ""; margin: -22px 0 0 -22px; height: 43px; width: 43px; animation: cssload-rotate 1150ms linear infinite; -o-animation: cssload-rotate 1150ms linear infinite;-ms-animation: cssload-rotate 1150ms linear infinite; -webkit-animation: cssload-rotate 1150ms linear infinite; -moz-animation: cssload-rotate 1150ms linear infinite; ) .cssload-whirlpool::after ( content: ""; margin: -28px 0 0 -28px; height: 55px; width: 55px; animation: cssload-rotate 2300ms linear infinite; -o-animation: cssload-rotate 2300ms linear infinite; -ms-animation: cssload-rotate 2300ms linear infinite; -webkit-animation: cssload-rotate 2300ms linear infinite; -moz-animation: cssload-rotate 2300ms linear infinite; ) @keyframes cssload-rotate ( 100% ( transform: rotate(360deg); ) ) @-o-keyframes cssload-rotate ( 100% ( -o-transform: rotate(360deg); ) ) @-ms-keyframes cssload-rotate ( 100% ( -ms-transform: rotate( 360deg); ) ) @-webkit-keyframes cssload-rotate ( 100% ( -webkit-transform: rotate(360deg); ) ) @-moz-keyframes cssload-rotate ( 100% ( -moz-transform: rotate(360deg) ; ) )

Step 3

Now we need a script asynchronous loading. There are 2 solutions. Or insert the script into the footer of your theme by pressing it into the tags:

//here is the script

Or create a file, for example - moreload.js , add a script to it, and then connect it in the footer, specifying the right way, So: