jQuery 手风琴和 Wordpress 简码

Question

我正在尝试让 jQuery 手风琴/选项卡简码看起来像这样

[accordions]
[accordion title="Accordion 1"]Accordion 1 Content[/accordion]
[accordion title="Accordion 2"]Accordion 2 Content[/accordion]
[accordion title="Accordion 3"]Accordion 3 Content[/accordion]
[/accordions]

我已经尝试了很多方法，但我似乎无法让它工作

这该怎么办？

Answer 1

我尚未测试此代码，但这应该可以工作：

function accordian_open_tag( $atts, $content='' ) {
  return '<div class="accordion">{$content}</div>';
}
function accordian_section( $atts, $content='' ) {
  $atts = shortcode_atts( array(
    'title' => 'default title'
  ), $atts );

  return "<h3><a href=\"#\">{$atts['title']}</a></h3>" . 
         "<div>{$content}</div>";
}
add_shortcode( 'accordians', 'accordian_open_tag' );
add_shortcode( 'accordian', 'accordian_section' );

加载页面时，您需要运行 $(".accordian").accordian() 才能正常工作。

Answer 2

<?php
// my shortcode like 
/*
[accordion] 
    [section title="Your title #1" class="active" ] 
    Your Description here #1
    [/section]
    [section title="Your title #2"]
    Your Description here #2
    [/section]
    [section title="Your title #3"]
    Your Description here #3
    [/section]
[/accordion]  
*/
add_shortcode( 'section', 'section' );
function section( $atts, $content ){
     extract(shortcode_atts(array(
        'title' => 'Collapse',
        'id'    => false,
        'class' => false,
    ), $atts));
    $GLOBALS['section'][] = array( 
        'title'   =>  $title ,
        'id'      =>  $id,
        'class'   =>  $class ,
        'content' =>  $content ,
    );
    $id  = "collapse-id-".$GLOBALS['collapsibles_count'];
    foreach( $GLOBALS['section'] as $tab ){         
        $class = ( !empty($tab['class']) && $tab['class']=="active" ) ? "panel-collapse collapse in"  : "panel-collapse collapse";      
        $__title = preg_replace('/[^a-zA-Z0-9._\-]/', '', strtolower($tab['title'])  );     
        $return = sprintf( "\n".'<div class="panel panel-default"><div class="panel-heading"><h4 class="panel-title"><a data-toggle="collapse" data-parent="#%s" href="#%s">%s</a></h4></div><div id="%s" class="%s"><div class="panel-body">%s</div></div></div>'."\n",$id, $__title, $tab['title'], $__title, $class, $tab['content']);       
    } // foreach        
    return do_shortcode($return);
}// function ending
add_shortcode( 'accordion', 'accordion' );
function accordion( $atts, $content ){ 
    if(isset( $GLOBALS['collapsibles_count'] )) {
        $GLOBALS['collapsibles_count']++;
    }else {
        $GLOBALS['collapsibles_count'] = 0; 
    }
    $id  = "collapse-id-".$GLOBALS['collapsibles_count'];
    return  do_shortcode(sprintf('<div class="tp-accordion"><div class="panel-group" id="%s"> %s </div></div> ', $id, $content));
}
?>

wordpress短代码引导