标签归档：折腾

分享一栏三按钮小工具（小工具版本非html）

由 发表 866 次浏览 4条评论 分类：WP折腾分享

刚开始接触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) $instance, array('theone' => '按键一'));
  65.         $theone = $instance['theone'];
  66.         $instance = wp_parse_args((array) $instance, array('one_link' => '输入链接地址'));
  67.         $one_link = $instance['one_link'];
  68.         $instance = wp_parse_args((array) $instance, array('thetwo' => '按键二'));
  69.         $thetwo = $instance['thetwo'];
  70.         $instance = wp_parse_args((array) $instance, array('two_link' => '输入链接地址'));
  71.         $two_link = $instance['two_link'];
  72.         $instance = wp_parse_args((array) $instance, array('thethree' => '按键三'));
  73.         $thethree = $instance['thethree'];
  74.         $instance = wp_parse_args((array) $instance, array('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主题，其他主题自行做调整应该可以用。

关于SMTP的配置

由 发表 1,139 次浏览 20条评论 分类：WP主题修改

今天打开后台一看，哇塞，8个评论没回复。赶紧回复一下，好紧张。毕竟之前一直都没啥人气的。

仔细看了下评论，同行老铁伊阳博主说我的评论有问题。确实，上次林三林老师也说过。不过我不知道怎么弄，所以放着放了很久。

今天说什么也要搞一下，然后直接找了度娘。找了一圈搞不出个所以然，只是知道一点：利用QQ邮箱发邮件的，邮箱密码要弄成授权码，这个必须得要。

后面测试了好几次都不行，发起狠来把主题内置的代码删了，然后用插件。根据网上的教程，用插件设置了一番，改用sina邮箱，结果还是不行。思来想去的，不可能啊。后面在插件里换成QQ邮箱，将ssl开启来，谁成想还可以了。柳暗花明哇。

最后还是把原来删除的内置代码恢复了，毕竟插件可以用的话代码应该也可以。换回之后测试一番，还是可以用。不过也不是一直都可以。换了几个浏览器有可以有不可以的，这还真不知道啥问题了。
o(︶︿︶)o 唉，现在没啥心思弄这个，评论还是可以收到的。只不过是来访的大大们不爽而已。邮件回复测试可以用。先这样吧！！！

估计现在应该没问题了，具体的解决方法网上有很多。有需要的站长们自行查找。

新增Years主题

由 发表 727 次浏览 7条评论 分类：WP主题修改

说说最近的折腾吧，我发现自己喜欢折腾，不太喜欢发文。

Years主题的诞生：

自上次折腾完Mont主题之后，佐语又开始折腾主题，这一次是将前端大神杨青青的《show time》模板套成WordPress主题。过程有点折腾，不过还是完成了。当然，有些不是100%套用，小小的做了些修改，基本跟原来模板保持一致。

Years主题前端样式：

关于后台

Years主题是没有后台的，当然，不是说不搞，只是目前心仪的后台还没弄懂。

这几天在网络上搜索主题的时候突然发现WordPress大学的后台很好看，好像功能很强大，然后就是发了疯的搜索想看看这个是什么后台，后面才知道是国外主题sahifa的后台。嗯，很强大，已经看上了。所以目前这几天一直在琢磨这个东西。主要是这个后台可以自定义首页，很强大的首页编辑器。

新增基于懿古今Three主题改造而成的Mont主题

由 发表 967 次浏览 8条评论 分类：WP主题修改

[v_xuk]好久没发文了，今天抽空发一下最近折腾的一些东西。[/v_xuk]

新增Mont主题

Mont主题，名字来源于大山，mountain。当然，Mont主题不是我自己写的，我没这个本事，改改主题现在还是有点点可能的，毕竟钻研了一段时间的WordPress了。

Mont主题主要是为佐语安全而修改的。改主题基于懿古今的Three主题，更换了后台框架，刚开始的时候是准备换nana主题的轻量框架，后面百度搜索了一下后台框架，发现了Codestarframework这个框架挺好，一下子决定要换成这个，所以一不小心就搞上了。真好！！！

现在来谈谈Three主题吧

Three主题是懿古今用在博客112导航上的一个主题，刚刚开始建站的时候打算建两个站，一个是佐语小站，主要记录佐语学习网络知识的一些网站，也就是学习流水。可以的话分享一些可以用到，有用的东西。毕竟自己也是刚刚学习，不能误导人家。另外一个网站就是佐语安全了，佐语安全主要是记录本人实际工作中的一些经验知识。。毕竟自己在安全管理方面做了近10年的时间，分享一些经验知识还是OK的。

Three主题本来是选择给佐语安全网站使用的，后来因为后台设置不太理想，网站首页一些东西不会设置的原因而放弃，后面换了nana主题，使用了一段时间。最后可能是自己的强迫症使然吧，还是选择修改Three主题的后台，在修改的过程中也学习了不少东西。

为啥选择Codestar framework这个框架

后台改造之初选择的是跟nana主题一样的后台，轻量和设置简单，直到主题后台都修改完成后，不知道哪根筋出错，居然跑去搜索后台框架，结果一眼相中了Codestar framework。这个框架在黑糖主题中就有见过，感觉挺漂亮的 ，所以又重新开始后台的改造。所以，目前Mont主题有两个版本，一个是轻量版后台的，一个是Codestar framework。

Codestar framework这个框架实际大小还是有点大的。1.0版本的有2M多，2.0版本的有1M多。里面再删删减减，去掉Font Awesome和其他一些乱七八糟的大约剩下1M左右。刚开始是选择2.0版本的，结果因为其中的获得值不知道怎么设置。所以才放弃2.0而选择1.04版本的.

主题界面

主题界面基本上是Three一样，后台有点区别而已。

图一：主题的前端界面

图二：主题的后台

填坑：

最后再填一个坑，已经将四栏tab小工具做成成品小工具，不再是文本模式了。

图三：小工具

 

一栏三按钮的小工具改造

由 发表 668 次浏览 4条评论 分类：WP主题修改

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

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

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

小工具后台效果：

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

小工具前端效果：

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

增加关注我们小工具

由 发表 552 次浏览 2条评论 分类：WP主题修改

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

关注我们小工具

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

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

百度推送

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

评论出问题

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

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

由 发表 664 次浏览 5条评论 分类：WP主题修改

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

最近更新

  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的过程，虽然说现在还是懵懵懂懂，但是多多少少修改个主题还是可以的。

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

换域名并设置gravatar头像

由 发表 572 次浏览 3条评论 分类：WP主题修改

计划总是没有变化来得快。

生活总是这么奇怪，一切都那么突如其来。

换域名

这几天心血来潮，升级了主机，后面想想，算了，域名也换了算了额。计划中是域名先国内备案后再换的，结果是国内主机还不能激活备案，没办法，先用了吧。

从zoyv.top升级到zuoyv.com。其实也挺好的。

简单换个域名也换了半天时间，说到底还是没经验。什么重定向、数据库改域名通通不会弄，弄不好。数据库改域名简直了，语法错误，最后找了个插件将所有的域名改了，然后就没有然后了。网站能登陆，能用就行，其他通通不考虑。

设置Gravatar头像

这个也是历史遗留问题，一直都没有时间去弄这个。

首先要改邮箱，结果修改后一直没动静，邮件没发出来，后面度娘了一下，找了个插件才改了管理者邮箱。

然后就是用邮箱注册Gravatar账户并设置头像。

有头像挺好，以前都是潜水看大佬们的站，现在有头有脸了可以光明正大去水一两句。o(∩_∩)o 哈哈。

重新调整Header、Footer及部分CSS

由 发表 455 次浏览 0条评论 分类：WP主题修改

好久没有更新了，记录一下。

作为一个爱折腾的人，折腾是永无止境的。

距离上次折腾已经将近一个月了。在这一个月的时间里面做了好几件事，就是没有发帖纪录。

  1. 参加公司拓展活动。
  2. 折腾了一个简化版的主题，功能没Nana这么多，比较简陋，主题选项一样，底子是从网上找来的，然后就一顿乱改，慢慢熟悉主题的部分功能。目标是让它进化，变得更好看。至于长啥样子就不存档了，先测试完再说。
  3. 至于调整Header、Footer及部分CSS这些是最近一个星期才开始弄的。2号将美国主机升级成香港主机之后顺便把最近修改的之后的主题上传安装。这次已经将主题改名了：Doracmon（哆啦C梦），o(∩_∩)o 哈哈这名字不错吧。保留了nana主题版本来源。将本主题作为佐语小站自用的主题。至于用多久，看心情。
  4. 后续准备更换域名了，原计划是将佐语小站回迁回国内景安主机起用zuoyv.com域名并完成备案，结果因为广东管局不给备案，从10月份拖到现在都没能开始。没办法，只能先启用了。其实挺喜欢zoyv.top的，四个字母挺好记，不过还是要回归大com域名。

以下是最近折腾的一些记录：

  1. 调整Header的导航位置。
  2. Footer重构，添加社交图标，将top导航移到footer，footer增加网站logo
  3. 增加最新文章小工具。
  4. 热门标签js放到js文件里面，不再使用增强文本小工具了。
  5. 去除fontawesome文件夹，更换为阿里iconfont图标，为主题包瘦身。
  6. 其他一下小细节的调整。

因为这次是Doracmon主题的开始。所以要特别记录下。

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

由 发表 650 次浏览 0条评论 分类：WP主题修改

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

可爱的土鳖推荐

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

再次放个图片看看：

分类页面描述

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

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