Открытие записи WordPress через FancyBox

В одном из моих проектов надо было открывать отзывы в модальном окне. Как вариант можно было использовать обычные модальные окна, но нет, я пошел другим путем и взял fancybox 3.

FancyBox 3 позволяет открывать не только изображения и видео, но и целые страницы, как iframe, так и ajax, но меня интересовал именно третий вариант, а именно inline.

Почему именно этот? А все просто, все содержимое загружалось стразу на странице отзывов и было в скрытом блоке, а так же стандартный шаблон страницы отзыва будет нетронут. И так, у нас есть цикл foreach которым мы собираем все записи из массива и собираются в слайдер:

<?php foreach( $posts as $post_item => $post): setup_postdata($post); ?>
<div class="slide">
	<div class="_date"><?php echo get_the_date('d / m / Y'); ?></div>
<h3><?the_title();?></h3>
<p><?php echo trim_characters(200, '...'); ?></p>
<a data-fancybox data-src="#hidden-content-<?php the_ID(); ?>" href="javascript:;">Подробнее</a>
<?php endforeach; ?>

Но у нас это просто вырезка из отзыва, следовательно где-то должен подгружаться и полный отзыв, а он подгружается после кнопки подробнее:

<div style="display: none;" id="hidden-content-<?php the_ID(); ?>">
	<article class="container post_item">
	<div class="row">
		<div class="header_spost">
			<h1><?the_title();?></h1>
			<h3><?the_field('sub_title');?></h3>
			<div class="meta_box">
				<p class="author"><?php the_author(); ?></p>
			</div>
		</div>
		<?the_content();?>
		<? $ID = $posts[$post_item+1];?>
		<script type="text/javascript">function CnO() {parent.jQuery.fancybox.close()}</script>
		<a data-fancybox data-src="#hidden-content-<?php echo $ID->ID ?>" href="javascript:;" onclick="CnO()">Следующий отзыв</a>
	</div>
	</article>
</div>

Сформировав наш контейнер с полным отзывом, уже можем открывать каждый отзыв в модальном окне, но какой смысл от них, если их нельзя листать? Как видите, в коде у меня уже есть кнопка «Следующий отзыв».

А что у нас вообще по функциям тут есть? Все предельно просто:

echo trim_characters(200, '...'); //Ограничиваем вывод контента в 200 слов
$ID = $posts[$post_item+1]; // Получаем массив следующего поста в цикле
echo $ID->ID; //Получаем ID следующего поста

Благодаря этому мы можем открыть следующий отзыв в новом модальном окне, но при этом, новое модальное окно откроется поверх старого и чтоб закрыть все окна, нам придется закрывать каждое окно отдельно, но это не есть хорошо, а значит надо чтоб предыдущее окно закрывалось при открытии нового и для этого у нас есть функция:

function CnO() {parent.jQuery.fancybox.close()}

Благодаря ей у нас закрывается родительское окно, в нашем случае то, где мы нажали на кнопку «Следующий отзыв»

Ну и вот вообще весь код данного блока:

<?php foreach( $posts as $post_item => $post): setup_postdata($post); ?>
<div class="slide">
	<div class="_date"><?php echo get_the_date('d / m / Y'); ?></div>
	<h3><?the_title();?></h3>
	<p><?php echo trim_characters(200, '...'); ?></p>
	<a data-fancybox data-src="#hidden-content-<?php the_ID(); ?>" href="javascript:;">Подробнее</a>
	<div style="display: none;" id="hidden-content-<?php the_ID(); ?>">
		<article id="post-<?php the_ID(); ?>" class="container post_item">
		<div class="row">
			<div class="header_spost">
				<h1><?the_title();?></h1>
				<h3><?the_field('sub_title');?></h3>
				<div class="meta_box">
					<p class="author"><?php the_author(); ?></p>
				</div>
			</div>
			<?the_content();?>
			<? $ID = $posts[$post_item+1];?>
			<script type="text/javascript">function CnO() {parent.jQuery.fancybox.close()}</script>
			<a data-fancybox data-src="#hidden-content-<?php echo $ID->ID ?>" href="javascript:;" onclick="CnO()">Следующий отзыв</a>
		</div>
		</article>
	</div>
</div>
<?php endforeach; ?>

Возможно можно было и лучше сделать, но я сделал именно так.