wordpress丨更知鸟Begin主题增强文本

2018年5月19日20:38:55 发表评论 696 人围观
纯代码,适用wordpress,可能需要变通,这里只针对我们的更知鸟主题

增强文本之在线人数统计

后台-外观-小工具-增强文本,填入以下代码,移动到你需要的位置即可

  1. <?php
  2. //首先你要有读写文件的权限,首次访问肯不显示,正常情况刷新即可
  3. $online_log = "maplers.dat"//保存人数的文件到根目录,
  4. $timeout = 30;//30秒内没动作者,认为掉线
  5. $entries = file($online_log);
  6. $temp = array();
  7. for ($i=0;$i<count($entries);$i++){
  8. $entry = explode(",",trim($entries[$i]));
  9. if(($entry[0] != getenv('REMOTE_ADDR')) && ($entry[1] > time())) {
  10. array_push($temp,$entry[0].",".$entry[1]."\n"); //取出其他浏览者的信息,并去掉超时者,保存进$temp
  11. }}
  12. array_push($temp,getenv('REMOTE_ADDR').",".(time() + ($timeout))."\n"); //更新浏览者的时间
  13. $maplers = count($temp); //计算在线人数
  14. $entries = implode("",$temp);
  15. //写入文件
  16. $fp = fopen($online_log,"w");
  17. flock($fp,LOCK_EX); //flock() 不能在NFS以及其他的一些网络文件系统中正常工作
  18. fputs($fp,$entries);
  19. flock($fp,LOCK_UN);
  20. fclose($fp);
  21. echo "当前在线人数:".$maplers."人";
  22. ?>

效果图:

wordpress丨更知鸟Begin主题增强文本

增强文本之网站概况

后台-外观-小工具-增强文本,填入以下代码,移动到你需要的位置即可

  1. <ul class="site-profile">
  2.     <li><i class="fa fa-file-o"></i> 文章总数:<?php $count_posts = wp_count_posts(); echo $published_posts = $count_posts->publish;?> 篇</li>
  3.     <li><i class="fa fa-commenting-o"></i> 留言数量:<?php global $wpdbecho $wpdb->get_var("SELECT COUNT(*) FROM $wpdb->comments");?> 条</li>
  4.     <li><i class="fa fa-folder-o"></i> 分类数量:<?php echo $count_categories = wp_count_terms('category'); ?> 个</li>
  5.     <li><i class="fa fa-tags"></i> 标签总数:<?php echo $count_tags = wp_count_terms('post_tag'); ?> 个</li>
  6.     <li><i class="fa fa-link"></i> 链接数量:<?php global $wpdbecho $wpdb->get_var("SELECT COUNT(*) FROM $wpdb->links WHERE link_visible = 'Y'"); ?> 个</li>
  7.     <li><i class="fa fa-clock-o"></i> 运行时间:<?php echo floor((time()-strtotime("2007-8-1"))/86400); ?> 天</li>
  8.     <li><i class="fa fa-eye"></i> 浏览总量:<?php echo all_view(); ?> 次</li>
  9.     <li><i class="fa fa-pencil-square-o"></i> 最后更新:<?php global $wpdb$last =$wpdb->get_results("SELECT MAX(post_modified) AS MAX_m FROM $wpdb->posts WHERE (post_type = 'post' OR post_type = 'page') AND (post_status = 'publish' OR post_status = 'private')");$last = date('Y年n月j日', strtotime($last[0]->MAX_m));echo $last; ?></li>
  10.     </ul>

效果图:

wordpress丨更知鸟Begin主题增强文本

增强文本之多彩文字广告位

后台-外观-小工具-增强文本,填入以下代码,移动到你需要的位置即可

  1. <div class="colorbar-box">
  2.     <ul class="colorbar">
  3.         <li><a href="链接地址" target="_blank" style="background-color:#ff3030;">我是文字</a></li>
  4.         <li><a href="链接地址" target="_blank" style="background-color:#428BCA;">我是文字</a></li>
  5.         <li><a href="链接地址" target="_blank" style="background-color:#e84266;">我是文字</a></li>
  6.         <li><a href="链接地址" target="_blank" style="background-color:#91c24f;">我是文字</a></li>
  7.         <li><a href="链接地址" target="_blank" style="background-color:#f49800;">我是文字</a></li>
  8.     </ul>
  9. </div>
  10. <style type="text/css">
  11. .colorbar-box ul {
  12.     padding: 0;
  13. }
  14. .colorbar li {
  15.     width: 100% !important;
  16. }
  17. .colorbar li a {
  18.     color#fff;
  19.     line-height40px;
  20.     displayblock;
  21.     width: 100%;
  22.     text-aligncenter;
  23. }
  24.     .colorbar li a:hover {
  25.     opacity: 0.8;
  26. }
  27. </style>

效果图:

wordpress丨更知鸟Begin主题增强文本

增强文本之九宫格图标

后台-外观-小工具-增强文本,填入以下代码,移动到你需要的位置即可

  1. <div class="top-author lx8">
  2.     <a rel="external nofollow" target="_blank" title="链接" href="#">
  3.     <img src="http://ww3.sinaimg.cn/mw690/703be3b1jw1f6usgjyucwj203k03kweb.jpg">
  4. </div>
  5. <div class="top-author lx8">
  6.     <a rel="external nofollow" target="_blank" title="链接" href="#">
  7.     <img src="http://ww3.sinaimg.cn/mw690/703be3b1jw1f6usgjyucwj203k03kweb.jpg">
  8. </div>
  9. <div class="top-author lx8">
  10.     <a rel="external nofollow" target="_blank" title="链接" href="#">
  11.     <img src="http://ww3.sinaimg.cn/mw690/703be3b1jw1f6usgjyucwj203k03kweb.jpg">
  12. </div>
  13. <div class="top-author lx8">
  14.     <a rel="external nofollow" target="_blank" title="链接" href="#">
  15.     <img src="http://ww3.sinaimg.cn/mw690/703be3b1jw1f6usgjyucwj203k03kweb.jpg">
  16. </div>
  17. <div class="top-author lx8">
  18.     <a rel="external nofollow" target="_blank" title="链接" href="#">
  19.     <img src="http://ww3.sinaimg.cn/mw690/703be3b1jw1f6usgjyucwj203k03kweb.jpg">
  20. </div>
  21. <div class="top-author lx8">
  22.     <a rel="external nofollow" target="_blank" title="链接" href="#">
  23.     <img src="http://ww3.sinaimg.cn/mw690/703be3b1jw1f6usgjyucwj203k03kweb.jpg">
  24. </div>
  25. <div class="top-author lx8">
  26.     <a rel="external nofollow" target="_blank" title="链接" href="#">
  27.     <img src="http://ww3.sinaimg.cn/mw690/703be3b1jw1f6usgjyucwj203k03kweb.jpg">
  28. </div>
  29. <div class="top-author lx8">
  30.     <a rel="external nofollow" target="_blank" title="链接" href="#">
  31.     <img src="http://ww3.sinaimg.cn/mw690/703be3b1jw1f6usgjyucwj203k03kweb.jpg">
  32. </div>

效果图:

wordpress丨更知鸟Begin主题增强文本

增强文本小工具带图标链接HTML代码

首先,将相应样式添加到主题选项→定制风格“自定义样式”中或者主题样式文件style.css最后。

  1. .qz-box a{background:#08c;float:left;width:50%;color:#fff!important;text-align:center;padding:15px 10px 10px 10px}.g-col .qz-box a,#cms-widget-one .qz-box a{width:25%;padding:25px 10px 20px 10px}@media screen and (max-width:900px){.qz-box a{width:50%}#cms-widget-one .qz-box a{width:50%}}@media screen and (max-width:700px){#group-widget-one .qz-box a{width:50%}}.qz-box a:hover{background:#777}a.qza{background:#699}a.qzb{background:#c96}a.qzc{background:#969}a.qzd{background:#9c9}.qz-icon{padding:5px 0 10px 0;display:block}.qz-icon .be{font-size:40px!important}.g-col .qz-icon .be{font-size:60px!important}

上面代码是以主题自带的图标字体为例,使用自定义阿里图标库,请将上面代码中的be改成zm.

其次,将下面代码添加到增强文本小工具中:

  1. <div class="qz-box">
  2.     <!-- 链接A -->
  3.     <a class="qz-link qza" href="链接" rel="bookmark">
  4.         <span class="qz-icon"><i class="be be-home"></i></span>
  5.         <span class="qz-title">关注WordPress</span>
  6.     </a>
  7.     <!-- 链接B -->
  8.     <a class="qz-link qzb" href="http://localhost/wordpress/203.html" rel="bookmark">
  9.         <span class="qz-icon"><i class="be be-folder"></i></span>
  10.         <span class="qz-title">给我投稿</span>
  11.     </a>
  12.     <!-- 链接C -->
  13.     <a class="qz-link qzc" href="链接" rel="bookmark">
  14.         <span class="qz-icon"><i class="be be-sort"></i></span>
  15.         <span class="qz-title">WordPress最新版</span>
  16.     </a>
  17.     <!-- 链接D -->
  18.     <a class="qz-link qzd" href="链接" rel="bookmark">
  19.         <span class="qz-icon"><i class="be be-thumbs-up-o"></i></span>
  20.         <span class="qz-title">在线咨询</span>
  21.     </a>
  22.     <div class="clear"></div>
  23. </div>

修改其中的链接、文字及字体图标....

效果图:

侧边栏

wordpress丨更知鸟Begin主题增强文本

单栏小工具

wordpress丨更知鸟Begin主题增强文本

页脚小工具中添加微信二维码

将增强文本小工具添加到页脚小工具中,将复制下面代码添加到增强文本小工具中:

  1. <ul class="about-me-img clearfix">
  2. <li>
  3. <img src="http://wx3.sinaimg.cn/large/0066LGKLly1fo5cum3xgej305k05kjrj.jpg" alt="我的微信">
  4. <p>我的微信</p>
  5. </li>
  6. <li>
  7. <img src="http://wx3.sinaimg.cn/large/0066LGKLly1fo5cum3xgej305k05kjrj.jpg" alt="微信公众号">
  8. <p>微信公众号</p>
  9. </li>
  10. <li>
  11. <a href="https://weibo.com/5596820771/" target="_blank">
  12. <img src="http://wx3.sinaimg.cn/large/0066LGKLly1fo5cum3xgej305k05kjrj.jpg" alt="官方微博">
  13. <p>官方微博</p>
  14. </a>
  15. </li>
  16. </ul>
  17. <style type="text/css">
  18. .about-me-img li {
  19. float: left;
  20. padding: 5px;
  21. width: 33.333333333333333333% !important;
  22. }
  23. .about-me-img p {
  24. text-align: center;
  25. }
  26. </style>

如果是两张图片,修改代码中的33.3333333333333%,为:50%。

发表评论

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