标签归档:小工具

分享一栏三按钮小工具(小工具版本非html)

刚开始接触WordPress的时候就是从搜索主题模板安装开始的,那时候用的是懿古今的Nana主题,感觉挺好的,又是免费主题,所以就用了,并且用到现在。

懿古今大大的主题不仅免费还有很多自己折腾的教程心得,所以后面佐语在WordPress上的折腾大部分都是学着来的。

学了这么久,我也来分享一个小工具,这个小工具懿古今已经分享过HTML版本的了。佐语分享的是基于html改造的成品小工具,直接放在主题文件里面,需要的时候调用就可以了。

主要的前端样式见文章:一栏三按钮的小工具改造

小工具代码直接放在widget.php里面

  1. /*
  2. Widget Name:一栏三按钮小工具
  3. Description:根据懿古今一栏三按钮改造而成。
  4. Version:1.0
  5. Author:佐语
  6. Author URI:https://www.zuoyv.com
  7. */
  8. class threebtn extends WP_Widget {
  9.     function __construct() {
  10.         $widget_ops = array(
  11.             'classname' => 'threebtn',
  12.             'description' => __( '一个图片三个链接按钮' ),
  13.             'customize_selective_refresh' => true,
  14.         );
  15.         parent::__construct('threebtn', '佐语  一栏三按钮', $widget_ops);
  16.     }
  17.     function widget($args$instance) {
  18.         extract($args);
  19.         $title = apply_filters( 'widget_title', $instance['title'] );
  20.         echo $before_widget;
  21.         if ( ! emptyempty$title ) )
  22.         echo $before_title . $title . $after_title;
  23. ?>
  24. <div id="update_version">
  25.     <a href="<?php echo $instance['jpg_link']; ?>" target="_blank" rel="noopener">
  26.         <img title="<?php echo $instance['bg_name']; ?>" src="<?php echo $instance['bg_link']; ?>" alt="佐语天下" />
  27.     </a>
  28.     <a class="one_link" href="<?php echo $instance['one_link']; ?>" target="_blank" rel="noopener"><?php echo $instance['theone']; ?></a>
  29.     <a class="two_link" href="<?php echo $instance['two_link']; ?>" target="_blank" rel="noopener"><?php echo $instance['thetwo']; ?></a>
  30.     <a class="three_link" href="<?php echo $instance['three_link']; ?>" target="_blank" rel="noopener"><?php echo $instance['thethree']; ?></a>
  31. </div>
  32. <?php
  33.     echo $after_widget;
  34.     }
  35.     function update( $new_instance$old_instance ) {
  36.         if (!isset($new_instance['submit1'])) {
  37.             return false;
  38.         }
  39.             $instance = $old_instance;
  40.             $instance = array();
  41.             $instance['title'] = strip_tags$new_instance['title'] );
  42.             $instance['jpg_link'] = $new_instance['jpg_link'];
  43.             $instance['bg_name'] = $new_instance['bg_name'];
  44.             $instance['bg_link'] = $new_instance['bg_link'];
  45.             $instance['one_link'] = $new_instance['one_link'];
  46.             $instance['theone'] = $new_instance['theone'];
  47.             $instance['two_link'] = $new_instance['two_link'];
  48.             $instance['thetwo'] = $new_instance['thetwo'];
  49.             $instance['three_link'] = $new_instance['three_link'];
  50.             $instance['thethree'] = $new_instance['thethree'];
  51.             return $instance;
  52.         }
  53.     function form($instance) {
  54.         if ( isset( $instance[ 'title' ] ) ) {
  55.             $title = $instance[ 'title' ];
  56.         }
  57.         else {
  58.             $title = '一栏三按钮';
  59.         }
  60.         global $wpdb;
  61.         $jpg_link = $instance['jpg_link'];
  62.         $bg_name = $instance['bg_name'];
  63.         $bg_link = $instance['bg_link'];
  64.         $instance = wp_parse_args((array$instancearray('theone' => '按键一'));
  65.         $theone = $instance['theone'];
  66.         $instance = wp_parse_args((array$instancearray('one_link' => '输入链接地址'));
  67.         $one_link = $instance['one_link'];
  68.         $instance = wp_parse_args((array$instancearray('thetwo' => '按键二'));
  69.         $thetwo = $instance['thetwo'];
  70.         $instance = wp_parse_args((array$instancearray('two_link' => '输入链接地址'));
  71.         $two_link = $instance['two_link'];
  72.         $instance = wp_parse_args((array$instancearray('thethree' => '按键三'));
  73.         $thethree = $instance['thethree'];
  74.         $instance = wp_parse_args((array$instancearray('three_link' => '输入链接地址'));
  75.         $three_link = $instance['three_link'];
  76. ?>
  77.     <p>
  78.         <label for="<?php echo $this->get_field_id( 'title' ); ?>">标题:</label>
  79.         <input class="widefat" id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name( 'title' ); ?>" type="text" value="<?php echo $title; ?>" />
  80.     </p>
  81.     <p>
  82.         <label for="<?php echo $this->get_field_id('jpg_link'); ?>">栏目链接:</label>
  83.         <input class="widefat" id="<?php echo $this->get_field_id( 'jpg_link' ); ?>" name="<?php echo $this->get_field_name( 'jpg_link' ); ?>" type="text" value="<?php echo $jpg_link; ?>" />
  84.     </p>
  85.     <p>
  86.         <label for="<?php echo $this->get_field_id('bg_name'); ?>">图片名称:</label>
  87.         <input class="widefat" id="<?php echo $this->get_field_id( 'bg_name' ); ?>" name="<?php echo $this->get_field_name( 'bg_name' ); ?>" type="text" value="<?php echo $bg_name; ?>" />
  88.     </p>
  89.     <p>
  90.         <label for="<?php echo $this->get_field_id('bg_link'); ?>">图片链接地址:</label>
  91.         <input class="widefat" id="<?php echo $this->get_field_id( 'bg_link' ); ?>" name="<?php echo $this->get_field_name( 'bg_link' ); ?>" type="text" value="<?php echo $bg_link; ?>" />
  92.     </p>
  93.     <p>
  94.         <label for="<?php echo $this->get_field_id('theone'); ?>">按键一名称:</label>
  95.         <input class="widefat"  id="<?php echo $this->get_field_id('theone'); ?>" name="<?php echo $this->get_field_name('theone'); ?>" type="text" value="<?php echo $theone; ?>" />
  96.     </p>
  97.     <p>
  98.         <label for="<?php echo $this->get_field_id('one_link'); ?>">按键一地址:</label>
  99.         <input class="widefat" id="<?php echo $this->get_field_id( 'one_link' ); ?>" name="<?php echo $this->get_field_name( 'one_link' ); ?>" type="text" value="<?php echo $one_link; ?>" />
  100.     </p>
  101.     <p>
  102.         <label for="<?php echo $this->get_field_id('thetwo'); ?>">按键二名称:</label>
  103.         <input class="widefat"  id="<?php echo $this->get_field_id('thetwo'); ?>" name="<?php echo $this->get_field_name('thetwo'); ?>" type="text" value="<?php echo $thetwo; ?>" />
  104.     </p>
  105.     <p>
  106.         <label for="<?php echo $this->get_field_id('two_link'); ?>">按键二地址:</label>
  107.         <input class="widefat" id="<?php echo $this->get_field_id( 'two_link' ); ?>" name="<?php echo $this->get_field_name( 'two_link' ); ?>" type="text" value="<?php echo $two_link; ?>" />
  108.     </p>
  109.     <p>
  110.         <label for="<?php echo $this->get_field_id('thethree'); ?>">按键三名称:</label>
  111.         <input class="widefat"  id="<?php echo $this->get_field_id('thethree'); ?>" name="<?php echo $this->get_field_name('thethree'); ?>" type="text" value="<?php echo $thethree; ?>" />
  112.     </p>
  113.     <p>
  114.         <label for="<?php echo $this->get_field_id('three_link'); ?>">按键三地址:</label>
  115.         <input class="widefat" id="<?php echo $this->get_field_id( 'three_link' ); ?>" name="<?php echo $this->get_field_name( 'three_link' ); ?>" type="text" value="<?php echo $three_link; ?>" />
  116.     </p>
  117.     <input type="hidden" id="<?php echo $this->get_field_id('submit1'); ?>" name="<?php echo $this->get_field_name('submit1'); ?>" value="1" />
  118. <?php }
  119. }
  120. add_action( 'widgets_init', create_function( '', 'register_widget( "threebtn" );' ) );

将美化小工具的css代码放进style.css里面

  1. /*增加一栏三按钮格式*/
  2. #update_version{margin:15px 15px}
  3. #update_version a{width:30%;height:35px;border-radius:3px;text-align:center;line-height:35px;font-size:9pt;margin-bottom:10px;color:#fff}
  4. .one_link{background-color:#2ba9fa}
  5. .one_link,.two_link{float:left;margin-right:5%}
  6. .two_link{background-color:#ff6969}
  7. .three_link{float:left;background-color:#70c041}
  8. #update_version img{width: 100%}

以上代码来自懿古今、知更鸟,佐语复制剪辑制作。o(∩_∩)o 哈哈!!!

该小工具适用于nana主题,其他主题自行做调整应该可以用。

一栏三按钮的小工具改造

最近的流感真的很严重,很不幸,佐语中招了,连续低烧4天,咳嗽10天,到现在才好的七七八八,最可恶的是传染给老婆了。希望能快点好起来,回家不传染给儿子才好。

近期实际就是养病,没啥折腾的。电脑都懒得开,感冒之前还想着把网站搬回国内备案,因为上次的景安主机已经可以备案了。结果一场流感让我斗志全无,现在都懒得折腾,想着年后再弄吧。

昨晚还算状态挺好的,想着把之前挖的坑给填一填,所以,把懿古今的一栏三按钮给做成小工具了。真心不喜欢文本类的小工具。不好用,每次都要很麻烦的填,还是专用小工具比较方便。

小工具后台效果:

这个小工具的完成还是要感谢懿古今大大的分享,还要感谢知更鸟大大的代码,代码是用知更鸟的关于本站小工具改过来的。还好,可以用。感谢巨人们的肩膀哇!

小工具前端效果:

WordPress的折腾让人着迷,期待下一个小工具的诞生。

增加关注我们小工具

这两天还是微调了一些CSS参数,加了个小工具,搞定百度站长平台的注册和推送文章,也没大的动作。

关注我们小工具

主要是这两天人不太舒服,前面逛博客的时候看到一个喜欢的小工具,然后就给弄到手了。

这里放个图纪念下,这小工具跟Doracmon主题不匹配,还有点没完善,还要修改一下,反正只是“搬运工”而已,目前要努力成为“维修工”才可以。另外小工具来自苏醒大神的主题。

百度推送

nana主题有熊掌号的推送设置,可惜我都没注册熊掌号,所以今天特意注册了百度的站长平台,设置一番主动推送和自动推送,熊掌号就没注册了,sitemap也没有去弄,改天弄一下。

评论出问题

经林三老师提醒,评论的时候出问题了,评论的时候一直在转圈圈,评论不了,经后台查看,实际是已经评论的了,就是邮件发布出来,一直没有显示评论完成。在博客112导航看到解决方法,但是懵得很,没理解透,所以还没解决。只能先关了评论邮件通知。这个也改天再弄吧。

微调部分CSS及改造右下角悬浮栏

最近几天有点闲,折腾的时间较多,记录下这两三天折腾的结果吧。

最近更新

  1. 调整Nana主题的彩色tag标签栏,改的简单大气点,主要是用彩色的人太多了,看多了感觉视觉疲劳了。
  2. 调整部分圆角css,看多了圆角,感觉直角也好看。
  3. 边栏几个小工具都进行微调css
  4. 增加几个小工具,看到喜欢的小工具都想收入囊中,所以加了个最新文章(带缩略图的)、随机文章(带缩略图的)、本站推荐(不带缩略图)、四栏TAB小工具(只是html实现,未做成小工具,更遗憾的是这个小工具还有点BUG,css调不好哇。)
  5. 改造右下角的悬浮栏,增加了微信、微博、QQ等几栏,并完美调用用户-我的个人资料里面的设置(参考站长信息栏小工具的设置,设置functions参数)。

下阶段目标:

  1. 再次调整页面看起来不爽的地方。
  2. 将小工具的制作学起来,将四栏TAB小工具、一栏三按钮小工具做成真正的小工具,不再是只用文本实现。
  3. 对single.php开刀,微调整各项css参数。
  4. 搜罗喜欢的小工具(虽然目前小工具有12个了。实际也用不上那么多。)
  5. 对佐语安全的主题再次改造,想用同样的一个底子呈现不同的面貌(如果说没时间就只能用Doracmon了,修改主题真的很费时间,对于我这种小白来说。)

折腾主题的结果就是使自己熟悉主题,熟悉WordPress,熟悉Html5、熟悉CSS、熟悉PHP的过程,虽然说现在还是懵懵懂懂,但是多多少少修改个主题还是可以的。

学习使我成长、学习使我快乐!

新增关于本站小工具、首页列表修改鼠标滑过背景色及添加彩色边框。

周日周一继续折腾主题。
首页列表修改鼠标滑过背景色及添加彩色边框

这个功能是从博主蝈蝈要安静那里来的,当然别的地方也有,但是我折腾主题的开始就是从博主蝈蝈要安静那来的。看到他把DUX的玩得那么6,有点羡慕。所以看到喜欢的功能自己也想折腾出来。所以就有了这个功能了咯。

改变首页列表边框间距,紧凑型改成宽松型

这个以前是实现过的了,只不过那天升级了主题没有把这个升级上去。上次是直接在header那改的css,这次直接在style.css里面改,改的算是彻底一点吧。

新增关于本站小工具

实际上懿古今的Nana主题上面已经有个站长信息小工具了,实际功能是差不多的。但是由于佐语有颗折腾的心,看上了知更鸟的关于本站小工具。所以也就有了这个小工具的折腾。谁知道在折腾过程中出了点小问题,微信二维码一直出不来,后面结合懿古今的方法,实现了该功能,但是还是没有知更鸟的那么美观,算了反正自用足够,小白要求不高。知足常乐不是?佐语小站、佐语安全同步更新。

放两站图记录一下。

佐语小站本站信息图片

佐语安全本站信息图片

 

“土鳖推荐”回来了,还增加了分类页面分类描述

折腾的心永不止,土鳖推荐不见了就像心里面在扎了一根刺,不弄出来真的不舒服,还是用弄出来才可以

可爱的土鳖推荐

可以确定的是修改了style.css,但是显示不出样式来。尝试用系统自带的的额外css,结果可以显示。说明应该是style.css的问题。只怪自己的不熟悉,没办法只能慢慢试,最后发现是因为底部小工具的样式跟“土鳖分享”的样式发生冲突了。把底部小工具的css样式放在文件的最后之后问题也解决了。原理是啥不清楚,不过,效果实现了不是?

再次放个图片看看:

分类页面描述

打开分类页面的时候总觉得分类页面少了点什么,参考了DUX的分类页面描述,感觉挺好,必须实现哇。所以也跟着折腾了这个。其实还算简单,就是css样式跟“土鳖推荐”一样,开始的时候显示不出来,后面才试着弄出来,实在是不容易。

这里也放个图片记录一下: