A+

主题新加入了侧边栏的一些小工具

2019年05月04日 随笔心情 6条评论 261次浏览

关于本站小工具

这个不用说了吧,眼力好的人一眼就能看出来是知更鸟主题里面自带的小工具,这么好看的东西我肯定不会放过,所以就挪过来我主题里面了,挪过来肯定是要改动一下的,代码出错的地方我做了一些修复,还有CSS样式也经过了适量的调整。

下面是我修改过的代码:

  1. <div id="feed_widget">
  2.     <div class="feed-about">
  3.         <?php if ( $instance[ 'about_back' ]  ) { ?>
  4.             <div class="author-back"><img src="<?php echo $instance['about_back']; ?>" alt="bj"/></div>
  5.         <?php } ?>
  6.         <div class="about-main">
  7.             <div class="about-img">
  8.                 <img src="<?php echo $instance['about_img']; ?>" alt="name"/>
  9.             </div>
  10.             <div class="clear"></div>
  11.             <div class="about-name"><?php bloginfo('name'); ?></div>
  12.             <div class="about-the"><?php echo $instance['about_the']; ?></div>
  13.         </div>
  14.         <div class="clear"></div>
  15.         <?php if($instance['show_social_icon']) { ?>
  16.         <ul>
  17.             <li class="weixin">
  18.                 <span class="weixin-b"><span class="weixin-qr"><img src="<?php echo $instance['weixin']; ?>" alt=" weixin"/></span><a title="微信"><i class="yao yao-weixin"></i></a></span>
  19.             </li>
  20.             <li class="tqq"><a target=blank rel="external nofollow" href=http://wpa.qq.com/msgrd?V=3&uin=<?php echo $instance['tqqurl']; ?>&Site=QQ&Menu=yes title="QQ在线"><i class="<?php echo $instance['tqq']; ?>"></i></a></li>
  21.             <li class="tsina"><a title="" href="<?php echo $instance['tsinaurl']; ?>" target="_blank" rel="external nofollow"><i class="<?php echo $instance['tsina']; ?>"></i></a></li>
  22.         </ul>
  23.         <?php } else { ?>
  24.             <span class="social-clear"></span>
  25.         <?php } ?>
  26.         <div class="about-inf">
  27.             <span class="about-cn"><?php echo _('文章') ?><br /><?php $count_posts = wp_count_posts(); echo $published_posts = $count_posts->publish;?></span>
  28.             <span class="about-pn"><?php echo _('留言') ?><br /><?php global $wpdb;echo $wpdb->get_var("SELECT COUNT(*) FROM $wpdb->comments");?></span>
  29.             <span class="about-cn"><?php echo _('访客') ?><br /><?php echo wp_all_view() ?></span>
  30.         </div>
  31.     </div>
  32. </div>

