投稿に基づく WordPress サイトを持っていますが、投稿を ajax でフィルタリングしたいと考えています。
トリッキーな部分は、「ケース」から「写真」までフィルタリングしたい場合、これには2つの異なるテンプレートがあることです.
少しの php でこれを管理し、the_template_part を変更することはできますが、それによってページがリロードされますが、これはやりたくないことです。
フィルター機能を完了するために ajax リクエストを実行しようとしています。
私の.js
$('a[rel="filter"]').click(function() {
var filter = $(this).attr('id');
$('.checked').removeClass('checked');
$(this).parent().addClass('checked');
$.ajax({
url: '/wp-admin/admin-ajax.php',
data: window.location = '#?filter=' + filter,
success: function() {
$('#content').children().fadeOut(549);
$('#content').html(data).fadeIn(549);
}
});
console.log('Filter ' + $(this).attr('id') + ' clicked');
});
これは、私の Index.php の template_part を変更するための php です。
$type = ($_GET['filter'] == '') ? 'projects' : $_GET['filter'];
<?php
get_template_part($type);
?>
これを達成できますか、それとも考え直す必要がありますか?
これは実際のアドレスをプレーンテキストで返すだけです
$('a[rel="filter"]').click(function() {
var filter = $(this).attr('href');
$('.checked').removeClass('checked');
$(this).parent().addClass('checked');
$.ajax({
url: 'wp-admin/admin-ajax.php',
//url: 'url' + filter,
data: {
filter: filter
},
success: function(html) {
$('#content').children().fadeOut(549);
$('#content').html(filter).fadeIn(549);
console.log(filter);
console.log("Success");
},
error: function() {
console.log('No can do')
}
});
console.log('Filter ' + filter + ' clicked');
return false;
});
(ケース、写真、モーション) を表す異なるクエリとテンプレートを含む 3 つのページがあり、フロントページでフィルター可能にしたいとします。私は1ページのサイトに取り組んでいます。