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