Динамический аккордеон на WordPress PHP страница

Question

У меня есть страница в WordPress, которая вытягивает категории и затем перечисляет все пользовательские типы сообщений в этой категории.

Я пытаюсь применить эффект аккордеона к категориям, чтобы все сообщения не показывались одновременно.

Вот шаблон PHP.

Я пробовал несколько решений, и разрывы страниц или аккордеон не работают.

<?php 
/** 
* 
* Template Name: Online Courses Single Page 
* 
* The single post template. Used when a single post is queried. 
* 
*/ 

if(is_blog()){ 
    return load_template(THEME_DIR . "/template_blog.php"); 
}elseif(is_front_page()){ 
    return load_template(THEME_DIR . "/front-page.php"); 
} 

$post_id = theme_get_queried_object_id(); 
$layout = theme_get_inherit_option($post_id, '_layout', 'general','layout'); 
$content_width = ($layout === 'full')? 960: 630; 
get_header(); 
echo theme_generator('introduce',$post_id);?> 
<div id="page"> 
    <div class="inner <?php if($layout=='right'):?>right_sidebar<?php endif;?><?php if($layout=='left'):?>left_sidebar<?php endif;?>"> 
     <?php echo theme_generator('breadcrumbs',$post_id);?> 
     <div id="main"> 
     <?php if (have_posts()) while (have_posts()) : the_post(); ?> 
      <?php get_template_part('content','page'); ?> 
<?php endwhile; // end of the loop.?> 
<!-- Begin custom tax loop --> 
    <?php 
    //Retrieve custom taxonomy terms using get_terms and the custom post type. 
    $categories = get_terms('course-category'); 
    //Iterate through each term 
    foreach ($categories as $category) : 
    ?> 

     <div class="online-course-category"> 
      <h2><?php echo $category->name; ?></h2> 
      <ul> 
      <?php 
      //Setup the query to retrieve the posts that exist under each term 
      $posts = get_posts(array(
       'post_type' => 'online-courses', 
       'posts_per_page' => -1, 
       'orderby' => 'name', 
       'order' => 'ASC', 
       'taxonomy' => $category->taxonomy, 
       'term' => $category->slug, 
       'nopaging' => true, 
      )); 
      // Here's the second, nested foreach loop that cycles through the posts associated with this category 
      foreach($posts as $post) : 
       setup_postdata($post); ////set up post data for use in the loop (enables the_title(), etc without specifying a post ID--as referenced in the stackoverflow link above) 
      ?> 

       <li class="online-course-list"> 
    <div id="online-course-container"> 
    <div id="online-course-icons"> 
       <?php if (get_field('course_has_power_points') == 'yes'): ?> 
        <?php if(get_field('course_has_power_points')) { echo '<span class="ppt-icon"><img src="http://americandreamreschool.com/wp-content/uploads/2015/09/1443334285_powerpoint2.png" /></span>'; } ?> 
       <?php endif; ?> 
       <?php if (get_field('course_has_pdfs') == 'yes'): ?> 
        <?php if(get_field('course_has_pdfs')) { echo '<span class="pdf-icon"><img src="http://williamstitle.com/wp-content/uploads/2016/01/1443385817_pdf.png" /></span>'; } ?> 
       <?php endif; ?> 
       <?php if (get_field('course_has_videos') == 'yes'): ?> 
        <?php if(get_field('course_has_videos')) { echo '<span class="video-icon"><img src="http://americandreamreschool.com/wp-content/uploads/2015/09/1443334308_24.TV_2.png" /></span>'; } ?> 
       <?php endif; ?> 
       <?php if (get_field('course_has_audios') == 'yes'): ?> 
        <?php if(get_field('course_has_audios')) { echo '<span class="audio-icon"><img src="http://williamstitle.com/wp-content/uploads/2016/01/1443385658_volume-24.png" /></span>'; } ?> 
       <?php endif; ?> 
      </div> 
    <?php if(get_field('course_title')) { echo '<div class="online-course-title"><h3>' . get_field('course_title') . '</h3></div>'; } ?> 
     <div id="online-course-registration"> 
      <?php if(get_field('ce_credits_1')) { echo '<span class="ce-credits-1">' . get_field('ce_credits_1') . '</span> - '; } ?><?php if(get_field('price_1')) { echo '<span class="price-1">' . get_field('price_1') . '</span>'; } ?> 
      <?php if(get_field('register_for_price_1_url')) { echo '<div class="online-course-register-button1"><a href="' . get_field('register_for_price_1_url') . '" target="_blank">Register</a></div>'; } ?> 
      <?php if(get_field('ce_credits_2')) { echo '<span class="ce-credits-2">' . get_field('ce_credits_2') . '</span> - '; } ?><?php if(get_field('price_2')) { echo '<span class="price-2">' . get_field('price_2') . '</span>'; } ?> 
      <?php if(get_field('register_for_price_2_url')) { echo '<div class="online-course-register-button2"><a href="' . get_field('register_for_price_2_url') . '" target="_blank">Register</a></div>'; } ?> 
     </div> 
    <?php if(get_field('course_description')) { echo '<div class="online-course-description">' . get_field('course_description') . '</div>'; } ?> 
    <?php if(get_field('course_picture')) { echo '<div class="course-picture"><img src="' . get_field('course_picture') . '" /></div>'; } ?> 
    <?php if(get_field('descriptive_video')) { echo '<div class="course-video">' . get_field('descriptive_video') . '</div>'; } ?> 
    <?php if(get_field('disclaimer')) { echo '<div class="online-course-disclaimer">' . get_field('disclaimer') . '</div>'; } ?> 
</div> 
       </li> 

      <?php endforeach; ?> 

      </ul> 
     </div><!-- .row -->  

    <?php endforeach; ?> 
    <?php wp_reset_postdata(); ?> 
      <div class="clearboth"></div> 
     </div> 
     <?php if($layout != 'full') get_sidebar(); ?> 
     <div class="clearboth"></div> 
    </div> 
</div> 
<?php get_footer(); ?> 

Answer 1

Похоже, вы упустили пару вещей - если только они не находятся в других файлах. Убедитесь, что вы enqued скрипты JQuery Аккордеон - wp_enqueue_script('jquery-ui-accordion') и вам потребуется JavaScript

<script> 
 
\t jQuery(document).ready(function() { 
 
\t jQuery('#accordion-container-id').accordion({ 
 
\t heightStyle: 'content' 
 
\t }); 
 
\t }); 
 
\t </script>

Где аккордеон контейнер-идентификатор является идентификатором элемента оберточной свой аккордеон. (Он может работать с вашим классом «онлайн-курс-категория»). Наконец, я думаю, вам нужно изменить теги <h2> вокруг имени катеджиора для тегов <h3>. Вот как я получил все, чтобы работать.