知更鸟Begin主题美化记录

2021年3月9日16:09:16 发表评论
微信搜一搜 ts小陈

美化后效果可查看本网站

评论获取QQ昵称失败修复

发现不能自动获取QQ的昵称，排查发现是因为获取昵称的接口挂了。

接口放入主题/js/qq-info.php这个页面里的，原来的接口 http://r.pengyou.com/fcg-bin/cgi_get_portrait.fcg?uins= 已挂，替换获取昵称接口地址。

新地址：http://r.qzone.qq.com/fcg-bin/cgi_get_portrait.fcg?uins=

大概在第28行

  1. $nameurl = "https://r.qzone.qq.com/fcg-bin/cgi_get_portrait.fcg?uins=".$qq;

知更鸟Begin主题美化记录

加粗导航菜单字体

将下面样式加到主题选项→定制风格→自定义样式中

  1. #site-nav .down-menu li {
  2. font-weight: bold;
  3. }

 

添加评论框默认文字，提高访客舒适度

知更鸟Begin主题美化记录

实现方法

首先我们打开主题根目录的comments.php文件，注意是在主题根目录，而不是WordPress根目录，然后复制下面这行代码添加到textarea标签里。

  1. placeholder="有任何疑问请在此评论，小任会尽力为您解答！"

知更鸟Begin主题美化记录

主题文章内分享按钮

替换原有样式

  1. /** 分享 **/
  2. #share {
  3.     position: absolute;
  4.     top: -60px;
  5.     rightright: -29px;
  6.     width: 302px;
  7.     height: 68px;
  8.     display: none;
  9.     z-index: 999;
  10. }
  11. #share a {
  12.     float: left;
  13.     background: #999;
  14.     font-size: 20px !important;
  15.     color: #fff;
  16.     width: 40px;
  17.     height: 40px;
  18.     line-height: 40px;
  19.     margin-left: 4px;
  20.     padding-left: 0;
  21.     text-align: center;
  22.     border-radius: 20px;
  23.     background: rgba(128, 128, 128, 0.9);
  24. }
  25. #share .be-addbox {
  26.     color: #7ab951;
  27.     border: 1px solid #7ab951;
  28.     background: #fff;
  29. }
  30. #share .be-addbox:hover {
  31.     background: #7ab951 !important;
  32.     color: #fff !important;
  33. }
  34. #share .be-qzone {
  35.     color: #ff7400;
  36.     border: 1px solid #ff7400;
  37.     background: #fff;
  38. }
  39. #share .be-qzone:hover {
  40.     background: #ff7400 !important;
  41.     color: #fff !important;
  42. }
  43. #share .be-stsina {
  44.     color: red;
  45.     border: 1px solid red;
  46.     background: #fff;
  47. }
  48. #share .be-stsina:hover {
  49.     background: #ff0000 !important;
  50.     color: #fff !important;
  51. }
  52. #share .be-tqq {
  53.     color: #46c0e6;
  54.     border: 1px solid #46c0e6;
  55.     background: #fff;
  56. }
  57. #share .be-tqq:hover {
  58.     background: #46c0e6 !important;
  59.     color: #fff !important;
  60. }
  61. #share .be-renren {
  62.     color: #3b68ac;
  63.     border: 1px solid #3b68ac;
  64.     background: #fff;
  65. }
  66. #share .be-renren:hover {
  67.     background: #3b68ac !important;
  68.     color: #fff !important;
  69. }
  70. #share .be-weixin {
  71.     color: #006f1d;
  72.     border: 1px solid #006f1d;
  73.     background: #fff;
  74. }
  75. #share .be-weixin:hover {
  76.     background: #006f1d !important;
  77.     color: #fff !important;
  78. }
  79. .bd_weixin_popup {
  80.     height: 250px !important;
  81. }
  82. .bd_weixin_popup_foot {
  83.     display: none;
  84. }

“提交评论”按钮美化

