刚开始接触WordPress的时候就是从搜索主题模板安装开始的,那时候用的是懿古今的Nana主题,感觉挺好的,又是免费主题,所以就用了,并且用到现在。
懿古今大大的主题不仅免费还有很多自己折腾的教程心得,所以后面佐语在WordPress上的折腾大部分都是学着来的。
学了这么久,我也来分享一个小工具,这个小工具懿古今已经分享过HTML版本的了。佐语分享的是基于html改造的成品小工具,直接放在主题文件里面,需要的时候调用就可以了。
主要的前端样式见文章:一栏三按钮的小工具改造
小工具代码直接放在widget.php里面
- /*
- Widget Name:一栏三按钮小工具
- Description:根据懿古今一栏三按钮改造而成。
- Version:1.0
- Author:佐语
- Author URI:https://www.zuoyv.com
- */
- class threebtn extends WP_Widget {
- function __construct() {
- $widget_ops = array(
- 'classname' => 'threebtn',
- 'description' => __( '一个图片三个链接按钮' ),
- 'customize_selective_refresh' => true,
- );
- parent::__construct('threebtn', '佐语 一栏三按钮', $widget_ops);
- }
- function widget($args, $instance) {
- extract($args);
- $title = apply_filters( 'widget_title', $instance['title'] );
- echo $before_widget;
- if ( ! emptyempty( $title ) )
- echo $before_title . $title . $after_title;
- ?>
- <div id="update_version">
- <a href="<?php echo $instance['jpg_link']; ?>" target="_blank" rel="noopener">
- <img title="<?php echo $instance['bg_name']; ?>" src="<?php echo $instance['bg_link']; ?>" alt="佐语天下" />
- </a>
- <a class="one_link" href="<?php echo $instance['one_link']; ?>" target="_blank" rel="noopener"><?php echo $instance['theone']; ?></a>
- <a class="two_link" href="<?php echo $instance['two_link']; ?>" target="_blank" rel="noopener"><?php echo $instance['thetwo']; ?></a>
- <a class="three_link" href="<?php echo $instance['three_link']; ?>" target="_blank" rel="noopener"><?php echo $instance['thethree']; ?></a>
- </div>
- <?php
- echo $after_widget;
- }
- function update( $new_instance, $old_instance ) {
- if (!isset($new_instance['submit1'])) {
- return false;
- }
- $instance = $old_instance;
- $instance = array();
- $instance['title'] = strip_tags( $new_instance['title'] );
- $instance['jpg_link'] = $new_instance['jpg_link'];
- $instance['bg_name'] = $new_instance['bg_name'];
- $instance['bg_link'] = $new_instance['bg_link'];
- $instance['one_link'] = $new_instance['one_link'];
- $instance['theone'] = $new_instance['theone'];
- $instance['two_link'] = $new_instance['two_link'];
- $instance['thetwo'] = $new_instance['thetwo'];
- $instance['three_link'] = $new_instance['three_link'];
- $instance['thethree'] = $new_instance['thethree'];
- return $instance;
- }
- function form($instance) {
- if ( isset( $instance[ 'title' ] ) ) {
- $title = $instance[ 'title' ];
- }
- else {
- $title = '一栏三按钮';
- }
- global $wpdb;
- $jpg_link = $instance['jpg_link'];
- $bg_name = $instance['bg_name'];
- $bg_link = $instance['bg_link'];
- $instance = wp_parse_args((array) $instance, array('theone' => '按键一'));
- $theone = $instance['theone'];
- $instance = wp_parse_args((array) $instance, array('one_link' => '输入链接地址'));
- $one_link = $instance['one_link'];
- $instance = wp_parse_args((array) $instance, array('thetwo' => '按键二'));
- $thetwo = $instance['thetwo'];
- $instance = wp_parse_args((array) $instance, array('two_link' => '输入链接地址'));
- $two_link = $instance['two_link'];
- $instance = wp_parse_args((array) $instance, array('thethree' => '按键三'));
- $thethree = $instance['thethree'];
- $instance = wp_parse_args((array) $instance, array('three_link' => '输入链接地址'));
- $three_link = $instance['three_link'];
- ?>
- <p>
- <label for="<?php echo $this->get_field_id( 'title' ); ?>">标题:</label>
- <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; ?>" />
- </p>
- <p>
- <label for="<?php echo $this->get_field_id('jpg_link'); ?>">栏目链接:</label>
- <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; ?>" />
- </p>
- <p>
- <label for="<?php echo $this->get_field_id('bg_name'); ?>">图片名称:</label>
- <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; ?>" />
- </p>
- <p>
- <label for="<?php echo $this->get_field_id('bg_link'); ?>">图片链接地址:</label>
- <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; ?>" />
- </p>
- <p>
- <label for="<?php echo $this->get_field_id('theone'); ?>">按键一名称:</label>
- <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; ?>" />
- </p>
- <p>
- <label for="<?php echo $this->get_field_id('one_link'); ?>">按键一地址:</label>
- <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; ?>" />
- </p>
- <p>
- <label for="<?php echo $this->get_field_id('thetwo'); ?>">按键二名称:</label>
- <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; ?>" />
- </p>
- <p>
- <label for="<?php echo $this->get_field_id('two_link'); ?>">按键二地址:</label>
- <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; ?>" />
- </p>
- <p>
- <label for="<?php echo $this->get_field_id('thethree'); ?>">按键三名称:</label>
- <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; ?>" />
- </p>
- <p>
- <label for="<?php echo $this->get_field_id('three_link'); ?>">按键三地址:</label>
- <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; ?>" />
- </p>
- <input type="hidden" id="<?php echo $this->get_field_id('submit1'); ?>" name="<?php echo $this->get_field_name('submit1'); ?>" value="1" />
- <?php }
- }
- add_action( 'widgets_init', create_function( '', 'register_widget( "threebtn" );' ) );
将美化小工具的css代码放进style.css里面
- /*增加一栏三按钮格式*/
- #update_version{margin:15px 15px}
- #update_version a{width:30%;height:35px;border-radius:3px;text-align:center;line-height:35px;font-size:9pt;margin-bottom:10px;color:#fff}
- .one_link{background-color:#2ba9fa}
- .one_link,.two_link{float:left;margin-right:5%}
- .two_link{background-color:#ff6969}
- .three_link{float:left;background-color:#70c041}
- #update_version img{width: 100%}
以上代码来自懿古今、知更鸟,佐语复制剪辑制作。o(∩_∩)o 哈哈!!!
该小工具适用于nana主题,其他主题自行做调整应该可以用。