如何给网站添加弹窗公告？-主题修改

2022年5月9日16:00:31 发表评论
微信搜一搜 ts小陈

微信号暂时无法添加好友，想提醒一下各位盆友。

发现只能是手动添加文字到微信号那里，属实有些麻烦。

搞了一段弹窗公告的代码，大家也可以直接食用。

食用方法直接添加到你的网站header里就行了。代码在文末

这种食用也不是很简单，每次都要操作源码比较麻烦，还是集成到主题设置中比较方便。

如何给网站添加弹窗公告？-主题修改

本站主题用的***（知道的一定知道），首先添加后台设置项

1、添加后台设置项

勾选显示后出现设置公告窗口

如何给网站添加弹窗公告？-主题修改

如何给网站添加弹窗公告？-主题修改

当然这里需要设计js的联动，不然点击是没反应的。

  1.     jQuery('#ts_gonggao').click(function() {
  2.     jQuery('#section-ts_gonggao1').fadeToggle(400);
  3. });
  5. if (jQuery('#ts_gonggao:checked').val() !== undefined) {
  6.     jQuery('#section-ts_gonggao1').show();
  7. }

2、前端调用

将公告源码放入单独php文件中，如我放在tsxcc/gg.php

在网站header里调用此文件，完成！

  1. <?php get_template_part('tsxcc/gg/gg'); ?>

源码详解：

外层 if (zm_get_option('ts_gonggao')) 如果启用则输出以下内容

内层调用文本框内容

<?php if ( zm_get_option('ts_gonggao1') ) { ?>

<?php echo stripslashes( zm_get_option('ts_gonggao1') ); ?>

<?php } ?>

如何给网站添加弹窗公告？-主题修改

测试后非常不错。

撒花

 

html代码

  1.   <!-- 公告 -->
  2.   <div class="layer"></div>
  3. <div id="globalAd">
  4.     <div id='hero-img' style="background-color: #1a95ff;background: linear-gradient(to left, #5dadf3 0, #4583ca 100%);">
  5.     </div>
  6.     <div id='profile-img'>
  7.         <img src="https://www.kqwq.com/wp-content/themes/xiaochen/img/lpgo114.png" />
  8.     </div>
  9.     <div id='content'>
  10.         <p style="font-size: 15px;font-weight: bold;">2022年5月2日公告</p>
  11.         <p style=" padding: 5px; ">微信小程序上线，欢迎体验！</p>
  12.         <p style="padding: 5px 0 20px 0;color: #f00;font-weight: 450;">微信暂时无法添加好友请12号后再试！</p>
  14.         <a onclick="closeGlobalAd();" class="btn btn-default" rel='nofollow'>朕已阅</a>
  15.         <a href="https://www.kqwq.com" onclick="redirectUrlToActive();" class="btn btn-default" rel='nofollow'>点击访问</a>
  16.     </div>
  17. </div>
  18.  <!-- 公告 -->

css

  1. a {
  2.     text-decoration: none!important
  3. }
  5. #globalAd {
  6.     max-width: 400px;
  7.     flex-basis: 100%;
  8.     margin: 0 auto;
  9.     background: #fff;
  10.     border-radius: 10px;
  11.     box-shadow: 0 0 30px rgba(0, 0, 0, .3);
  12.     -webkit-box-shadow: 0 0 30px rgba(0, 0, 0, .3);
  13.     overflow: hidden;
  14.     position: fixed;
  15.     display: none;
  16.     margin: 0 auto;
  17.     z-index: 10001
  18. }
  20. .layer {
  21.     width: 100%;
  22.     height: 100%;
  23.     position: fixed;
  24.     top: 0;
  25.     left: 0;
  26.     filter: alpha(opacity=50);
  27.     opacity: .5;
  28.     background: #000;
  29.     z-index: 1000;
  30.     display: none
  31. }
  33. #globalAd #hero-img {
  34.     width: 100%;
  35.     height: 100px;
  36.     background: #007bff
  37. }
  39. #globalAd #profile-img {
  40.     width: 80px;
  41.     height: 80px;
  42.     margin: -60px auto 0;
  43.     border: 6px solid #fff;
  44.     border-radius: 50%;
  45.     box-shadow: 0 0 5px rgba(90, 90, 90, .3)
  46. }
  48. #globalAd #profile-img img {
  49.     width: 100%;
  50.     background: #fff;
  51.     border-radius: 50%
  52. }
  54. #globalAd #content {
  55.     text-align: center;
  56.     width: 320px;
  57.     margin: 0 auto;
  58.     padding: 5px 0 20px
  59. }
  61. #container #content h1 {
  62.     font-size: 29px;
  63.     font-weight: 500;
  64.     margin: 50px 0 0
  65. }
  67. #globalAd #content p {
  68.     font-size: 15px;
  69.     font-weight: 400;
  70.     line-height: 1.8;
  71.     color: #666;
  72. }
  74. #globalAd #content a {
  75.     color: #ccc;
  76.     font-size: 14px;
  77.     margin: 0 10px;
  78.     transition: color .3s ease-in-out;
  79.     -webkit-transition: color .3s ease-in-out
  80. }
  82. #globalAd #content a:hover {
  83.     color: #007bff
  84. }
  86. #globalAd #content .btn {
  87.     background: none repeat scroll 0 0 #1ba1e2;
  88.     border: 0;
  89.     border-radius: 2px;
  90.     color: #fff!important;
  91.     cursor: pointer;
  92.     font-family: open sans, hiragino sans gb, microsoft yahei, wenquanyi micro hei, Arial, Verdana, Tahoma, sans-serif;
  93.     font-size: 14px;
  94.     padding: 6px 10%
  95. }
  97. #globalAd #content .btn:hover,
  98. .yanshibtn:hover {
  99.     background: none repeat scroll 0 0 #9b59b6;
  100.     border: 0;
  101.     border-radius: 2px;
  102.     color: #fff!important;
  103.     cursor: pointer;
  104.     font-family: open sans, hiragino sans gb, microsoft yahei, wenquanyi micro hei, Arial, Verdana, Tahoma, sans-serif;
  105.     font-size: 14px;
  106.     padding: 8px 10%
  107. }

