960.gs/Bootstrap 중첩 된 표에 Wordpress 루프를 어떻게 통합합니까?

Question

내 첫 번째 Wordpress 사이트를 구현하려고합니다.

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

트위터 부트 스트랩 또는 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. 

이 시스템이 어떻게 작동하는지에 대한 근본적인 이해가 있는지 확인하려면 다음 비트를 설명합니다. 트위터 부트 스트랩 I 제자리 필요

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

을 마찬가지로 :

는 960.gs에서 중첩 그리드, I는 각각 alpha의 클래스 및 omega 각 행의 첫 번째 항목과 마지막 항목을 선언해야 자신의 특별한 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> 

Answer 1

그것은 그 부트 스트랩에서, 스팬 div의 w 밝혀 지정된 행의 열 수를 초과하면 자동으로 다음 행으로 넘어갑니다.

예를 들어, 내 눈금은 고정 폭, 12 열 눈금입니다.

내 일반 비 워드 프레스/루프 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의 수가 달라집니다 내 사이트에 콘텐츠. 그러나 새로운 스팬 3이 믹스에 추가되면 Bootstrap은 행복하게 다음 라인으로 넘어갑니다.

이것은 내 루프가 행 시작/끝 시간을 계산하기 위해 행의 스팬 수를 계산할 필요가 없음을 의미합니다.

그것은 다음과 같이 보일 수 있습니다

<div class="container"> 

    <div class="row"> 

     <!-- WORDPRESS LOOP BEGINS HERE --> 

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

     <!-- WORDPRESS LOOP ENDS HERE --> 

    </div> 

</div> 

Answer 2

이 생각하는 또 다른 방법 : 루프가 반드시 항목을 계산하지 않도록 종류의 같은, 내 접근 방식을 단순화 할 수있는 방법이 있는지

내가 발견하고 싶은 것은 <div> 대신 목록 항목 <li>을 사용할 수 있습니다. 그러면 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에는 정수 대신 변수를 사용할 수 있습니다. 바라기를 이것은 당신을 시작하게 도움이된다.

Answer 3

귀하의 특정 문제 : 루프 내에서 첫 번째 및 마지막 게시물을 감지하는 특정 WordPress 기능을 알지 못하지만 일부 사용자 지정 PHP로 매우 쉽게 해결할 수 있습니다.

신속하고 더러운 예 : 게시물의 양이 항상 4가 아닌 경우

이

<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> 

, 당신은 글로벌 var에 $의 posts_per_page

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

이제

몇 가지 조언을 참조 할 수 있습니다 : 이해하는 경우 당신은 정확하게, Wordpress 테마를 만들려고 노력하고 있습니다. 첫째, 이것이 첫 번째 WordPress 사이트 인 경우 기본 테마 (Twenty Eleven) 또는 Appearance 메뉴를 통해 제공되는 많은 테마 중 하나와 같은 이미 완료된 테마로 시작하는 것이 좋습니다.

실제로 테마를 빌드하는 것은 단지 HTML 템플릿에 PHP 코드를 넣는 것으로 요약되지 않습니다. 템플릿을 여러 파일 (functions.php, header.php, footer.php, single.php 및 so ...)

시작하려면 기본 테마 "Twenty Twelve"가 어떻게 구성되는지 연구 해 보는 것이 좋습니다.

일부 좋은 자원 :

• Wordpress Codex

• Wordpress Codex : Theme Development

• Wordpress StackExchange