Суть идеи, при нажатии на кнопку/ссылку - открывать окно, внутри которого будет загружаться посредством 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% рабочий, выручит вас, если вы столкнулись с той же задачей что и я.
На этом все, спасибо за внимание. 🙂
