Суть идеи, при нажатии на кнопку/ссылку - открывать окно, внутри которого будет загружаться посредством Ajax текст нужной записи. При нажатии на другую кнопку/ссылку в том же окне будет уже другое содержимое и тд.
Как упомянул выше, делать будем с помощью - Ajax. Для начала надо на нужной вам странице разместить код окна и самой кнопки. Начнем с кнопки.
1 2 3 4 5 6 | <?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 код окна, внутри которого и будет подгружаться содержимое нужных постов.
1 2 3 4 5 6 | <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 сами придумаете как хотите, а окну вот минимальные. Добавьте их в свой файл стилей.
1 2 3 | .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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 | 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 и функция что выводит нужный пост и части его содержимого.
1 2 3 4 5 6 | 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 могла работать в нашем файле.
Далее функция подгрузки поста:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | //---------- 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><?phpendwhile;exit;} |
Тут тоже просто. 2 события, чтобы эта функция дружила с Ajax WordPress, а далее сама функция. В начале получаем параметры для WP_Query , которая и выведет нужное содержимое в цикле.
Нас интересует 10-13 строка. Вот тут и задаете параметры что выводить. У меня в примере это ссылка на основной пост, внутри которой заголовок записи и функция что выводит первые 100 слов записи. Можете подключить полный вывод контента через функцию - the_content(), или миниатюру - the_post_thumbnail() и тд. Все что вам нужно можете вызывать внутри цикла.
Если все сделали правильно, то можно проверить сами. Метод проверенный и 100% рабочий, выручит вас, если вы столкнулись с той же задачей что и я.
На этом все, спасибо за внимание. 🙂
