如何使用AJAX来改变分页在Word preSS [英] How to use AJAX to change pagination in Wordpress
本文介绍了如何使用AJAX来改变分页在Word preSS的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我设计一个字preSS childtheme基于主题为按标题排序客户端，其中的主要工作组合分页必须有能力逐年订单来更改每次用户点击，和整理收藏（使用分类分页）所有使用AJAX。
我有codeD以下
更新 我已经解决了自己的问题。我在呼唤不同的类，所有的过程都很好。以下更正code。
init.js：
$（函数（）{
VAR obra_links = $（select_date，.select_title，.select_collection。）;
VAR obra_archive = $（obra_archive。）;
obra_links.bind（'点击'，函数（）{
变量$ archive_class = $（本）.attr（类）;
$（本）.parent（）找到（选择。）removeClass移除（'选择'）。
$（本）.toggleClass（'选择'）;
obra_archive.fadeOut（500）;
$阿贾克斯（
MyAjax.url，{
键入：POST，
缓存：假的，
数据： {
动作：obra_date_toggle，
archive_class：$ archive_class
}，
成功：函数（new_archive）{
obra_archive.html（new_archive）;
}，
}）
obra_archive.fadeIn（500）;
}， 假）;
}）;
的functions.php：
`[...]`
功能childtheme_override_head_scripts（）{
如果（！is_admin（））{
// jQuery的谷歌的API
wp_deregister_script（'jQuery的'）;
wp_register_script（'jQuery的'，（http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js），FALSE）;
wp_enqueue_script（'jQuery的'）;
//自定义
wp_enqueue_script（初始化，JS'/init.js'，阵列（'jQuery的'），假的，假的）; //改变最后的值设置为true，但单独typekit。
// AJAX
wp_localize_script（初始化，MyAjax'，阵列（'URL'=＆GT; ADMIN_URL（管理-ajax.php'）））;
} add_action（'init'的，'childtheme_override_head_scripts'）;
功能select_date（）{
//新建查询
$ ARGS =阵列（
post_type'=＆GT; OBRA，
posts_per_page'=＆GT; '-1'，
排序依据=＆GT; '日期'，
为了'=＆GT; ASC，
//排序依据=＆GT; '标题'，
//'分类'=＆GT; colecciones
）; $ wp_query =新WP_Query（$参数）;
如果（$ wp_query`-＆GT;`have_posts（））{
而（$ wp_query-＆GT; have_posts（））：$ wp_query-＆GT; the_post（）; ？＆GT;
＆LT; DIV＆LT; PHP post_class（）＆GT？; ID =后＆LT; PHP the_ID（）;？＆GT;＆GT;
＆LT; H2＆GT;＆LT; A HREF =＆LT; PHP the_permalink（）＆GT;？相对=书签称号=永久链路到＆lt; PHP the_title_attribute（）;？＆GT;＆GT;＆LT; PHP the_title（）; ？＆GT;＆所述; / a取代;＆所述; / H2＆GT;
＆LT;小＆GT;＆LT; PHP the_time（'F JS，Y'）＆GT？; ＆LT;！ - 以＆lt;？php的the_author（）＆GT;？ - ＆GT;＆LT; /小＆GT;
＆LT; DIV CLASS =项＆GT;
＆LT; PHP the_content（'阅读本条目与放大器的休息; RAQUO;'）; ？＆GT;
＆LT; / DIV＆GT;
＆其中，P类=日志元＆GT;＆LT; PHP the_tags（'标签'，'，'，'＆LT; BR /＆GT;'）？; ？＆GT;发布与＆lt;？PHP的the_category（，）＆GT？; | ？＆LT; PHP edit_post_link（'编辑'，''，'|'）; ？＆GT; ＆LT; PHP comments_popup_link（没有评论，1条评论'，'％评论'）; ？＆GT;＆所述; / P＆GT;
＆LT; / DIV＆GT;＆LT; PHP
ENDWHILE;
？}其他{＆GT;
＆LT; H2类=中心＆GT;未发现＆LT; / H＆GT;
＆其中，P类=中心＆GT;很抱歉，但你正在寻找的东西不在此处＆lt; / P＆GT;
＆LT; PHP get_search_form（）;
}
}
功能select_title（）{
`[...]`
}
功能select_collection（）{
`[...]`
}
功能obra_date_toggle（）{
如果（使用isset（$ _ POST ['archive_class']））{
$ archive_class = $ _ POST ['archive_class'];
}
开关（$ archive_class）{
案select_date：
select_date（）;
死（）;
打破;
案select_title：
select_title（）;
死（）;
打破;
案select_collection：
select_collection（）;
死（）;
打破;
默认：
回声select_date（）;
//对于初始加载，不要死
}
} add_action（'wp_ajax_nopriv_obra_date_toggle'，'obra_date_toggle'）;
add_action（'wp_ajax_obra_date_toggle'，'obra_date_toggle'）;
obra.php：
＆LT; PHP
/ *
模板名称：OBRA
* /
//调用的header.php
get_header（）;
//行动挂钩，将上述#container的内容
thematic_abovecontainer（）;
？＆GT;
＆LT; DIV ID =容器＆GT;
＆LT; PHP thematic_abovecontent（）; ？＆GT;
＆LT; DIV ID =内容＆GT;
＆其中p为H.;
＆其中;一类=select_date的href =＃＆GT; Ordenar POR出生日期＆所述; / a取代;＆所述峰; br /＆GT;
＆其中;一类=select_title的href =＃＆GT; Ordenar POR吨＆安培; iacute;图洛＆所述; / a取代;＆所述峰; br /＆GT;
＆其中;一类=select_collection的href =＃＆GT; Ordenar POR colecci＆安培; oacute; N＆所述; / a取代;＆所述峰; br /＆GT;
＆所述; / P＆GT;
＆LT; DIV CLASS =obra_archive＆GT;＆LT; PHP
obra_date_toggle（）;
？＆GT;＆LT; / DIV＆GT;＆LT;！ - .obra存档 - ＆GT;＆LT; PHP
wp_reset_postdata（）;
//调用插件区页面顶部
get_sidebar（页面顶'）;
//调用插件区页面底部的
get_sidebar（页面底部'）;
？＆GT;＆LT; / DIV＆GT;＆LT;！ - ＃内容 - ＆GT;
＆LT; PHP thematic_belowcontent（）; ？＆GT;
＆LT; / DIV＆GT;＆LT;！ - #container的 - ＆GT;
＆LT; PHP
//行动挂钩，把内容放在下面的#container
thematic_belowcontainer（）;
//调用标准侧边栏
thematic_sidebar（）;
//调用footer.php
get_footer（）;
？＆GT;
解决方案
更新我已经解决了自己的问题。我在呼唤不同的类，所有的过程都很好。以下更正code。
I'm designing a wordpress childtheme based on thematic for a client in which the main work portfolio pagination has to be able to change every time the user clicks on "Order by year", "Order by title" and "Order by collection" (using taxonomy pagination) all using ajax. I've coded some functions following these two posts and these two answers, but it is not working. I'm completely new to ajax so please be patient with me! Any suggestions for a better approach to keep it DRY are very much appreciated. Thank you very much in advance.
UPDATE I've solved the problem myself. I was calling different classes, all the procedure was fine. Corrected code below.
init.js:
$(function(){
var obra_links = $(".select_date, .select_title, .select_collection");
var obra_archive = $(".obra_archive");
obra_links.bind('click', function() {
var $archive_class = $(this).attr("class");
$(this).parent().find('.selected').removeClass('selected');
$(this).toggleClass('selected');
obra_archive.fadeOut(500);
$.ajax(
MyAjax.url,{
type: 'POST',
cache: false,
data: {
action: 'obra_date_toggle',
archive_class: $archive_class
},
success: function(new_archive){
obra_archive.html(new_archive);
},
})
obra_archive.fadeIn(500);
}, false);
});
functions.php:
`[...]`
function childtheme_override_head_scripts() {
if ( !is_admin() ) {
// jQuery Google APIs
wp_deregister_script('jquery');
wp_register_script('jquery', ("http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"), false);
wp_enqueue_script('jquery');
// Custom
wp_enqueue_script('init', JS . '/init.js', array('jquery'), false, false); // Change last value to true but separate typekit.
// AJAX
wp_localize_script( 'init', 'MyAjax', array( 'url' => admin_url( 'admin-ajax.php' ) ) );
} add_action('init', 'childtheme_override_head_scripts');
function select_date() {
// New Query
$args = array(
'post_type' => 'obra',
'posts_per_page' => '-1',
'orderby' => 'date',
'order' => 'ASC',
//'orderby' => 'title',
//'taxonomy' => 'colecciones'
); $wp_query = new WP_Query( $args );
if ($wp_query`->`have_posts()) {
while ($wp_query->have_posts()) : $wp_query->the_post(); ?>
<div <?php post_class() ?> id="post-<?php the_ID(); ?>">
<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
<small><?php the_time('F jS, Y') ?> <!-- by <?php the_author() ?> --></small>
<div class="entry">
<?php the_content('Read the rest of this entry »'); ?>
</div>
<p class="postmetadata"><?php the_tags('Tags: ', ', ', '<br />'); ?> Posted in <?php the_category(', ') ?> | <?php edit_post_link('Edit', '', ' | '); ?> <?php comments_popup_link('No Comments ', '1 Comment ', '% Comments '); ?></p>
</div><?php
endwhile;
} else { ?>
<h2 class="center">Not Found</h2>
<p class="center">Sorry, but you are looking for something that isn't here.</p>
<?php get_search_form();
}
}
function select_title() {
`[...]`
}
function select_collection() {
`[...]`
}
function obra_date_toggle() {
if(isset($_POST['archive_class'])) {
$archive_class = $_POST['archive_class'];
}
switch ($archive_class) {
case "select_date":
select_date();
die();
break;
case "select_title":
select_title();
die();
break;
case "select_collection":
select_collection();
die();
break;
default:
echo select_date();
// For initial load, don't die
}
} add_action( 'wp_ajax_nopriv_obra_date_toggle', 'obra_date_toggle' );
add_action( 'wp_ajax_obra_date_toggle', 'obra_date_toggle' );
obra.php:
<?php
/*
Template Name: Obra
*/
// calling the header.php
get_header();
// action hook for placing content above #container
thematic_abovecontainer();
?>
<div id="container">
<?php thematic_abovecontent(); ?>
<div id="content">
<p>
<a class="select_date" href="#">Ordenar por fecha</a><br />
<a class="select_title" href="#">Ordenar por título</a><br />
<a class="select_collection" href="#">Ordenar por colección</a><br />
</p>
<div class="obra_archive"><?php
obra_date_toggle();
?></div><!-- .obra-archive --><?php
wp_reset_postdata();
// calling the widget area 'page-top'
get_sidebar('page-top');
// calling the widget area 'page-bottom'
get_sidebar('page-bottom');
?></div><!-- #content -->
<?php thematic_belowcontent(); ?>
</div><!-- #container -->
<?php
// action hook for placing content below #container
thematic_belowcontainer();
// calling the standard sidebar
thematic_sidebar();
// calling footer.php
get_footer();
?>
解决方案
UPDATE I've solved the problem myself. I was calling different classes, all the procedure was fine. Corrected code below.
这篇关于如何使用AJAX来改变分页在Word preSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
