Twitter Bootstrap Use Collapse in Custom Post Type

Я использую Bootstrap с WordPress, и я хочу реализовать функциональность коллапса в контенте для отдельных страниц определенного пользовательского типа сообщений.

Я знаю, что я мог бы создать короткий код, однако, с узлами коротких кодов сообщений не будет идеальным. Можно ли включить коллапс в_состоянии пользовательского типа сообщения (custom-single.php). Поэтому, когда пользователь вводит .H2 с текстом под ним .p, он использует это для группы коллапса.

Итак, в custom-single.php я обертываю содержимое__контента в пользовательский идентификатор div

<div id="my-accordion"><?php the_content(); ?></div> 

Как я могу связать H2 и p с соответствующими классами div для бутстрапа. Это возможно?

  <div class="accordion" id="accordion2"> <div class="accordion-group"> <div class="accordion-heading"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne"> Collapsible Group Item #1 </a> </div> <div id="collapseOne" class="accordion-body collapse in"> <div class="accordion-inner"> Anim pariatur cliche... </div> </div> </div> 

  <div class="accordion-heading"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo"> Collapsible Group Item #2 </a> </div> <div id="collapseTwo" class="accordion-body collapse"> <div class="accordion-inner"> Anim pariatur cliche... </div> </div> </div> </div> 

Solutions Collecting From Web of "Twitter Bootstrap Use Collapse in Custom Post Type"

Сценарий

Сначала вы должны поставить в очередь скрипт. Мы условно загружаем его только для вашего настраиваемого типа сообщений и его архивов.

 // in your functions.php function wpse69274_enqueue_tbs_collapse() { if ( ! is_post_type_archive() AND 'YOUR_POST_TYPE' !== get_post_type() ) return; wp_enqueue_script( 'tbs-collapse' ,get_stylesheet_directory_url().'path/to/your/collapse.js'; ,array( 'jquery' ) ,filemtime( get_stylesheet_directory().'path/to/your/collapse.js' ) ,true ); } add_action( 'wp_enqueue_scripts', 'wpse69274_enqueue_tbs_collapse' ); 

MarkUp

Теперь нам нужно добавить правильный MarkUp. Цели получаются отмеченными с использованием фактического значения the_ID() текущей записи.

 <div class="container"> <div class="accordion" id="accordion"> <?php global $wp_query; if ( have_posts() ) { while( have_posts ) { the_post(); ?> <div class="accordion-group"> <div class="accordion-heading"> <h2><a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapse-<?php the_ID(); ?>"> <?php the_title(); ?> </a></h2> </div> <div id="collapse-<?php the_ID(); ?>" class="accordion-body collapse in"> <div class="accordion-inner"> <?php if ( is_singular() { the_content(); } else { the_excerpt(); } ?> </div> </div> </div><!-- // .accordion-group --> <?php } // endwhile; } // endif; ?> </div> </div> 

Из Кодекса вы можете обернуть свой заголовок сообщения до и после элементов. Итак … Я думаю, вы бы вырезали / изменили свой POST TITLE '

 <?php the_title('<h2 class="accordion-heading">', '</h2>'); ?>