CSS样式:

  1. /* 关于本站 */
  2. .author-back img{
  3.     float:left;
  4.     height:auto;
  5.     width:319px
  6. }
  7. .about-main{
  8.     font-size:14px;
  9.     position:relative;
  10.     padding:10px 15px 0 15px;
  11. }
  12. .about-img{
  13.     width:100px;
  14.     margin:30px auto 10px;
  15. }
  16. .about-img img{
  17.     background:#fff;
  18.     float:left;
  19.     width:80px;
  20.     height:80px;
  21.     padding:5px;
  22.     border-radius:100px;
  23. }
  24. .footer-widget .about-img img{
  25.     border:0
  26. }
  27. .footer-widget .about-main{
  28.     padding:10px 0 0;
  29. }
  30. .about-name{
  31.     color:#1A1A1A;
  32.     font-size:22px;
  33.     font-weight:500;
  34.     text-align:center;
  35.     padding:10px 0 10px 0;
  36. }
  37. .about-inf{
  38.     float:left;
  39.     font-size:14px;
  40.     text-align:center;
  41.     width:100%;
  42.     border-top:1px solid #ddd
  43. }
  44. .about-the{
  45.     text-align:center;
  46.     margin-bottom:10px;
  47. }
  48. .about-inf span{
  49.     float:left;
  50.     color:#1A1A1A;
  51.     line-height:20px;
  52.     padding:8px 0;
  53.     width:32.33333333333333333%
  54. }
  55. .social-clear{
  56.     height:10px
  57. }
  58. .about-pn{
  59.     border-left:1px solid #ddd;
  60.     border-right:1px solid #ddd;
  61. }
  62. .author-meta-box{
  63.     position:relative;
  64.     padding:0 0 15px 0;
  65. }
  66. .author-back{
  67.     position:absolute;
  68. }
  69. .author-meta{
  70.     position:relative;
  71.     padding:20px 0 0 0;
  72. }
  73. .author-avatar{
  74.     width:100px;
  75.     margin:0 auto 10px;
  76. }
  77. .author-avatar img{
  78.     background:#fff;
  79.     float:left;
  80.     width:100px;
  81.     height:100px;
  82.     padding:5px;
  83.     border-radius:100px;
  84. }
  85. .author-the{
  86.     background:#fff;
  87.     font-size:15px;
  88.     font-weight:bold;
  89.     text-align:center;
  90.     padding:10px 0 0 0;
  91. }
  92. .author-description{
  93.     color:#999;
  94.     text-align:center;
  95.     padding:5px 15px;
  96. }
  97. .author-th{
  98.     background:#fff;
  99.     position:relative;
  100.     margin:0 auto;
  101. }
  102. .author-n{
  103.     width:50%;
  104.     float:left;
  105.     color:#999;
  106.     text-align:left;
  107.     padding:0 0 0 15px;
  108. }
  109. .author-nickname{
  110.     text-align:rightright;
  111.     padding:0 15px 0 0;
  112.     border-right:1px dashed #ddd;
  113. }
  114. .author-m{
  115.     text-align:center;
  116.     padding:15px 0;
  117. }
  118. .author-m a{
  119.     color:#fff;
  120.     padding:8px 15px;
  121.     background:#3690cf;
  122.     border-radius:2px;
  123. }
  124. .author-m a:hover{
  125.     color:#fff;
  126.     background:#666;
  127. }
  128. .author-n span{
  129.     color:#666;
  130. }
  131. .feed-about{
  132.     position:relative;
  133.     display:block
  134. }
  135. #feed_widget ul{
  136.     margin:0 10px;
  137.     overflow:hidden
  138. }
  139. #feed_widget li{
  140.     float:left;
  141.     width:33.333333333%;
  142.     height:50px;
  143.     line-height:38px
  144. }
  145. #feed_widget .tqq,#feed_widget .tsina,#feed_widget .feed{
  146.     display:block
  147. }
  148. #feed_widget a{
  149.     color:#999;
  150.     width:40px;
  151.     display:block;
  152.     text-align:center;
  153.     height:40px;
  154.     line-height:40px;
  155.     margin:0 auto;
  156.     border-radius:4px;
  157.     border-radius:40px!important;
  158.     border:1px solid #ddd
  159. }
  160. #feed_widget a {
  161.     color:#fff;
  162.     border:1px solid #fff
  163. }
  164. #feed_widget a:hover{
  165.     color:#fff;
  166.     border:1px solid #fff
  167. }
  168. #feed_widget i{
  169.     font-size:16px
  170. }
  171. #feed_widget .weixin a {
  172.     background:#248a34;
  173.     border:1px solid #248a34
  174. }
  175. #feed_widget .tsina a {
  176.     background:#EE9A00;
  177.     border:1px solid #EE9A00
  178. }
  179. #feed_widget .tqq a {
  180.     background:#c40000;
  181.     border:1px solid #c40000
  182. }
  183. #feed_widget .weixin a:hover{
  184.     background:#04a4cc;
  185.     border:1px solid #04a4cc
  186. }
  187. #feed_widget .tsina a:hover{
  188.     background:#04a4cc;
  189.     border:1px solid#04a4cc
  190. }
  191. #feed_widget .tqq a:hover{
  192.     background:#04a4cc;
  193.     border:1px solid #04a4cc
  194. }
  195. .weixin-b{
  196.     cursor:pointer
  197. }
  198. #feed_widget .weixin-qr{
  199.     position:absolute;
  200.     bottombottom:64px;
  201.     left:20px;
  202.     background:#fff;
  203.     padding:5px;
  204.     display:none;
  205.     border-radius:5px;
  206.     border:1px solid #ddd;
  207. }
  208. .weixin-qr img{
  209.     float:left;
  210.     width:100px;
  211.     height:auto;
  212.     padding:1px
  213. }

