我正在Wordpress中使用Bootstrap,我想实现collapse 特定自定义帖子类型的单页内容中的功能。
我知道我可以创建一个短代码,然而,对于成百上千的帖子来说,短代码并不理想。是否可以在自定义post类型(custom single.php)的\\u内容中包含collapse。因此,当用户输入时。H2及其下方的文本。p它将其用于折叠组。
所以在定制单曲中。php I将\\u内容包装在自定义div id中
<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>
最合适的回答,由SO网友:kaiser 整理而成
脚本
首先必须将脚本排队。我们有条件地仅为您的自定义帖子类型及其存档加载它。
// 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\' );
标记现在我们需要添加适当的标记。目标通过使用实际
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>