一個wordpress循環中的兩列布局，任何想法？

我的客戶希望佈局like this (click here)，但我嘗試了很多想法，無法獲得結果。我使用wordpress獲取日期的帖子（這是一個循環），我的主題是使用這個jQuery Masonry Library獲得兩列布局（如果需要，我可以禁用它）。一個wordpress循環中的兩列布局，任何想法？

所以我只有兩位作者，現在我需要將每個作者的帖子放到兩個不同的列中。在第一列中應該有傑克的帖子（例如），而第二列是凱特的帖子（例如）。

但也會有帖子相交兩列。

循環應該只給日期的帖子，所以這些帖子應該以某種方式找到他們的位置。

這是我的想法：我可以爲Kate的帖子創建一個類來編輯這篇文章的寬度（例如359px），但是Jack的帖子默認仍然有360px。如果我在砌體佈局中指定每個列的最小和最大寬度，理論上 - 我可以強制我的帖子獲得不同的列（砌體將默認放置在第一列的寬範圍後）。但是我找不到任何可以指定每列寬度的選項（砌體庫中的columnWidth設置所有列的寬度）。

有關如何指定每個列寬的任何想法？或者您可能還有其他一些關於這種佈局的想法？

請幫助:)

來源

2012-11-22 Alex

不能完全確定砌體（只用Isotope啓動），但我會結構query_posts，除非你是一個特定的，非歸檔頁面上這樣做，然後用WP_Query 。下面的代碼假設您正在瀏覽的頁面已經在查詢Jack和Kate的帖子。

<div id="authorColumnsRow"> <!--/* clear:both */--> 
    <div class="author-columns" id="JACK"> <!--/* .author-columns { float:left; width:45%; margin-right:2.5%; } */--> 
    <?php query_posts('author='.$JACKSAUTHORID.'&posts_per_page=2'); while(have_posts()) : the_post(); 
    //do post stuff here, i.e. the_title(), the_permalink(); 
    endwhile; wp_reset_query(); ?> 
    </div> 
    <div class="author-columns" id="KATE"> 
    <?php query_posts('author='.$KATESSAUTHORID.'&posts_per_page=2'); while(have_posts()) : the_post(); 
    //do post stuff here, i.e. the_title(), the_permalink(); 
    endwhile; wp_reset_query(); ?> 
    </div> 
</div> 
<div id="fullRow"> <!--/* clear:both */--> 
<?php query_posts('offset=4'); //To avoid duplicates 
while(have_posts()) : the_post(); 
    //Post stuff for both of them 
endwhile; ?> 
</div>

希望有幫助。

來源

2012-11-26 04:31:15

一個wordpress循環中的兩列布局，任何想法？

回答

相關問題