Вопрос или проблема
Существует способ использовать ajax для загрузки содержания из single.php или пользовательского .php, как ajax-single.php, как это делает эта страница: https://yellowimages.com/all/objects/apparel-mockups/, также как они показывают URL из поста, когда вы нажимаете на ссылку. Я надеюсь, кто-то сможет мне помочь с этим, потому что я пока не могу найти способ сделать это.
ИЗМЕНЕНИЕ 1: Я использую следующий код в моем index.php, чтобы загружать заголовки постов с постоянной ссылкой:
<div id="single-post-container"></div>
<div class="wrap">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<a class="post-link" rel="<?php the_ID(); ?>" href="https://wordpress.stackexchange.com/questions/258149/<?php the_permalink(); ?>">
<?php the_title(); ?>
</a>
<?php endwhile; endif; ?>
</div>
Этот код в моем файле single.php:
<?php
$post = get_post($_POST['id']);
?>
<div id="single-post post-<?php the_ID(); ?>">
<?php while (have_posts()) : the_post(); ?>
<?php the_title();?>
<?php the_content();?>
<?php endwhile;?>
</div>
И это в моем файле footer.php:
<script>
jQuery(document).ready(function($){
$.ajaxSetup({cache:false});
$(".post-link").click(function(){
var post_link = $(this).attr("href");
$("#single-post-container").html("загрузка содержания");
$("#single-post-container").load(post_link);
return false;
});
});
</script>
Это только загружает содержание внутри div, и у меня есть проблемы с отображением URL поста в адресной строке, также div не расширяется с содержимым, я надеюсь, кто-то сможет помочь мне с этим.
Если вы хотите загрузить файл PHP через AJAX, используйте код ниже.
function sendAJAX(){
$('#container').load(
"stuff.php", // url
{ // json объект данных, передаваемых на страницу
stuff: "все ваши данные идут сюда...",
moreStuff: "еще больше данных"
});
console.log('sendAJAX');
};
Дайте знать, если будут какие-либо сомнения.
Ответ или решение
Загружаем контент в всплывающем окне с помощью AJAX
Вам нужно создать функциональность, которая позволит загружать контент из файла single.php или ajax-single.php через AJAX, используя ссылки на посты, и обновлять URL в адресной строке браузера, как это реализовано на сайте yellowimages.com. Давайте шаг за шагом разберем, как это сделать.
Шаг 1: Подготовка HTML и PHP
В вашем файле index.php вы уже имеете код для загрузки заголовков постов с их ссылками. Однако перед тем как мы начнем работать с AJAX, мы уточним, как должны выглядеть ваши HTML-элементы:
<div id="single-post-container"></div>
<div class="wrap">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<a class="post-link" data-id="<?php the_ID(); ?>" href="<?php the_permalink(); ?>">
<?php the_title(); ?>
</a>
<?php endwhile; endif; ?>
</div>Шаг 2: AJAX-запрос в footer.php
AJAX-запрос будет выполнен, когда пользователь кликнет по ссылке поста. Мы используем jQuery для этого. Обновим ваш JavaScript-код в footer.php:
<script>
jQuery(document).ready(function($){
$.ajaxSetup({cache:false});
$(".post-link").click(function(e){
e.preventDefault(); // Останавливаем стандартное поведение ссылки
var postId = $(this).data("id"); // Получаем ID поста
var postLink = $(this).attr("href"); // Ссылка на пост
// Обновляем контейнер
$("#single-post-container").html("Загрузка контента...");
$.ajax({
url: "ajax-single.php", // URL для выполнения AJAX
type: "POST",
data: { id: postId }, // Передаем ID поста
success: function(data) {
$("#single-post-container").html(data); // Загружаем ответ
window.history.pushState({id: postId}, '', postLink); // Обновляем URL в адресной строке
},
error: function() {
$("#single-post-container").html("<p>Ошибка загрузки контента.</p>");
}
});
});
});
</script>Шаг 3: Обработка AJAX-запроса в ajax-single.php
Теперь вам нужно создать файл ajax-single.php, который будет обрабатывать AJAX-запрос и возвращать нужный контент:
<?php
// Подключаем WordPress (если нужно)
require_once('wp-load.php');
if ( isset($_POST['id']) ) {
$post = get_post($_POST['id']);
if ($post) {
setup_postdata($post); // Устанавливаем данные поста
// Выводим контент поста
echo '<div id="single-post post-' . get_the_ID() . '">';
echo '<h2>' . get_the_title() . '</h2>';
echo '<div>' . apply_filters('the_content', get_the_content()) . '</div>';
echo '</div>';
wp_reset_postdata(); // Сбрасываем данные поста
} else {
echo '<p>Пост не найден.</p>';
}
} else {
echo '<p>Ошибка: ID поста не передан.</p>';
}
?>Шаг 4: Обновление состояния при навигации
Теперь, когда вы загружаете контент через AJAX, важно корректно обрабатывать навигацию назад и вперед. Вы можете использовать событие popstate, чтобы перехватывать историю навигации:
window.onpopstate = function(event) {
if (event.state) {
var postId = event.state.id;
$.AJAXCallToLoadPost(postId); // Создайте вспомогательную функцию для загрузки поста
}
};
// Вспомогательная функция
function AJAXCallToLoadPost(postId) {
$("#single-post-container").html("Загрузка контента...");
$.ajax({
url: "ajax-single.php",
type: "POST",
data: { id: postId },
success: function(data) {
$("#single-post-container").html(data);
},
error: function() {
$("#single-post-container").html("<p>Ошибка загрузки контента.</p>");
}
});
}Заключение
Теперь у вас есть полноценный функционал для загрузки контента через AJAX в всплывающем окне. Пользователь будет видеть пост, когда он кликнет на ссылку, и URL будет обновляться без перезагрузки страницы. Это делает ваш сайт более интерактивным и современным. Не забудьте протестировать все функции и убедиться, что они работают во всех браузерах.