WordPress 위젯에 CSS 클래스 옵션을 추가하는 방법

다음 WordPress Tutorial 칼럼에서는 WordPress 가젯에 CSS 옵션을 추가하는 방법을 소개하겠습니다. 도움이 필요한 친구들에게 도움이 되길 바랍니다!

워드프레스 위젯은 재사용이 가능하며, 동일한 위젯 스타일도 동일하게 프론트 데스크에서 추가한 위젯 스타일을 다른 위젯과 다르게 맞춤화하고 싶다면, 원본 코드를 보면 해당 ID를 알 수 있습니다. 위젯 검색 다음과 같은 내용이 표시됩니다.

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

여기서 search-2는 이 가젯의 ID입니다. #search-2를 사용하여 스타일을 정의할 수 있습니다. 다음에 추가할 때 변경해야 합니다. 스타일이 조금 번거롭습니다.

다음 코드를 사용하면 기존 가젯에 CSS 옵션을 균일하게 추가할 수 있습니다. 현재 테마 함수 템플릿인 function.php에 코드를 추가하면 됩니다. 효과는 다음과 같습니다.

Code 1

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

코드 2

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

CSS 클래스 이름은 코드에 미리 설정되어 있어 사용하기 더 편리할 수 있습니다.

단점: 추가된 옵션은 다른 가젯 옵션 위에 위치하므로 개선이 필요합니다.

위 내용은 WordPress 위젯에 CSS 클래스 옵션을 추가하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!