Zibll主题添加活动倒计时代码–Zibll专属教程(无文章)–无无无无无

Zibll主题文章标签美化–Zibll专属教程

前言

众所周知zibll子比主题是一个非常优秀的WordPress博客主题（本站也在采用本主题），但作者可能不怎么喜欢花里胡哨的文章标签，只优化了标签云显示彩色标签，文章标签没有进行彩色化（纯色）。

文章标签美化采用的是CSS覆盖原来的样式，达到彩色的效果！直接在后台主题自定义CSS样式粘贴CSS代码，这样升级主题时无需二次复制粘贴，简单、实用。

使用教程

复制CSS代码到后台子比主题设置—》自定义CSS样式—》将CSS代码粘贴框里，即可大功告成。

CSS代码：

/*文章随机彩色标签*/
.article-tags{margin-bottom: 10px}.article-tags a{padding: 4px 10px;background-color: #19B5FE;color: white;font-size: 12px;line-height: 16px;font-weight: 400;margin: 0 5px 5px 0;border-radius: 2px;display: inline-block}.article-tags a:nth-child(5n){background-color: #4A4A4A;color: #FFF}.article-tags a:nth-child(5n+1){background-color: #ff5e5c;color: #FFF}.article-tags a:nth-child(5n+2){background-color: #ffbb50;color: #FFF}.article-tags a:nth-child(5n+3){background-color: #1ac756;color: #FFF}.article-tags a:nth-child(5n+4){background-color: #19B5FE;color: #FFF}.article-tags a:hover{background-color: #1B1B1B;color: #FFF}

注：CSS代码已进行压缩，直接复制粘贴即可。

效果截图

Zibll主题侧边栏信息统计小工具–Zibll专属教程

前言

WordPress信息统计小工具是前几天逛别的网站看到挺可以的，然后就到百度搜索一下，果然有很多这样的教程，但是那些小工具都只显示文字，不怎么美化，特别的简洁。作为喜欢花里胡哨和爱捣鼓的我，当然要进行一些修改啦！O(∩_∩)O哈哈~，然后我自己就弄出了看上去比较可以的信息统计小工具（算是图片版吧~~~），代码基本都是借鉴大佬的（没那个能力写代码啊~~~苦逼的三无青年）。本来有9个信息统计（删除一些没用的，就剩下9个），但是我又新加了2个页面数据库查询和生成耗时，顿时就感觉这个信息统计小工具变长了，都是又不知道删除啥好，所以如果你觉得太长的话，自己删除或者注释掉一些没用的信息统计，再或者修改大小…好啦，话不多说，下面分享教程。

演示：

教程：

WordPress侧边栏信息统计小工具[WP小工具]

a329033053

0486

Zibll主题评论框添加一言随机语录–Zibll专属教程

前言

用户评论的时候老是乱评论没有文采，分享一段代码随机语录，这样让你们博客评论都非常有内涵

效果

图片[3]-子比主题美化合集-小钙论坛-网盘资源分享 — 代码-在header、footer等位置添加以下：【子比主题放置在后台自定义】

如果你的评论框id不是comment，则需要修改，首先右键评论框-审查元素-查看id或者class，选其一即可，之后把获取的id或者class替换到上述代码中的#conment 如果你自己有好的一言ipa可以替换文中的https地址。


<script>
$.getJSON("https://cdn.ly522.com/yan.php?format=json",function(data){
$("#comment").text(data.text);
});
$(function(){
$("#comment").click(function() {
$(this).select();
})
})
</script>

Zibll主题侧边悬浮按钮样式–Zibll专属

教程

1.直接把下面代码放在子比主题后台自定义CSS代码然后这里我就不多说了相信用子比主题的人这个都会弄这个东西，这里注意的是如果放了还不显示效果就是你这个CSS和其他的CSS代码有冲突，自己排查下就可以了。

/*自定义子比浮窗样式*/
.wiiuii-zbfc-sty{display:flex;flex-direction:column;align-items:center;justify-content:center}
.wiiuii-zbfc-img{border-top-left-radius:8px;border-top-right-radius:8px}
.wiiuii-zbfc-sty>a{width:100%}
.wiiuii-zbfc-btn{color:#000;text-align:center;background:linear-gradient(288deg,#ffb6b9 0,#ffb6b9 35%,#fae3d9 calc(35% + 1px),#fae3d9 45%,#bbded6 calc(45% + 1px),#bbded6 65%,#61c0bf calc(65% + 1px),#61c0bf 100%);width:100%;padding:10px;margin-top:5px;border-bottom-right-radius:8px;border-bottom-left-radius:8px}
.wiiuii-zbfc-btn:hover{color:#fff;background:linear-gradient(123deg,#461b93 0,#461b93 40%,#6a3cbc calc(40% + 1px),#6a3cbc 60%,#8253d7 calc(60% + 1px),#8253d7 70%,#f78f1e calc(70% + 1px),#f78f1e 100%)}

效果

Zibll主题添加日夜模式切换提醒功能–Zibll专属

效果

教程

第一步

第二步

第三步

第一步：调用Layer.js

Layer.js是一个十分优秀的弹层组件，看自己是否已经调用了Layer组件（办法：先别调用下面的Layer.js,看直接运用第二步的代码能否运用，若无法运用就证明没有调用Layer，自己把下面的代码放到主题里【自定义头部HTML代码】）

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/layui/2.6.8/layui.min.js"></script>

第二步：jQuery代码

把下面的jQuery代码放到主题设置的【自定义javascript代码】就大功告成啦！

// 夜间切换
$(".toggle-theme").click(function() {
var toggleThemeText = "傲天提醒你当前为日间亮色模式";
if (!$("body").hasClass('dark-theme')) {
toggleThemeText = "傲天提醒你当前为夜间暗色模式";
}
layer.msg(toggleThemeText, {
time: 2000,
anim: 1
});
});

完事

Zibll主题加个繁体字切换侧边悬浮按钮–Zibll专属

效果

教程

1.找到/wp-content/themes/zibll/inc/options/admin-options.php文件然后点击进入在大约1326行处加以下代码进去，如下图。

/*繁体切换新加代码开始*/
                    array(
                        'title'      => '繁简切换',
                        'desc'       => '<div class="c-yellow"><i class="fa fa-fw fa-info-circle fa-fw"></i>此按钮建议放置在最顶部或者最底部</div>',
                        'id'         => 'traditional_chinese',
                        'type'       => 'accordion',
                        'accordions' => array(
                            array(
                                'title'  => '繁简切换',
                                'fields' => array(
                                    CFS_Module::float_btn()[0],
                                    CFS_Module::float_btn()[1],
                                    CFS_Module::float_btn()[2],
                                ),
                            ),
                        ),
                    ),
/*繁体切换新加代码结束*/

2.找到/wp-content/themes/zibll/inc/functions/zib-footer.php，然后在大约154行处添加以下代码钩取这个繁体字切换按钮就可以了如下图。

            case 'traditional_chinese':
                $btn .= '<a id="StranLink"' . $style . ' class="float-btn more-btn" data-placement="left"' . $tooltip . '><span>繁</span></i>
                </a>';
                break;

3.后台 — 子比主题设置 — 全局&功能 — 自定义代码 — 自定义底部HTML代码里加入：

下面的zh-cn-tw.js记得替换成自己的，下面第四步有js代码。

<!--繁体中文--> 
<script src="zh-cn-tw.js路径"></script>

4.在你服务器或者虚拟主机下面创建一个文件命名为：zh-cn-tw.js然后把下面的js代码放入里面

var Default_isFT = 0    //默认是否繁体，0-简体，1-繁体
var StranIt_Delay = 50 //翻译延时毫秒（设这个的目的是让网页先流畅的显现出来）

//－－－－－－－代码开始，以下别改－－－－－－－
//转换文本
function StranText(txt,toFT,chgTxt)
{
  if(txt==""||txt==null)return ""
  toFT=toFT==null?BodyIsFt:toFT
  if(chgTxt)txt=txt.replace((toFT?"简":"繁"),(toFT?"繁":"简"))
  if(toFT){return Traditionalized(txt)}
  else {return Simplized(txt)}
}
//转换对象，使用递归，逐层剥到文本
function StranBody(fobj)
{
  if(typeof(fobj)=="object"){var obj=fobj.childNodes}
  else 
  {
    var tmptxt=StranLink_Obj.innerHTML.toString()
    if(tmptxt.indexOf("简")<0)
    {
      BodyIsFt=1
      StranLink_Obj.innerHTML=StranText(tmptxt,0,1)
      StranLink.title=StranText(StranLink.title,0,1)
    }
    else
    {
      BodyIsFt=0
      StranLink_Obj.innerHTML=StranText(tmptxt,1,1)
      StranLink.title=StranText(StranLink.title,1,1)
    }
    setCookie(JF_cn,BodyIsFt,7)
    var obj=document.body.childNodes
  }
  for(var i=0;i<obj.length;i++)
  {
    var OO=obj.item(i)
    if("||BR|HR|TEXTAREA|".indexOf("|"+OO.tagName+"|")>0||OO==StranLink_Obj)continue;
    if(OO.title!=""&&OO.title!=null)OO.title=StranText(OO.title);
    if(OO.alt!=""&&OO.alt!=null)OO.alt=StranText(OO.alt);
    if(OO.tagName=="INPUT"&&OO.value!=""&&OO.type!="text"&&OO.type!="hidden")OO.value=StranText(OO.value);
    if(OO.nodeType==3){OO.data=StranText(OO.data)}
    else StranBody(OO)
  }
}
function JTPYStr()
{
  return '皑蔼碍爱翱袄奥坝罢摆败颁办绊帮绑镑谤剥饱宝报鲍辈贝钡狈备惫绷笔毕毙闭边编贬变辩辫鳖瘪濒滨宾摈饼拨钵铂驳卜补参蚕残惭惨灿苍舱仓沧厕侧册测层诧搀掺蝉馋谗缠铲产阐颤场尝长偿肠厂畅钞车彻尘陈衬撑称惩诚骋痴迟驰耻齿炽冲虫宠畴踌筹绸丑橱厨锄雏础储触处传疮闯创锤纯绰辞词赐聪葱囱从丛凑窜错达带贷担单郸掸胆惮诞弹当挡党荡档捣岛祷导盗灯邓敌涤递缔点垫电淀钓调迭谍叠钉顶锭订东动栋冻斗犊独读赌镀锻断缎兑队对吨顿钝夺鹅额讹恶饿儿尔饵贰发罚阀珐矾钒烦范贩饭访纺飞废费纷坟奋愤粪丰枫锋风疯冯缝讽凤肤辐抚辅赋复负讣妇缚该钙盖干赶秆赣冈刚钢纲岗皋镐搁鸽阁铬个给龚宫巩贡钩沟构购够蛊顾剐关观馆惯贯广规硅归龟闺轨诡柜贵刽辊滚锅国过骇韩汉阂鹤贺横轰鸿红后壶护沪户哗华画划话怀坏欢环还缓换唤痪焕涣黄谎挥辉毁贿秽会烩汇讳诲绘荤浑伙获货祸击机积饥讥鸡绩缉极辑级挤几蓟剂济计记际继纪夹荚颊贾钾价驾歼监坚笺间艰缄茧检碱硷拣捡简俭减荐槛鉴践贱见键舰剑饯渐溅涧浆蒋桨奖讲酱胶浇骄娇搅铰矫侥脚饺缴绞轿较秸阶节茎惊经颈静镜径痉竞净纠厩旧驹举据锯惧剧鹃绢杰洁结诫届紧锦仅谨进晋烬尽劲荆觉决诀绝钧军骏开凯颗壳课垦恳抠库裤夸块侩宽矿旷况亏岿窥馈溃扩阔蜡腊莱来赖蓝栏拦篮阑兰澜谰揽览懒缆烂滥捞劳涝乐镭垒类泪篱离里鲤礼丽厉励砾历沥隶俩联莲连镰怜涟帘敛脸链恋炼练粮凉两辆谅疗辽镣猎临邻鳞凛赁龄铃凌灵岭领馏刘龙聋咙笼垄拢陇楼娄搂篓芦卢颅庐炉掳卤虏鲁赂禄录陆驴吕铝侣屡缕虑滤绿峦挛孪滦乱抡轮伦仑沦纶论萝罗逻锣箩骡骆络妈玛码蚂马骂吗买麦卖迈脉瞒馒蛮满谩猫锚铆贸么霉没镁门闷们锰梦谜弥觅绵缅庙灭悯闽鸣铭谬谋亩钠纳难挠脑恼闹馁腻撵捻酿鸟聂啮镊镍柠狞宁拧泞钮纽脓浓农疟诺欧鸥殴呕沤盘庞国爱赔喷鹏骗飘频贫苹凭评泼颇扑铺朴谱脐齐骑岂启气弃讫牵扦钎铅迁签谦钱钳潜浅谴堑枪呛墙蔷强抢锹桥乔侨翘窍窃钦亲轻氢倾顷请庆琼穷趋区躯驱龋颧权劝却鹊让饶扰绕热韧认纫荣绒软锐闰润洒萨鳃赛伞丧骚扫涩杀纱筛晒闪陕赡缮伤赏烧绍赊摄慑设绅审婶肾渗声绳胜圣师狮湿诗尸时蚀实识驶势释饰视试寿兽枢输书赎属术树竖数帅双谁税顺说硕烁丝饲耸怂颂讼诵擞苏诉肃虽绥岁孙损笋缩琐锁獭挞抬摊贪瘫滩坛谭谈叹汤烫涛绦腾誊锑题体屉条贴铁厅听烃铜统头图涂团颓蜕脱鸵驮驼椭洼袜弯湾顽万网韦违围为潍维苇伟伪纬谓卫温闻纹稳问瓮挝蜗涡窝呜钨乌诬无芜吴坞雾务误锡牺袭习铣戏细虾辖峡侠狭厦锨鲜纤咸贤衔闲显险现献县馅羡宪线厢镶乡详响项萧销晓啸蝎协挟携胁谐写泻谢锌衅兴汹锈绣虚嘘须许绪续轩悬选癣绚学勋询寻驯训讯逊压鸦鸭哑亚讶阉烟盐严颜阎艳厌砚彦谚验鸯杨扬疡阳痒养样瑶摇尧遥窑谣药爷页业叶医铱颐遗仪彝蚁艺亿忆义诣议谊译异绎荫阴银饮樱婴鹰应缨莹萤营荧蝇颖哟拥佣痈踊咏涌优忧邮铀犹游诱舆鱼渔娱与屿语吁御狱誉预驭鸳渊辕园员圆缘远愿约跃钥岳粤悦阅云郧匀陨运蕴酝晕韵杂灾载攒暂赞赃脏凿枣灶责择则泽贼赠扎札轧铡闸诈斋债毡盏斩辗崭栈战绽张涨帐账胀赵蛰辙锗这贞针侦诊镇阵挣睁狰帧郑证织职执纸挚掷帜质钟终种肿众诌轴皱昼骤猪诸诛烛瞩嘱贮铸筑驻专砖转赚桩庄装妆壮状锥赘坠缀谆浊兹资渍踪综总纵邹诅组钻致钟么为只凶准启板里雳余链泄';
}
function FTPYStr()
{
  return '皚藹礙愛翺襖奧壩罷擺敗頒辦絆幫綁鎊謗剝飽寶報鮑輩貝鋇狽備憊繃筆畢斃閉邊編貶變辯辮鼈癟瀕濱賓擯餅撥缽鉑駁蔔補參蠶殘慚慘燦蒼艙倉滄廁側冊測層詫攙摻蟬饞讒纏鏟産闡顫場嘗長償腸廠暢鈔車徹塵陳襯撐稱懲誠騁癡遲馳恥齒熾沖蟲寵疇躊籌綢醜櫥廚鋤雛礎儲觸處傳瘡闖創錘純綽辭詞賜聰蔥囪從叢湊竄錯達帶貸擔單鄲撣膽憚誕彈當擋黨蕩檔搗島禱導盜燈鄧敵滌遞締點墊電澱釣調叠諜疊釘頂錠訂東動棟凍鬥犢獨讀賭鍍鍛斷緞兌隊對噸頓鈍奪鵝額訛惡餓兒爾餌貳發罰閥琺礬釩煩範販飯訪紡飛廢費紛墳奮憤糞豐楓鋒風瘋馮縫諷鳳膚輻撫輔賦複負訃婦縛該鈣蓋幹趕稈贛岡剛鋼綱崗臯鎬擱鴿閣鉻個給龔宮鞏貢鈎溝構購夠蠱顧剮關觀館慣貫廣規矽歸龜閨軌詭櫃貴劊輥滾鍋國過駭韓漢閡鶴賀橫轟鴻紅後壺護滬戶嘩華畫劃話懷壞歡環還緩換喚瘓煥渙黃謊揮輝毀賄穢會燴彙諱誨繪葷渾夥獲貨禍擊機積饑譏雞績緝極輯級擠幾薊劑濟計記際繼紀夾莢頰賈鉀價駕殲監堅箋間艱緘繭檢堿鹼揀撿簡儉減薦檻鑒踐賤見鍵艦劍餞漸濺澗漿蔣槳獎講醬膠澆驕嬌攪鉸矯僥腳餃繳絞轎較稭階節莖驚經頸靜鏡徑痙競淨糾廄舊駒舉據鋸懼劇鵑絹傑潔結誡屆緊錦僅謹進晉燼盡勁荊覺決訣絕鈞軍駿開凱顆殼課墾懇摳庫褲誇塊儈寬礦曠況虧巋窺饋潰擴闊蠟臘萊來賴藍欄攔籃闌蘭瀾讕攬覽懶纜爛濫撈勞澇樂鐳壘類淚籬離裏鯉禮麗厲勵礫曆瀝隸倆聯蓮連鐮憐漣簾斂臉鏈戀煉練糧涼兩輛諒療遼鐐獵臨鄰鱗凜賃齡鈴淩靈嶺領餾劉龍聾嚨籠壟攏隴樓婁摟簍蘆盧顱廬爐擄鹵虜魯賂祿錄陸驢呂鋁侶屢縷慮濾綠巒攣孿灤亂掄輪倫侖淪綸論蘿羅邏鑼籮騾駱絡媽瑪碼螞馬罵嗎買麥賣邁脈瞞饅蠻滿謾貓錨鉚貿麽黴沒鎂門悶們錳夢謎彌覓綿緬廟滅憫閩鳴銘謬謀畝鈉納難撓腦惱鬧餒膩攆撚釀鳥聶齧鑷鎳檸獰甯擰濘鈕紐膿濃農瘧諾歐鷗毆嘔漚盤龐國愛賠噴鵬騙飄頻貧蘋憑評潑頗撲鋪樸譜臍齊騎豈啓氣棄訖牽扡釺鉛遷簽謙錢鉗潛淺譴塹槍嗆牆薔強搶鍬橋喬僑翹竅竊欽親輕氫傾頃請慶瓊窮趨區軀驅齲顴權勸卻鵲讓饒擾繞熱韌認紉榮絨軟銳閏潤灑薩鰓賽傘喪騷掃澀殺紗篩曬閃陝贍繕傷賞燒紹賒攝懾設紳審嬸腎滲聲繩勝聖師獅濕詩屍時蝕實識駛勢釋飾視試壽獸樞輸書贖屬術樹豎數帥雙誰稅順說碩爍絲飼聳慫頌訟誦擻蘇訴肅雖綏歲孫損筍縮瑣鎖獺撻擡攤貪癱灘壇譚談歎湯燙濤縧騰謄銻題體屜條貼鐵廳聽烴銅統頭圖塗團頹蛻脫鴕馱駝橢窪襪彎灣頑萬網韋違圍爲濰維葦偉僞緯謂衛溫聞紋穩問甕撾蝸渦窩嗚鎢烏誣無蕪吳塢霧務誤錫犧襲習銑戲細蝦轄峽俠狹廈鍁鮮纖鹹賢銜閑顯險現獻縣餡羨憲線廂鑲鄉詳響項蕭銷曉嘯蠍協挾攜脅諧寫瀉謝鋅釁興洶鏽繡虛噓須許緒續軒懸選癬絢學勳詢尋馴訓訊遜壓鴉鴨啞亞訝閹煙鹽嚴顔閻豔厭硯彥諺驗鴦楊揚瘍陽癢養樣瑤搖堯遙窯謠藥爺頁業葉醫銥頤遺儀彜蟻藝億憶義詣議誼譯異繹蔭陰銀飲櫻嬰鷹應纓瑩螢營熒蠅穎喲擁傭癰踴詠湧優憂郵鈾猶遊誘輿魚漁娛與嶼語籲禦獄譽預馭鴛淵轅園員圓緣遠願約躍鑰嶽粵悅閱雲鄖勻隕運蘊醞暈韻雜災載攢暫贊贓髒鑿棗竈責擇則澤賊贈紮劄軋鍘閘詐齋債氈盞斬輾嶄棧戰綻張漲帳賬脹趙蟄轍鍺這貞針偵診鎮陣掙睜猙幀鄭證織職執紙摯擲幟質鍾終種腫衆謅軸皺晝驟豬諸誅燭矚囑貯鑄築駐專磚轉賺樁莊裝妝壯狀錐贅墜綴諄濁茲資漬蹤綜總縱鄒詛組鑽緻鐘麼為隻兇準啟闆裡靂餘鍊洩';
}
function Traditionalized(cc){
  var str='',ss=JTPYStr(),tt=FTPYStr();
  for(var i=0;i<cc.length;i++)
  {
    if(cc.charCodeAt(i)>10000&&ss.indexOf(cc.charAt(i))!=-1)str+=tt.charAt(ss.indexOf(cc.charAt(i)));
      else str+=cc.charAt(i);
  }
  return str;
}
function Simplized(cc){
  var str='',ss=JTPYStr(),tt=FTPYStr();
  for(var i=0;i<cc.length;i++)
  {
    if(cc.charCodeAt(i)>10000&&tt.indexOf(cc.charAt(i))!=-1)str+=ss.charAt(tt.indexOf(cc.charAt(i)));
      else str+=cc.charAt(i);
  }
  return str;
}

function setCookie(name, value)    //cookies设置
{
  var argv = setCookie.arguments;
  var argc = setCookie.arguments.length;
  var expires = (argc > 2) ? argv[2] : null;
  if(expires!=null)
  {
    var LargeExpDate = new Date ();
    LargeExpDate.setTime(LargeExpDate.getTime() + (expires*1000*3600*24));
  }
  document.cookie = name + "=" + escape (value)+((expires == null) ? "" : ("; expires=" +LargeExpDate.toGMTString()));
}

function getCookie(Name)      //cookies读取
{
  var search = Name + "="
  if(document.cookie.length > 0) 
  {
    offset = document.cookie.indexOf(search)
    if(offset != -1) 
    {
      offset += search.length
      end = document.cookie.indexOf(";", offset)
      if(end == -1) end = document.cookie.length
      return unescape(document.cookie.substring(offset, end))
     }
  else return ""
    }
}

var StranLink_Obj=document.getElementById("StranLink")
if (StranLink_Obj)
{
  var JF_cn="ft"+self.location.hostname.toString().replace(/\./g,"")
  var BodyIsFt=getCookie(JF_cn)
  if(BodyIsFt!="1")BodyIsFt=Default_isFT
  with(StranLink_Obj)
  {
    if(typeof(document.all)!="object")   //非IE浏览器
    {
      href="javascript:StranBody()"
    }
    else
    {
      href="#";
      onclick= new Function("StranBody();return false")
    }
    title=StranText("繁体浏览",1,1)
    innerHTML=StranText(innerHTML,1,1)
  }
  if(BodyIsFt=="1"){setTimeout("StranBody()",StranIt_Delay)}
}

Zibll主题添加一个子比购买页面–Zibll专属(无文章)–无无无无

Zibll主题申请友链页面美化–Zibll专属

前言

好几天没更新新玩意了，最近站长看了好多博客发现他们的申请友链页面好好看，这里借鉴了火喵博客的友链页面改了下文件，在这就分享给大家了，代码我为了省空间就一大坨放一起了，你们看着改哈哈哈(注：记得先备份)，先看效果图！

效果

教程

我就直接发整页了，放到pages的links里，如果你的申请友链页面不是这个你自己看看你友链页面是哪个了，或者没有的可以自己新建文件复制进去，子比主题的备份后可以直接覆盖，其他主题的就自己复制捣鼓了！

<?php

/**
 * Template name: Zibll-链接列表
 * Description:   sidebar page
 */

// 获取链接列表
function zib_page_links()
{

    $type = 'card';
    $post_ID = get_queried_object_id();
    $args_orderby = get_post_meta($post_ID, 'page_links_orderby', true);
    $args_order = get_post_meta($post_ID, 'page_links_order', true);
    $args_limit = get_post_meta($post_ID, 'page_links_limit', true);
    $args_category = get_post_meta($post_ID, 'page_links_category', true);
    $args = array(
        'orderby'        => $args_orderby ? $args_orderby : 'name', //排序方式
        'order'          => $args_order ? $args_order : 'ASC', //升序还是降序
        'limit'          => $args_limit ? $args_limit : -1, //最多显示数量
        'category'       => $args_category, //以逗号分隔的类别ID列表
    );
    $links = get_bookmarks($args);

    $html = '';

    if ($links) {
        $html .= zib_links_box($links, $type, false);
    } elseif (is_super_admin()) {
        $html = '<a class="author-minicard links-card radius8" href="' . admin_url('link-manager.php') . '" target="_blank">添加链接</a>';
    } else {
        $html = '<div class="author-minicard links-card radius8">暂无链接，请联系管理员添加</div>';
    }
    return $html;
}




get_header();
$post_id = get_queried_object_id();
$header_style = zib_get_page_header_style();
$page_links_content_s = get_post_meta($post_id, 'page_links_content_s', true);
$page_links_content_position = get_post_meta($post_id, 'page_links_content_position', true);
$page_links_submit_s = get_post_meta($post_id, 'page_links_submit_s', true);

?>
<!--这段开始-->
<style>
code{font-family: "lovely";}
.zib-widget>h3:before,.wp-posts-content>h3.has-text-align-center:before, .wp-posts-content>h3:not([class]):before{content: '';position: absolute;top: 2px;left: 0;width: 20px!important;height: 20px!important;background: url(https://xyblog-1259307513.cos.ap-guangzhou.myqcloud.com/wp-content/uploads/2021/12/b0cebb85c3ed.png) no-repeat center;box-shadow: none;background-size: 100% !important;}
.wp-posts-content>h3.has-text-align-center, .wp-posts-content>h3:not([class]),.zib-widget>h3{color: var(--main);font-size: 18px;line-height: 24px;margin-bottom: 18px;position: relative;padding: 0 15px 0 28px;}
.xy_callout ol li::marker {content: "#" counter(list-item) " ";color: var(--theme-color);}
.xy_callout {padding: 20px;border: 1px solid #e4e4e4;border-left-width: 5px;border-radius: 6px;line-height: 30px;font-weight: 600;border-left-color: var(--theme-color);}
.xy_content>h5{margin: 0;font-weight:600;font-size: 24px;line-height: 32px;padding: 20px 0;text-align: center;}
.xy_checkbox:checked{background:var(--theme-color);-webkit-appearance: none;position: relative;border-radius: 2px;width: 15px;height: 15px;vertical-align: -2px;}
.xy_content h5:before {content: '「';color: var(--theme-color);font-weight: 600;margin-left: 5px;}
.xy_content h5:after {content: '」';color: var(--theme-color);font-weight: 600;margin-right: 5px;}
.xy_checkbox:checked:after {content:'';width: 6px;height: 10px;position: absolute;top: 1px;left: 5px;border: 2px solid #fff;border-top: 0;border-left: 0;-webkit-transform: rotate(45deg);transform: rotate(45deg);}
.wp-posts-content li{margin-bottom: 0;}
.xy-width{padding:0 30px 30px;}
.wp-posts-content ol>li>span{color: var(--theme-color);}
@media screen and (max-width:500px){.xy-width{padding:10px;}.wp-posts-content ol:not(.blocks-gallery-grid){margin:0;}}
</style>
<script src="https://at.alicdn.com/t/font_2827587_imt2fhl6z8p.js"></script>
<script>
$.getJSON("https://21lhz.cn/cdn/api/yiyanapi.php?encode=yulu",function(data){ $("#yulu").text(data.text);});$(function(){$("#yulu").click(function() {$(this).select();})})
</script>
<!--这里结束-->
<main class="container">
    <div class="content-wrap">
        <div class="content-layout">
            <?php while (have_posts()) : the_post(); ?>
                <?php echo zib_get_page_header(); ?>
                <?php
                if ($page_links_content_position != 'top') {
                    echo '<div class="zib-widget">' . zib_page_links() . '</div>';
                }
                //下面开始
                echo'
                <div class="box-body notop"><div class="title-theme">友链申请说明<small class="ml10">请注意查看</small></div></div>
                <div class="zib-widget xy-width">
                <span class="xy_content" style="display: block;">
                    <h5>申请前 <font size="6" color="red">必</font> 阅读</h5>
                    <section class="xy_callout wp-posts-content" style="font-weight:400;padding:0 20px 10px;margin-bottom:15px;border-left-color: #1890ff;"><h3>申请条件</h3><ol><li>先确认申请的博客内容符合以下类别，即使未列出的亦可继续申请。<br><svg class="icon" aria-hidden="true"><use xlink:href="#icon-yunxu"></use></svg> 某领域技术性博客<br><svg class="icon" aria-hidden="true"><use xlink:href="#icon-yunxu"></use></svg> 资源下载类博客<br><svg class="icon" aria-hidden="true"><use xlink:href="#icon-yunxu"></use></svg> 论坛，社区或聚合媒体类网站<br><svg class="icon" aria-hidden="true"><use xlink:href="#icon-jinzhi"></use></svg> 纯视频站，纯图片站<br><svg class="icon" aria-hidden="true"><use xlink:href="#icon-jinzhi"></use></svg> 赌博、发卡、支付类网站<br><svg class="icon" aria-hidden="true"><use xlink:href="#icon-jinzhi"></use></svg> 原创少于1篇的博客<br><svg class="icon" aria-hidden="true"><use xlink:href="#icon-jinzhi"></use></svg> 没有独立博客服务器的博客（例如搭设在WordPress，blogger，博客园等）</li><li>博客需每月至少有一篇更新博客，或者有经常更新的日常笔记，并且已存在至少<code>20篇</code>博文。</li><li>站点需要全站https，也不接受带ip或端口的链接，并且国内无墙。</li><li>在小站有效留言至少一条，至少我得熟悉你吧，这样才好申请友链。</li><li>博客有RSS2.0地址或atom地址（一般的博客程序都自带，请不要关闭，如果是自制程序没有可忽略）。</li><li style="color:red">权重大于3，以上条件皆可无视。</li></ol><h3>申请过程</h3><ol><li>申请前请先将本站友链加好。</li><li>申请信息真认真写好，请勿乱写。</li><li>申请时请写清<code>网站名称</code> <code>网站
                   头像</code> <code>网站介绍</code> <code>网站链接</code>,推荐使用网站icon，本站实例：<br> <input type="checkbox" class="xy_checkbox" checked disabled> 
                   名称：<span>傲天</span><br> <input type="checkbox" class="xy_checkbox" checked disabled> 地址：<span>https://www.xx.com</span><br> <input type="checkbox" class="xy_checkbox" checked disabled> 介绍：<span>专注优质网络资源分享的技术博客</span><br> <input type="checkbox" class="xy_checkbox" checked disabled> 头像：<span>https://www.xx.com/wp-content/uploads/2021/08/favicon-1.png</span></li></ol><h3>申请后续</h3><ol><li>如果不符合要求会无视掉申请，<font color="red">一天内都会通过。</font></li><li>网站修改友链信息请申请页面留言即可，无格式要求。</li><li>排名一般来说是有先后顺序的，但是还是要说，排名不分先后。</li><li>若发现站点无法访问，将会在一个月后删除。</li><li>网站正常访问但是无故下掉链接的，会拉入黑名单，不再接受友链申请。</li></ol></section>
                   <div class="xy_callout">  <span id="yulu"></span><div style="text-align:right;"> ——《傲天》</div></div>
                </span>
                </div>';
                //这里结束
                if ($page_links_content_s) {
                    echo '<div class="zib-widget"><article class="article wp-posts-content">';
                    the_content();
                    echo '</article>';
                    wp_link_pages(
                        array(
                            'before'           => '<p class="text-center post-nav-links radius8 padding-6">',
                            'after'            => '</p>',
                        )
                    );
                    echo '</div>';
                }
                if ($page_links_content_position == 'top') {
                    echo '<div class="zib-widget">' . zib_page_links() . '</div>';
                }
                if ($page_links_submit_s) {
                    $submit_args = array(
                        'title' => get_post_meta($post_id, 'page_links_submit_title', true),
                        'subtitle' => get_post_meta($post_id, 'page_links_submit_subtitle', true),
                        'dec' => get_post_meta($post_id, 'page_links_submit_dec', true)
                    );
                    echo zib_submit_links_card($submit_args);
                }
                ?>
                <?php ?>
            <?php endwhile; ?>
            <?php comments_template('/template/comments.php', true); ?>
        </div>
    </div>
    <?php get_sidebar(); ?>
</main>
<?php
get_footer();

Zibll主题添加好看的底部–Zibll专属

效果

教程

在functions.php加上下面这段代码（为了防止js和css链接失效，本人在下面备份了，后期可以改成自己的链接）

functions.php代码sweetalert.min.js代码备份sweetalert.css代码备份

//获取评论数量
function zfunc_comments_users($postid=0,$which=0) {
  $comments = get_comments('status=approve&type=comment&post_id='.$postid); //获取文章的所有评论
  if ($comments) {
    $i=0; $j=0; $commentusers=array();
    foreach ($comments as $comment) {
      ++$i;
      if ($i==1) { $commentusers[] = $comment->comment_author_email; ++$j; }
      if ( !in_array($comment->comment_author_email, $commentusers) ) {
        $commentusers[] = $comment->comment_author_email;
        ++$j;
      }
    }
    $output = array($j,$i);
    $which = ($which == 0) ? 0 : 1;
    return $output[$which]; //返回评论人数
  }
  return 0; //没有评论返回0
};
// 随机文章
function random_posts(
    $posts_num=5,$before='<li>',$after='</li>'){
    global $wpdb;
    $sql = "SELECT ID, post_title,guid
            FROM $wpdb->posts
            WHERE post_status = 'publish' ";
    $sql .= "AND post_title != '' ";
    $sql .= "AND post_password ='' ";
    $sql .= "AND post_type = 'post' ";
    $sql .= "ORDER BY RAND() LIMIT 0 , $posts_num ";
    $randposts = $wpdb->get_results($sql);
    $output = '';
    foreach ($randposts as $randpost) {
        $post_title = stripslashes($randpost->post_title);
        $permalink = get_permalink($randpost->ID);
        $output .= $before.'<a class="item-foot" href="'
            . $permalink . '"  rel="bookmark" data-toggle="tooltip" data-original-title="随机文章：';
        $output .= $post_title . '"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-lianjie"></use></svg><span id="wz">' . $post_title . '</span></a>';
        $output .= $after;
    }
    echo '<div id="footgundong" class="wz"><ul>'.$output.'</ul></div>';
}

//弹窗提醒
function dorzs() {  
echo '<script src="https://www.atbkw.cn/aotian/js/dibudaima/sweetalert.min.js"></script>';
echo '<script src="https://www.atbkw.cn/aotian/css/dibudaima/sweetalert.css"></script>'; 
echo '<script>$(document).on("click","#dorzs",function(){swal({title:"发工资啦",text:"哇！傲天超级开心的！！",icon:"https://www.atbkw.cn/wp-content/uploads/aotian/qita/qywx.jpg",buttons:{weixin:{text:"微信",value:"weixin",},zfb:{text:"支付宝",value:"zfb",},dsmd:{text:"打赏名单",value:"dsmd",},},}).then(function(value){if(value=="weixin"){swal({title:"感谢打赏！",text:"感谢您的微信打赏，我会努力做得更好！",button:false,icon:"https://www.atbkw.cn/wp-content/uploads/aotian/qita/qywx.jpg"});}else if(value=="zfb"){swal({title:"感谢打赏！",text:"感谢您的支付宝打赏，我会努力做得更好！",button:false,icon:"https://www.atbkw.cn/wp-content/uploads/aotian/qita/qywx.jpg"});}else if(value=="dsmd"){swal({title:"打赏名单",text:"【打赏名单未开放】",icon:"https://www.atbkw.cn/wp-content/uploads/aotian/qita/qywx.jpg",button:false,});}});});</script>';  
}  
add_action( 'wp_footer', 'dorzs', 100 );

//点赞统计
function dz($post_id){
    global $wpdb;
    $sql = "SELECT SUM(`meta_value`) as num FROM `wp_postmeta` WHERE `meta_key`='like' AND `post_id`=$post_id";
    $results = $wpdb->get_results($sql);
    echo  $results[0]->num;
}

引入阿里巴巴矢量库的图标，也可以自行修改（为了防止js和css链接失效，本人在下面备份了，后期可以改成自己的链接）

引入阿里巴巴矢量库font_2827587_k24if0ucns.js代码备份font_2827587_k24if0ucns.css代码备份

<script src="https://at.alicdn.com/t/font_2827587_k24if0ucns.js"></script>
<link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_2827587_k24if0ucns.css">
<style type="text/css">.icon {width: 1em; height: 1em;vertical-align: -0.15em;fill: currentColor;overflow: hidden;}</style>

在footer.php里加上下面这段代码，自行修改

footer.phpdibudaimatupian.png图片备份

<!--底部导航-->
<style>
#footgundong{margin-left:20px;overflow: overlay;display: inline-flex;text-align: right;}.item-foot{color: var(--minor);height: 45px;line-height: 45px;transition: color 0.35s;white-space: nowrap;}.swal-footer{text-align:center;}.swal-button {font-size: 20px;}.count>svg,.count>text{display:none;}
</style>
<div class="footwaveline">
<i style="background-image: url(https://xyblog-1259307513.cos.ap-guangzhou.myqcloud.com/wp-content/uploads/2021/11/362a2c8cc4a0.png);display: inline-block;width: 210px;height: 120px;position: fixed;bottom: 0;z-index: 110;background-size: 100%;"></i>
<div class="footwavewave" style="background: url(https://xyblog-1259307513.cos.ap-guangzhou.myqcloud.com/wp-content/uploads/2021/11/9855fd529028.png) 0 0 repeat-x;height: 3px;width: 100%;position: fixed;background-size: 10px 3px;z-index: 98;bottom: 40px;"></div>
    <div id="shi" style="position: fixed;bottom: 0;margin-left: 200px;z-index: 99;">
       <h4 class="my-face" style="font-size:13px;margin:0 5px 2px 5px;color:#797979;margin-bottom: 10px;">夕阳无别事，等风也等你</h4>
    </div>
<div style="width: 100%;height: 40px;position: fixed;bottom: 0;z-index: 97;box-shadow: 0 -2px 10px rgb(0 0 0 / 10%);background:#fff;">
    <nav class="joe_header__below-logon" style="float: right;margin-right: 50px;">
        <?php if (is_home()) {
              echo'<style>@media (max-width:1200px){#shi{display:none;}}.pl,.fx{display:none;}.dz{display:none !important;}</style>';
              echo random_posts();
            }elseif (is_page()) {
                echo'<style>@media (max-width:1200px){#shi{display:none;}}.pl,.fx{display:none;}.dz{display:none !important;}</style>';
            }
        ?>    
            <span style="margin-left:20px;" class="pl">
                <a href="javascript:(scrollTo('#comments',-100));" data-toggle="tooltip" data-original-title="评论">
                    <svg class="icon" aria-hidden="true"><use xlink:href="#icon-pinglun"></use></svg><span style="color:var(--minor);">评论(<count><?php echo zfunc_comments_users($post->ID); ?></count>)</span>
                </a>
           </span>                
            <span class="dz" style="margin-left:20px;display: inline-block;">
                <a href="javascript:(scrollTo('#comments',-1000));" data-toggle="tooltip" data-original-title="点赞">
                    <svg class="icon" aria-hidden="true"><use xlink:href="#icon-dianzan"></use></svg>点赞(<?php echo dz($post->ID)?>)
                </a>
            </span>
            <span style="margin-left:20px;line-height: 45px;" class="fx">
                <a class="bds simg" data-toggle="modal" href="#modal_poster" title="分享">
                    <svg class="icon" aria-hidden="true"><use xlink:href="#icon-fenxiang"></use></svg>分享
                </a>
            </span>
            <span style="margin-left:20px;line-height: 45px;" class="zs">
                <a id="dorzs" data-toggle="tooltip" data-original-title="赞赏">
                    <svg class="icon" aria-hidden="true"><use xlink:href="#icon-qianbao"></use></svg>赞赏
                </a>
            </span>
        <span style="margin-left:20px;line-height: 45px;" class="sc">
            <a href="javascript:void(0);" id="shoucang" data-toggle="tooltip" data-original-title="收藏">
                <svg class="icon" aria-hidden="true"><use xlink:href="#icon-xihuan"></use></svg>收藏
            </a>
        </span>
        <a style="margin-left:20px;" href="javascript:(scrollTo());" id="percentage" data-toggle="tooltip" data-original-title="返回顶部">
            <svg class="icon" aria-hidden="true"><use xlink:href="#icon-dingwei"></use></svg>0%
        </a>
  </nav>
</div>
</div>

<?php dorzs();?>
<script>
var btn =document.getElementById("shoucang");
btn.onclick = function() {layer.msg('<p style="font-weight:700;margin:5px;">在键盘上按<span style="padding:5px 10px;background:#f0e7e2;border-radius:8px;color:#202020;margin:0 5px;">Ctrl</span>+<span style="padding:5px 10px;background:#f0e7e2;border-radius:8px;color:#202020;margin:0 5px;">D</span>即可<br>喜欢本站的话记得常来哦！</p>', function(){});};
</script>
<!--底部导航-->

CSS代码

这段css其实是文字的抖动跟适应手机屏幕隐藏底部导航栏(可用可不用，不过@media这段建议保留)

/* start */
 .my-face {
    animation: my-face 5s infinite ease-in-out;
    color: #00f1ff;
    display: inline-block;
    margin: 0 5px;
}
@-webkit-keyframes my-face {
    2%, 24%, 80% {
        -webkit-transform: translate(0, 1.5px) rotate(1.5deg);
        transform: translate(0, 1.5px) rotate(1.5deg)
    }
    4%, 68%, 98% {
        -webkit-transform: translate(0, -1.5px) rotate(-.5deg);
        transform: translate(0, -1.5px) rotate(-.5deg)
    }
    38%, 6% {
        -webkit-transform: translate(0, 1.5px) rotate(-1.5deg);
        transform: translate(0, 1.5px) rotate(-1.5deg)
    }
    8%, 86% {
        -webkit-transform: translate(0, -1.5px) rotate(-1.5deg);
        transform: translate(0, -1.5px) rotate(-1.5deg)
    }
    10%, 72% {
        -webkit-transform: translate(0, 2.5px) rotate(1.5deg);
        transform: translate(0, 2.5px) rotate(1.5deg)
    }
    12%, 64%, 78%, 96% {
        -webkit-transform: translate(0, -.5px) rotate(1.5deg);
        transform: translate(0, -.5px) rotate(1.5deg)
    }
    14%, 54% {
        -webkit-transform: translate(0, -1.5px) rotate(1.5deg);
        transform: translate(0, -1.5px) rotate(1.5deg)
    }
    16% {
        -webkit-transform: translate(0, -.5px) rotate(-1.5deg);
        transform: translate(0, -.5px) rotate(-1.5deg)
    }
    18%, 22% {
        -webkit-transform: translate(0, .5px) rotate(-1.5deg);
        transform: translate(0, .5px) rotate(-1.5deg)
    }
    20%, 36%, 46% {
        -webkit-transform: translate(0, -1.5px) rotate(2.5deg);
        transform: translate(0, -1.5px) rotate(2.5deg)
    }
    26%, 50% {
        -webkit-transform: translate(0, .5px) rotate(.5deg);
        transform: translate(0, .5px) rotate(.5deg)
    }
    28% {
        -webkit-transform: translate(0, .5px) rotate(1.5deg);
        transform: translate(0, .5px) rotate(1.5deg)
    }
    30%, 40%, 62%, 76%, 88% {
        -webkit-transform: translate(0, -.5px) rotate(2.5deg);
        transform: translate(0, -.5px) rotate(2.5deg)
    }
    32%, 34%, 66% {
        -webkit-transform: translate(0, 1.5px) rotate(-.5deg);
        transform: translate(0, 1.5px) rotate(-.5deg)
    }
    42% {
        -webkit-transform: translate(0, 2.5px) rotate(-1.5deg);
        transform: translate(0, 2.5px) rotate(-1.5deg)
    }
    44%, 70% {
        -webkit-transform: translate(0, 1.5px) rotate(.5deg);
        transform: translate(0, 1.5px) rotate(.5deg)
    }
    48%, 74%, 82% {
        -webkit-transform: translate(0, -.5px) rotate(.5deg);
        transform: translate(0, -.5px) rotate(.5deg)
    }
    52%, 56%, 60% {
        -webkit-transform: translate(0, 2.5px) rotate(2.5deg);
        transform: translate(0, 2.5px) rotate(2.5deg)
    }
    58% {
        -webkit-transform: translate(0, .5px) rotate(2.5deg);
        transform: translate(0, .5px) rotate(2.5deg)
    }
    84% {
        -webkit-transform: translate(0, 1.5px) rotate(2.5deg);
        transform: translate(0, 1.5px) rotate(2.5deg)
    }
    90% {
        -webkit-transform: translate(0, 2.5px) rotate(-.5deg);
        transform: translate(0, 2.5px) rotate(-.5deg)
    }
    92% {
        -webkit-transform: translate(0, .5px) rotate(-.5deg);
        transform: translate(0, .5px) rotate(-.5deg)
    }
    94% {
        -webkit-transform: translate(0, 2.5px) rotate(.5deg);
        transform: translate(0, 2.5px) rotate(.5deg)
    }
    0%, 100% {
        -webkit-transform: translate(0, 0) rotate(0);
        transform: translate(0, 0) rotate(0)
    }
}
@keyframes my-face {
    2%, 24%, 80% {
        -webkit-transform: translate(0, 1.5px) rotate(1.5deg);
        transform: translate(0, 1.5px) rotate(1.5deg)
    }
    4%, 68%, 98% {
        -webkit-transform: translate(0, -1.5px) rotate(-.5deg);
        transform: translate(0, -1.5px) rotate(-.5deg)
    }
    38%, 6% {
        -webkit-transform: translate(0, 1.5px) rotate(-1.5deg);
        transform: translate(0, 1.5px) rotate(-1.5deg)
    }
    8%, 86% {
        -webkit-transform: translate(0, -1.5px) rotate(-1.5deg);
        transform: translate(0, -1.5px) rotate(-1.5deg)
    }
    10%, 72% {
        -webkit-transform: translate(0, 2.5px) rotate(1.5deg);
        transform: translate(0, 2.5px) rotate(1.5deg)
    }
    12%, 64%, 78%, 96% {
        -webkit-transform: translate(0, -.5px) rotate(1.5deg);
        transform: translate(0, -.5px) rotate(1.5deg)
    }
    14%, 54% {
        -webkit-transform: translate(0, -1.5px) rotate(1.5deg);
        transform: translate(0, -1.5px) rotate(1.5deg)
    }
    16% {
        -webkit-transform: translate(0, -.5px) rotate(-1.5deg);
        transform: translate(0, -.5px) rotate(-1.5deg)
    }
    18%, 22% {
        -webkit-transform: translate(0, .5px) rotate(-1.5deg);
        transform: translate(0, .5px) rotate(-1.5deg)
    }
    20%, 36%, 46% {
        -webkit-transform: translate(0, -1.5px) rotate(2.5deg);
        transform: translate(0, -1.5px) rotate(2.5deg)
    }
    26%, 50% {
        -webkit-transform: translate(0, .5px) rotate(.5deg);
        transform: translate(0, .5px) rotate(.5deg)
    }
    28% {
        -webkit-transform: translate(0, .5px) rotate(1.5deg);
        transform: translate(0, .5px) rotate(1.5deg)
    }
    30%, 40%, 62%, 76%, 88% {
        -webkit-transform: translate(0, -.5px) rotate(2.5deg);
        transform: translate(0, -.5px) rotate(2.5deg)
    }
    32%, 34%, 66% {
        -webkit-transform: translate(0, 1.5px) rotate(-.5deg);
        transform: translate(0, 1.5px) rotate(-.5deg)
    }
    42% {
        -webkit-transform: translate(0, 2.5px) rotate(-1.5deg);
        transform: translate(0, 2.5px) rotate(-1.5deg)
    }
    44%, 70% {
        -webkit-transform: translate(0, 1.5px) rotate(.5deg);
        transform: translate(0, 1.5px) rotate(.5deg)
    }
    48%, 74%, 82% {
        -webkit-transform: translate(0, -.5px) rotate(.5deg);
        transform: translate(0, -.5px) rotate(.5deg)
    }
    52%, 56%, 60% {
        -webkit-transform: translate(0, 2.5px) rotate(2.5deg);
        transform: translate(0, 2.5px) rotate(2.5deg)
    }
    58% {
        -webkit-transform: translate(0, .5px) rotate(2.5deg);
        transform: translate(0, .5px) rotate(2.5deg)
    }
    84% {
        -webkit-transform: translate(0, 1.5px) rotate(2.5deg);
        transform: translate(0, 1.5px) rotate(2.5deg)
    }
    90% {
        -webkit-transform: translate(0, 2.5px) rotate(-.5deg);
        transform: translate(0, 2.5px) rotate(-.5deg)
    }
    92% {
        -webkit-transform: translate(0, .5px) rotate(-.5deg);
        transform: translate(0, .5px) rotate(-.5deg)
    }
    94% {
        -webkit-transform: translate(0, 2.5px) rotate(.5deg);
        transform: translate(0, 2.5px) rotate(.5deg)
    }
    0%, 100% {
        -webkit-transform: translate(0, 0) rotate(0);
        transform: translate(0, 0) rotate(0)
    }
}
/* end */
/*底部导航*/
@media (max-width: 800px){.footwaveline{display: none;}}

JS代码

这段js代码是用来触发滚动条显示百分比的JS代码layer.js代码备份

  <!--滚动进度条百分比-->
$(function(){var $this=$("#footgundong");var scrollTimer;$this.hover(function(){clearInterval(scrollTimer)},function(){scrollTimer=setInterval(function(){scrollNews($this)},2000)}).trigger("mouseleave");function scrollNews(obj){var $self=obj.find("ul");var lineHeight=$self.find("li:first").height();$self.animate({"marginTop":-lineHeight+"px"},500,function(){$self.css({marginTop:0}).find("li:first").appendTo($self)})}})
window.onscroll = function() {
  let scrollNow = window.pageYOffset;
  let pageClientHeight = document.documentElement.clientHeight;
  let scrollHeight = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight, document.body.offsetHeight, document.documentElement.offsetHeight, document.body.clientHeight, document.documentElement.clientHeight) - pageClientHeight;
  let fullWindowHeightInPercentage = Math.round((scrollNow / scrollHeight) * 100);
  let percentage = document.getElementById('percentage');
  percentage.innerHTML = '<svg class="icon" aria-hidden="true"><use xlink:href="#icon-dingwei"></use></svg> ' + fullWindowHeightInPercentage + '%';
  if (fullWindowHeightInPercentage == 0) percentage.innerHTML = '<svg class="icon" aria-hidden="true"><use xlink:href="#icon-dingwei"></use></svg> 到顶啦';
  if (fullWindowHeightInPercentage == 100) percentage.innerHTML = '<svg class="icon" aria-hidden="true"><use xlink:href="#icon-jiasu1"></use></svg> 到底啦';
}
</script>
  <!--下面代码是收藏弹窗-->
 <script src="https://cdn.bootcss.com/layer/2.3/layer.js"></script>
  <!--上面代码是收藏弹窗-->

更新

元旦子比主题更新到了6.1版本，分享按钮代码发生了变动，这里我们也做一下修改：

<a class="share-btn poster" poster-share="<?php the_ID();?>" title="海报分享" href="javascript:;">
    <svg class="icon" aria-hidden="true"><use xlink:href="#icon-fenxiang"></use></svg>分享
</a>

添加自动添加60秒读世界文章

添加自动更新60秒读世界页面

页面为每天自动更新，不用每天添加文章

在网站后台添加自定义页面，添加图片，把图片URL地址换为

https://v2.alapi.cn/api/zaobao?token=VP9hrBso0rmrsP24&format=image

如果你想单独做一个html页面也是这个方法，直接新建html文件然后输入下面代码：

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>每日早报</title></head><body>
    <div style="text-align: center;">
        <img src="https://v2.alapi.cn/api/zaobao?token=用户中心获取token&format=image" alt="每日早报" width="100%">
    </div></body></html>

获取token地址：https://alapi.cn/

控制台-个人管理-个人中心

wordpress技巧首页显示访客在线人数统计纯代码实现

wordpress代码实现一键获取网站全部链接-网站地图

wordpress代码实现一键获取网站全部链接

a329033053

04815

文章版权声明 1、本网站名称：魅蓝博客网
2、本站永久网址：https://aagay.cn
3、本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长微信：tin0538进行删除处理。
4、本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5、本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
6、本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。

THE END