begin主题折腾笔记

  • begin主题折腾笔记已关闭评论
  • 2,655 views
  • A+
所属分类:WordPress集锦
广告也精彩
本文预计阅读时间 22 分钟

博主使用的Begin版本是最新的:LTS

以下是博主使用begin过程中的笔记,会一点点慢慢更新!

一、美化关于本站

将下面样式代码添加主题选项→定制风格,在“自定义样式”中:

  1. .about-img {
  2.     text-aligncenter;
  3.     backgroundurl(https://www.94joss.com/wp-content/uploads/2018/01/timg.jpg) center center no-repeat;
  4.     background-size: cover;
  5.     height120px;
  6.     margin0px 0 40px 0;
  7. }
  8. .about-img img {
  9.     width120px;
  10.     heightauto;
  11.     margin39px 0px 0 70px;
  12.     padding2px;
  13.     border-radius: 50%;
  14.     border2px solid #f8f8f8;
  15. }
  16. .about-name {
  17.     font-size16px;
  18.     font-weight: 700;
  19.     text-aligncenter;
  20. }

效果如下

begin主题折腾笔记

二、首页左上角加上当前日期。

将以下代码加在begin主题下面inc/user/user-profile.php文件中的合适位置。

  1. <script type="text/javascript">today=new Date();var day; var date; var hello;hour=new Date().getHours();if(hour < 6){ hello=' 凌晨好! ';}else if(hour < 9){ hello=' 早上好!';}else if(hour < 12){ hello=' 上午好!';}else if(hour < 14){ hello=' 中午好! ';}else if(hour < 17){ hello=' 下午好! ';}else if(hour < 19){ hello=' 傍晚好!';}else if(hour < 22){ hello=' 晚上好! ';}else{ hello='夜深了! ';}function GetCookie(sName) { var arr = document.cookie.match(new RegExp("(^| )"+sName+"=([^;]*)(;|$)")); if(arr !=null){return unescape(arr[2])}; return null;}var Guest_Name = decodeURIComponent(GetCookie('author'));var webUrl = webUrl;if (Guest_Name != "null" && Guest_Name != "" ){ hello = Guest_Name+' , '+hello+' 欢迎回来。';}document.write(' '+hello);</script>
  1. <script type="text/javascript">today=new Date(); var tdate,tday, x,year; var x = new Array("星期日""星期一""星期二""星期三""星期四""星期五","星期六");var MSIE=navigator.userAgent.indexOf("MSIE");if(MSIE != -1){ year =(today.getFullYear());} else { year = (today.getYear()+1900);} tdate= year+ "年" + (today.getMonth() + 1 ) + "月" + today.getDate() + "日" + " " + x[today.getDay()];document.write(tdate);</script>

效果如下

begin主题折腾笔记

三、样式杂项汇总。

(导航栏向下移动不消失)js文件夹里面script.js把"offset": 89,改成最大值"offset": 9999,

四、让评论框不在单调。

打开您的begin主题style.css文件,找到comment,插入如下代码:

  1. background-image:url(https://www.94joss.com/wp-content/uploads/2018/01/pinglun.png);
  2. background-repeat:no-repeat;
  3. background-position:center center;

如下图:begin主题折腾笔记

 

效果如下(根据自己需求,选择不同的图片)

begin主题折腾笔记

五、给网站添加个swf背景黄金龙。

begin目录下的header.php 插入下面这段代码就可以实现背景是swf的效果。

(黄金龙自己到我网站上扒!浏览器必须是有开启flash的) 密码:xpww

  1. <html><embed src="https://www.94joss.com/wp-content/uploads/2018/01/jinlong.swf" tppabs="https://www.94joss.com/1.swf" width=1276 height=1860 align=rightright style="LEFT:0px; POSITION: absolute; TOP:-58px; height: 1860px; width: 1276px;" type=application/x-shockwave-flash wmode="transparent" quality="high";> </embed>

六、WordPress显示页面查询次数和耗时。

将以下代码放在网站合适位置即可,一般是放在页脚footer里面。

  1. <p style="text-align:center;color:green">查询次数<?php echo get_num_queries();?> 次,总耗时 <?php timer_stop(1); ?> 秒.</p>

本站使用的是知更鸟begin主题,目前代码放在了footer里面。

其他特效文字:

  1. <div id="chakhsu"  style="text-align:center;color:green"></div> <script>var chakhsu = function (r) {
  2.         function t() {
  3.             return b[Math.floor(Math.random() * b.length)]
  4.         }
  5.         function e() {
  6.             return String.fromCharCode(94 * Math.random() + 33)
  7.         }
  8.         function n(r) {
  9.             for (var n = document.createDocumentFragment(), i = 0; r > i; i++) {
  10.                 var l = document.createElement("span");
  11.                 l.textContent = e(), l.style.color = t(), n.appendChild(l)
  12.             }
  13.             return n
  14.         }
  15.         function i() {
  16.             var t = o[c.skillI];
  17.             c.step ? c.step-- : (c.step = g, c.prefixP < l.length ? (c.prefixP >= 0 && (c.text += l[c.prefixP]), c.prefixP++) : "forward" === c.direction ? c.skillP < t.length ? (c.text += t[c.skillP], c.skillP++) : c.delay ? c.delay-- : (c.direction = "backward", c.delay = a) : c.skillP > 0 ? (c.text = c.text.slice(0, -1), c.skillP--) : (c.skillI = (c.skillI + 1) % o.length, c.direction = "forward")), r.textContent = c.text, r.appendChild(n(c.prefixP < l.length ? Math.min(s, s + c.prefixP) : Math.min(s, t.length - c.skillP))), setTimeout(i, d)
  18.         }
  19.         /*以下内容自定义修改*/
  20.         var l = "陪伴",
  21.             o = ["是最长情的告白,相守是最温暖的承诺。", ].map(function (r) {
  22.                 return r + ""
  23.             }), a = 2, g = 1, s = 5, d = 75,
  24.             b = ["rgb(110,64,170)""rgb(150,61,179)""rgb(191,60,175)""rgb(228,65,157)""rgb(254,75,131)""rgb(255,94,99)""rgb(255,120,71)""rgb(251,150,51)""rgb(226,183,47)""rgb(198,214,60)""rgb(175,240,91)""rgb(127,246,88)""rgb(82,246,103)""rgb(48,239,130)""rgb(29,223,163)""rgb(26,199,194)""rgb(35,171,216)""rgb(54,140,225)""rgb(76,110,219)""rgb(96,84,200)"],
  25.             c = {text: "", prefixP: -s, skillI: 0, skillP: 0, direction"forward", delay: a, step: g};
  26.         i()
  27.     };
  28.     chakhsu(document.getElementById('chakhsu'));</script>

七、一段问候语代码

自定义问候语和背景色,代码来自某站扒的样式看本文末,代码由css加html而成,代码直接复制下面的来用。

  1. <aside id="php_text-8" class="widget php_text wow fadeInUp" data-wow-delay="0.3s"><div class="textwidget widget-text"><style type="text/css">#container-box-1{color:#526372;text-transform:uppercase;width:100%;font-size:16px;line-height:50px;text-align:center}#flip-box-1{overflow:hidden;height:50px}#flip-box-1 div{height:50px}#flip-box-1>div>div{color:#fff;display:inline-block;text-align:center;height:50px;width:100%}#flip-box-1 div:first-child{animation:show 8s linear infinite}.flip-box-1-1{background-color:#FF7E40}.flip-box-1-2{background-color:#C166FF}.flip-box-1-3{background-color:#737373}.flip-box-1-4{background-color:#4ec7f3}.flip-box-1-5{background-color:#42c58a}.flip-box-1-6{background-color:#F1617D}@keyframes show{0%{margin-top:-300px}5%{margin-top:-250px}16.666%{margin-top:-250px}21.666%{margin-top:-200px}33.332%{margin-top:-200px}38.332%{margin-top:-150px}49.998%{margin-top:-150px}54.998%{margin-top:-100px}66.664%{margin-top:-100px}71.664%{margin-top:-50px}83.33%{margin-top:-50px}88.33%{margin-top:0px}99.996%{margin-top:0px}100%{margin-top:300px}}</style><div id="container-box-1"><div class="container-box-1-1">坚持每天来逛逛,会让你</div><div id="flip-box-1"><div><div class="flip-box-1-1">工作也轻松了!</div></div><div><div class="flip-box-1-2">生活也美好了!</div></div><div><div class="flip-box-1-3">心情也舒畅了!</div></div><div><div class="flip-box-1-4">走路也有劲了!</div></div><div><div class="flip-box-1-5">腿也不痛了!</div></div><div><div class="flip-box-1-6">腰也不酸了!</div></div><div><div class="flip-box-1-1">工作也轻松了!</div></div></div><div class="container-box-1-2">你好我也好,不要忘记哦!</div></div></div><div class="clear"></div></aside>

八、WordPress多彩推荐侧边栏

begin主题折腾笔记

效果图的话,就上面这个了。我的是直接放在begin主题增强文本里面。

  1. <ul class="colorbar">
  2. <li><a href="http://" target="_blank" style="background-color:#ff3030;">Joos君淘货优惠</a></li>
  3. <li><a href="http://www.zhushuming.cn/code.html" target="_blank" style="background-color:#428BCA;">HTML多功能代码转换器</a></li>
  4. </ul>
  5. <style type="text/css">
  6. .colorbar li {
  7.     width: 100% !important;
  8. }
  9. .colorbar li a {
  10.     color#fff;
  11.     line-height40px;
  12.     displayblock;
  13.     width: 100%;
  14.     text-aligncenter;
  15. }
  16. .colorbar li a:hover {
  17.     opacity: 0.8;
  18. }
  19. </style>

九、给缩略图添加圆角及背影

  1. .thumbnail {
  2.     border-radius: 6px;
  3.     box-shadow: rgba(0,0,0,0.5) 3px 3px 3px;
  4. }

将上面样式代码添加主题选项→定制风格,“自定义样式”中。也可以自己修改css文件中的代码。

十、文章预计阅读时间。

将以下代码放到functions.php中即可。

  1. //预计阅读时间
  2. function lmsim_read_time($content){
  3.  $text = trim(strip_tags( get_the_content()));
  4.  $text_num = mb_strlen($text, 'UTF8');
  5.  $read_time = ceil($text_num/400);
  6. $content = '<div class="read-time" style="color:#F86B06"><center>本文预计阅读时间 <span>' . $read_time . '</span> 分钟</center></div>' . $content;
  7. return $content; }
  8. add_filter ( 'the_content', 'lmsim_read_time');

begin主题折腾笔记

十一、移动端导航菜单图标改为文字

修改方法与上条相同,将代码添加到主题选项→定制风格“自定义样式”中:

  1. .bars:after, .nav-mobile:after {
  2.     content"导航";
  3.     background#c40000;
  4.     color#fff;
  5.     padding1px 3px;
  6.     border-radius: 2px;
  7. }
  8. .bars .be, .nav-mobile .be {
  9.     displaynone;
  10. }

效果如图:

begin主题折腾笔记

 

weinxin
九四君博客站长语录
欢迎关注订阅‘爱君娱乐科技’微信公众号,本站的资源也会上传到‘爱君娱乐科技’公众号。
广告也精彩