Як показати вміст поста, записи в спливаючому вікні 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% робочий, виручить вас, якщо ви зіткнулися з тим же завданням що і я.

На цьому все, дякую за увагу. 🙂