約1,000件の再生回数であり、1つのコメントではありません。まあ、私もこれを必要とし、それを作ることにしました。私は遠く離れた将来の人々のために、以下のJavaScriptとWordpressのコードを共有しました。それは多くのように見えますが、それは後で.extendで使用できるいくつかのjQuery関数を定義したためです。 CSSクラス.content-filterでselect要素（ドロップダウン）を探しているだけです。
見つかったら、ドロップダウンのIDを使用してGET変数を現在選択されている値に設定し、同じURLにリダイレクトしてこれらのGET変数を追加します。たとえば、ドロップダウンのIDがproduct_filterで、値がdateに設定されている場合は、GET変数product_filter=dateが設定されます。あなたのワードピースの詳細を気にしないのですばらしいです - 気になるのはselect要素です。
// A bunch of helper methods for reading GET variables etc from the URL
jQuery.extend({
urlGetVars : function() {
var GET = {};
var tempGET = location.search;
tempGET = tempGET.replace('?', '').split('&');
for(var i in tempGET) {
var someVar = tempGET[i].split('=');
if (someVar.length == 2) {
GET[someVar[0]] = someVar[1];
}
}
return GET;
},
urlGetVar : function(name) {
return $.urlGetVars()[name];
},
serializeUrlVars : function(obj) {
var str = [];
for(var p in obj)
str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
return str.join("&");
},
currentUrl : function() {
return window.location.href.slice(0,window.location.href.indexOf('?'));
}
});
// Adds functionality to filter content using a dropdown
var ContentFilter = function ($) {
$(document).ready(function() {
// Return to a scroll position if exists
var scroll = $.urlGetVar('scroll');
if (typeof scroll != 'undefined') {
$(window).scrollTop(scroll);
}
// Prepare the filter dropdowns
$('.content-filter').each(function(){
var me = $(this);
// e.g. content-filter-product
var id = me.attr('id');
// Refresh with selected filter on change
var refresh = function() {
var GET = $.urlGetVars();
GET[id] = me.val();
// Save scroll position, return to this position on load
GET['scroll'] = $(window).scrollTop();
var newVar = $.currentUrl() + '?' + $.serializeUrlVars(GET);
window.location = newVar;
};
me.change(refresh);
});
});
}(jQuery);
ここではWordpressコードです。私たちが本当に必要とするのは、ある種のIDでselectを生成し、そのクラスを.content-filterに設定することだけです。このコードは 'post'や 'product'のような投稿タイプを求め、select要素を作成します。それは便宜上GET変数を返し、何も設定されていなければデフォルトは 'newest'になります。 $fields配列は、サポートしたい異なるすべてのorderby valuesを設定します。タイプに応じて、$_GET['product_filter']または$_GET['post_filter']のテンプレートのどこにでもいつでもアクセスできます。つまり、指定したページには1つしか存在できませんが、そうしないと、jQueryはどちらを使用するのかわかりません。カスタムIDや後で好きなものを設定するために、このコードを拡張することができます。
function ak_content_filter($post_type_id = 'post', &$filter_get_value, $echo = TRUE) {
$dropdown = '<div class="content-filter-wrapper">';
// The dropdown filter id for this post type
$filter_id = $post_type_id.'_filter';
// The actual dropdown
$dropdown .= '<label for="'. $filter_id .'">Filter</label><select id="'. $filter_id .'" class="content-filter" name="'. $filter_id .'">';
// The available ways of filtering, to sort you'd need to set that in the WP_Query later
$fields = array('date' => 'Newest', 'comment_count' => 'Most Popular', 'rand' => 'Random');
$filter_get_value = isset($_GET[$filter_id]) ? $_GET[$filter_id] : 'newest'; // default is 'newest'
foreach ($fields as $field_value=>$field_name) {
$dropdown .= '<option value="'. $field_value .'" '. selected($field_value, $filter_get_value, FALSE) .'>'. $field_name .'</option>';
}
$dropdown .= '</select></div>';
// Print or return
if ($echo) {
echo $dropdown;
} else {
return $dropdown;
}
}
ここで楽しい部分 - コンテンツページにまとめてください。すべての私たちの仕事は、いくつかの甘いと短いコードで報わ：
// This will fill $product_filter with $_GET['product_filter'] or 'newest' if it doesn't exist
ak_content_filter('product', $product_filter);
$args = array('post_type' => 'product', 'orderby' => $product_filter);
// This is just an example, you can use get_pages or whatever supports orderby
$loop = new WP_Query($args);
// OR, to avoid printing:
$dropdown = ak_content_filter('product', $product_filter, FALSE);
// ... some code ...
echo $dropdown;
私はカスタムポストタイプ「製品」を使用していますが、「ポスト」を使用している場合は、まさにそれを交換してください。誰かがおそらくこれをまだプラグインにしていない場合は、これをプラグインにしてください：P