3D标签云

这也是从知更鸟的主题上移植过来了,我在他的代码基础上做了一些手术,原版的是可以选择切换要不要使用3D效果的,我直接强制使用3D效果了,普通的效果太难看了!

下面是代码:

  1. <?php if($instance['show_icon']) { ?>
  2.     <h3 class="widget-title-cat-icon cat-w-icon"><i class="t-icon <?php echo $instance['show_icon']; ?>"></i><?php echo $instance['title_z']; ?></h3>
  3. <?php } ?>
  4. <div id="tag_cloud_widget">
  5.     <?php wp_tag_cloud( array ( 'smallest' => '14', 'largest' => 14, 'unit' => 'px', 'order' => 'RAND', 'hide_empty' => 0, 'number' => $number ) ); ?>
  6.     <div class="clear"></div>
  7.     <?php wp_enqueue_script( '3dtag.min', get_template_directory_uri() . '/js/3dtag.js', array(), null, false ); ?>
  8. </div>

CSS样式:

  1. /* 热门标签 */
  2. #tag_cloud_widget a:nth-child(n){
  3.     whitewhite-space:nowrap;
  4.     _white-space:normal;
  5.     overflow:hidden;
  6.     text-overflow:ellipsis;
  7. }
  8. #tag_cloud_widget a:nth-child(2n){
  9.     background:#d1a601;
  10. }
  11. #tag_cloud_widget a:nth-child(3n){
  12.     background:#286c4a;
  13. }
  14. #tag_cloud_widget a:nth-child(5n){
  15.     background:#518ab2;
  16. }
  17. #tag_cloud_widget a:nth-child(4n){
  18.     background:#c91d13;
  19. }
  20. #tag_cloud_widget a{
  21.     line-height:15px;
  22.     background:#999;
  23. }

tab工具

这个是我自己写的,当然有借鉴网上的一些资料,只是集成了最新文章、热门文章、热评文章,本来想把最近留言也整合进去,后来想想还是算了,毕竟侧边栏还是要放点东西的!

下面是代码:

  1. <div id="tab_tools">
  2.     <div id="tab_tools_title">
  3.         <span class="selected"><?php _e(' 最新文章 ') ?></span>
  4.         <span><?php _e(' 热门文章 ') ?></span>
  5.         <span><?php _e(' 热评文章 ') ?></span>
  6.     </div>
  7.     <div id="tab_content">
  8.         <ul>
  9.             <?php
  10.                 $i = 1;
  11.                 $the_query = new WP_Query( array( 'post__not_in' => get_option( 'sticky_posts' ) ,'showposts' => 9 ) );
  12.                 if ( $the_query->have_posts() ) : while ( $the_query->have_posts() ) : $the_query->the_post();
  13.             ?>
  14.             <li><span class='li-icon li-icon-<?php echo $i; ?>'><?php echo $i; ?></span><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>
  15.             <?php
  16.                 $i++;
  17.                 endwhile;
  18.                 endif;
  19.             ?>
  20.         </ul>
  21.         <ul class="hide">
  22.             <?php if (function_exists('get_most_viewed')): ?>
  23.             <?php get_timespan_most_viewed('post',9,190, true, true); ?>
  24.             <?php endif; ?>
  25.             <?php wp_reset_query(); ?>
  26.         </ul>
  27.         <ul class="hide">
  28.             <?php hot_comment_viewed(9, 90); ?>
  29.             <?php wp_reset_query(); ?>
  30.         </ul>
  31.     </div>
  32. </div>

