1

私のクライアントはこのようなレイアウトを望んでいますが（ここをクリック）、私は多くのアイデアを試しましたが、結果を得ることができません。

日付で投稿を取得するためにワードプレスを使用しています（これは1つのループです）。また、私のテーマは、このjQuery Masonry Libraryを使用して2列のレイアウトを取得しています（必要に応じて無効にできます）。

したがって、著者は2人だけです。次に、各著者の投稿を2つの異なる列に配置する必要があります。最初の列にはジャックによる投稿（たとえば）があり、2番目の列にはケイトによる投稿（たとえば）があります。

ただし、両方の列と交差する投稿もあります。

ループは日付によってのみ投稿を提供する必要があるため、それらの投稿は何らかの方法で場所を見つける必要があります。

それが私の考えです。この投稿の幅（たとえば359px）を編集するKateの投稿のクラスを作成できますが、Jackの投稿はデフォルトで360pxのままです。組積造のレイアウトで各列の最小幅と最大幅を指定すると、理論的には、投稿に異なる列を強制的に取得できます（組積造はデフォルトで最初の列に幅の広い投稿を配置します）。しかし、各列の幅を指定できるオプションは見つかりません（石積みライブラリのcolumnWidthは、すべての列の幅を設定します）。

各列の幅を指定する方法について何かアイデアはありますか？または多分あなたはこのレイアウトの他のいくつかのアイデアを持っていますか？

助けてください ：）

4

1 に答える 1

0

Masonry（Isotopequery_postsの使用を開始したばかり）については完全にはわかりませんが、特定の非アーカイブページでこれを実行している場合を除き、を使用して構造化しますWP_Query。以下のコードは、現在表示しているページがすでにジャックとケイトの両方の投稿をクエリしていることを前提としています。

<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-26T04:31:15.167 に答える