如何显示类别帖子和标题分开的循环

时间:2013-07-24 05:43:49

标签: wordpress tabs

我正在创建一个滑块选项卡,我知道有很多插件,但我不想使用插件。所以我想显示我的类别帖子标题和帖子像bellow html formate但我不能。我试过我但我的方式只有内容循环而不是标题。如果能够像hlow一样使html然后选项卡将工作。伙计我怎么能这样做。

    <ul class="tabs">
    <li><a href="#content_1" rel="tab_1" class="tab active_tab">Tabs 1</a></li>
    <li><a href="#content_2" rel="tab_2" class="tab">Tabs 2</a></li>
    <li><a href="#content_3" rel="tab_3" class="tab">Tabs 3</a></li>
    <li><a href="#content_4" rel="tab_4" class="tab">Tabs 4</a></li>
    <li><a href="#content_5" rel="tab_5" class="tab">Tabs 5</a></li>
    </ul>

so here under li (tabs) put post title 




<div id="content_1" class="tab_view first_tab">
                    <h2>Tab #1</h2>
                        <p>Lorem ipsum dolor sit amet, duis netus ut posuere feugiat arcu, purus wisi quis fringilla at, nunc ut eget elit duis erat praesent, ut fermentum lacus turpis cras. Justo gravida erat quam mauris purus, aliquam quisque, eget nisl. Pellentesque nibh duis odio morbi quam, scelerisque convallis aenean quam tincidunt ornare nam nec feugiat sodales tristique.</p>                         
                </div>

<div id="content_1" class="tab_view first_tab">
                    <h2>Horizontal Tab #1</h2>
                        <p>Lorem ipsum dolor sit amet, duis netus ut posuere feugiat arcu, purus wisi quis fringilla at, nunc ut eget elit duis erat praesent, ut fermentum lacus turpis cras. Justo gravida erat quam mauris purus, aliquam quisque, eget nisl. Pellentesque nibh duis odio morbi quam, scelerisque convallis aenean quam tincidunt ornare nam nec feugiat sodales tristique.</p>                         
                </div>
<div id="content_1" class="tab_view first_tab">
                    <h2>Horizontal Tab #1</h2>
                        <p>Lorem ipsum dolor sit amet, duis netus ut posuere feugiat arcu, purus wisi quis fringilla at, nunc ut eget elit duis erat praesent, ut fermentum lacus turpis cras. Justo gravida erat quam mauris purus, aliquam quisque, eget nisl. Pellentesque nibh duis odio morbi quam, scelerisque convallis aenean quam tincidunt ornare nam nec feugiat sodales tristique.</p>                         
                </div>
<div id="content_1" class="tab_view first_tab">
                    <h2>Horizontal Tab #1</h2>
                        <p>Lorem ipsum dolor sit amet, duis netus ut posuere feugiat arcu, purus wisi quis fringilla at, nunc ut eget elit duis erat praesent, ut fermentum lacus turpis cras. Justo gravida erat quam mauris purus, aliquam quisque, eget nisl. Pellentesque nibh duis odio morbi quam, scelerisque convallis aenean quam tincidunt ornare nam nec feugiat sodales tristique.</p>                         
                </div><div id="content_1" class="tab_view first_tab">
                    <h2>Horizontal Tab #1</h2>
                        <p>Lorem ipsum dolor sit amet, duis netus ut posuere feugiat arcu, purus wisi quis fringilla at, nunc ut eget elit duis erat praesent, ut fermentum lacus turpis cras. Justo gravida erat quam mauris purus, aliquam quisque, eget nisl. Pellentesque nibh duis odio morbi quam, scelerisque convallis aenean quam tincidunt ornare nam nec feugiat sodales tristique.</p>                         
                </div>

仔细查看href="#content_1" rel="tab_1"这个#content_(1,2,3,4,5)应该是自动的。类似<div id="content_1"此内容_也将自动表示帖子编号

1 个答案:

答案 0 :(得分:0)

你可以试试这个

     $args = array(
'post_type' => array('post'), 
'orderby' => 'post_date',
'category_name'=>'my category name' ,
'showposts' => 5 );
$array= get_posts($args); ?>
<ul class="tabs">
 for ($i = 0; $i < count($array); $i++) { ?>    
<li><a href="#content_<?php echo $i+1; ?>" rel="tab_<?php echo $i+1; ?>" class="tab">Tabs 

<?php echo $i+1; ?></a></li>

<?php
$divs.='<div id="content_'.($i+1).'" class="tab_view first_tab">
<h2>'.$array[$i]->post_title.'</h2>
<p>'.$array[$i]->post_content.'</p>                         
                </div>';    
 } ?>
 </ul>

<?php $divs; ?>