So fügen Sie CSS-Klassenoptionen zu WordPress-Widgets hinzu

Die folgende Kolumne „WordPress-Tutorial“ zeigt Ihnen, wie Sie CSS-Optionen zu WordPress-Gadgets hinzufügen. Ich hoffe, dass sie Freunden in Not hilfreich sein wird! WordPress-Widgets können wiederverwendet werden, und die gleichen Widget-Stile sind auch gleich. Wenn Sie einen von der Rezeption hinzugefügten Widget-Stil so anpassen möchten, dass er sich von anderen unterscheidet, können Sie seine ID finden, indem Sie den Originalcode anzeigen, z Wenn Sie nach Widgets suchen, sehen Sie etwa Folgendes: rrreewobei search-2 die ID dieses Gadgets ist. Sie können #search-2 verwenden, um den Stil zu definieren. Die Nummer dieses Suffixes ist jedoch möglicherweise nicht festgelegt Wenn Sie es das nächste Mal hinzufügen, müssen Sie es erneut bearbeiten. Der Stil ist etwas mühsam.

Sie können den folgenden Code verwenden, um CSS-Optionen einheitlich zu vorhandenen Gadgets hinzuzufügen. Fügen Sie den Code einfach zur aktuellen Theme-Funktionsvorlage „functions.php“ hinzu. Der Effekt ist wie gezeigt:

Code 1

Fügen Sie nur ein CSS hinzu Klassenoption

<section id="search-2" class="widget widget_search">

Code 2

ID und CSS-Klassen-Dropdown-Option hinzufügen

function zm_widget_form_extend( $instance, $widget ) {
  if ( !isset($instance['classes']) )
$instance['classes'] = null;
$row = "<p>\n";
$row .= "\t<label for=&#39;widget-{$widget->id_base}-{$widget->number}-classes&#39;>CSS类</label>\n";
$row .= "\t<input type=&#39;text&#39; name=&#39;widget-{$widget->id_base}[{$widget->number}][classes]&#39; id=&#39;widget-{$widget->id_base}-{$widget->number}-classes&#39; class=&#39;widefat&#39; value=&#39;{$instance[&#39;classes&#39;]}&#39;/>\n";
$row .= "</p>\n";
echo $row;
return $instance;
}
add_filter(&#39;widget_form_callback&#39;, &#39;zm_widget_form_extend&#39;, 10, 2);
 
function zm_widget_update( $instance, $new_instance ) {
$instance[&#39;classes&#39;] = $new_instance[&#39;classes&#39;];
return $instance;
}
add_filter( &#39;widget_update_callback&#39;, &#39;zm_widget_update&#39;, 10, 2 );
 
function zm_dynamic_sidebar_params( $params ) {
global $wp_registered_widgets;
$widget_id    = $params[0][&#39;widget_id&#39;];
$widget_obj    = $wp_registered_widgets[$widget_id];
$widget_opt    = get_option($widget_obj[&#39;callback&#39;][0]->option_name);
$widget_num    = $widget_obj[&#39;params&#39;][0][&#39;number&#39;];
 
if ( isset($widget_opt[$widget_num][&#39;classes&#39;]) && !empty($widget_opt[$widget_num][&#39;classes&#39;]) )
$params[0][&#39;before_widget&#39;] = preg_replace( &#39;/class="/&#39;, "class=\"{$widget_opt[$widget_num][&#39;classes&#39;]} ", $params[0][&#39;before_widget&#39;], 1 );
return $params;
}
add_filter( &#39;dynamic_sidebar_params&#39;, &#39;zm_dynamic_sidebar_params&#39; );

Der CSS-Klassenname ist im Code voreingestellt, was möglicherweise bequemer zu verwenden ist.

Nachteile: Die hinzugefügten Optionen liegen über anderen Gadget-Optionen und müssen verbessert werden.

Das obige ist der detaillierte Inhalt vonSo fügen Sie CSS-Klassenoptionen zu WordPress-Widgets hinzu. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!