• Подскажите пожалуйста как мне вывести последние новости в три колонки на главную, причем из разных рубрик?
    Примерно вот так .
    я плохо разбираюсь в кодах, подскажите пожалуйста где и что изменить или добавить?

Просмотр 13 ответов — с 1 по 13 (всего 13)
  • В home.php и некоторую часть в index.php, встаывила такой код:

    <ul>
    <li>
    <?php $WP_Query = new WP_Query('cat=1&posts_per_page=3');
    if ($WP_Query->have_posts()) : while ($WP_Query->have_posts()) : $WP_Query->the_post();?>
    <div><?php the_title('');?> </div>
    <?php endwhile; endif; ?>
    </li>
    <li>
    <?php $WP_Query = new WP_Query('cat=2&posts_per_page=3');
    if ($WP_Query->have_posts()) : while ($WP_Query->have_posts()) : $WP_Query->the_post();?>
    <div><?php the_title('');?> </div>
    <?php endwhile; endif; ?>
    </li>
    <li>
    <?php $WP_Query = new WP_Query('cat=3&posts_per_page=3');
    if ($WP_Query->have_posts()) : while ($WP_Query->have_posts()) : $WP_Query->the_post();?>
    <div><?php the_title('');?> </div>
    <?php endwhile; endif; ?>
    </li>
    </ul>

    наконец-то работает, вышли новости на главную, но не в одну линию, а одна под другой…Подскажите пожалуйста как мне правильно сверстать и где моя ошибка в CSS ?

    #news li {
        -display: -moz-inline-box;
        -display:inline-block;
        -moz-border-radius:4px;
        -webkit-border-radius:4px;
        border-top:1px solid #ddd;
        border-left:1px solid #ddd;
        border-bottom:1px solid #fefefe;
        border-right:1px solid #fefefe;
        padding:6px 12px;
        text-shadow:1px 1px #fff;
        background:url(images/bk_blurb.jpg) 0 100% repeat-x;
        font-weight:bold;
        float:left;
        width:300px;
        height:380px;
        margin-right:25px;
        overflow:hidden;
        margin-bottom:10px;
    }

    Блок, в котором выстраиваются новости, должен быть соответствующей ширины (в три раза больше, с учетом полей, бордеров и прочего)

    Код в home.php :

    <!-- begin news -->
    
    <ul>
    <li>
    <div id="news">
    <div align="justify">
    <?php $WP_Query = new WP_Query('cat=106&posts_per_page=1');
    if ($WP_Query->have_posts()) : while ($WP_Query->have_posts()) : $WP_Query->the_post();?>
    <div><h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
    <a href="<?php the_permalink(); ?>" rel="prettyPhoto" title="<?php the_title();?>"><?php the_post_thumbnail(); ?></a><?php the_excerpt() ?></div>
    <?php endwhile; endif; ?>
    </div>
    </div>
    </li>
    <li>
    <div id="newsy">
    <div align="justify">
    <?php $WP_Query = new WP_Query('cat=312&posts_per_page=1');
    if ($WP_Query->have_posts()) : while ($WP_Query->have_posts()) : $WP_Query->the_post();?>
    <div><h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
    <a href="<?php the_permalink(); ?>" rel="prettyPhoto" title="<?php the_title();?>"><?php the_post_thumbnail(); ?></a><?php the_excerpt() ?></div>
    <?php endwhile; endif; ?>
    </div>
    </div>
    </li>
    <li>
    <div id="news">
    <div align="justify">
    <?php $WP_Query = new WP_Query('cat=275&posts_per_page=1');
    if ($WP_Query->have_posts()) : while ($WP_Query->have_posts()) : $WP_Query->the_post();?>
    <div><h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
    <a href="<?php the_permalink(); ?>" rel="prettyPhoto" title="<?php the_title();?>"><?php the_post_thumbnail(); ?></a><?php the_excerpt() ?></div>
    <?php endwhile; endif; ?>
    </div>
    </div>
    </li>
    </ul>
    <!-- end news -->

    Код в CSS :

    #news li {
        -display: -moz-inline-box;
        -display:inline-block;
        -moz-border-radius:4px;
        -webkit-border-radius:4px;
        border-top:1px solid #ddd;
        border-left:1px solid #ddd;
        border-bottom:1px solid #fefefe;
        border-right:1px solid #fefefe;
        padding:6px 12px;
        text-shadow:1px 1px #fff;
        background:url(images/bk_blurb.jpg) 0 100% repeat-x;
        font-weight:bold;
        float:left;
        width:33%;
        height:380px;
        margin-right:25px;
        overflow:hidden;
        margin-bottom:10px;
    }

    И после всего этого, всего лишь вот что выходит

    а мне нужно чтоб получилось вот так

    Не понимаю что я делаю не так?

    Для начала, не должно быть повторяющихся id на странице. Если я верно Вас понимаю, то сейчас их (<div id="news">) должно быть три. Замените на <div class="news">. Затем, в файле стилей замените #news li на .news li. Следом добавьте следующее .news {width:250px;float:left;}.

    Спасибо, все зделала как вы сказали, ….но почему-то все выглядит по прежнему 🙁

    На сферическом коне в вакууме это работает.
    Полагаю, что где-то допущена ошибка. Если Вы покажете, т.е. дадите ссылку на предмет обсуждения, я скажу где она и как исправить. Вот сейчас даже могу сказать, что стиль, приведенный выше, написан с ошибкой.

    Поможет такая конструкция #content ul li {width:290px;float:left;margin-right:40px;background: url(images/bk_dotted_thick.png) 0 0 repeat-x;} дописанная в конец style.css, но это все равно не совсем верно, т.к. ниже есть аналогичные блоки и лучше делать одинаково, но для этого надо править верстку обсуждаемых блоков.

    Да точно помогла!!!
    Спасибо Большое вам!!!

    <div id="news">

    — вам же сказазали заменить на class=»news»

    <div align="justify">

    — это что за извращение???

    <div><h2>"><?php the_title(); ?></h2>

    — косяк с кавычками и скобкой

    " rel="prettyPhoto" title="<?php the_title();?>"><?php the_post_thumbnail(); ?><?php the_excerpt() ?></div>

    и это косяк

    и в стилях тоже ерунда)))

    <div class="news">...</div>
    <div class="news">...</div>
    <div class="news">...</div>
    <div class="clear"></div>

    вот общая структура

    .clear { clear: both; }
    .news { width: 200px; height: 400px; padding: 5px; border: 3px solid #ccc; border-radius: 5px; float: left; margin: 10px; }

    это примерный вариант. сами подгоняйте, как надо.

    никаких #news li — вы же не для списков стили пишете)

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

    Модератор Sergey Biryukov

    (@sergeybiryukov)

    Live and Learn

    косяк с кавычками и скобкой

    Это из-за неправильной вставки кода сюда (без обратных апострофов). В оригинале, скорее всего, этой ошибки нет. То же самое с rel="prettyPhoto".

    skodnik, судя по изображению, то что ТС и требуется.
    что значит «в некоторых случаях»?

    Что такое ненумерованный список? Это набор однотипных элементов. В данном случае, блок новости как раз и является таким элементом. Тэг ul шикарная обертка блоков новостей, а li его часть. Мало того, что используя такого рода разметку можно сократить объем и количество селекторов, так плюс к тому, с точки зрения семантики кода это более правильное решение.

    Под некоторым случаем я имел ввиду и данный. Т.к. блоки новостей имеют одинаковые характеристики которые можно описать простым селектором #news li.

Просмотр 13 ответов — с 1 по 13 (всего 13)
  • Тема «Вывод последних новостей в три колонки на главною» закрыта для новых ответов.