Infinite scrolling Super WordPress plugin. Ajax technology for WordPress: plugins and their meanings AJAX technology: updating website data without re-updating

If on my site you go to a page or any category, then at the very bottom of the page, next to the basic side navigation, you will click on the Engage button, which allows you to highlight current posts without updating the site. Inki.

I’ll tell you straight, on my site there’s a sort of shamanic way of navigating around the pages - I’ve been exploring this navigation for a long time and perhaps at the moment I haven’t had such a problem with PHP and jQuery. Now I will show you a more correct and effective way of implementing post-page navigation with the possibility of asynchronous engagement of new posts. So you don’t have to look at the code of my site, but if you have food, then look for evidence on them in the comments before planting or look at it.

Used with the standard TwentySeventeen theme, first of all, this theme is simple and there is no need to worry about coding, otherwise you can install it directly from the admin area from the WordPress theme repository.

What will we try to earn from this planting?

• Vantage posts when you click on the Vanquish more button.
• Infinite attention, notifications and comments will be highlighted automatically when you scroll through the page (just like on VKontakte).
• Let’s make sure that the increase in posts works for any archives.

To begin with, we need to know the file that allows back-to-back navigation. TwentySeventeen's file is just index.php. If you don't understand which files need to be searched for in your theme, I recommend taking a look at.

If you have been victorious about standard topics (like me), then I’ll remind you that for changes you need to vikorist (report on the video at the bottom of the post).

Find another place in the template between the while loop, after the display of posts ends (for TwentySeventeen, this place is practically right after endwhile) and insert the code there:

Ajaxurl Tse in WordPress. true_posts Serialization array to place all necessary parameters in the record, e. current_page Number .

And now a few styles that we will add to our button to make it look cool (the styles can be inserted into the standard style.css in the theme folder).

Successful victorians of the first generation will need this button, which will require you to appear on the page of all records, but be aware that if there are not enough records for two pages, then there will be no button for whom or create more records iv, or go to Settings > Read and change the number of images displayed on the post page there.

The lightest croc behind.

In other words, we no longer need CSS styles, since you added them, you can just delete them.

Thirdly, instead of the loadmore.js file, change to:

The functions.php file (lines 2 and 4) will be deleted without changes.

Ajax Load More is the ultimate WordPress infinite scroll plugin for lazy loading posts, single posts, pages, comments and more with Ajax Powered Queries.

Build complex custom WordPress queries with Ajax Load More short code Builder will insert short code to your side page using the editor or directly into your template files.

Ajax Load More is compatible for endless scrolling with popular eCommerce plugins such as WooCommerce and Easy Digital Downloads.

• Shortcode Builder - Create your own custom Ajax Load More shortcodes indicate various WordPress parameters in our manual shortcode builder (see Shortcode Parameters).
• Query Parameters — Ajax Load More allows you to query WordPress Query by Post Type, Post Format, Date, Category, Tags, Custom Taxonomies, Search Term, Authors and more!
• Repeater Templates — Edit and extend the functionality of Ajax Load More by creating your own repeater template to match the look and feel of your website (see screenshots).
• Multiple Instances - You can enable multiple instances of Ajax Load More on a single page, post or template.
• Ajax Filtering — Ajax Load More custom filtering method will allow you to filter and update your Ajax query results.
• Multisite Compatibility — Manage repeater templates across all sites in your network.
• Setting Panel — Customize your version of Ajax Load More for updating various plugin settings.

• repeater - Choose a repeater template (Add-on available). Default = 'default'
• post_type - Comma separated list of post types. Default = 'post'
• sticky_posts — Preserve sticky post ordering for Ajax listing. Default=false
• post_format - Query by post format. Default = null
• category — A comma separated list of category to include by slug. Default = null
• category__and — A comma separated list of categories to include by ID. Default = null
• category__not_in — A comma separated list of categories to exclude by ID. Default = null
• tag — A comma separated list tags to include by slug. Default = null
• tag__and — Information about those that are separate buildings tags to include by ID. Default = null
• tag__not_in — A comma separated list of tags to exclude by ID. Default = null
• taxonomy - Query by custom taxonomy name. Default = null
• taxonomy_terms — Comma separated list of custom taxonomy terms(slug). Default = null
• taxonomy_operator
• taxonomy_relation — The logical relationship between each taxonomy when there is more than one. (AND/OR). Default = 'AND'
• day - Day of the week. Default = null
• month - Month of the year. Default = null
• year - Year of post. Default = null
• taxonomy_operator — Operator for compare Taxonomy Terms against (IN/NOT IN). Default = 'IN'
• meta_key - Custom field key(name). Default = null
• meta_value - Custom field value. Default = null
• meta_compare — Operator for compare meta_key and meta_value against. Default = 'IN'
• meta_type - Custom field type. Default = 'CHAR'
• meta_relation — Used with multiple custom field entries (AND/OR). Default = 'AND'
• author – Comma separated list of authors by id. Default = null
• post__in — Comma separated List of Post ID's include in query. Default = null
• post__not_in — Comma separated list of the post ID's exclude from query. Default = null
• search - Query search term ('s'). Default = null
• custom_args - Semicolon separated list of value:pair arguments. e.g. tag_slug__and:design,development; event_display:upcoming. Default = null
• post_status - Select status of the post. Default = 'publish'
• order — Display posts in ASC(ascending) or DESC(descending) order. Default = 'DESC'
• orderby — Order posts by date, title, name, menu order, author, post ID or comment count. Default = 'date'
• offset - Offset the initial query (number). Default = '0'
• posts_per_page — Lots of information about load with each Ajax request. Default = '5'
• scroll — Load more posts as the user scrolls the page (true/false). Default = 'true'
• scroll_distance — Stand in front of the arch to the edge to trigger the loading of posts while scrolling. Default = '150'
• scroll_container — Constrain Ajax Load More infinite scrolling to a parent container. Default = null
• max_pages — Maximum number of pages to load while user is scrolling (activated on when scroll = true). Default = '0'
• pause_override — Allow scrolling to override the Pause parameter and trigger the loading of posts on scroll. Default = null
• pause — Do not load posts until user press Load More button (true/false). Default = 'false'
• transition - Choose a posts reveal transition (fade/masonry/none). Default='fade'
• transition_container - Display the Ajax Load More (.alm-reveal) loading container. Default = 'true'
• transition_container_classes — Add classes to .alm-reveal transition div.
• masonry_selector - target classname of each masonry item. Default = null
• masonry_animation — Select loading transition type for Masonry items. (default/zoom-out/slide-up/slide-down/none). Default = default
• masonry_horizontalorder - Maintain horizontal order. Default=true
• images_loaded — Vickoryize all images to add value to all ajax loaded content (true/false). Default = 'false'
• destroy_after — Remove ajax load more functionality after 'n' number of pages have been loaded. Default = null
• progress_bar — Display progress bar indicator on the top of the window when Ajax content is enabled. Default = 'false'
• progress_bar_color - Enter the hex color of the progress bar. Default = 'ed7070'
• button_label — Text of the announcement for the Load More button. Default = 'Older Posts'
— Update the text of the Load More button while content is loading. Default = null
• container_type — Select the Global Container Type that is installed on the ALM Settings page. Default = null
• css_classes — Add custom CSS classes to Ajax Load More container. Default = null
• id — A unique ID for Ajax Load More instance.
• nested - this is a nested Ajax Load More instance. Default=false

• Default — Out of the box functionality and styling.
• Advanced Custom Fields - Individual scrolling Advanced Custom Fields data with Ajax Load More.
• Attachments - Endless scroll post attachments.
• Destroy After — Remove Ajax Load More functionality after 'n' number of pages.
• Event Listing — Ordering and listing events by custom field date.
• Filtering — Reset and filter on Ajax Load More instance.
• Flexbox - Creating a responsive Ajax Load More grid with Flexbox.
• Infinite Scroll — A look at the new loading functionality and styles.
• Images Loaded — Load the image before displaying ajax loaded content.
• Masonry - Flexible grid layout with Masonry JS.
• Multiple Instances — Include multiple Ajax Load More' on a single page.
• Paging URLs — Generate unique paging URLs for every Ajax Load More query with the SEO add-on.
• — Posts will not load until initiated by the user.
• Preloaded Posts — Easily preload an initial set of posts for all Ajax requests to the server.
• Progress Bar — Display progress bar load indicator with each Ajax request.
• Search Results — Returning results based on search terms.
• Scroll Container - Constrain Ajax Load More up to parent container.
• SEO & Paging – Combine these two add-ons to create one powerful navigation system.
• Slideshow Gallery — Create a gallery of posts with Ajax Load More and Paging add-on.
• Table Layout - Ajax Load More will display results in a table format.

As you have already guessed, today there is a constant increase in new entries when scrolling on WordPress. Instead of back-to-back navigation, entries will appear automatically as you scroll. It is possible to add new entries without re-uploading using AJAX. We can do it all, without using any plugins.

Now I will show two ways of such improvement. In essence, this is the same method, just a little with different powers. Options will be activated either automatically when you scroll or when you press a button, for example - Show more. Whatever is most suitable for your site is up to you.

To begin with, you need to know whether you want to introduce auto-advancement. Most often, you need to install a shortcut to remove the cycle from back-to-back navigation. For example, the content.php file is smaller. So you can do the same - index.php, archive.php, loop.php, category.php, search.php, etc. These files may have standard WordPress navigation or a custom function. Apply it to the statistics.

So from what you have similar to this, it resolves itself at the very end of the cycle. Replace the new track with the next 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 scratched, and the lower axis is responsible for animation during the hour of attraction. You don’t need to simply delete everything in the middle of the block - load_more_gs, but replace everything in the middle of the block, not load_more_gs itself, but instead of it with your code and you will have your own animation.

UPD. Since after promotion, it will be better to work on the category side, rather than on the search side, you can try replacing the 4th row of the code with a new two:

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

Now we will add styles for our animation. If you have already seen this, 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 : absolute; top: 50%; left: 50%; border: 1px solid rgb(255,255,255); border-left-color: rgb(0,225,255); border-radius: 974px; -border-radius: 974px; -webkit-border-radius: 974px; -moz-border-radius: 974px; ) cssload-rotate 1150ms linear infinite;-o-animation: cssload-rotate 1150ms linear infinite;-ms-animation: cssload-rotate 1150ms linear infinite; rotate 1150ms linear infinite; ) .cssload-whirlpool::before ( content: ""; margin: -22px 0 0 -22px; 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; infinite;-ms-animation: cssload-rotate 2300ms linear infinite; -webkit-animation: cssload-rotate 2300ms linear infinite; -moz-animation: cssload-rotate 2300ms linear infinite; 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); ) )

Now we need an asynchronous animation script. There are two directions here. Or insert the script in your footer, squeezing it into the tags:

//here is the script

Or create a file, for example - moreload.js, add a new script, and then connect it to the footer, specifying the correct path, like this: