WP顶部增加置顶文章的通知

获取某一分类的置顶文章,放在首页顶部轮播,一顿瞎写,将就用吧!

<?php
//顶部通知栏
add_action('wp_head', 'zke_function_notice', 21);
if ( ! function_exists( 'zke_function_notice' ) ) :
    function zke_function_notice() {
        if (get_option('sticky_posts') && is_page("home") && is_front_page()){ //此处增加了前台首页判断,如果不需要,可在此修改
            $args = array(
                        'post_type' => 'post',
                        'showposts' => 3,
                        //'orderby' => 'rand',
                        'post__in' => get_option('sticky_posts'),//获取置顶文章
                        'cat' => array(1),//指定分类id
            );
            
            echo "
                <style type='text/css'>
                /** 顶部通知栏 **/
                #zke_notice{
                font-weight: 300;
                font-size: 14px;
                color: #fff;
                padding: 4px;
                background-color: #CB244C;
                }
                .top_notice_text_box{
                max-width: 980px;
                margin: 0 auto;
                padding: 0 6px;
 
                }
                
                .top_notice_txt a{
                color:#fff;
                }
                
                .notice_ul{
                    list-style:none;
                    padding:0 10px!important;
                    white-space:nowrap;
                    overflow: hidden;
                    right:100px;
                }
                
                .notice_li + li:nth-child(2){
                    Display:none;
                }
                </style>";
               
        ?>
        <?php  $catquery = new WP_Query($args);?>
        <div id="zke_notice" class="black" style="height: 26px;overflow: hidden;">
            <div class="top_notice_text_box" >
                <span class="top_notice_txt">
                    <ul class="notice_ul" >
                        <?php while($catquery->have_posts()) : $catquery->the_post(); ?>
                            <li class="notice_li" style="position:relative;"><a target="_blank" href="https://www.zkcoi.com" style="font-weight:800;">通知:</a>
                            <a target="_blank" href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a></li>
                         
                        <?php endwhile; ?>
                        <?php wp_reset_query();?>
                        </ul>
                </span>
            </div>
        </div>
        
        
        <script>
        //有内容就显示,没内容就隐藏
            var divContent=jQuery(".notice_ul").html();
            if(divContent==0||divContent==null){
                jQuery("#zke_notice").hide()
            }else{
                jQuery("#zke_notice").show()
            
        
        //下拉隐藏,height为下拉高度(逻辑太拉胯,弃用,换成下面的)
        //   jQuery(function(){
        //    	jQuery(window).scroll(function(){
        //          var height = jQuery(window).scrollTop();
        //       	  	  if(height > 24.5){
        //       	  	  	document.getElementById('zke_notice').style.display = "none";
        //       	  	  }else{
        //       	  	  	document.getElementById('zke_notice').style.display = "block";
        //       	  	  };
        //    
        //    });
        //   });

       //下拉隐藏,上拉显示
        var t = 0,
            b = 0;
            jQuery(window).scroll(function(){
                t = jQuery(this).scrollTop();
                if(b < t){
                    document.getElementById('zke_notice').style.display = "none";
                }else{
                    document.getElementById('zke_notice').style.display = "block";
                }
                setTimeout(function(){
                    b = t
                }, 0)
            })
            
            //纵向轮播
             jQuery(function(){
                var num=jQuery(".notice_ul").find("li").length;
                if (num>1) {
                    setInterval(function(){ 
                    jQuery(".notice_ul").animate({
                        marginTop:"-15px"
                    },500,function(){
                        jQuery(this).css({marginTop : "0"}).find("li:first").appendTo(this);
                    });
                }, 4000);
                }
                        
            });

 
            
            //横向跑马灯 -50为位置重置数值,可酌情修改
            //  jQuery(function() {
            //                 var num = 0;
            //                 function goLeft() {
            //                     if (num == -50 ) {
            //                         num = 0;
            //                     }
            //                     num -= 1;
            //                     jQuery(".notice_ul").find("li:first").css({
            //                         left: num
            //                     })
            //                 }
            //                 //设置滚动速度
            //                 var timer = setInterval(goLeft, 80);
            //                 //设置鼠标经过时滚动停止
            //                 jQuery(".notice_ul").hover(function() {
            //                     clearInterval(timer);
            //                 },
            //                 function() {
            //                     timer = setInterval(goLeft, 20);
            //                 })
            //             })
            }
      
        </script>
<?php }
}
endif;

 

本文作者:𝙕𝙆𝘾𝙊𝙄

文章名称:WP顶部增加置顶文章的通知

文章链接:https://www.zkcoi.com/365up/program/2340.html

本站资源仅供个人学习交流,请于下载后24小时内删除,不允许用于商业用途,否则法律问题自行承担。

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
𝙕𝙆𝘾𝙊𝙄𝙕𝙆𝘾𝙊𝙄
上一篇 2022年10月9日
下一篇 2022年10月19日

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

私聊博主

立即联系
一般有空就回复

qrcode_web

微信扫码联系我

分享本页
返回顶部