覆盖原有样式：

  1. #respond #submit {
  2.     background: #38a3fd;
  3.     width: 15%;
  4.     margin: 5px 0 15px 0;
  5.     padding: 8px;
  6.     cursor: pointer;
  7.     border: 1px solid #ddd;
  8.     border-radius: 19px;
  9.     -webkit-appearance: none;
  10.     color: #fff;
  11.     box-shadow: 0 6px 10px #38a3fd50;
  12. }

主题文件下载信息框展示效果美化

在文章中启用下载模块时，如果只填写文件的信息时，在文章文件下载框中只会显示你所填写文件资料，并不会在显示每栏对应的是什么信息。

如果我们要让每栏信息都对应的话，我们在后台编辑下载信息时要手动添加非常麻烦,默认添加名称。

修改方法：首先打开根目录中down.php、download.php将下面代码复制替换掉

然后再打开目录/inc/down.php、download.php将下面代码替换掉

替换前：

  1. <div class="desc">
  2. <h3>文件信息</h3>
  3. <?php if($down_name){ ?><p><?php echo $down_name;?></p><?php } ?>
  4. <?php if($file_os){ ?><p><?php echo $file_os;?></p><?php } ?>
  5. <?php if($file_inf){ ?><p><?php echo $file_inf;?></p><?php } ?>
  6. <?php if($down_size){ ?><p><?php echo $down_size;?></p><?php } ?>
  7. <?php if($links_id){ ?><p><strong>下载次数：</strong><?php echo $click_count;?></p><?php } ?>
  8. </div>
  9. <div class="clear"></div>

替换后：

  1. <div class="desc">
  2. <h3>文件信息</h3>
  3. <p><?php if($down_name){ ?>资源名称：<?php echo $down_name;?><?php } ?></p>
  4. <p><?php if($file_os){ ?>应用平台：<?php echo $file_os;?><?php } ?></p>
  5. <p><?php if($file_inf){ ?>资源版本：<?php echo $file_inf;?><?php } ?></p>
  6. <p><?php if($down_size){ ?>资源大小：<?php echo $down_size;?><?php } ?><p>
  7. <?php if($links_id){ ?><p><strong>下载次数：</strong><?php echo $click_count;?></p><?php } ?>
  8. </div>
  9. <div class="clear"></div>

然后再打开目录/inc/down.php、download.php将下面代码替换掉

