我正在寻找一个解决方案/指导,如何在模板的左列中以分层方式列出帖子链接,当选择链接时,它会在右列中加载帖子,但整个页面不会刷新?
谢谢Deon
Update for Marfarma\'s help below
感谢您的回复。在阅读了许多页面和帖子后,我能够让它正常工作。我现在需要注意的一点是,右侧列中的链接的href值为#。我有一个主页设置,用户可以选择一条培训路径,将他们带到上面讨论的页面。但我在主页上也有单独的链接,以防用户想跳到特定的主题。因此,现在我的问题是,我可以对它们进行单独编码,并让它们转到单个帖子模板,但我更希望用户转到上面讨论的页面,并从列表中选择正确的链接主题。你知道如何做到这一点吗?我以某种方式假设了第一步,而不是将#作为href,我必须将正确的id/post-slug传递为href?然后我可以通过javascript链接到这些内容?谢谢你的帮助。下面是我使用的代码。
<?php
wp_enqueue_script( \'my-ajax-request\', get_stylesheet_directory_uri( __FILE__ ) . \'/js/ajax.js\' );
wp_localize_script( \'my-ajax-request\', \'MyAjax\', array( \'ajaxurl\' => admin_url( \'admin-ajax.php\' ) ) );
?>
<?php
global $wpdb;
global $post;
$querystr = "
SELECT * FROM $wpdb->posts
LEFT JOIN $wpdb->postmeta ON($wpdb->posts.ID = $wpdb->postmeta.post_id)
LEFT JOIN $wpdb->term_relationships ON($wpdb->posts.ID = $wpdb->term_relationships.object_id)
LEFT JOIN $wpdb->term_taxonomy ON($wpdb->term_relationships.term_taxonomy_id = $wpdb->term_taxonomy.term_taxonomy_id)
LEFT JOIN $wpdb->terms ON($wpdb->term_taxonomy.term_id = $wpdb->terms.term_id)
WHERE $wpdb->terms.name = \'pathologist\'
AND $wpdb->term_taxonomy.taxonomy = \'category\'
AND $wpdb->posts.post_status = \'publish\'
AND $wpdb->posts.post_type = \'post\'
AND $wpdb->postmeta.meta_key = \'order\'
ORDER BY $wpdb->postmeta.meta_value ASC
";
$pageposts = $wpdb->get_results($querystr, OBJECT);
?>
<?php if ($pageposts): ?>
<?php global $post; ?>
<div class="textwidget">
<ul id="nav">
<li class="list-title">Navigating your Workspace</li>
<?php foreach ($pageposts as $post): ?>
<?php setup_postdata($post); ?>
<li class="post" id="<?php the_ID(); ?>">
<a href="#" class="ajax-click" rel="bookmark" title="<?php the_title(); ?>">
<?php the_title(); ?></a>
</li>
<?php endforeach; ?>
</ul>
</div>
还有ajax。以上为js。
jQuery(document).ready(function() {
jQuery(".ajax-click").click(function() {
jQuery("#loading-animation").show();
var post_id = $(this).parent("li").attr("id");
var ajaxURL = MyAjax.ajaxurl;
jQuery.ajax({
type: \'POST\',
url: ajaxURL,
data: {"action": "load-content", post_id: post_id },
success: function(response) {
jQuery("#container-help-page").html(response);
jQuery("#loading-animation").hide();
return false;
}
});
});
});