下面由WordPress教程欄目給大家介紹怎么為wordpress小工具添加css類選項，希望對需要的朋友有所幫助！
WordPress 小工具可以重復使用，相同的小工具樣式也是相同的，如果想自定義某個前臺添加的小工具樣式，與其它不同，可以通過查看原代碼，找到它的id，比如搜索小工具會看到類似的：
<section></section>
其中search-2就是這個小工具的ID，可以用#search-2定義樣式，不過這個后綴的編號并不是固定的，下次添加可能會變，需要再次編輯之前的樣式，有些麻煩。
可以通過下面的代碼，給現有的小工具統一增加CSS類選項，將代碼添加到當前主題函數模板functions.php中即可，效果如圖：
立即學習“前端免費學習筆記（深入）”；
代碼一
只加一個CSS類選項
function?zm_widget_form_extend(?$instance,?$widget?)?{ ??if?(?!isset($instance['classes'])?) $instance['classes']?=?null; $row?=?"<p>n"; $row?.=?"t<label>id_base}-{$widget->number}-classes'>CSS類</label>n"; $row?.=?"t<input>id_base}[{$widget->number}][classes]'?id='widget-{$widget->id_base}-{$widget->number}-classes'?class='widefat'?value='{$instance['classes']}'/>n"; $row?.=?"</p>n"; echo?$row; return?$instance; } add_filter('widget_form_callback',?'zm_widget_form_extend',?10,?2); ? function?zm_widget_update(?$instance,?$new_instance?)?{ $instance['classes']?=?$new_instance['classes']; return?$instance; } add_filter(?'widget_update_callback',?'zm_widget_update',?10,?2?); ? function?zm_dynamic_sidebar_params(?$params?)?{ global?$wp_registered_widgets; $widget_id????=?$params[0]['widget_id']; $widget_obj????=?$wp_registered_widgets[$widget_id]; $widget_opt????=?get_option($widget_obj['callback'][0]->option_name); $widget_num????=?$widget_obj['params'][0]['number']; ? if?(?isset($widget_opt[$widget_num]['classes'])?&&?!empty($widget_opt[$widget_num]['classes'])?) $params[0]['before_widget']?=?preg_replace(?'/class="/',?"class="{$widget_opt[$widget_num]['classes']}?",?$params[0]['before_widget'],?1?); return?$params; } add_filter(?'dynamic_sidebar_params',?'zm_dynamic_sidebar_params'?);
?
代碼二
添加ID及CSS類下拉選項
function?zm_widget_form_extend(?$instance,?$widget?)?{ if?(?!isset(?$instance['classes']?)?) $instance['classes']?=?null; ? if?(?!isset(?$instance['custom_id']?)?) $instance['custom_id']?=?null; ? $class_prefix?=?'widget-';? $myclass?=?array( 'default'??=>?'默認', 'blue'?????=>?'藍色', 'yellow'???=>?'黃色', 'black'????=>?'黑色', ); ? $row?=?"<p>n"; $row?.=?"t<label>id_base}-{$widget->number}-custom_id'>添加ID</label>n"; $row?.=?"t<input>id_base}[{$widget->number}][custom_id]'?id='widget-{$widget->id_base}-{$widget->number}-custom_id'?class='widefat'?value='{$instance['custom_id']}'?/>n"; $row?.=?"t<label>id_base}-{$widget->number}-classes'>CSS類</label>n"; $row?.=?"t<select>id_base}[{$widget->number}][classes]'?id='widget-{$widget->id_base}-{$widget->number}-classes'?class='widefat'>"; foreach(?$myclass?as?$key?=>?$class?)?{ $selected?=?null; if(?$class_prefix.$key?==?$instance['classes']?)?$selected?=?'selected?=?"selected"'; $row?.=?"t<option>$classn"; } $row?.=?"</option></select>n"; echo?$row; return?$instance; } add_filter('widget_form_callback',?'zm_widget_form_extend',?10,?2); ? function?zm_widget_update(?$instance,?$new_instance?)?{ $instance['classes']?=?$new_instance['classes']; $instance['custom_id']?=?$new_instance['custom_id']; return?$instance; } add_filter(?'widget_update_callback',?'zm_widget_update',?10,?2?); ? function?zm_dynamic_sidebar_params(?$params?)?{ global?$wp_registered_widgets; $widget_id??=?$params[0]['widget_id']; $widget_obj?=?$wp_registered_widgets[$widget_id]; $widget_opt?=?get_option($widget_obj['callback'][0]->option_name); $widget_num?=?$widget_obj['params'][0]['number']; ? if?(?isset(?$widget_opt[$widget_num]['classes']?)?&&?!empty(?$widget_opt[$widget_num]['classes']?)?) $params[0]['before_widget']?=?preg_replace(?'/class="/',?"class="{$widget_opt[$widget_num]['classes']}?",?$params[0]['before_widget'],?1?); if?(?isset($widget_opt[$widget_num]['custom_id'])?&&?!empty($widget_opt[$widget_num]['custom_id'])?) $params[0]['before_widget']?=?preg_replace(?'/id=".*?"/',?"id="{$widget_opt[$widget_num]['custom_id']}"",?$params[0]['before_widget'],?1?); return?$params; } add_filter(?'dynamic_sidebar_params',?'zm_dynamic_sidebar_params'?);</p>
代碼中預設了CSS類名稱，可能使用更方便些。
缺點：添加的選項位置在其它小工具選項的上面，需要改進一下。
? 版權聲明
文章版權歸作者所有，未經允許請勿轉載。
THE END