js

  1. jQuery.cookie = function(name, value, options) {
  2.     if(typeof value != 'undefined') {
  3.         options = options || {};
  4.         if(value === null) {
  5.             value = '';
  6.             options.expires = -1;
  7.         }
  8.         var expires = '';
  9.         if(options.expires && (typeof options.expires == 'number' || options.expires.toUTCString)) {
  10.             var date;
  11.             if(typeof options.expires == 'number') {
  12.                 date = new Date();
  13.                 var totalTime = 24 * 3600;
  14.                 var hour = date.getHours();
  15.                 var minutes = date.getMinutes();
  16.                 var seconds = date.getSeconds();
  17.                 var pastTime = 3600 * hour + 60 * minutes + seconds;
  18.                 var leftTime = totalTime - pastTime;
  19.                 date.setTime(date.getTime() + (options.expires * leftTime * 1000));
  20.             } else {
  21.                 date = options.expires;
  22.             }
  23.             expires = '; expires=' + date.toUTCString();
  24.         }
  25.         var path = options.path ? '; path=' + (options.path) : '';
  26.         var domain = options.domain ? '; domain=' + (options.domain) : '';
  27.         var secure = options.secure ? '; secure' : '';
  28.         document.cookie = [name, '=', encodeURIComponent(value), expires, path, domain, secure].join('');
  29.     } else {
  30.         var cookieValue = null;
  31.         if(document.cookie && document.cookie != '') {
  32.             var cookies = document.cookie.split(';');
  33.             for(var i = 0; i < cookies.length; i++) {
  34.                 var cookie = jQuery.trim(cookies[i]);
  35.                 if(cookie.substring(0, name.length + 1) == (name + '=')) {
  36.                     cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
  37.                     break;
  38.                 }
  39.             }
  40.         }
  41.         return cookieValue;
  42.     }
  43. };
  44. $(function() {
  45.     var COOKIE_NAME = "tsxcc";
  46.     if($.cookie(COOKIE_NAME)) {
  47.         $(".layer").hide();
  48.         $("#globalAd").hide();
  49.     } else {
  50.         var tsxccH = $(window).height();
  51.         var tsxccW = $(window).width();
  52.         $(".layer").show();
  53.         $("#globalAd").css({
  54.             'top': tsxccH / 2 - $("#globalAd").height() / 2,
  55.             'left': tsxccW / 2 - $("#globalAd").width() / 2
  56.         });
  57.         $("#globalAd").slideDown(300, function() {
  58.             setTimeout("closeGloableAd()", '300000');
  59.         });
  60.         $.cookie(COOKIE_NAME, "tsxcc", {
  61.             path: '/',
  62.             expires: 1
  63.         });
  64.     }
  65. });
  67. function closeGlobalAd() {
  68.     $('#globalAd').hide();
  69.     $('.layer').hide();
  71. }
  73. function redirectUrlToActive() {
  74.     $('#globalAd').hide();
  75.     $('.layer').hide();
  76. }

 

 

 

 

小陈号卡
ts小陈

发表评论（不允许含有网址！）

:?: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :cry: :mrgreen: :neutral: :razz:

已登录用户不需要填写以下内容