0

Isotope jQuery プラグインを使用して作業ポートフォリオを表示するWordpress のVitruxテーマを使用しています。Isotope ではカテゴリを使用してアイテムを並べ替えることができますが、テーマ内では一度に 1 つのカテゴリでのみ並べ替えることができます (たとえば、「年」や「種類」ではなく、「年」または「種類」)。

ここでモックアップを見ることができます: http://snaprockandpop.samcampsall.co.uk/shoots/

投稿を並べ替える各カテゴリ アイテムに添付されている jQuery は次のとおりです。

function (){
                  var selector = $(this).attr('data-filter');
                  $container_isotope.isotope({ filter: selector });
                  var $parent = $(this).parents(".filter_list");
                  $parent.find(".active").removeClass('active');
                  $(".filter_list").not($parent).find("li").removeClass('active').first().addClass("active");
                  $(this).parent().addClass("active");
                  return false;
                }

Isotope のサイトから、複数のフィルターを使用できることがわかります。これに関する著者のメモを見つけました: http://jsfiddle.net/desandro/pJ6W8/31/

編集: テーマ ファイルを編集することで、適切なクラスとプロパティをフィルター リストに割り当てることができ (これらはページ ソースで確認できます)、クラスと ID をテーマのスタイリング:

$( function() {
var $container = $('#portfolio_container');

    $container.isotope({

      animationOptions: { duration: 300, easing: 'linear', queue: false },
      getSortData : {
      year : function ( $elem ) { return parseFloat( $elem.find('._year').text() ); },
      live-shows : function ( $elem ) { return parseFloat( $elem.find('._live-shows').text() ); }
      }
    });

var filters = {};
$('.ql_filter a').click(function(){

var $this = $(this);
 if ( $this.hasClass('selected') ) {
    return;
  }
  var $optionSet = $this.parents('.filter_list');
  $optionSet.find('.active').removeClass('active');
  $this.addClass('active');

  var group = $optionSet.attr('data-filter-group');
  filters[ group ] = $this.attr('data-filter');

  var isoFilters = [];
  for ( var prop in filters ) {
    isoFilters.push( filters[ prop ] )
  }

  var selector = isoFilters.join('');
  $container.isotope({ filter: selector });
  return false;
  });
});

2 つの (かなり重要な) こと:

1) 私はこれを正しく編集したという 100% ではありません。Rich の優れたコメントにもかかわらず、私はまだ理解を深めていません。「getSortData」セクションの設定方法については特に明確ではありません-正しいと思いますが、どんな入力でも素晴らしいでしょう。

2) この JavaScript が開始されているかどうかわかりません。現時点では、終了 head タグの直前に配置しましたが、ページを確認すると、上記の元のスクリプトがフィルター項目で実行されていることがわかります。

この段階での指針は素晴らしいでしょう！

4

2 に答える 2

2

意味がわかります。相互に排他的なフィルター値ではなく、両方のフィルターの共通部分を探しています。

簡単な答え：テーマベンダーに連絡して、交差フィルターを作成できるかどうかを確認してください。

より長い支援（答えではない）：

最終的な目標は、Vitruxテーマを希望どおりに機能させることです。
最初の目標は、jsfiddleコードが何をしているのかを理解することです。
コードを説明することで、最初の目標を処理できます。

// hook into the JQuery Document Load event and run an anonymous function
$( function() {

    // Create a variable called container
    // make container refer to the element with ID Container
    var $container = $('#container');

        // initialize isotope
        // Call the isotope method on the container element

        $container.isotope({

          // options...
          //distracting options

          animationOptions: { duration: 300, easing: 'linear', queue: false },
          getSortData : {
          price : function ( $elem ) { return parseFloat( $elem.find('.price').text() ); },
          size : function ( $elem ) { return parseFloat( $elem.find('.size').text() ); }
          }
        });

    // sorting button

    //for the anchor tag that has a class of 'pricelow', wire up an anonymous function to the click event

    $('a.pricelow').click(function(){

     //Rerun the isotope method when it is clicked, pass an array of options as a parameter
      $('#container').isotope({ sortBy : 'price',sortAscending : true });
     //return false for the anonymous function.  Not 100% sure why this is necessary but it has bitten me before
      return false;
    });

  //removed the rest of the click methods, because it does the same thing with different params

  //Here is what you are interested in understanding
  //Create an empty filters object
  var filters = {};

    // filter buttons
    //When an anchor tag with class filters is clicked, run our anonymous function
    $('.filters a').click(function(){

      //Create a variable that is the action anchor element
      var $this = $(this);
      // don't proceed if already selected by checking if a class of "selected" has already been applied to the anchor
      if ( $this.hasClass('selected') ) {
        return;
      }

      //Create an optionSet Variable, point it to the anchor's parent's class of "option-set"
      var $optionSet = $this.parents('.option-set');
      // change selected class
      //Inside the optionSet, find elements that match the "selected" class and then remove the "selected class"
      $optionSet.find('.selected').removeClass('selected');
      // set this (the anchor element) class to "selected"
      $this.addClass('selected');

      // store filter value in object
      // create a variable called 'group' that points to the optionsSet variable and grab the data-filter-group expando attribute
      var group = $optionSet.attr('data-filter-group');
      //Append to the filters object at the top of this section and set the data-filter-group value to the anchor tag's data-filter value
      filters[ group ] = $this.attr('data-filter');


      //create an isoFilters array variable
      var isoFilters = [];

      //Loop through each one of the items in filters (give the item an alias variable called 'prop'
      for ( var prop in filters ) {
      //push the prop into the isoFilters array (the opposite is pop)
        isoFilters.push( filters[ prop ] )
      //keep looping until there are no more items in the object
      }
      //create a variable called selector and turn the array into a string by joining all of the arrays together
      var selector = isoFilters.join('');
      //Like always, call the 'isotope' method of the 'container' element and pass our newly concatenated 'selector' string as the 'filter' option.
      $container.isotope({ filter: selector });
      //return false for some reason (maybe someone can expand on that)
      return false;
    });

});

次は、交差フィルターを処理するようにVitruxテーマを変更するという最終的な目標です。

これは少し注意が必要です。

  1. PHPからタグを自動的に生成して、カテゴリリンクと年フィルターを作成しました。したがって、PHPコードの変更は間違いなくあります。
  2. PHPの変更を処理するには、jsfiddleコードを変換する必要があります
于 2013-02-11T21:11:00.337 に答える
1

jQuery noconflict を使用して試してみてください。実際には、「$」を「jQuery」に置き換えて、動作するかどうかを確認してください。

Wordpress ではドル記号がうまく機能しません。

于 2013-03-20T17:26:33.497 に答える