如何在960.gs/Bootstrap嵌套網格中集成Wordpress循環？

即將實施我的第一個WordPress的網站。我的理解是，它幫助，如果我的循環調用泛型的項目，例如：如何在960.gs/Bootstrap嵌套網格中集成Wordpress循環？

<div id="article-excerpt"> 
<div>Article Heading</div> 
<div>Article Sub-heading</div> 
</div>

在使用Twitter的引導或960.gs，我的飼料跨越多列和多行。

例如，文章水平佈置在由5列組成的嵌套網格上。每5個項目，都有一個新的行。

Row 1: [article div] [article div] [article div] [article div] [article div] 
Row 1: [article div] [article div] [article div] [article div] [article div] 
Row 1: [article div] [article div] [article div] [article div] [article div] 
etc.

我來解釋下位，檢查我的這些系統是如何工作的一個基本的瞭解。

在960.gs，嵌套網格，我需要用的alpha類和omega分別宣佈的第一項和最後一項在每一行中：同樣

<div id="article excerpt" class="alpha grid_1"> 
    <div>Article Heading</div> 
    <div>Article Sub-heading</div> 
</div>

，在Twitter的引導我需要的地方每排在它自己的特殊DIV：

<div class="row"> 

    <div id="article-excerpt" class="span1"> 
    <div>Article Heading</div> 
    <div>Article Sub-heading</div> 
    </div> 

    <div id="article-excerpt" class="span1"> 
    <div>Article Heading</div> 
    <div>Article Sub-heading</div> 
    </div> 

    <div id="article-excerpt" class="span1"> 
    <div>Article Heading</div> 
    <div>Article Sub-heading</div> 
    </div> 

    <div id="article-excerpt" class="span1"> 
    <div>Article Heading</div> 
    <div>Article Sub-heading</div> 
    </div> 

    <div id="article-excerpt" class="span1"> 
    <div>Article Heading</div> 
    <div>Article Sub-heading</div> 
    </div> 

</div>

如果我的網格沒有嵌套，事情簡單一些。我意識到我可以簡單地在容器中放置一個span1或grid_1。當達到最大列數時，每行將自動換行到下一行。

考慮到這一點，我的Wordpress循環將會非常簡單。它不需要識別每行的第一個和最後一個項目，或計數，或增加數字，或類似的東西。

我想找出是，如果有一種方法來簡化我的做法，這樣的循環並不一定要算的項目，有點像這樣：

<div class="grid_5"> 
    <LOOP> <div class="grid_1">generic article</div> </LOOP> 
</div>

來源

2012-02-28 Olly F

事實證明，在引導，跨度div小號w ^當超過給定行的列數時，生病會自動換行到下一行。

例如，我的網格是固定寬度的12列網格。

我的常規非WordPress的/循環HTML看起來像這樣：

<div class="container"> 

<div class="row"> 

    <div class="span3"> 
    Content 
    </div> 

    <div class="span3"> 
    Content 
    </div> 

    <div class="span3"> 
    Content 
    </div> 

    <div class="span3"> 
    Content 
    </div> 

</div>

當然，當我融入循環，因爲我添加更多包含內容span3 div S的數量會有所不同內容到我的網站。然而，當新的跨度3被添加到混合中時，Bootstrap樂於回到下一行。

這意味着我的循環不需要計算一行中的跨度數來計算行開始/結束的時間。

它可以是這個樣子：

<div class="container"> 

    <div class="row"> 

     <!-- WORDPRESS LOOP BEGINS HERE --> 

     <div class="span3"> 
     Content 
     </div> 

     <!-- WORDPRESS LOOP ENDS HERE --> 

    </div> 

</div>

來源

2012-07-11 18:28:21

另一種方式來看待這個可能會使用列表項目<li>而不是<div>。然後，您可以應用first-child僞元素樣式。不幸的是，某些瀏覽器不支持最後一個孩子。但是，列表項目很好，很乾淨，因爲你可以隨意漂浮它們。

否則，你可以寫3個循環。第一個將拉你想要的類別的第一篇文章。第二個將偏移1並拉（X -1）的總職位（停止不足完整列表）。然後第三隻抓住最後一個帖子。

<ul> 
<?php 
global $post; 
$args = array('numberposts' => 5, 'offset'=> 1, 'category' => 1); 
$myposts = get_posts($args); 
foreach($myposts as $post) : setup_postdata($post); ?> 
    <li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li> 
<?php endforeach; ?> 
</ul>

您可以使用一個變量代替numberposts的整數。希望這有助於你開始。

來源

2012-02-28 20:35:37 GhostToast

這是一個偉大的替代解決方案，謝謝。我會試驗它。 – 2012-02-28 22:13:37

對於你的具體問題：我不知道特定的wordpress函數來檢測循環中的第一個和最後一個帖子，但你可以很容易地解決一些自定義的PHP。

一個快速和骯髒的例子：

<div class="grid_4"> 

<?php 

// Query the posts 
query_posts('posts_per_page=4'); 

$i = 0; 
if (have_posts()) : while (have_posts()) : the_post(); 
$i++; 

$class = ''; 
if ($i == 1) then $class = ' first'; 
if ($i == 4) then $class = ' last'; 
?> 

<div class="grid_1<?php echo $class; ?>">generic article</div> 

<?php endwhile; endif; ?> 
</div>

如果帖子的數量並不總是4，您可以參照全局變量$ posts_per_page

global $posts_per_page; 
... 
if ($i == $posts_per_page) then $class = ' last';

現在一些建議：如果我理解你正確地，你正在試圖建立一個WordPress的主題。首先，如果這是你的第一個WordPress站點，我建議你從一個已經完成的主題開始，比如默認的主題（Twenty Eleven）或者通過菜單Appearance提供的主題之一。

的確建立一個主題並不總結，只是把一些php代碼放在html模板中：你還必須在許多文件中分割你的模板（functions.php，header.php，footer.php，single.php和所以...）

首先，我建議你研究如何構建基本主題「二十二」。

一些很好的資源：

來源

2012-02-28 21:09:45

真的很棒的解釋，謝謝。這真的會幫助我開始。 – 2012-02-28 22:12:43

如何在960.gs/Bootstrap嵌套網格中集成Wordpress循環？

回答

相關問題