Javascript 如何为wordpress创建一个自定义（不使用插件）新闻摘要？

我正在尝试为word press创建一个自定义新闻代码，而不使用任何插件。 我在这方面很弱。需要一只手在JS部分请

PHP小部件：

<?php
    $paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
    $author_id=$post->post_author;
    $args = array('cat'=> 7, 'posts_per_page' => 5, 'paged' => $paged, 'orderby' => date, 'order' => ASC );        
    query_posts( $args);

    while (have_posts()) : the_post();?>

        <ul class="list-6" id="ticker">
            <li>
                <h5>
                    <a class="upcomnig" href="<?php the_permalink() ?>" title="<?php the_title();?>">
                        <?php echo get_upcoming_date();?> 
                        <span style="font-size:16px; color: #fe5e08"><?PHP echo get_upcoming_title(); ?></span>
                    </a>
                </h5>
            </li>   
        </ul>

<?php   endwhile;?>

如何编写javascript代码来获取真正的新闻摘要

[编辑] 我创建了一个新闻代码：而且它在小提琴上工作得很好

我正在尝试将此代码添加到站点。为此，我将此代码放在一个PHP小部件上

然后在child-theme footer.php上：我将以下代码放在标记的正上方：

function tick(){
        $('.ticker li:first').slideUp( function () { $(this).appendTo($('.ticker')).slideDown(); });
    }
    setInterval(function(){ tick () }, 5000);

它在我的主页上没有任何作用。它停留在主页上的位置。但如果我去任何一页，它都可以正常工作。奇怪的有没有办法解决这个问题

---

看看右下角的区域。。页脚区域即将发生的事件

期望社区为您提供构建自定义Javascript工具的代码是一项艰巨的任务。我建议您查看一些jQuery文档

您已经有了PHP中的帖子列表，所以从jQuery的each方法开始-

然后决定您的股票代码的一些行为：

我认为这是一个很好的起点。试一试文档，用一些示例代码更新。很高兴看一看你把什么放在一起。祝你好运

[编辑]

因此，对于代码本身，我只看到一个问题：CSS在主题中为.ticker指定了一个350px的高度。你说你指定了一个75px的高度，但你也说你把它放在了style.php中。因此可能存在缓存问题，或者您可能将CSS放在了错误的文件中。u-design-child/style.css显示350px的高度

---

不过，我会对您的代码提出一些建议。最大的问题是，我不会仅仅为了“隐藏”子元素而限制父元素的高度。您已经在使用jQuery将其从视图中删除。在您再次需要它之前，请将其放在视线之外，而不是立即将其带回来。这将允许您的内容高度可变，同时保持在全视图中，并且不会从底部断开。在PHP中，正常显示第一个，然后显示其他。然后使用jQuery在列表中迭代，根据需要打开和关闭可见性。我想这会得到你想要的行为。看看这个

谢谢。你能看一下我编辑的详细资料吗？请看上面我的编辑。我想你很接近。提供了一些建议，谢谢。。现在问题解决了。问题是jQuery选择器而不是$。你可以在这里看到。啊，这就解释了为什么我看到它在工作。我不确定问题出在哪里：我还是建议你把你的内容放在幻灯片上，直到你真的想让它滑下来——只是稍微干净一点。此外，我发现fadeOut/fadeIn在使用项目符号时表现得更好—幻灯片会导致内容跳转。但我认为你总体上处于一个好的位置

<?php
    $paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
    $author_id=$post->post_author;
    $args = array('cat'=> 7, 'posts_per_page' => 5, 'paged' => $paged, 'orderby' => date, 'order' => ASC );        
    query_posts( $args);?>  
        <ul class="list-6 ticker" style="height: 82px;">
            <?PHP while (have_posts()) : the_post();?>
            <li>
                <h5>
                    <a class="upcomnig" href="<?php the_permalink() ?>" title="<?php the_title();?>">
                        <?php echo get_upcoming_date();?> 
                        <span style="font-size:16px; color: #fe5e08"><?PHP echo get_upcoming_title(); ?></span>
                    </a>
                </h5>
            </li>   
            <?php   endwhile;?> 
        </ul>   

.ticker {
    height: 75px;
    overflow: hidden;
}

function tick(){
        $('.ticker li:first').slideUp( function () { $(this).appendTo($('.ticker')).slideDown(); });
    }
    setInterval(function(){ tick () }, 5000);