如何为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的每个方法- 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 in高度。你说你分配了75 in的高度，但你也说你把它放在style.php里。因此，可能存在缓存问题，或者您可能将CSS放在错误的文件中。u-design-child/style.css显示350的高度。

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