Цель. Я хотел бы сделать динамическую страницу, которая позволяет посетителю выбрать месяц и год из раскрывающегося меню и изменить содержание (сообщения) на странице в соответствии с выбранными значениями.
В настоящее время я использую следующий код для отображения сообщений из определенной категории за определенный месяц и год.
<?php query_posts("cat=3&monthnum=12&year=2011"); ?> <?php if (have_posts()) : ?> <ul> <?php while (have_posts()) : the_post(); ?> <li> <?php the_title(); ?> <?php the_excerpt(); ?> </li> <?php endwhile; ?> </ul><?php endif; ?> Он работает хорошо, но я хотел бы сделать страницу динамической, чтобы посетитель мог выбрать месяц и год из выпадающего меню и изменить контент в соответствии с выбранными значениями. Я опубликовал фотографии, как это будет работать здесь: fivepotato.com/images/ex1.png и fivepotato.com/images/ex2.png.
Чтобы выполнить эту работу, я знаю, что мне нужно будет сделать значение monthnum переменной (которая берется из раскрывающегося списка:
<?php $monthvar = $_POST["month"]; query_posts("cat=3&monthnum=$monthvar&year=2011");?>
У меня нет большого опыта работы с Ajax, но я предполагаю, что мне нужно будет использовать его для того, чтобы один раз в месяц был выбран повторный фильтр содержимого из раскрывающегося меню.
Я нашел похожие запросы на следующем сайте: askthecssguy.com/2009/03/checkbox_filters_with_jquery_1.html
И я нашел рабочий пример, похожий на то, что я хотел бы сделать по адресу: http://www.babycarers.com/search?ajax=0&searchref=37609&start=0&lat=&lon=&city=&radius=0&spec1=1&spec2=1&spec3=1&spec4 = 1 & spec5 = 1 & spec6 = 1 & spec7 = 1 & inst1 = 1 & inst2 = 1 & inst3 = 1 & inst4 = 1 & inst5 = 1 & inst6 = 1 & inst7 = 1 & minfee = любое & maxfee = любое & av1 = 1 & ключевые слова = & страна = CA & рода = плата и resultsperpage = 10
Если бы кто-нибудь мог помочь мне с javascript / Ajax, необходимым для этого, я был бы очень благодарен.
Почти 1000 просмотров и ни одного комментария. Ну, я тоже нуждался в этом и решил это сделать. Я поделился приведенным ниже кодом JavaScript и WordPress для людей в отдаленном будущем. Это похоже на много, но это потому, что я определил некоторые функции jQuery, которые вы можете использовать позже с .extend . Все, что он делает, это поиск .content-filter элемента (выпадающего списка) с помощью CSS-класса .content-filter .
После обнаружения он использует идентификатор раскрывающегося списка, чтобы установить переменную GET в значение, выбранное в данный момент, затем перенаправляет на тот же URL-адрес и добавляет эти переменные GET. Например, если идентификатор раскрывающегося списка был product_filter , и это значение было установлено на date , то оно установило бы переменную GET product_filter=date . Это здорово, потому что он не заботится о ваших подробностях Wordpess – все, о чем он заботится, – это элемент 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); // eg 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. Все, что нам действительно нужно, это сгенерировать select с каким-то идентификатором и установить класс в .content-filter . Этот код запрашивает тип сообщения типа «post» или «product» и делает элемент select. Затем он возвращает переменную GET для удобства, и если ни один из них не установлен, по умолчанию используется значение «новейший». Обратите внимание, что массив $fields задает все различные значения orderby, которые вы хотите поддержать. Вы всегда можете получить к нему доступ в любом месте шаблона с $_GET['product_filter'] или $_GET['post_filter'] зависимости от вашего типа. Это означает, что на любой данной странице может существовать только один, но вы хотите, чтобы в противном случае jQuery не будет знать, что использовать. Вы можете расширить этот код, чтобы установить пользовательский идентификатор или все, что вам нравится позже.
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