创建引导手风琴简码 - 设置 ID

Question

我正在尝试制作一个 Bootstrap 手风琴下拉简码。除了 ID 不起作用之外，这一切都有效。当我检查代码时，尽管已经设置了 aria-controls、aria-labelledby、href 值，但它们都是空的。如何为两个必要的手风琴 ID 设置唯一 ID 以使此下拉菜单起作用？我需要这些是唯一的原因是因为会有多个下拉菜单，所以它们都需要单独调用。

这是我的 shortcode.php 文件中的简码：

 function FAQ($atts) {
    extract( shortcode_atts(array('title'=>'', 'content'=>'', 'titleID'=>'', 'bodyID'=>''), $atts) );
    $FAQ = '<div class="panel panel-default">
        <div class="panel-heading" role="tab" id="'.$titleID.'">
          <h4 class="panel-title">
            <a role="button" data-toggle="collapse" data-parent="#accordion" href="#'.$bodyID.'" aria-expanded="false" aria-controls="'.$bodyID.'">
              <i class="fa fa-arrow-circle-o-down"></i> '.$title.'
            </a>
          </h4>
        </div>
        <div id="'.$bodyID.'" class="panel-collapse collapse" role="tabpanel" aria-labelledby="'.$titleID.'">
          <div class="panel-body">' . $content . '

          </div></div></div>';

return $FAQ;

}

 add_shortcode('FAQ', 'FAQ');

这是我包装上述代码的内容。

   function FAQpanel( $atts, $content = null ) {
    return '<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">' .  do_shortcode($content) . '</div>';

 }

  add_shortcode( 'FAQpanel', 'FAQpanel' );

这里是操作中的简码

  [FAQpanel][FAQ title="Question One" titleID="2" headerID="5"]
  Vivamus sagittis lacus vel augue lapreet rutrum....
   [/FAQ][/FAQpanel]

它确实有效，但我无法打开面板。

Answer 1

/* FAQ
-------------------------------------------------- */

    // Add Shortcode
    function faq_shortcode( $atts , $content = null ) {

        // Attributes
        extract ( shortcode_atts(

            array(

                'class'   => '',
                'type'    => '',
                'question'=> '',
                'id'      => '' 

            ),

            $atts )

        );

            $out .='<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">';
            $out .='<div class="panel panel-default">';
            $out .='<div class="panel-heading" role="tab" id="headingOne">';
            $out .='<h4 class="panel-title">';
            $out .='<a role="button" data-toggle="collapse" data-parent="#accordion" href="#'. $id .'" aria-expanded="true" aria-controls="collapseOne">';
            $out .='<i class="more-less glyphicon glyphicon-plus"></i>';
            $out .= $question;
            $out .='</a>';
            $out .='</h4>';
            $out .='</div>';
            $out .='<div id="'. $id .'" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">';
            $out .='<div class="panel-body">'; 
            $out .= do_shortcode($content) ;
            $out .='</div>';
            $out .='</div>';
            $out .='</div>';


         return $out;

    }

    add_shortcode( 'faq', 'faq_shortcode' );

示例：

[faq question="Honest and dependable" id="collapseOne"]

this is content part (do short code)

[/faq]

[faq question="Quality commitment" id="collapseTwo"]

this is content part (do short code)

[/faq]

[faq question="Quality commitment" id="collapseThree"]

this is content part (do short code)

[/faq]

Answer 2

Bootstrap 4 两个手风琴（折叠）在单页（同一页）中没有冲突 https://getbootstrap.com/docs/4.0/components/collapse/

// 添加简码 function faq_shortcode( $atts , $content = null ) {

    // Attributes
    extract ( shortcode_atts(

        array(

            'class'   => '',
            'question'=> '',
            'id'      => '' ,
            'collapse'=>'',
            'cid'=>'',
            'hid'=>'',
            'aria'=>'',
            'accid'=>''

        ),

        $atts )

    );




        if ( $atts['collapse'] == 'show' ) { 

            $collapse =  'collapse show';

            $aria = 'true';

        } else {

            $collapse =  ' collapse';
            $aria = 'false';

        }

       if ( $atts['class'] ) {

            $class = $atts['class'];

        } else {

         $class = 'some';

        }

        $out .='<div class="card">';
        $out .= '<div class="card-header" id="'.$hid.'">';
        $out .='<button class="btn btn-link collapsed" data-toggle="collapse" data-target="#'.$cid.'" aria-expanded="'.$aria.'" aria-controls="'.$cid.'">'.$atts['question'].'</button>'; 
        $out .='</div>';
        $out .= '<div id="'.$cid.'" class="'.$collapse.'" aria-labelledby="'.$hid.'" data-parent="#'.$atts['accid'].'">';
        $out .=  '<div class="card-body">';
        $out .= do_shortcode($content) ;
        $out .=  '</div>';
        $out .=  '</div>';
        $out .=  '</div>';





        return $out;

}

add_shortcode( 'faq', 'faq_shortcode' );

第 6 栏

<div id="accordion">

[faq question="Lorem Ipsum 只是虚拟文本" hid="headOne" cid="colOne" accid="accordion" collapse="show"]

一个由来已久的事实是，读者在查看页面布局时会被页面的可读内容分散注意力。

的重点

[/常见问题]

[faq question="Lorem Ipsum 只是虚拟文本" hid="headTwo" cid="colTwo" accid="accordion" ]

一个由来已久的事实是，读者在查看页面布局时会被页面的可读内容分散注意力。

的重点

[/常见问题]

[faq question="Lorem Ipsum 只是虚拟文本" hid="headThree" cid="colThree" accid="accordion" ]

一个由来已久的事实是，读者在查看页面布局时会被页面的可读内容分散注意力。

的重点

[/常见问题]

</div>

另一栏 6

<div id="accordion1">

[faq question="Lorem Ipsum 只是虚拟文本" hid="head1One" cid="col1One" accid="accordion1" collapse="show"]

一个由来已久的事实是，读者在查看页面布局时会被页面的可读内容分散注意力。

的重点

[/常见问题]

[faq question="Lorem Ipsum 只是虚拟文本" hid="head1Two" cid="col1Two" accid="accordion1" ]

一个由来已久的事实是，读者在查看页面布局时会被页面的可读内容分散注意力。

的重点

[/常见问题]

[faq question="Lorem Ipsum 只是虚拟文本" hid="head1Three" cid="col1Three" accid="accordion1" ]

一个由来已久的事实是，读者在查看页面布局时会被页面的可读内容分散注意力。

的重点

[/常见问题]

</div>