0

这里很棘手（我认为）。我正在使用Isotope For 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
    },
});

我认为我的问题在于我定义了 $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 文件中对吗？还有其他方法可以调用这些帖子吗？任何和所有的想法表示赞赏。

4

1 回答 1

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 设置为 display: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 内联 - 但如果可能，您应该使用样式表来执行此操作。

于 2013-05-07T17:45:53.920 回答