Как реализовать Lazy loading для постов без плагина?

Question

mUchenik @mUchenik

Как реализовать Lazy loading для постов без плагина?

Как реализовать ленивую загрузку на странице кастомных постов, через кнопку "загрузить еще"?
Я имею ввиду допустим, много постов, по умолчанию выводится 10 постов, и снизу выводится кнопка "загрузить еще", нажимая на которую, подгружается еще 10 постов и так пока посты не закончатся.
Если важно, то текущая страница выглядит следующим образом:

<div class="gtco-container gtco-container_cards">
	<div class="row">
		<div class="col-md-8 col-md-offset-2 text-center gtco-heading ">
			<h2 class="calendar">Мероприятия</h2>
			<p>Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты. Встретил
				заглавных назад маленькая все обеспечивает оксмокс большого напоивший вопрос безопасную если
				дорогу страна приставка которое курсивных не, переулка предупредила!</p>
		</div>
	</div>
	<div class="row">
		<div class="col md 12">
			<div class="rotate-block">

				<?php
				// Произвольное поле по которому будет сортировка
				$the_key = 'Date';
				$args = array(
					'meta_key' => $the_key,
					// Сортируем по значению цифры в произвольном поле
					'orderby' => 'meta_value_num',
					// Сортируем от большего к меньшему
					'order' => 'DESC',
					// Исключаем категории
					'cat' => ''
				);

				global $wp_query;
				query_posts(
					array_merge(
						$wp_query->query,
						$args
					)
				);
				?>


				<?php if (have_posts()) : ?>



					<?php
					while (have_posts()) :
						the_post();

						get_template_part('template-parts/content-cards', 'cards');
					endwhile;
					?>








					<?php
					the_posts_pagination(array(
						'show_all'     => true, // показаны все страницы участвующие в пагинации
						'end_size'     => 2,     // количество страниц на концах
						'mid_size'     => 2,     // количество страниц вокруг текущей
						'prev_text'          => '',
						'next_text'          => '',
						'before_page_number' => false,
						'type' => 'list',
					));
					?>


				<?php		// If no content-cards, include the "No posts found" template.
				else :
					get_template_part('template-parts/content-cards', 'none');
				?>
				<?php endif; ?>
			</div>
		</div>
	</div>
</div>