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

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

5 голосов
/ 29 февраля 2012

О реализации моего первого сайта 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>

Ответы [ 3 ]

2 голосов
/ 29 февраля 2012

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

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

Несколько хороших ресурсов:

2 голосов
/ 29 февраля 2012

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

0 голосов
/ 11 июля 2012

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

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

Мой обычный HTML-код без Wordpress выглядит следующим образом: 

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