使用 javascript 显示来自 Wordpress 查询的多组内容项答案

【问题标题】：Display multiple sets of content items a from a Wordpress query with javascript使用 javascript 显示来自 Wordpress 查询的多组内容项
【发布时间】：2014-08-13 12:04:24
【问题描述】：

我正在尝试使用 java-script 让我最近的帖子显示在褪色的内容列表中。我想提取 12 个最新帖子，然后一次显示 4 个，从最近到最少。

这些是我的查询详情：

<?php 

$my_query = new WP_Query('showposts=12');
while ($my_query->have_posts()) : $my_query->the_post(); 

?>

<?php

if (strlen(the_title('','',FALSE)) > 80) {
$title_short = substr(the_title('','',FALSE), 0, 80);
preg_match('/^(.*)\s/s', $title_short, $matches);
if ($matches[1]) $title_short = $matches[1];
$title_short = $title_short.'...';
}
else
{
$title_short = the_title('','',FALSE);
}

?>

我希望它们在此脚本中正确显示：

<script>
        var $items = $('#marquee li'),
            i = 0;

    function slide() {
        var index = i % $items.length;
        $items.hide().removeClass('curr').slice(index, index +4).show('fade').addClass('curr');
        i += 4;
        setTimeout(slide, 4000);
    };

    slide();
</script>

这就是我的上下文的组织方式：

<div id="mholder">

<ul id="marquee">

<li><div class="marquee" style="height: auto">

<a title="<?php echo the_title() ?>" href="<?php the_permalink() ?>"><?php echo $title_short ?></a><span><small><br/><?php the_time('F jS, g:i a') ?></small></span>

</div></li>
</ul>

</div>

【问题讨论】：

标签： javascript php html-lists wordpress

【解决方案1】：

<head>
<script data-require="jquery@*" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>

<div class="newsblock">

<ul id="newgall">
<?php
//display 10 posts with title and date
$args=array(
  'post_type' => 'post',
  'post_status' => 'publish',
  'post_category' => '123',
  'posts_per_page' => 12,
  'caller_get_posts'=> 1
);
$my_query = null;
$my_query = new WP_Query($args);
if( $my_query->have_posts() ) {

  while ($my_query->have_posts()) : $my_query->the_post(); 
?>

    <li>
    <p>
    <a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a> 
    <br/><?php the_time('F jS, g:i a') ?>
    <br/>
    </p>
    </li>

    <?php
  endwhile;
}
wp_reset_query();  // Restore global post data stomped by the_post().
?>
  </ul>
</div>          
<script>
        var $items = $('#newgall li'),
            i = 0;

        function slide() {
            var index = i % $items.length;
            $items.hide().removeClass('curr').slice(index, index +4).show('fade').addClass('curr');
            i += 4;
            setTimeout(slide, 400);
        };

        slide();
</script>
    </body>

确保通过插件启用 PHP。此代码有效。

【讨论】：