Вопрос или проблема
У меня есть вопрос. Надеюсь, я смогу объяснить, что я пытаюсь сделать.
Я создал пользовательский тип записи “Ленты” и опубликовал 10 типов записей внутри этого CP.
Теперь, обычно, я просто бы проходил по CP и отображал их на странице при загрузке и отображал в DOM.
PHP обычно выводит все, когда вы загружаете страницу.
Что я пытаюсь сделать, я создал страницу, отображающую все сообщения пользовательского типа записи.
Но когда я нажимаю на одну запись, я хотел бы открыть модальное окно, которое я создал на HTML, CSS и JavaScript и которое работает статически.
Мне нужно только ОДНО модальное HTML-вывод для отображения конкретного открытого заголовка типа записи, контента и избранного изображения по запросу/клике только с использованием JS.
Я не хочу загружать 10 HTML-модальных DIV’ов для каждого типа записи, вместо этого загружать их только по запросу, когда это нужно.
Кто-нибудь знает, или может дать мне простой пример, как я могу это сделать, используя JavaScript или Ajax?
Заранее спасибо.
Я думаю, вы можете это сделать:
HTML:
<a class="view_post_details" href="#" post_id="<?php the_ID(); ?>">Посмотреть детали сообщения</a>
JS:
$(".view_post_details").click(function () {
var id_post = $(this).attr('post_id');
$.ajax({
type: 'POST',
url: '<?php echo admin_url('admin-ajax.php'); ?>',
data: {
'post_id': id_post,
'action': 'f711_get_post_content' //это имя AJAX метода, вызываемого в WordPress
}, success: function (result) {
alert(result);
},
error: function () {
alert("ошибка");
}
});
});
Ответ или решение
Конечно, позвольте мне предоставить вам подробное руководство по вашему вопросу о реализации подгрузки данных для кастомных типов записей WordPress с использованием JavaScript и Ajax, оптимизированное для SEO, и написанное на русском языке.
Введение
Задача, с которой вы столкнулись, заключается в том, чтобы отображать содержимое записей кастомного типа "Feeds" в модальном окне, используя JavaScript. Важно избежать загрузки всех данных при первоначальной загрузке страницы и использовать метод асинхронной подгрузки для повышения производительности.
Решение
Шаг 1: Подключение JavaScript и Ajax
Вы уже создали ссылку, через которую пользователи могут запрашивать дополнительные данные. Теперь необходимо реализовать Ajax-запрос для получения информации.
HTML:
<a class="view_post_details" href="#" data-post-id="<?php the_ID(); ?>">View Post Details</a>Используйте атрибут data-post-id, чтобы следовать современным стандартам HTML5.
JavaScript:
$(document).ready(function() {
$(".view_post_details").click(function(e) {
e.preventDefault(); // Предотвращаем стандартное поведение ссылки
var postId = $(this).data('post-id');
$.ajax({
type: 'POST',
url: '<?php echo admin_url('admin-ajax.php'); ?>',
data: {
'action': 'f711_get_post_content',
'post_id': postId
},
success: function(response) {
// Здесь размещаем код для отображения модального окна
displayModal(response);
},
error: function() {
alert("Произошла ошибка при загрузке данных.");
}
});
});
});
function displayModal(content) {
// Функция для отображения модального содержимого
$('#modal-content').html(content);
$('#my-modal').show();
}Шаг 2: Серверная часть: обработка Ajax-запроса в WordPress
В functions.php вашей темы добавьте следующий код для обработки Ajax-запроса:
add_action('wp_ajax_f711_get_post_content', 'f711_get_post_content');
add_action('wp_ajax_nopriv_f711_get_post_content', 'f711_get_post_content');
function f711_get_post_content() {
$post_id = intval($_POST['post_id']);
if (!$post_id) {
wp_send_json_error('Некорректный идентификатор записи');
}
$post = get_post($post_id);
if (!$post) {
wp_send_json_error('Запись не найдена');
}
ob_start();
?>
<h2><?php echo esc_html($post->post_title); ?></h2>
<div><?php echo wp_kses_post($post->post_content); ?></div>
<?php if (has_post_thumbnail($post_id)) : ?>
<div><?php echo get_the_post_thumbnail($post_id, 'full'); ?></div>
<?php endif; ?>
<?php
$output = ob_get_clean();
wp_send_json_success($output);
}Заключение
Такой подход позволит вам динамически загружать содержимое записей по требованию пользователя, что не только оптимизирует загрузку страницы, но и улучшает пользовательский опыт. Убедитесь, что ваш код корректно обрабатывает все возможные ошибки, чтобы избежать непредвиденных сбоев.
Этот метод, соответствующий принципам SEO, качественно улучшит производительность вашего сайта, поскольку основное содержимое загружается только при необходимости, минимизируя нагрузку на сервер.