替换前：

  1. if($down_start) {
  2.         $content .= '
  3.         <div class="down-form">
  4.             <fieldset>
  5.                 <legend>文件信息</legend>
  6.                 <span class="down-form-inf">
  7.                     <span>'.$down_name.'</span>
  8.                     <span>'.$file_os.'</span>
  9.                     <span>'.$file_inf.'</span>
  10.                     <span>'.$down_size.'</span>
  11.                     <span class="pass"> '.$rr_password.'</span>
  12.                     <div class="clear"></div>
  13.                 </span>

替换后：

  1. if($down_name) {
  2.             $down_name_on .= '<span><strong>资源名称：</strong>'.$down_name.'</span>';
  3.         }
  4. if($file_os) {
  5.             $file_os_on .= '<span><strong>应用平台：</strong>'.$file_os.'</span>';
  6.         }
  7. if($file_inf) {
  8.             $file_inf_on .= '<span><strong>资源版本：</strong>'.$file_inf.'</span>';
  9.         }
  10. if($down_size) {
  11.             $down_size_on .= '<span><strong>资源大小：</strong>'.$down_size.'</span>';
  12.         }
  13.     if($down_start) {
  14.       $content .= '
  15.       <div class="down-form">
  16.         <fieldset>
  17.           <legend>文件信息</legend>
  18.           <span class="down-form-inf">
  19.             <span>'.$down_name_on.'</span>
  20.             <span>'.$file_os_on.'</span>
  21.             <span>'.$file_inf_on.'</span>
  22.             <span>'.$down_size_on.'</span>
  23.             <span class="pass"> '.$rr_password.'</span>
  24.             <div class="clear"></div>
  25.           </span>
  26. 最终效果是：有内容的才

最终效果是：有内容的才会显示标题，没有内容的标题不会显示出来，具体效果请看本站。

修改完成后到你的博客主页CTRL+F5清除缓存刷新后就可以了，我们在发布有下载信息的文章时就可以只输入文件信息就好了。

 

 

 

热门标签美化

主题自带的标签太普通，换成彩色的，使用下边的代码即可美化你的热门标签。

1、代码部署

风格一、凌乱派

知更鸟Begin主题美化记录

代码如下：

  1. <script type="text/javascript">box_width=$("#cx_tag_cloud-4").width();len=$(".tagcloud a").length-1;$(".tagcloud a").each(function(i){var let=new Array('c3010a','31ac76','ea4563','31a6a0','8e7daa','4fad7b','f99f13','f85200','666666');var random1=Math.floor(Math.random()*9)+0;var num=Math.floor(Math.random()*6+9);$(this).attr('style','background:#'+let[random1]+'');if($(this).next().length>0){last=$(this).next().position().left}});</script>
  2. <style type="text/css">.tagcloud a{color:#fff;}#php_text-24{display:none;}</style>

风格二、正经派

知更鸟Begin主题美化记录

代码如下：

  1. <script type="text/javascript">box_width=$("#cx_tag_cloud-4").width();len=$(".tagcloud a").length-1;$(".tagcloud a").each(function(i){var let=new Array('c3010a','31ac76','ea4563','31a6a0','8e7daa','4fad7b','f99f13','f85200','666666');var random1=Math.floor(Math.random()*9)+0;var num=Math.floor(Math.random()*6+9);$(this).attr('style','background:#'+let[random1]+'');if($(this).next().length>0){last=$(this).next().position().left}});</script>
  2. <style type="text/css">
  3. .tagcloud a{color:#fff;}
  4. #php_text-24{display:none;}
  5. .tagcloud {padding: 10px 0 10px 10px;}.tagcloud a {padding-right:5px;
  6. padding-left:5px;
  7. overflow:hidden;
  8. display:block;
  9. width:92px;
  10. height:28px;}
  11. </style>

2、使用方法：

1、关闭标签3D展示功能。（未开请忽略）小工具-热门标签-取消显示3D

2、设置热门标签展示数量。（凌乱派风格随便填，正经派建议是3的倍数，多少自己看着舒服就OK）

3、在热门标签小工具下方添加增强文本（小工具），然后将上述任一风格代码复制到文本里边。

4、注意事项：使用后在热门标签下方会有个细长的白色框框，怎么隐藏呢？

接着看图：

知更鸟Begin主题美化记录

如图所示，右键"审查元素",查找个横条的ID，将这里的ID替换到上述代码中。如我的是php-text-11

知更鸟Begin主题美化记录

美化评论“沙发 板凳 地板”添加背景色

找到主题目录 inc/comment-template.php文件，搜索“沙发”。

找到如下代码

  1. case 0 :echo "&nbsp;" . sprintf(__( '沙发', 'begin' )) . "";++$commentcount;break;
  2. case 1 :echo "&nbsp;" . sprintf(__( '板凳', 'begin' )) . "";++$commentcount;break;
  3. case 2 :echo "&nbsp;" . sprintf(__( '地板', 'begin' )) . "";++$commentcount;break;

修改成

  1. case 0 :echo '&nbsp;<span class="pinglunqs plshafa">沙发</span>';++$commentcount;break;
  2. case 1 :echo '&nbsp;<span class="pinglunqs plbandeng">板凳</span>';++$commentcount;break;
  3. case 2 :echo '&nbsp;<span class="pinglunqs pldiban">地板</span>';++$commentcount;break;

然后在Style.css文件里添加如下代码

  1. .pinglunqs{
  2. color:#fff;
  3. padding:0px 8px;
  4. border-radius:8px
  5. }
  6. .plshafa{
  7. background:#fd5d3c
  8. }
  9. .plbandeng{
  10. background:#d270fb
  11. }
  12. .pldiban{
  13. background:#9cf
  14. }

右侧滚动条按钮美化

把下面的代码复制，粘贴到：后台→外观→主题选项→定制风格→自定义样式

  1. #scroll {
  2.     width: 32px;
  3.     float: rightright;
  4.     position: fixed;
  5.     rightright: 10px;
  6.     bottombottom: 50px;
  7.     z-index: 9999;
  8. }
  10. #scroll li a {
  11.     font-size: 16px;
  12.     color: #fff;
  13.     width: 32px;
  14.     height: 32px;
  15.     line-height: 28px;
  16.     text-align: center;
  17.     vertical-align: middle;
  18.     margin-top: 4px;
  19.     display: block;
  20.     cursor: pointer;
  21.     border: 1px solid #ddd;
  22.     border-radius: 15px;
  23.     box-shadow: 0 1px 1px rgba(0,0,0,0.04);
  24. }
  26. #scroll li a:hover {
  27.     background: #2f889a;
  28.     color: #fff;
  29.     border: 1px solid #2f889a;
  30.     transition: all .2s ease-in 0s;
  31. }
  33. .scroll-h {
  34.     background-color: #ff5e5c !important;
  35. }
  37. .scroll-c {
  38.     background-color: #24a5db !important;
  39. }
  41. .scroll-b {
  42.     background-color: #ff9531 !important;
  43. }
  45. #gb2big5 {
  46.     background-color: #aec534 !important;
  47. }
  49. .qr {
  50.     background-color: #4a4a4a !important;
  51. }
  53. .qqonline a {
  54.     background: #e6af1345!important;
  55. }
  57. @media screen and (min-width:900px) {
  58.     #scroll li a:hover {
  59.         background: #2f889a;
  60.         color: #fff;
  61.         border: 1px solid #2f889a;
  62.         transition: all 0.2s ease-in 0s;
  63.     }
  64. }
  66. .qr-img {
  67.     position: fixed;
  68.     background: #fff;
  69.     bottombottom: 50px;
  70.     rightright: 50px;
  71.     max-width: 300px;
  72.     z-index: 9999;
  73.     display: none;
  74.     border-radius: 4px;
  75.     padding: 10px 10px 2px 10px;
  76.     animation: fade-in;
  77.     animation-duration: 0.5s;
  78.     -webkit-animation: fade-in 0.5s;
  79.     border: 1px solid #ddd;
  80.     box-shadow: 0 1px 1px rgba(0,0,0,0.05);
  81. }
  83. #output img {
  84.     position: absolute;
  85.     top: 72px;
  86.     rightright: 72px;
  87.     width: 25px;
  88.     height: 25px;
  89. }
  91. .qr .fa-qrcode {
  92.     font-size: 20px !important;
  93.     line-height: 32px !important;
  94. }
  96. .qr-img .arrow {
  97.     position: absolute;
  98.     font-size: 26px;
  99.     bottombottom: 2px;
  100. }
  102. .arrow-y {
  103.     color: #fff;
  104.     rightright: -8px;
  105. }
  107. .arrow-z {
  108.     color: #c6c6c6;
  109.     rightright: -9px;
  110. }
  112. #output td {
  113.     border: none;
  114. }
  116. #output td {
  117.     padding: 0;
  118. }
  120. .page-template-template-blog #scroll li a.scroll-c,.page-template-template-code #scroll li a.scroll-c,.page-template-template-links #scroll li a.scroll-c,.page-template-template-archives #scroll li a.scroll-c,.page-template-template-cms #scroll li a.scroll-c,.page-template-template-hot #scroll li a.scroll-c,.page-template-template-tag #scroll li a.scroll-c,.page-template-template-tougao #scroll li a.scroll-c,.page-template-template-contact #scroll li a.scroll-c,.page-template-template-message #scroll li a.scroll-c,.page-template-template-baidu #scroll li a.scroll-c {
  121.     display: none;
  122. }
  124. #scroll li a {
  125.     background: #2f9a3c;
  126. }

 

 

 

小陈号卡
ts小陈

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

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

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