2013-05-07 49 views
0

棘手的一個在這裏(我認爲)..我使用Isotope For Wordpress插件拉我的帖子到同位素網格。除了我一直無法獲得任何Adding Methods的工作,所有的工作都很完美。這是我想要什麼(與增加三個新的職位,以網格的目標):添加項目與同位素爲WordPress插件

var $container = $('.mintthemes_isotopes_container'); 
var $items = $('<div class="hentry" /> <div class="hentry" /> <div class="hentry" />'); 

$('#insert').click(function() { 
    $('.mintthemes_isotopes_container').isotope('insert', $items);  
}); 

$container.imagesLoaded(function(){ 
$container.isotope({ 
    animationEngine: 'best available', 
    transformsEnabled: true, 
    itemSelector: '.hentry', 
    masonry: { 
    columnWidth: 1, 
    gutterWidth: 5 
    }, 
}); 

我想我的問題出在什麼IM定義是什麼$項目是。上面的代碼添加了三個新的容器,樣式正確,但沒有內容。我想我需要調用實際的帖子而不是「.hentry」,但我不確定如何在插件提供的.js文件中執行該操作。這裏是如何在我的index.php中發佈帖子:

<?php mintthemes_isotopes(); ?> 

<?php 
      // Blog post query 
$linksPosts = new WP_Query(); 
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1; 

query_posts(array('post_type' => 'post', 'paged'=>$paged, 'showposts'=>3)); 
if (have_posts()) : while (have_posts()) : the_post();?> 

<div <?php post_class(); ?>> 

<div class=".mintthemes_isotopes_container"> 
<div class=".isotope-item"> 

<p><a href="<?php the_permalink(); ?>" title="<?php the_title();?>"><?php the_title();</p></a> 

</div> <!-- /isotope item --> 
</div> <!--/.mintthemes_isotopes_container--> 
</div> <!-- /.post_class --> 

<?php endwhile; endif; ?> 

我無法調用該php post_class();在一個外部的.js文件中?有沒有其他方法可以稱爲這些帖子?任何和所有的想法讚賞。

回答

1

您可以輕鬆插入更多元素 - 就像您一樣。不起作用的部分是添加頁面中不存在的元素。

對於頁面上'存在'的WordPress帖子,它必須以某種方式由PHP查詢。

您可以使用自定義查詢 - 就像你沒有使用WP_Query(): http://codex.wordpress.org/Class_Reference/WP_Query

您也可以使用類似get_posts: http://codex.wordpress.org/Template_Tags/get_posts

但除非你質疑他們通過WP不知何故,他們不不存在於頁面上,不能在運行時添加。

你可以做你想要的額外職位一個單獨的查詢,並把它們放在一個DIV與CSS設置爲顯示:無

這樣的話,你可以參考他們與你的JS,因爲他們將存在於頁。

事情是這樣的:

global $post; 

//First Query 
$args = array(
    'post_type' => "post", 
    'tax_query' => array(
    'relation' => 'AND', 
     array(
     'taxonomy' => 'category', 
     'field' => 'id', 
     'terms' => 'my_category_name, 
     'operator' => 'IN' 
     ) 
    )    
); 

$posts_main_group = get_posts($args); 

foreach($posts_main_group as $post) : 
    ?><div class="<?php post_class(); ?>" style="block;"><?php the_title(); ?></div><?php 
endforeach; 

//Second hidden query 
$args = array(
    'post_type' => "post", 
    'tax_query' => array(
    'relation' => 'AND', 
     array(
     'taxonomy' => 'category', 
     'field' => 'id', 
     'terms' => 'my_hidden_category_name_with_extra_posts, 
     'operator' => 'IN' 
     ) 
    )    
); 

$posts_extra_group = get_posts($args); 

foreach($posts_extra_group as $post) : 
    ?><div class="<?php post_class(); ?>" style="display:none;"><?php the_title(); ?></div><?php 
endforeach; 

這樣,您就可以針對使用jQuery隱藏的div並將其添加 - 現在,他們存在於頁面上。

另外請注意,爲了簡單起見,我在示例中爲內聯CSS做了內聯操作 - 但如果可能的話,您應該使用樣式表來完成此操作。