Отображение нескольких наборов элементов контента a из запроса WordPress с помощью javascript

Я пытаюсь, чтобы мои последние сообщения отображались в списке исчезающих содержимого с помощью java-скрипта. Я хочу вытащить 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> 

 <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 включен, хотя плагин. Этот код работает.