步骤一
加入functions.php的代码
//搜索小工具 add_action ( 'widgets_init', create_function ( '', 'return register_widget("Inlo_Widget_Search");') ); class Inlo_Widget_Search extends WP_Widget { function Inlo_Widget_Search() { $widget_ops = array ( 'classname' => 'Inlo_Widget_Search', 'description' => '站内搜索功能' ); $this->WP_Widget ( 'Inlo_Widget_Search', 'INLO-搜索工具', $widget_ops ); } function form($instance) { $instance = wp_parse_args ( ( array ) $instance, array ( 'title' => '搜索', ) ); $title = $instance ['title']; ?> <p> <label for="<?php echo $this->get_field_id('title'); ?>"> 标题:<input type="text" id="<?php echo $this->get_field_id('title'); ?>" name="<?php echo $this->get_field_name('title'); ?>" value="<?php echo $title; ?>" /> </label> </p> <?php } function widget($args, $instance) { $form = ' <form class="s-form" action="/?s="> <input type="text" name="s" class="s-key" required /> <input type="submit" value="搜一搜" class="s-sub tra" title="搜索" /> </form>'; echo ' <div class="widget jv-search"> <h3 class="widget-title">'. $instance['title'] .'</h3> <div class="jv-custom inlo-search"> '.$form.' </div> </div>'; } }
步骤二
相应的CSS,下面是个参考
#sidebar .s-key{width:75%} #sidebar .s-sub{width:20%;background-color:#4773b1;color:#fff;border:0;position:absolute;bottom:0px;top:0px} #sidebar .s-sub:hover{background-color:#306fa6} .inlo-search form{position:relative} .jv-search{padding-bottom:10px}
本站文章除注明转载/出处外,均为本站原创或翻译。若要转载但请务必注明出处,尊重他人劳动成果。
转载请注明出处链接 : https://www.inlojv.com/4059.html