CSS样式:

  1. /* tab工具 */
  2. #tab_tools{
  3.     position:relative;
  4.     border:0px;
  5.     overflow:hidden;
  6. }
  7. #bab_tools_title {
  8.     margin-right:-1px;
  9. }
  10. #tab_tools_title span:last-child {
  11.     border-right:1px solid transparent;
  12. }
  13. #tab_tools_title span {
  14.     floatleft;
  15.     padding:8px 0;
  16.     text-aligncenter;
  17.     border-right:1px solid #ddd;
  18.     border-bottom:1px solid #ddd;
  19.     width: 33.3%;
  20.     cursor:pointer;
  21.     box-sizing: border-box;
  22.     -moz-box-sizing: border-box;
  23.     -webkit-box-sizing: border-box;
  24. }
  25. #tab_tools_title .selected{
  26.     color:#04a4cc;
  27.     border-bottom:1px solid transparent;
  28. }
  29. #tab_content span{
  30.     cursor:pointer;
  31. }
  32. #tab_content .hide{
  33.     display:none;
  34. }
  35. #tab_content ul{
  36.     padding:15px;
  37.     margin:40px 0 0 0;
  38. }
  39. #tab_content ul li{
  40.     margin:0 0 5px 0;
  41.     border-bottom1px dashed #dadada;
  42.     transition: all 0.2s ease-in 0s;
  43.     -moz-transition: all 0.2s ease-in 0s; /* Firefox 4 */
  44.    -webkit-transition: all 0.2s ease-in 0s; /* Safari 和 Chrome */
  45.     -o-transition: all 0.2s ease-in 0s; /* Opera */
  46. }
  47. #tab_content ul li:last-child {
  48.     border-bottom:1px solid transparent;
  49. }
  50. #tab_content ul li a {
  51.     line-height30px;
  52. }
  53. #tab_content ul li:hover, #tab_content ul li:active {
  54.     background#f5f5f5;
  55.     padding: 0 0 0 5px;
  56.     border-radius: 4px;
  57.     transition: all 0.2s ease-in 0s;
  58.     -moz-transition: all 0.2s ease-in 0s; /* Firefox 4 */
  59.    -webkit-transition: all 0.2s ease-in 0s; /* Safari 和 Chrome */
  60.     -o-transition: all 0.2s ease-in 0s; /* Opera */
  61. }

Js代码:

  1. // 侧边栏TAB
  2. $('#tab_tools_title span').click(function(){
  3.     $(this).addClass("selected").siblings().removeClass();
  4.     $("#tab_content > ul").eq($("#tab_tools_title span").index(this)).show().siblings().hide();
  5. });

目前PC端还有一些小的东西要调整,还有二级菜单没有弄,有时间慢慢弄吧。

简单生活兄弟说我的主题颜色偏重,我也没有办法啊,我的审美观就只能到这里了,其实都是这个模仿一点那个模仿一点,慢慢来吧,会好看起来的!

以下是我后台所有小工具的截图:

  • 本文为原创文章,版权归所有。欢迎分享本文,转载请保留出处!
  • 给我留言

    评论列表 (有 261 次浏览 和 6 条评论)
    1. 回复 林三

      挺有意思的,果然是咱们喜欢的风格!

      • 回复 锋言锋语管理员

        @林三 跟着林老师的步伐在前进!

    2. 回复 去看你博客

      膜拜大佬

      • 回复 锋言锋语管理员

        @去看你博客 我是边学边做的,你也可以试着在本地环境天天去折腾知更鸟的主题!

    3. 回复 今日头条新闻

      文章不错支持一下吧

    4. 回复 头条新闻

      文章不错支持一下吧,非常喜欢