我将custom_post_type用于我的常见问题解答,并制作了一个唯一的页面来显示它。 这是我在functions.php中的代码
function faqs_custom_post_type(){
$labels = array(
'name' => 'FAQs',
'singular_name' => 'FAQ',
'search_item' => 'Search FAQ',
'all_items' => 'All FAQs',
'add_new_item' => ( 'Add New FAQ' )
);
$args = array(
'labels' => $labels,
'public' => true,
'has_archive' => true,
'publicly_queryable' => true,
'query_var' => true,
'rewrite' => true,
'capability_type' => 'post',
'exclude_from_search' => true,
'has_archive' => false,
'hierarchical' => false,
'supports' => array(
'title',
'editor',
'thumbnail',
'revisions',
),
'taxonomies' => array('category', 'post_tag'),
'menu_position' => 5,
'exclude_from_search' => false
);
register_post_type('faqs',$args);
}
add_action('init','faqs_custom_post_type');
这是我的代码,用于在“常见问题解答”页面(page-faqs.php)中显示内容。
<div id="primary" class="content-area">
<main id="main" class="site-main" role="main">
<?php while ( have_posts() ) : the_post(); ?>
<!-- Display FAQs Custom Post Type-->
<?php get_template_part( 'template-parts/content', 'page' ); ?>
<?php
$new_loop = new WP_Query( array(
'post_type' => 'faqs',
'posts_per_page' => 10, // put number of posts that you'd like to display
'order' => 'ASC'
) );
?>
<?php if ( $new_loop->have_posts() ) : $i=1;?>
<div class="elementor-toggle" role="tablist">
<?php while ( $new_loop->have_posts() ) : $new_loop->the_post(); ?>
<div onclick="clicked(this)" id="elementor-tab-title-104<?php echo $i?>" class="elementor-tab-title" tabindex="104<?php echo $i?>" data-tab="1" role="tab" aria-controls="elementor-tab-content-104<?php echo $i?>">
<span class="elementor-toggle-icon elementor-toggle-icon-left" aria-hidden="true">
<i class="elementor-toggle-icon-closed fa fa-angle-down"></i>
<i class="elementor-toggle-icon-opened fa fa-angle-up"></i>
</span>
<h4><?php the_title(); ?></h4>
</div>
<div id="elementor-tab-content-104<?php echo $i?>" class="elementor-tab-content elementor-clearfix" data-tab="1" role="tabpanel" aria-labelledby="elementor-tab-title-104<?php echo $i; $i++?>"><p style="padding-left: 30px;">
<?php the_content(); ?></p>
</div>
<?php endwhile;?></div>
<?php else: ?>
<?php endif; ?>
<?php wp_reset_query(); ?>
<?php endwhile; // End of the loop. ?>
</main><!-- #main -->
</div><!-- #primary -->
单击#elementor-tab-title时我得到了显示内容部分,但单击返回时我不知道如何隐藏它。
<script>
jQuery(document).ready(function() {
jQuery( "#elementor-tab-title" ).click(function(t){alert(jQuery(t).attr('id'))});
});
</script>
<script>
function clicked(t) {
jQuery("#elementor-tab-content-"+jQuery(t).attr('tabindex')).css("display","block")}
</script>