Comment ajouter des options de classe CSS aux widgets WordPress

La colonne suivante du Tutoriel WordPress vous présentera comment ajouter des options CSS aux gadgets WordPress. J'espère que cela sera utile aux amis dans le besoin !

Les widgets WordPress peuvent être réutilisés, et les mêmes styles de widgets sont également les mêmes. Si vous souhaitez personnaliser un style de widget ajouté par la réception pour qu'il soit différent des autres, vous pouvez trouver son identifiant en affichant l'original. Par exemple, si vous recherchez un gadget, vous verrez quelque chose comme :

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

où search-2 est l'ID de ce gadget. Vous pouvez utiliser #search-2 pour définir le style. le numéro de ce suffixe n'est pas fixe. Il sera ajouté la prochaine fois. Il peut changer et vous devrez à nouveau modifier le style précédent, ce qui est un peu gênant.

Vous pouvez utiliser le code suivant pour ajouter uniformément des options CSS aux gadgets existants. Ajoutez simplement le code au modèle de fonction de thème actuel function.php. L'effet est comme indiqué ci-dessous :

Code 1

Ajouter une seule option de classe CSS

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; );

Code 2

Ajouter un ID et une liste déroulante de classe CSS options

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 for=&#39;widget-{$widget->id_base}-{$widget->number}-custom_id&#39;>添加ID</label>\n";
$row .= "\t<input type=&#39;text&#39; name=&#39;widget-{$widget->id_base}[{$widget->number}][custom_id]&#39; id=&#39;widget-{$widget->id_base}-{$widget->number}-custom_id&#39; class=&#39;widefat&#39; value=&#39;{$instance[&#39;custom_id&#39;]}&#39; />\n";
$row .= "\t<label for=&#39;widget-{$widget->id_base}-{$widget->number}-classes&#39;>CSS类</label>\n";
$row .= "\t<select name=&#39;widget-{$widget->id_base}[{$widget->number}][classes]&#39; id=&#39;widget-{$widget->id_base}-{$widget->number}-classes&#39; class=&#39;widefat&#39;>";
foreach( $myclass as $key => $class ) {
$selected = null;
if( $class_prefix.$key == $instance[&#39;classes&#39;] ) $selected = &#39;selected = "selected"&#39;;
$row .= "\t<option value=&#39;$class_prefix$key&#39; $selected>$class</value>\n";
}
$row .= "</select>\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;];
$instance[&#39;custom_id&#39;] = $new_instance[&#39;custom_id&#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 );
if ( isset($widget_opt[$widget_num][&#39;custom_id&#39;]) && !empty($widget_opt[$widget_num][&#39;custom_id&#39;]) )
$params[0][&#39;before_widget&#39;] = preg_replace( &#39;/id=".*?"/&#39;, "id=\"{$widget_opt[$widget_num][&#39;custom_id&#39;]}\"", $params[0][&#39;before_widget&#39;], 1 );
return $params;
}
add_filter( &#39;dynamic_sidebar_params&#39;, &#39;zm_dynamic_sidebar_params&#39; );

Le nom de la classe CSS est prédéfini dans le code, ce qui peut être plus pratique à utiliser.

Inconvénients : Les options ajoutées sont situées au-dessus des autres options du gadget et doivent être améliorées.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!