사이드바 위젯의

사이드바 위젯의

사이드바를 등록하는 방법은 다음과 같습니다.

register_sidebar(array(
    'name' => 'First_sidebar',
    'id' => 'sidebar-1',
    'before_widget' => '<div class="well">',
    'after_widget' => '</div>',
    'before_title' => '<h4>',
    'after_title' => '</h4>'
));

HTML WordPress 출력입니다.

<div class="well">
<h4>title</h4>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>

추가하고 싶습니다.class<ul>꼬리표를 매다
다음과 같은 경우:

<div class="well">
    <h4>title</h4>
    <ul class="nav nav-list">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    </ul>
</div>

은 요?class<ul>?

단순하지만 그다지 훌륭하지 않고 해킹에 가까운 것은 자바스크립트/jQuery를 사용하는 것입니다.

jQuery( document ).ready(function() {
    jQuery('.widget > ul').addClass('nav nav-list');
});

javascript를 사용하는 것을 정말 싫어하지만, 이 경우에는 사용할 수 있습니다.

저는 이런 방법으로 해냈습니다.

사이드 바.php:

<!-- sidebar -->
<aside class="sidebar" role="complementary">

<div class="sidebar-widget">
  <?php if(function_exists('dynamic_sidebar')) {

    ob_start();
    dynamic_sidebar('widget-area-1');
    $sidebar = ob_get_contents();
    ob_end_clean();

    $sidebar_corrected_ul = str_replace("<ul>", '<ul class="menu vertical">', $sidebar);

    echo $sidebar_corrected_ul;
    } 

  ?>
</div>

</aside>
<!-- /sidebar -->

를 .<ul>합니다.<ul>반에 꼬리표를 붙입니다.

덜 사용:

.widget ul {
    .nav;
    .nav-pills;
    .nav-stacked;
}

저한테는 통했어요 ;)

나는 그것을 가지고 놀았고 이것은 나에게 효과가 있습니다.

function create_widget( $name, $id, $class, $description ) {
    register_sidebar(array(
        'name' => __( $name ),
        'id' => $id,
        'class' => $class,
        'description' => __( $description ),
        'before_widget' => '<div ' . 'class ='. $class . '>',
        'after_widget' => '</div>',
        'before_title' => '<h2>',
        'after_title' => '</h2>'
    ));

create_widget( 'widget name', 'myID', 'myClass', 'my description' );

변수는 과 같습니다.'class' => ''

고객에게 필요한 것은(는)

register_sidebar(array(
    'name' => 'First_sidebar',
    'id' => 'sidebar-1',
    'class'         => 'nav-list',
    'before_widget' => '<div class="well">',
    'after_widget' => '</div>',
    'before_title' => '<h4>',
    'after_title' => '</h4>'
));

그러면 되겠군요.

컨테이너에 sprintf를 사용하여 개별 위젯 이름을 className으로 추가하는 기본 솔루션이 있습니다.

%1$s 및 다를 .%2$s className

className .<ul>/CSS)기(jQuery/CSS)에:

.widget_nav-list > ul (.widget_nav_menu > ul)

또한 응답된 jQuery 코드는 nav-list가 아니더라도 모든 사이드바에 있는 모든 위젯을 대상으로 합니다(사용한 위젯만 nav일 경우 문제가 될 수 있음).

- 모든 before_widget - 할 HTML(:<li id="%1$s" class="widget %2$s">함 ) : sprintf 를

wordpress.org 의 참고 자료

기능들.php:

register_sidebar(array(
  'name' => 'First_sidebar',
  'id' => 'sidebar-1',
  'before_widget' => '<div id="%1$s" class="well %2$s">',
  'after_widget' => '</div>',
  'before_title' => '<h4>',
  'after_title' => '</h4>'
));

기본 탐색 위젯에 대한 출력:

<div id="nav_menu-1" class="well widget_nav_menu">
  <h4>title</h4>
  <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>

저는 이 오래된 스레드에 글을 올립니다. 왜냐하면 "register_sidebar 위젯 이름"이라는 검색어에 대한 상위 검색 결과였기 때문입니다. 그래서 저는 완전한 답을 가지는 것이 좋다고 생각했습니다.

사용자 지정 워드프레스 위젯 사용: (jQuery나 플러그인 필요 없음!!)

내 단계는 카테고리 위젯과 함께 수행되며 모든 위젯에 대해 동일하게 수행할 수 있습니다.

1. 위젯 등록(functions.php)

add_action ('widgets_init', 'register_widgets')함수 레지스터_ widgets($id) {register_sidebar(배열('name' => '사이드바','id' => 'sidebar'));}

2. 사용자 지정 위젯 등록(functions.php)

add_action ('widgets_init', 'register_custom_widget')함수 레지스터_사용자 정의_widget() {레지스터_WP_위젯_카테고리_사용자 정의')}

3. 파일 클래스-wp-widget-categories를 복사합니다./wp-includes/widgets/의 php를 당신의 테마 파일 /wp-content/themes/-당신의 테마-/widgets/

4. 함수에 이 파일을 포함합니다.php

   require_once('widgets/class-wp-widget-categories.php');

5. 클래스 이름을 "widgets/class-wp-wp-widget-categories.php" 파일에서 "WP_Widget_Categories_Custom"으로 변경합니다.

   class WP_Widget_Categories_Custom extends WP_Widget {

6. ultag에 대해 "widgets/class-wp-widget-categories.php" 파일에서 검색하여 다음과 같이 편집합니다.

   <ul class="nav nav-list">

그게 전부입니다 ;)

이렇게 하면 모든 opening ul 태그와 lig가 대체됩니다.

<?php 

  if(function_exists('dynamic_sidebar')) {

    ob_start();
    dynamic_sidebar('news-sidebar');
    $news_sidebar = ob_get_contents();
    ob_end_clean();
    $news_sidebar_corrected_ul_and_li = str_replace('<ul>', '<ul class="list-group mb-20">', str_replace('<li>', '<li class="list-group-item rounded-0">', $news_sidebar));
    echo $news_sidebar_corrected_ul_and_li;
  } 

?>

원치 않는 교체와 충돌을 방지하려면 ul과 li를 'before_widget' 및 'before_title'에 사용하지 않는 것이 좋습니다.

register_sidebar( array(
  'name'          => __( 'news-sidebar'),
  'id'            => 'news-sidebar',
  'description'   => '',
  'class'         => 'card-body border-bottom px-0 px-md-20',
  'before_widget' => '<div id="%1$s" class="w-100 widget-%2$s">',
  'after_widget'  => '</div>' ,
  'before_title'  => '<div class="card-header p-10 p-md-20 h5 bg-light">',
  'after_title'   => '</div>'  
)) ;

in function.php

     register_sidebar( array(
                "id" => "contactform",
                "name" => "lorm text",
                "description" => "lorm text",
                "before_widget" => "",
                "after_widget" => "",
            ));

in .php file

     

      <div class="feature_h">
                <?php if(is_active_sidebar( 'contactform' )) 
                    dynamic_sidebar( 'contactform' );
                ?>   
            </div>

in .js file

    jQuery( document ).ready(function() {
        jQuery('.feature_h > h2').addClass('mb-3 text-white');
    });

이 문제와 씨름하다가 이 플러그인을 사용할 수 있다는 것을 알게 되었습니다. http://wordpress.org/plugins/wp-bootstrap-navmenu

widget-css-class WordPress 디렉토리라는 플러그인을 사용할 수 있습니다.

그 후 당신은 당신이 필요로 하는 어떤 위젯에 custom css 클래스를 추가할 수 있을 것입니다.

언급URL : https://stackoverflow.com/questions/16885027/wordpress-how-to-add-class-to-ul-of-sidebar-widget