Я отправил пару дней назад вопрос о том, как Прокрутить до единственного сообщения в пользовательском шаблоне Wordpress, который я разрабатываю. То, что мне нужно в оболочке ореха, - это загрузить отдельную запись в определенный DIV, когда нажимается конкретная ссылка, а затем прокручивается вниз до этого DIV, содержащего только что загруженный контент. Учитывая динамический характер контента Wordpress или любого другого CMS, URL-адрес этой ссылки не может быть абсолютным.
К сожалению, в тот момент времени не было никакого конкретного ответа, поэтому я решил немного откинуться. И поскольку основная проблема заключалась в том, чтобы динамически загружать контент, я решил увеличить масштаб работы с AJAX на Wordpress:
До сих пор я получил небольшую идею из большой публикации (Загрузка сообщений WordPress с помощью Ajax и jQuery) Эмануэле Феронато. Он в основном сохраняет идентификатор сообщения в атрибуте rel кликаемой ссылки, а затем вызывает его. Ну, есть еще несколько шагов, чтобы сделать эту работу, но причина, по которой я упоминаю только идентификатор сообщения, заключается в том, что, похоже, это единственная часть уравнения, которая неправильна; идентификатор post загружается в атрибут rel rel, но не загружается в функцию .load.
Просто, чтобы дать вам лучшее представление о том, что я получил в своей разметке:
THE AJAX/JQUERY IN HEADER.PHP
$(document).ready(function(){
$.ajaxSetup({cache:false});
$(".trick").click(function(){
var post_id = $(this).attr("rel");
$("#single-home-container").html("loading...");
$("#single-home-container").load("http://<?php echo $_SERVER[HTTP_HOST]; ?>/single-home/",{id:post_id});
return false;
});
});
index.php
<?php get_header();?>
<!--home-->
<div id="home">
<!--home-bg-->
<img class="home-bg" src="<?php bloginfo('template_url');?>/images/home-bg.jpg" />
<!--home-bg-->
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<a class="trick" rel="<?php the_ID(); ?>" href="<?php the_permalink();?>">
<div class="box element col<?php echo rand(2,4); ?>" id="<?php $category = get_the_category(); echo $category[0]->cat_name; ?>">
<?php the_post_thumbnail(); ?>
<span class="title"><?php the_title(); ?></span>
<span class="ex"><?php the_excerpt(); ?></span>
</div>
</a>
<?php endwhile; endif; ?>
</div>
<!--home-->
<div id="single-home-container"></div>
SINGLE-HOME.PHP(ЭТО ТАМОЖЕННЫЙ ШАБЛОН)
<?php
/*
Template Name: single-home
*/
?>
<?php
$post = get_post($_POST['id']);
?>
<!--single-home-->
<div id="single-home post-<?php the_ID(); ?>">
<!--single-home-bg-->
<div class="single-home-bg">
</div>
<!--single-home-bg-->
<?php while (have_posts()) : the_post(); ?>
<!--sh-image-->
<div class="sh-image">
<?php the_post_thumbnail(); ?>
</div>
<!--sh-image-->
<!--sh-post-->
<div class="sh-post">
<!--sh-cat-date-->
<div class="sh-cat-date">
<?php
$category = get_the_category();
echo $category[0]->cat_name;
?>
- <?php the_time('l, F jS, Y') ?>
</div>
<!--sh-cat-date-->
<!--sh-title-->
<div class="sh-title">
<?php the_title();?>
</div>
<!--sh-title-->
<!--sh-excerpt-->
<div class="sh-excerpt">
<?php the_excerpt();?>
</div>
<!--sh-excerpt-->
<!--sh-content-->
<div class="sh-content">
<?php the_content();?>
</div>
<!--sh-content-->
</div>
<!--sh-post-->
<?php endwhile;?>
<div class="clearfix"></div>
</div>
<!--single-home-->
Только для записи: когда почтовый идентификатор не загрузился, я попытался установить эту тему Kubrick, используемую в демо-версии Emanuele Feronato, и внес необходимые изменения в соответствии с его руководством, но ничего не получилось.
Кто-нибудь знает, что происходит, или есть ли другой способ динамической загрузки идентификатора сообщения в функцию .load?
Ну, удачи и кофе с сигаретами мне удалось решить проблему:
Вот что я сделал:
1. Проверьте, зарегистрирован ли идентификатор сообщения в атрибуте rel и правильно ли загружен в переменной post_id
Я вставил обратный вызов обратно в фрагмент AJAX/JQUERY, чтобы увидеть, был ли идентификатор сообщения даже загружен в переменную post_id вправо. Вот как это выглядело:
$(document).ready(function(){
$.ajaxSetup({cache:false});
$(".trick").click(function(){
var post_id = $(this).attr("rel");
alert(post_id);
$("#single-home-container").html("loading...");
$("#single-home-container").load("http://<?php echo $_SERVER[HTTP_HOST]; ?>/single-home/",{id:post_id});
return false;
});
});
Итак, когда я нажал на ссылку, обратный вызов дал точный идентификатор сообщения, связанный с этим сообщением. Эта проблема изолировала проблему вплоть до URL-адреса, определенного в функции .load(). Казалось, что идентификатор сообщения просто не достаточен для загрузки сообщения в определенный DIV.
2. Измените атрибут rel rel ссылки из post ID, чтобы отправить постоянную ссылку
Я решил, что, поскольку идентификатор сообщения явно не работает, я вместо этого использовал бы тег постоянной ссылки в атрибуте rel rel. Вот как он ссылается на rel, как раньше:
<a class="trick" rel="<?php the_ID(); ?>" href="<?php the_permalink();?>"></a>
И вот как это выглядит сейчас:
<a class="trick" rel="<?php the_permalink ?>" href="<?php the_permalink();?>"></a>
3. Редактировать .load() function URL/value
После этого мне пришлось внести изменения в фрагмент AJAX/JQUERY, чтобы он больше не использовал идентификатор сообщения:
$(document).ready(function(){
$.ajaxSetup({cache:false});
$(".trick").click(function(){
var post_link = $(this).attr("rel");
$("#single-home-container").html("loading...");
$("#single-home-container").load(post_link);
return false;
});
});
Как вы можете видеть из вышеизложенного, я взял значение атрибута rel rel (которое теперь является постоянным сообщением) и перебросило его в переменную post_link. Это позволяет мне просто взять эту переменную и поместить ее в функцию .load(), заменив http://<?php echo $_SERVER[HTTP_HOST]; ?>/single-home/",{id:post_id}
, которая явно не работает.
VOILA! Проблема решена.
Хотя мне еще предстоит проверить это, я считаю, что использование постоянной ссылки в этом случае фактически исключает необходимость изменения структуры permalink в Wordpress, как указано Emanuele Feronato в его post.
Итак, если кто-то намерен динамически загружать сообщения Wordpress в определенный DIV, вы, вероятно, можете попробовать это!
Вместо использования:
var post_id = $(this).attr("rel");
вам нужно напрямую получить href. Они оба одинаковы.
var post_id = $(this).attr("href");
Это помогает с двумя вещами: