Как показать содержимое поста, записи в всплывающем окне WordPress

Суть идеи, при нажатии на кнопку/ссылку - открывать окно, внутри которого будет загружаться посредством Ajax текст нужной записи. При нажатии на другую кнопку/ссылку в том же окне будет уже другое содержимое и тд.

Как упомянул выше, делать будем с помощью - Ajax. Для начала надо на нужной вам странице разместить код окна и самой кнопки. Начнем с кнопки.

<?php
//На выбор. Можете иначе получить ID записи. Главное чтобы у вас в переменной она была.
$post_ID = '123';
$post_ID = url_to_postid('Тут ссылка на пост');
?>
<a id="<?php echo $post_ID ?>" class="ajax-post">Нажми меня</a>

Тут обычная ссылка которой присвоен класс - ajax-post. Не упустите этот момент. Так же есть ID. Тут надо правильно его указать. Вы можете добавлять бесконечное количество таких ссылок и каждой присваивать ID, который должен содержать ID записи. ID записи можно посмотреть в админке в списке записей наведя на нее.

Так же можно получить ID указав ссылку на пост в функции - url_to_postid('Тут ссылка на пост'). Можете еще как-то, как вам удобно, главное, чтобы в итоге id ссылки был равен ID нужной записи. Думаю, тут понятно.

Далее, на этой же странице надо добавить HTML код окна, внутри которого и будет подгружаться содержимое нужных постов.

<div class="popup">
	<div class="container_popup">
		<div class="close">X</div>
		<div id="ajax-response"></div>
	</div>
</div>

Тут просто. Основной блок окна с классом popup, внутренний контейнер с классом container_popup, внутри которого кнопка закрытия окна с классом close и блок для загрузки в него содержимого записи с id - ajax-response

Ссылке/кнопке - стили CSS сами придумаете как хотите, а окну вот минимальные. Добавьте их в свой файл стилей.

.popup{background:rgba(255,255,255,0.7);position:fixed;z-index:12;top: 0;right:0;bottom: 0;width:100%;height:100%;box-sizing: border-box;overflow-x:hidden;overflow-y:auto;display:none;justify-content:center;align-items:center;transition:none;}
.container_popup{background:#fff;display:none;box-sizing:border-box;max-width:550px;margin:auto;padding:50px;position: relative;box-shadow: 0 0 50px 0 rgba(0, 0, 0, 0.05);transition:none;}
.close{position:absolute;right:5px;top:5px;}

Далее создаем файл JS внутри которого будем запускать и закрывать наше окно и с Ajax подгружать записи. Назовем его, например - ajaxload.js

jQuery(document).ready(function($){

	//Закрытие окна
	$('.close').click(function () {
		$('.container_popup').slideUp(800);
		$('.popup').slideUp(800);
	});

	//Открытие окна и ajax подгрузка
		$('.ajax-post').click(function (e) {
			$('.popup').css('display','flex');
			e.preventDefault();
			var post_id = $(this).attr( 'id' ); 
			$.ajax({
				cache: false,
				timeout: 8000,
				url: php_array.admin_ajax,
				type: "POST",
				data: ({ action:'theme_post_example', id:post_id }),

				success: function( data, textStatus, jqXHR ){
					var $ajax_response = $( data );

					$( '#ajax-response' ).html( $ajax_response );
					$( '.container_popup' ).slideDown();
				},
				
				error: function( jqXHR, textStatus, errorThrown ){
					console.log( 'The following error occured: ' + textStatus, errorThrown );
				},

				complete: function( jqXHR, textStatus ){
				}

			});

		});
	});

Расписывать подробно смысла нет. Кто разбирается с JavaScript поймет, сложного ничего нет. Обычная функция закрытия окна, которая с помощью slideUp() прячет и контейнер окна и родительский блок. Вторая при нажатии на ссылку с нужным классом показываем окно, получаем id атрибут ссылки и уже с помощью ajax получаем содержимое нашего поста подставляя его в наш специальный блок внутри окна. Время для получения установлено 8 секунд(8000 миллисекунд). Если за это время окно не загрузит пост, то появится ошибка. Можете добавить beforeSend: и например показывать слово Загрузка или анимацию какую добавить, чтобы пока шла загрузка, посетитель понимал, что надо подождать секунду. В моем случаи происходило моментально, ибо я подгружал лишь первые 100слов и название записи, так что мне это не нужно было. Если вы не понимаете что такое beforeSend, можете написать мне я за чашечку кофе помогу вам разобраться 😉

После этого, надо открыть файл пользовательских функций function.php. Добавляете код в самый конец перед закрывающим тегом PHP ?>. Если его нет, то просто в самый конец.

Перед изменением function.php, обязательно сохраните его копию, чтобы в дальнейшем, в случаи ошибки, вернуть все как было. Так же, можете использовать дочернюю тему. Если вы не знаете что это такое, то ознакомьтесь со статьей - Дочерние темы WordPress.

Добавить надо 2 функции. Подключение файла нашего ajaxload.js к Ajax WordPress и функция что выводит нужный пост и части его содержимого.

function enqueue_my_scripts() {
		wp_enqueue_script('AjaxLoad', get_template_directory_uri().'/js/ajaxload.js', array('jquery'), false, null,  false );
		$php_array = array( 'admin_ajax' => admin_url( 'admin-ajax.php' ) );
		wp_localize_script( 'AjaxLoad', 'php_array', $php_array );
}
add_action( 'wp_enqueue_scripts', 'enqueue_my_scripts' );

Наше событие wp_enqueue_scripts, подключает функцию - enqueue_my_scripts, внутри которой мы подключаем наш файл и вешаем его на Ajax WordPress, чтобы функция $.ajax могла работать в нашем файле.

Далее функция подгрузки поста:

	//---------- Ajax load post ------------//
	add_action( 'wp_ajax_theme_post_example', 'theme_post_example_init' );
	add_action( 'wp_ajax_nopriv_theme_post_example', 'theme_post_example_init' );

	function theme_post_example_init() {
		$args = array( 'p' => $_POST['id'] );
		$theme_post_query = new WP_Query( $args );
		while( $theme_post_query->have_posts() ) : $theme_post_query->the_post();
	?>
	<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>" >
		<h3><?php the_title(); ?></h3>
		<p><?php echo wp_trim_words( get_the_content(), 100);  ?></p>
	</a>
	<?php
	endwhile;
	exit;
	}	

Тут тоже просто. 2 события, чтобы эта функция дружила с Ajax WordPress, а далее сама функция. В начале получаем параметры для WP_Query , которая и выведет нужное содержимое в цикле.

Нас интересует 10-13 строка. Вот тут и задаете параметры что выводить. У меня в примере это ссылка на основной пост, внутри которой заголовок записи и функция что выводит первые 100 слов записи. Можете подключить полный вывод контента через функцию - the_content(), или миниатюру - the_post_thumbnail() и тд. Все что вам нужно можете вызывать внутри цикла.

Если все сделали правильно, то можно проверить сами. Метод проверенный и 100% рабочий, выручит вас, если вы столкнулись с той же задачей что и я.

На этом все, спасибо за внимание. 🙂