Встраивание слайдера-карусели Twitter Bootstrap в шаблон Wordpress

Question

[Сергей Маргелов]

Добрый день.
Делаю wordpress сайт. Использую в качестве фреймворка известный Twitter Bootstrap. В принципе, всё без неожиданностей, только вот проблема со слайдером. Дело в том, что стандартный вывод карусели из bootstrap

<div id="myCarousel" class="carousel slide">
  <!-- Carousel items -->
  <div class="carousel-inner">
    <div class="active item">…</div>
    <div class="item">…</div>
    <div class="item">…</div>
  </div>
  <!-- Carousel nav -->
  <a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
  <a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>

я заменил в шаболне WordPress на

<div id="myCarousel" class="carousel slide">
<?php query_posts('showposts=3&cat=5');?>
<div class="carousel-inner">
<?php while (have_posts()) : the_post(); ?>
<div class="item">
<img src="http://placeimg.com/770/340/people" alt="">								
<div class="carousel-caption">									
<p><?php the_time('d.m.Y'); ?></p>									
<h4><?php the_title(); ?></h4>											
</div>										
</div>									
<?php endwhile; ?>									
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">›</a>
</div>

На картинку внимание не обращайте. Позже я поставлю туда миниатюру. Проблема в другом.
Итак, при загрузке страницы, слайдер не отображается, до тех пор, пока JS не добавит класс active одному из блоков.
Теперь вопрос. Как сделать так, что бы либо php добавлял этот класс первому встретившемуся div'у либо JS подставлял этот класс блоку сразу после срабатывания скрипта, а не через время, указанное в скрипте

jQuery(document).ready(function($) {
    $('.carousel').carousel({
  		interval: 8000
  	})
});

Я, к огромному своему стыду, практически ничего не знаю ни в JS ни в php (по сравнению с большинством, прочитавших этот текст), так что буду признателен за максимально развёрнутый ответ.
Спасибо

UPD: Решение найдено. Спасибо avalak

Comments

[Chii]

Отметьте ответ как решение, пожалуйста

Answer 1

[avalak]

Если мне не изменяет память то как-то так. Codex

<?php if ($wp_query->current_post == 0) echo('active'); ?>

<?= $wp_query->current_post == 0 ? 'active' : '' ?>

Добавить сюда:

<div class="item <?php if ($wp_query->current_post == 0) echo('active'); ?>">...</div>

Comments

[Сергей Маргелов]

Отлично, всё сработало. Огромное спасибо.
Если не сложно, в рамках просвещения малообразованных слоёв, правильно ли я понимаю, что это функция при обнаружении отображаемого поста выводит класс active?

[avalak]

1. В редакторе есть специальный тег для кода (нажмите на выпадающий список и веберите нужный язык). С форматированием и подсветкой лучше.
2. В ответах, правее ссылки на ответ, можно пометить ответ как решение.
3. Это не функция, а условный оператор if (первый вариант) и тернарный оператор + short tag echo (второй вариант)

Из кодекса:
$current_post
(available during The Loop) Index of the post currently being displayed.

Нумерация элементов в результатах запроса начинается с 0. Если текущий элемент 0 (первый), то выводим "active". Поскольку код расположен в значении атрибута class тэга div результат его работы будет расценен браузером как название класса.

[Сергей Маргелов]

Спасибо, всё поправил.
Объяснение понятное и достаточное.
За такой ликбез не жалко и тех 0,8 рейтинга, которыми меня наказали за ламерство.
Спасибо