如何为 wordpress 创建自定义（不使用插件）新闻自动收报机？

Question

我正在尝试在不使用任何插件的情况下为文字新闻创建自定义新闻代码。 我在JS领域很弱。需要 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;?>

CSS：

ul#ticker {
    width: 220px;
    height: 120px;
    overflow: hidden;
}

如何为此编写 javascript 代码以获得真正的新闻行情？

[编辑] 我创建了这个新闻代码：http://jsfiddle.net/riffaz/92s92k1d/，它在小提琴中运行良好。

我正在尝试将此代码添加到网站。为此，我将此代码放在 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);?>  
        <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>   

我把这行放到子主题style.php

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

然后在子主题 footer.php 上：我把以下代码（在标签正上方）：

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

它在我的主页上没有任何作用。它停留在它们在主页上的位置。但是，如果我去任何页面，它都可以正常工作。诡异的。任何想法如何解决这个问题？

http://www.ldjf.org/看右下角区域..页脚区域即将发生的事件

Answer 1

希望社区为您提供构建自定义 Javascript 工具的代码是一个很大的要求。我建议你看看一些 jQuery 文档。

你已经有了一个 PHP 帖子列表，所以从 jQuery 的 each 方法开始 - http://api.jquery.com/each/

然后为你的股票决定一些行为：

http://api.jquery.com/delay/

http://api.jquery.com/category/effects/sliding/

http://api.jquery.com/category/effects/fading/

我认为这些都是不错的起点。查看文档，使用一些示例代码进行更新。很高兴看看你放在一起的东西。祝你好运！

[编辑]

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

不过，我会对您的代码提出一些建议。最大的是我不会限制父元素的高度只是为了“隐藏”你的子元素。您已经在使用 jQuery 将其从视图中删除。在您再次需要它之前将其放在视线之外，而不是立即将其带回来。这将允许您的内容在高度可变的同时保持全视图并且不会从底部被切断。在您的 PHP 中，通常显示您的第一个 <li>，然后显示其他 <li style="display:none;">。然后使用 jQuery，遍历您的列表，根据需要打开和关闭可见性。我认为这会得到你想要的行为。看看这个http://jsfiddle.net/92s92k1d/21/