Как интегрировать цикл Wordpress во вложенные сетки 960.gs/Bootstrap?

О реализации моего первого сайта Wordpress. Насколько я понимаю, это помогает, если мой цикл вызывает общий элемент, например:

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

При использовании Twitter Bootstrap или 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 Bootstrap мне нужно поместить каждую строку в отдельный специальный 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>

wordpress html css 960.gs
person Olly F    schedule 28.02.2012    source источник

Ответы (3)


arrow_upward
2
arrow_downward

Другой способ подумать об этом — использовать элементы списка <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. Надеюсь, это поможет вам начать.

person GhostToast    schedule 28.02.2012
comment
Это отличное альтернативное решение, спасибо. Я буду экспериментировать с ним. - person Olly F; 29.02.2012

arrow_upward
2
arrow_downward

Для вашей конкретной проблемы: я не знаю конкретной функции 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 и т. д.). )

Для начала предлагаю вам изучить, как строится основная тема «Двадцать двенадцать».

Некоторые хорошие ресурсы:

person Thomas Guillory    schedule 28.02.2012
comment
Действительно отличное объяснение, спасибо. Это действительно поможет мне начать. - person Olly F; 29.02.2012

arrow_upward
0
arrow_downward

Оказывается, в Bootstrap span divs автоматически переносится на следующую строку, когда они превышают количество столбцов в данной строке.

Например, моя сетка имеет фиксированную ширину и состоит из 12 столбцов.

Мой обычный не-Wordpress/loop 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>

Of course, when I integrate the loop, the number of span3 divs containing content will vary as I add more content to my site. However, Bootstrap happily wraps to the next line when a new span 3 is added to the mix.

Это означает, что моему циклу не нужно подсчитывать количество интервалов в строке, чтобы вычислить, когда строка начинается/заканчивается.

Это может выглядеть примерно так:

<div class="container">

    <div class="row">

        <!-- WORDPRESS LOOP BEGINS HERE -->

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

        <!-- WORDPRESS LOOP ENDS HERE -->

    </div>

</div>
person Olly F    schedule 11.07.2012