Шорткод: Аккордеон на Twitter Bootstrap

Twitter Bootstrap — это мощный, интуитивно понятный фронтенд фреймворк для ускорения и упрощения веб-разработки. Bootstrap предоставляем кроссбраузерный 12-колоночный адаптивный CSS, который не только будет замечательно работать даже в старых браузерах (например IE7), но и прекрасно чувствует себя на смартфонах, мобильных и планшетных браузерах. Также он включает в себя несколько компонентов JavaScript, которые обычно требуются для интерактивных веб-порталов.

Говоря о WordPress в первую очередь как о CMS, мы хотим управлять всем из бекенда. Однако, компоненты Twitter Bootstrap не разработаны под бекенд WordPress. Поэтому мы постараемся преодолеть эту проблему, внедряя шорткоды WordPress для всех компонентов Twitter bootstrap. Начнем мы с Collapse.
Пример на скриншоте:

Использование

[collapse_group id="optional_group_1"]
	[collapse title="my heading1" id="optional_id" open="y/n"]Некоторый текст[/collapse]
	[collapse title="my heading2" id="optional_id" open="y/n"]Некоторый текст[/collapse]
[/collapse_group]

Сниппет

Добавляем следующий код в файл functions.php вашей темы:

add_shortcode("collapse", "collapse");
add_shortcode("collapse_group", "collapse_group");
function collapse_group( $atts, $content = null ) {  
    extract(shortcode_atts(array(  
    'id' => '',
    'class' => ''
    ), $atts));  
	
    $output  = '<div class="accordion '.$class.'"  ';
	
    if(!empty($id))
        $output .= 'id="'.$id.'"';
		
    $output .='>'.do_shortcode($content).'</div>';
    return $output;  
}  

function collapse($atts, $content = null) {  
    extract(shortcode_atts(array(  
    'id' => '',
    'title' => '',
	'open'=>'n' 
    ), $atts));  

    // автоматически генерируем id для связки тайтла аккордеона с конентом
    if(empty($id))
        $id = 'accordian_item_'.rand(100,999);
		
    $output = '<div class="accordion-group">
        <div class="accordion-heading">
        <a class="accordion-toggle" data-toggle="collapse" 
        data-parent="#accordion2" href="#'.$id.'">'.$title.'</a>
        </div>
         <div id="'.$id.'" class="accordion-body collapse '.($open == 'y' ? 'in' :'').'">
            <div class="accordion-inner">'.$content.'</div>
         </div>
        </div>';  
		
    return $output;
}