Wordpress中的标签,页面加载时显示内容

时间:2016-11-30 13:54:03

标签: php wordpress tabs

在Wordpress网站上,我试图让标签工作,显示自定义帖子类型的内容。它几乎正常工作,除了在第一次访问(或页面刷新)时,不显示最后一个帖子类型的内容。单击选项卡的链接时出现。 在我首先创建的HTML中,标签工作正常。

有人知道如何在访问该页面时显示上一个帖子类型的内容吗?

谢谢。

原始HTML:

<div class="row collapse">
<div class="medium-3 columns">
<ul class="tabs vertical" id="example-vert-tabs" data-tabs>
  <li class="tabs-title is-active"><a href="#panel1v" aria-selected="true">Case 1</a></li>
  <li class="tabs-title"><a href="#panel2v">Case 2</a></li>
  <li class="tabs-title"><a href="#panel3v">Case 3</a></li>
  <li class="tabs-title"><a href="#panel4v">Case 4</a></li>
</ul>
</div>
<div class="medium-9 columns">
<div class="tabs-content vertical" data-tabs-content="example-vert-tabs">
  <div class="tabs-panel is-active" id="panel1v">
    <img src="http://placehold.it/150x150/eee/ff0000?text=Foto" alt="" class="floatleft">
    <h3>Case 1 titel</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <p>Meer weten? <a href="#">Vraag om de details van deze case</a></p>
  </div>
  <div class="tabs-panel" id="panel2v">
    <img src="http://placehold.it/150x150/eee/ff0000?text=Foto" alt="" class="floatleft">
    <h3>Case 2 titel</h3>
    <p>Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus.</p>
    <p>Meer weten? <a href="#">Vraag om de details van deze case</a></p>
  </div>
  <div class="tabs-panel" id="panel3v">
    <img src="http://placehold.it/150x150/eee/ff0000?text=Foto" alt="" class="floatleft">
    <h3>Case 3 titel</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <p>Meer weten? <a href="#">Vraag om de details van deze case</a></p>
  </div>
  <div class="tabs-panel" id="panel4v">
    <img src="http://placehold.it/150x150/eee/ff0000?text=Foto" alt="" class="floatleft">
    <h3>Case 4 titel</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <p>Meer weten? <a href="#">Vraag om de details van deze case</a></p>
  </div>    
 </div>

   

这是我到目前为止的代码:     

            <div class="medium-3 columns">                              
                    <ul class="tabs vertical" id="example-vert-tabs" data-tabs>

            <?php $args = array('post_type' => 'cases' ); ?>
            <?php $loop = new WP_Query($args); ?>
            <?php if ( $loop->have_posts() ) : while ( $loop->have_posts() ) : $loop->the_post(); ?>


                  <li class="tabs-title"><a href="#<?php the_ID(); ?>" aria-selected="true"><?php the_title(); ?></a></li>

            <?php endwhile; ?>

    <?php else: ?>

      <?php endif; ?>
                                </ul>

            <!-- end medium-3 columns --> </div>

            <div class="medium-9 columns">
                  <div class="tabs-content vertical" data-tabs-content="example-vert-tabs">


     <?php $args = array('post_type' => 'cases' ); ?>
            <?php $loop = new WP_Query($args); ?>
            <?php if ( $loop->have_posts() ) : while ( $loop->have_posts() ) : $loop->the_post(); ?>

                    <div class="tabs-panel" id="<?php the_ID(); ?>">
                        <?php the_content(); ?>
                    </div>


    <?php endwhile; ?>

    <?php else: ?>
        <h1>Nog geen Cases</h1>
     <?php endif; ?>
                         <!-- end tabs-content vertical --> </div> 

                 <!-- end medium-9 columns --> </div>

     <!-- end row collapse --></div>

1 个答案:

答案 0 :(得分:0)

你可以这样,我正在使用Bootstrap作为选项卡:

<div class="container">
    <ul class="nav nav-pills nav-bordered">
        <li class="active"><a data-toggle="tab" href="#home">All Topics</a></li>
        <li><a data-toggle="tab" href="#menu1">Classic</a></li>
        <li><a data-toggle="tab" href="#menu2">Relationships</a></li>
        <li><a data-toggle="tab" href="#menu3">Communication</a></li>
        <li><a data-toggle="tab" href="#menu4">Vision</a></li>
        <li><a data-toggle="tab" href="#menu5">Business</a></li>
        <li><a data-toggle="tab" href="#menu6">Wellness</a></li>
        <li><a data-toggle="tab" href="#menu7">Fear</a></li>
    </ul>
    <div class="tab-content">
        <div id="home" class="tab-pane fade in active">
           <!-- <h3>All Topics</h3>-->
            <?php
            $catquery = new WP_Query('cat=3&posts_per_page=-1');
            while ($catquery->have_posts()) : $catquery->the_post();
                ?>
                <div class='posts-inner-section'>
                    <h2 class="post-title"><?php the_title(); ?></a></h2>
                    <div class="clear"></div>
                    <div class="post-author">
                        <?php
                        echo'<p>' . get_post_meta(get_the_ID(), 'Post_writer', true) . '</p>';
                        $posttags = get_the_tags();
                        if ($posttags) {
                            foreach ($posttags as $tag) {
                                $tag_link = get_term_link($tag);
                                echo '<a class="d-none" href="' . $tag_link . '">' . $tag->name . '</a>';
                            }
                        }
                        ?>
                    </div>
                    <div class="byline vcard"><?php the_content(); ?></div>
                    <div style="text-align:center;" class="blog-sgare-btn"><a href="#">Share</a></div>
                    <?php /*?><li><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></li><?php */?>
                </div>
            <?php endwhile; ?>
        </div>
        <div id="menu1" class="tab-pane fade">
           <!-- <h3>Classic</h3> -->
           <?php
            $catquery = new WP_Query('cat=8&posts_per_page=-1');
            while ($catquery->have_posts()) : $catquery->the_post();
                ?>
                <div class='posts-inner-section'>
                    <h2 class="post-title"><?php the_title(); ?></a></h2>
                    <div class="clear"></div>
                    <div class="post-author">
                        <?php
                        echo'<p>' . get_post_meta(get_the_ID(), 'Post_writer', true) . '</p>';
                        $posttags = get_the_tags();
                        if ($posttags) {
                            foreach ($posttags as $tag) {
                                $tag_link = get_term_link($tag);
                                echo '<a class="d-none" href="' . $tag_link . '">' . $tag->name . '</a>';
                            }
                        }
                        ?>
                    </div>
                    <div class="byline vcard"><?php the_content(); ?></div>
                    <div style="text-align:center;" class="blog-sgare-btn"><a href="#">Share</a></div>
                    <?php /*?><li><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></li><?php */?>
                </div>
            <?php endwhile; ?>
        </div>
     </div>
  </div>