0

Имеется верстка на бутстрап натянутая на вордпресс. Есть также стандартный код вывода анонсов записей на главную.

привожу код с главной страницы:

<div class="row">
    <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
            <div class="col-md-4">
                <div class="icerik-post post-height">
                    <div class="post-image">
                        <div class="img-block">
                            <a href="<?php the_permalink() ?>"><?php echo get_the_post_thumbnail() ?></a>
                            <div class="post-etiket"><span class="etiket"><a href="<?php the_permalink() ?>"><?php the_tags() ?></a></span></div>
                        </div>
                    </div>
                    <div class="post-icerik">
                        <h5 class="post-title"><a href="<?php the_permalink() ?>"><?php the_title() ?></a></h5>
                        <p><?php excerpt_limit(200, '...'); ?></p>
                        <div class="info">
                            <p><span class="ago"><i class="fa fa-clock-o" aria-hidden="true"></i> <?php echo human_time_diff(get_the_time('U'), current_time('timestamp')) . ' önce '; ?></span><span class="okuma"><i class="fa fa-eye" aria-hidden="true"></i> <?php echo getPostViews(get_the_ID()); ?></span><a href="" title="Paylaş" class="share"><i class="fa fa-share" aria-hidden="true"></i></a></p>
                        </div>
                    </div>
                </div>
            </div>
    <?php endwhile; ?>

    <?php else: ?>

    <?php endif; ?>
</div>

как можно заметить все записи вложены в блок с классом col-md-4

необходимо как на рисунке.

введите сюда описание изображения

П.С. гуглил. Находил как каждый 4-й, 5-й, 2-й и т.д., но тут если вы заметили решение не стандартное. Хотелось бы подогнать так:

  • 1,2,3 должны быть col-md-4

  • 4,5, должны быть col-md-6

  • 6,7,8 должны быть col-md-4

  • 9 должны быть col-md-8

  • 10 должны быть col-md-4

как я понимаю тут цикл из 10 постов в цикле.

2
  • "необходимо как на рисунке" – не вижу рисунка.
    – Nick Volynkin
    2 мая 2017 в 8:12
  • @nick-volynkin картинка добавлена 2 мая 2017 в 8:18

2 ответа 2

2

Все решается простым оператором switch case:

<?php $num = 0; ?>
<div class="row">
    <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
            <?php
                $n = $num % 10 + 1;
                switch ($n) {
                case 1:
                case 2:
                case 3:
                case 6:
                case 7:
                case 10:
                    echo '<div class="col-md-4">';
                    break;
                case 4:
                case 5:
                    echo '<div class="col-md-6">';
                    break;
                case 9:
                    echo '<div class="col-md-8">';
                    break;
                }   
    $num++; 
            ?>
                <div class="icerik-post post-height">
                    <div class="post-image">
                        <div class="img-block">
                            <a href="<?php the_permalink() ?>"><?php echo get_the_post_thumbnail() ?></a>
                            <div class="post-etiket"><span class="etiket"><a href="<?php the_permalink() ?>"><?php the_tags() ?></a></span></div>
                        </div>
                    </div>
                    <div class="post-icerik">
                        <h5 class="post-title"><a href="<?php the_permalink() ?>"><?php the_title() ?></a></h5>
                        <p><?php excerpt_limit(200, '...'); ?></p>
                        <div class="info">
                            <p><span class="ago"><i class="fa fa-clock-o" aria-hidden="true"></i> <?php echo human_time_diff(get_the_time('U'), current_time('timestamp')) . ' önce '; ?></span><span class="okuma"><i class="fa fa-eye" aria-hidden="true"></i> <?php echo getPostViews(get_the_ID()); ?></span><a href="" title="Paylaş" class="share"><i class="fa fa-share" aria-hidden="true"></i></a></p>
                        </div>
                    </div>
                </div>
            </div>
    <?php endwhile; ?>

    <?php else: ?>

    <?php endif; ?>
</div>
1
  • Забыл инкремент. Добавил $num++; 2 мая 2017 в 10:09
0

У Вас, все блоки должны быть именно в том порядке, в котором указали? и при добавлении нового материала, они сместятся!? Или главная страница у вас фиксированная?!

На сколько я понял, вам нужно сделать так, чтоб потом, без правки когда, вы бы смогли менять на главной странице относительную ширину в колонках в ручную?! Если так то я бы тогда добавил в самом материале поле числовое (от 1 до 12, по умолчанию 4) и записывал бы туда ширину. А в шаблоне бы просто вывел его в классе "col-md-..."

А если Вам нужно чтоб сайт сам автоматически подгонял размеры фотографий. То тут я думаю вам нужно использовать flex разметку и элементы card, опять же при условии что у Вас четвертый бутстрап а не третий http://v4-alpha.getbootstrap.com/components/card/

7
  • использовал четвертый бутстрап. Вы правы, сместятся, надо уточнить. Помоему switch case мне не подойдет. потому что они будут повторятся и далее 11, 12, 13, как 1,2,3. 14,15 как 4,5, по мере их появления они должны быть в таком порядке. 2 мая 2017 в 10:16
  • Я сейчас попробую, может и не сместятся )) . Ваша идея с числовым номером от 1 до 12 намного лучше таким образом я смогу даже col-md-7 -12, -5, -3 использовать, просто подставляя в varible числовое значение . Спасибо. Что касается картинок так это я через css доработаю + необходимо будет кроп подготовить для каждого варианта помоему. Это уже видно будет в процессе 2 мая 2017 в 10:26
  • Ну раз мой вариант лучше. то и можно его как ответ пометить! ))) А что касается стилей css то ими можно все сделать, и не надо кроп для каждого варианта картинки подготавливать. Просто отображайте не <img> а <div> например, и задайте ему width:100% по ширине всего блока .col-.. а картинку выводите в этом диве в качестве background, со свойством background-size: cover; (и кроп делать не нужно!) 3 мая 2017 в 12:26
  • Ваш тоже отметил как вариант. Да можно выставить width 100%, я по кропу имел ввиду не ширину (да и width 100% использовать в бутстрапе все же я не рекомендую )) лучше max-width 100%), проблема должна была возникнуть с height. Я решил проблему задав фиксированную высоту и спрятав через overflow hidden то что выходит за пределы. Конечно в спрайтах пришлось подгонять. огромнейшее вам спасибо, особенно kagg-design Он мне также помог решить здесь: ru.stackoverflow.com/posts/660636/revisions само детище: kellesogan.com шеф рад. на 100% все как он хотел. 4 мая 2017 в 13:28
  • Похоже, вы ничего не поняли в коде, и не спросили. Код будет работать при любом количечтве количестве постов. Там есть оператор целочисленного деления %. Почитайте о нем и еще раз вдумайтесь в рабочий код. 4 мая 2017 в 18:08

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.