之前发了一篇带日期时间的LED滚动广告屏文章,详见下方链接。我个人是喜欢用后台解决前端显示问题的,这个LED广告屏也不例外,因为一直没时间就搁置了,趁着年后上班事情不多赶紧给捣鼓出来了。分享给需要的朋友们。

这款LED广告滚动屏和之前纯代码版的一样,也支持多条广告内容显示且会滚动显示。不同之处在于后台版的每条广告内容实现了全UI操作且能够单独设置颜色、内容、链接。直接看食用方法吧

func.php或functions.php中加入以下代码

//LED广告开始 zuoxm
function zuoxm_ledads(){
    $led_ads_fields=_pz('ZUOXM_LEDADS_CONTENT');
    $led_ads_img=_pz("ZUOXM_LEDADS_IMG");
    if (!empty($led_ads_fields)){
        $led_ads = '<style>
                .studytextgzbox {
                  background:   #F9F9F9; 
                  border: 1px solid #999999;
                  margin: 1px;
                  text-align:center;  
                  float: left;
                  line-height: 28px;
                  height: 28px;
                  overflow: hidden;
                  width: 236px;
                  }
                .zzbuluoled:after {
                    content: ".";
                    display: block;
                    height: 0;
                    clear: both;
                    visibility: hidden;
                }
                @media (max-width: 768px){.zzbuluoled{display: none;}}//注释这行则手机端也会显示LED
                .wp zzbuluoled{
                    margin-top:0px;
                }
                #systimeshow{
                    float: left;
                    margin-top: 10px; 
                    font-weight:bolder; 
                    color:#FF0000;
                    font-size:16px;
                    font-family: "微软正黑体","黑体_GB2312","微软正黑体"; 
                    width: 130px;
                }
                .zxm_led{
                    background: url("'.$led_ads_img.'");
                    text-align: center; 
                    height:80px; 
                    border: 0px solid #E8EFF5;
                }
                .zzbuluoled_sx{
                    width:auto;
                    overflow:hidden;
                    height:80px;
                    line-height:80px;
                    text-align:left;
                }
                .p{
                    padding:0px 10px 0px 16px;
                    vertical-align:middle;
                    height:80px;
                    overflow:hidden;
                }
                .txt{
                    font-weight:900;
                    font-size: 60px;
                    line-height:80px;
                }
        </style>
        <div class="container fluid-widget">
            <div class="widget_text zib-widget widget_custom_html">
                <div class="textwidget custom-html-widget">
                    <div class="wp zzbuluoled">
                        <div class="zxm_led">
                            <div id="systimeshow"></div>
                            <script language="javascript">
                                function getCurDate()
                                    {
                                         var d = new Date();
                                         var week;
                                         switch (d.getDay()){
                                             case 1: week="星期一"; break;
                                             case 2: week="星期二"; break;
                                             case 3: week="星期三"; break;
                                             case 4: week="星期四"; break;
                                             case 5: week="星期五"; break;
                                             case 6: week="星期六"; break;
                                             default: week="星期天";
                                         }
                                         var years = d.getFullYear();
                                         var month = add_zero(d.getMonth()+1);
                                         var days = add_zero(d.getDate());
                                         var hours = add_zero(d.getHours());
                                         var minutes = add_zero(d.getMinutes());
                                         var seconds=add_zero(d.getSeconds());
                                    
                                        var ndate = years+"年"+month+"月"+days+"日"+"<br>"+hours+":"+minutes+":"+seconds+"&nbsp"+week+"&nbsp";
                                    
                                        var divT=document.getElementById("systimeshow"); 
                                        divT.innerHTML= ndate;
                                    }
                                function add_zero(temp)
                                    {
                                         if(temp<10) return "0"+temp;
                                         else return temp;
                                    }
                                setInterval("getCurDate()",100);
                            </script>
                            <div id="zzbuluoled_sx">
                                <div id="zzbuluoled_sx1" > 
                                    <p class="p">
                                        <marquee direction="lelf" scrollamount="5">
                                            <strong>';
                foreach ($led_ads_fields as $ledads){
                    $ledurl=$ledads['ledadsurl'];
                    $ledtxt=$ledads['ledadstxt'];
                    $ledcolor=$ledads['ledadstxtcolor'];
                    $led_ads.='<a href="'.$ledurl.'" target="blank"><span class="txt" style="color:'.$ledcolor.'">'.$ledtxt.'&nbsp</span></a>';
                }
                                            $led_ads.='</strong>
                                        </marquee>
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>';
    }
    return $led_ads;
}
//LED广告结束 zuoxm

inc/options/admin-options.php中加入以下代码(我把该功能和之前的广告管理放在一起,所以代码也是放在广告管理模块中的,如果没用我之前的广告管理代码的请自行修改选项放置的位置,这里就不手把手教了)

array(
                'id'    =>'ZUOXM_LEDADS_IMG',
                'title' =>'LED背景',
                'default' => '',
                'preview' => true,
                'library' => 'image',
                'type'    => 'upload',
                ),
            array(
                'id'          =>'ZUOXM_LEDADS_CONTENT',
                'type'        =>'group',
                'button_title'=>'添加LED广告',
                'title'       =>'LED广告位',
                'subtitle'    =>'LED文字广告位管理',
                'desc'        =>'滚动LED广告位项目管理,你可以在此处新增、修改、删除LED广告内容',
                'default'     =>array(),
                'class'       => 'compact',
                'fields'      =>array(
                    array(
                        'id'    =>'ledadstxt',
                        'title' =>'广告内容',
                        'type'  =>'text',
                        'default'=>'上网的蜗牛欢迎您',
                        ),
                    array(
                        'id'    =>'ledadsurl',
                        'title' =>'广告文本链接',
                        'type'  =>'text',
                        'desc'  =>'广告文本跳转的链接URL,只需填网址就行,可为空',
                        'default'=>'https://www.zxmvps.com',
                        'class'       => 'compact',
                        ),
                    array(
                        'id'     =>'ledadstxtcolor',
                        'title'    => ' ',
                        'subtitle' => '广告文本颜色',
                        'type'   =>'color',
                        'class'    => 'compact',
                        'default'  => "#002ae8",
                        ),
                    ),
            ),

然后还要在子比主题根目录的header.php中调用,我放在<body>后面

<?php echo zuoxm_ledads();?>

以上操作完成后即可显示LED广告了,如果后台没有广告内容则不会显示LED屏。

hmoban主题是根据ripro二开的主题,极致后台体验,无插件,集成会员系统
双柚主题 » WordPress后台添加带日期时间的LED滚动广告屏代码