Geek Answers Handbook

How to integrate Wordpress loop into 950.gs/Bootstrap nested grids?

About introducing my first Wordpress site. I understand that it helps if my loop invokes a common element, for example:

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

When using Twitter Bootstrap or 960.gs, my feed spans multiple columns and multiple rows.

For example, articles are laid out horizontally through a nested grid of 5 columns. Every 5 items has a new line.

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 will explain the following bit to verify that I have a fundamental understanding of how these systems work.

In 960.gs for nested meshes, I need to declare the first element and the last element in each line with classes alphaand omegaaccordingly:

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

Similarly, on Twitter Bootstrap, I need to put each line in its own 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>
+5
3

, Bootstrap, span div , .

, - , 12 .

HTML- Wordpress/loop :

<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 , . , Bootstrap , 3.

, , , / .

:

<div class="container">

    <div class="row">

        <!-- WORDPRESS LOOP BEGINS HERE -->

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

        <!-- WORDPRESS LOOP ENDS HERE -->

    </div>

</div>
0

<li> <div>. first-child psuedo. , . , , .

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

+2

: 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, var 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 .....)

, , " ".

:

+2

More articles:


All Articles