Question

这里很棘手（我认为）..我正在使用Isotope For Wordpress插件将我的帖子拉到同位素网格中。一切都很完美，除了我无法让任何Adding Methods工作。这是我正在尝试的（目标是在网格中添加三个新帖子）：

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
    },
});

我认为我的问题在于定义$ items的内容。上面的代码添加了三个正确设置样式的新容器，但没有内容。我想我需要调用实际的帖子而不是“.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文件中吗？还有其他方法可以称这些帖子吗？任何和所有的想法都赞赏。

Answer 1

您可以轻松插入更多元素 - 就像您一样。无效的部分是添加页面上不存在的元素。

对于页面上“存在”的WordPress帖子，必须以某种方式由PHP查询。

您可以使用自定义查询 - 就像使用WP_Query（）一样： http://codex.wordpress.org/Class_Reference/WP_Query

你也可以使用像get_posts这样的东西： http://codex.wordpress.org/Template_Tags/get_posts

但除非你以某种方式通过WP查询它们，否则它们在页面上不存在，无法在运行时添加。

你可以为你想要的额外帖子做一个单独的查询，并将它们放在一个设置为CSS的div中：none

这样，你可以用你的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内联 - 但如果可能的话，您应该使用样式表来执行此操作。

使用Isotope for Wordpress插件添加项目

1 个答案: