步骤一
加入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
