無法在WP中創建同位素過濾器/排序文章

我在一個網站上工作，我嘗試使用Isotope（http://isotope.metafizzy.co/docs/filtering.html）來過濾/排序我的帖子分類頁面。然而由於某種原因，無論我做什麼，我都無法使它工作。我需要一些緊急的幫助。這裏是我的代碼看起來像 - 首先，我有這個在我的主題functions.php中產生類無法在WP中創建同位素過濾器/排序文章

function isotope_categories() { 

     $terms = get_terms('videoscategory'); 

     $html = '<ul class="filters option-set" data-option-key="filter">'; 
     $html .= '<li><a href="#" data-option-value="*" class="selected">All items</a></li>'; 

     foreach ($terms as $term) { 


      $html .= "<li><a href='#filter' data-filter='.boxes {$term->name}'>{$term->name}</a></li>"; 
     } 

     $html .= '</ul>'; 

     echo $html; 
    }

然後我的分類頁面上我把它像這樣的列表 -

<nav id="options" class="option-set filter" data-option-key="filter">      
    <?php isotope_categories() ?> 
</nav>

的類別鏈接生成，但它們不像他們想象的那樣運行。這是我的循環的頁面 -

<div id="content"> 

<?php if (have_posts()) : while (have_posts()) : the_post(); ?> 


<?php $terms = get_the_terms($post->ID, 'videoscategory'); ?> 


<div class="boxes <?php foreach($terms as $term) echo ' ' . $term->name; ?>" style="width:100%; float:left; border-top:1px solid #ccc; margin-top:10px;"> 

// MY POST CONTENT AND DIVS 

</div> 
<?php endwhile; else: ?> 

<p><?php _e('Sorry, no posts matched your criteria.'); ?></p> 

<?php endif; ?> 
<?php if (function_exists("pagination")) { 
    pagination($additional_loop->max_num_pages); 
} ?> 
</div>

及其下的JS -

<script type="text/javascript"> 
    jQuery(document).ready(function(){ 
    var mycontainer = jQuery('#content'); 
    mycontainer.isotope({ 
    itemSelector: '.boxes' 
    }); 

    // filter items when filter link is clicked 
jQuery('#options a').click(function(){ 
    var selector = jQuery(this).attr('data-filter'); 
    mycontainer.isotope({ filter: selector }); 
    return false; 
    }); 

}); 
</script>

我不能讓它在所有的工作，雖然，我已經嘗試了一些方法來得到它工作，但我想我錯過了一些東西，或者只是做錯了。我需要修正或更改什麼才能過濾？

任何幫助，非常感謝。謝謝。

編輯：

通過使用鉻調試控制檯我能看到這個錯誤 - 遺漏的類型錯誤：對象的翻譯：有沒有方法「同位素」 - 林不知道它雖然意思。

來源

2012-12-19 Rich

這個問題應該移到堆棧溢出並用jquery-isotope標記。你更有可能得到一個很好的答案。 –

你可以給一個鏈接？ – dbeja

什麼鏈接？網站？如果是這樣，我無法這樣做，因爲它是爲了客戶而且還沒有完成。有沒有其他信息可以提供幫助？ – Rich

好吧，我能夠得到它的工作和過濾，除了有一些我必須制定出來，讓它按我想要的方式工作。就它的功能而言，我確實設法使其發揮作用。如果任何人有興趣 - 在這裏就是我所做的

首先我通過主題的functions.php和我的頭，使去確保最新的jQuery被列入和正確的腳本在內，我也確信它WASN 「T包括多次與他們在正確的順序（jQuery腳本第一則同位素腳本。）

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js'></script> <script type='text/javascript' src='<?php bloginfo('template_directory'); ?>/lib/jquery.isotope.min.js'></script>

接下來，我確信同位素的CSS是我的樣式表。

.isotope-item { 
    z-index: 2; 
} 

.isotope-hidden.isotope-item { 
    pointer-events: none; 
    z-index: 1; 
} 

.isotope, 
.isotope .isotope-item { 
    /* change duration value to whatever you like */ 
    -webkit-transition-duration: 0.8s; 
    -moz-transition-duration: 0.8s; 
      transition-duration: 0.8s; 
} 

.isotope { 
    -webkit-transition-property: height, width; 
    -moz-transition-property: height, width; 
      transition-property: height, width; 
} 

.isotope .isotope-item { 
    -webkit-transition-property: -webkit-transform, opacity; 
    -moz-transition-property: -moz-transform, opacity; 
      transition-property:   transform, opacity; 
}

之後，我編輯我爲篩選器列表功能的代碼（你可以看到原來在我的問題）

function isotope_categories() { 

    $terms = get_terms('videoscategory'); 

    $html = '<ul id="options">'; 
    $html .= '<li><a href="#" data-option-value="*" data-filter="*" class="selected">All items</a></li>'; 

    foreach ($terms as $term) { 


     $html .= "<li><a href='#' data-filter='.{$term->slug}' class='current'>{$term->name}</a></li>"; 
    } 

    $html .= '</ul>'; 

    echo $html; 
}

接下來，我改變了我的編碼爲我的循環 -

<div id="content" style="width: 94%;"> 
    <div id="isocontent"> 
    <?php if (have_posts()) : while (have_posts()) : the_post(); ?> 

    <?php $terms = get_the_terms($post->ID, 'videoscategory'); ?> 

    <div class="box<?php foreach($terms as $term) echo ' ' . $term->slug; ?>" style="width:100%; float:left; border-top:1px solid #ccc; margin-top:10px;"> 

    //MY DIVS AND CONTENT 

    </div> 

    <?php endwhile; else: ?> 

    <p><?php _e('Sorry, no posts matched your criteria.'); ?></p> 

    <?php endif; ?> 
    <div style="position:absolute;"> 
    <?php if (function_exists("pagination")) { 
pagination($additional_loop->max_num_pages); 
    } ?> 
    </div></div></div>

然後我編輯它下面的javascript代碼 -

<script type="text/javascript"> 
    $(document).ready(function(){ 
    var mycontainer = $('#isocontent'); 
mycontainer.isotope({ 
itemSelector: '.box' 
}); 

    // filter items when filter link is clicked 
    $('#options a').click(function(){ 
    var selector = jQuery(this).attr('data-filter'); 
    mycontainer.isotope({ filter: selector }); 
    return false; 
    }); 

    }); 
    </script>

做這一切後，我終於能夠得到同位素工作。我仍然有一些事情需要解決，以便我能夠按照自己的想法正常工作，但只要它能夠正常工作，這對我而言是非常有用的。

來源

2012-12-21 06:54:19 Rich

無法在WP中創建同位素過濾器/排序文章

回答

相關問題