分享一栏三按钮小工具(小工具版本非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 条

  1. 今日新闻说道:

    文章不错非常喜欢

  2. 红嘴鸭说道:

    多谢大佬的分享

发表评论: