mateys91 / 14.01.2013 00:02

Обсуждения / 01. Проблемы и решения с WordPress

Вывод записей в две колонки

Доброго времени суток, перерыл весь форум и весь рунет. Куча советов как сделать вывод в две колонки, только одна беда код который правят в примерах и код моих тем совершенно другой. Я юзаю темы артистира, 2 и 3 версии, если есть гуру WP подскажите что нужно поправить что бы вывод стал в 2 колонки.
Вот index.php со второго
[code- <?php get_header(); ?>
<div class="art-contentLayout">
<div class="art-content">

<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<div class="art-Post">
<div class="art-Post-tl"></div>
<div class="art-Post-tr"></div>
<div class="art-Post-bl"></div>
<div class="art-Post-br"></div>
<div class="art-Post-tc"></div>
<div class="art-Post-bc"></div>
<div class="art-Post-cl"></div>
<div class="art-Post-cr"></div>
<div class="art-Post-cc"></div>
<div class="art-Post-body">
<div class="art-Post-inner art-article">
<h2 class="art-PostHeaderIcon-wrapper">
<span class="art-PostHeader"><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php printf(__(‘Permanent Link to %s’, ‘kubrick’), the_title_attribute(‘echo=0’)); ?>">
<?php the_title(); ?>
</a></span>
</h2>
<?php $icons = array(); ?>
<?php if (!is_page()): ?><?php ob_start(); ?><?php the_time(__(‘F jS, Y’, ‘kubrick’)) ?>
<?php $icons
= ob_get_clean(); ?><?php endif; ?><?php if (!is_page()): ?><?php ob_start(); ?><?php _e(‘Author’, ‘kubrick’); ?>: <a href="#" title="<?php _e(‘Author’, ‘kubrick’); ?>"><?php the_author() ?></a>
<?php $icons- = ob_get_clean(); ?><?php endif; ?><?php if (current_user_can(‘edit_post’, $post->ID)): ?><?php ob_start(); ?><?php edit_post_link(__(‘Edit’, ‘kubrick’), ”); ?>
<?php $icons
= ob_get_clean(); ?><?php endif; ?><?php if (0 != count($icons)): ?>
<div class="art-PostHeaderIcons art-metadata-icons">
<?php echo implode(‘ | ‘, $icons); ?>

</div>
<?php endif; ?>
<div class="art-PostContent">
<?php if (is_search()) the_excerpt(); else the_content(__(‘Read the rest of this entry »’, ‘kubrick’)); ?>

</div>
<div class="cleared"></div>
<?php $icons = array(); ?>
<?php if (!is_page()): ?><?php ob_start(); ?><?php printf(__(‘Posted in %s’, ‘kubrick’), get_the_category_list(‘, ‘)); ?>
<?php $icons- = ob_get_clean(); ?><?php endif; ?><?php if (!is_page() && get_the_tags()): ?><?php ob_start(); ?><?php the_tags(__(‘Tags:’, ‘kubrick’) . ‘ ‘, ‘, ‘, ‘ ‘); ?>
<?php $icons
= ob_get_clean(); ?><?php endif; ?><?php if (!is_page() && !is_single()): ?><?php ob_start(); ?><?php comments_popup_link(__(‘No Comments »’, ‘kubrick’), __(‘1 Comment »’, ‘kubrick’), __(‘% Comments »’, ‘kubrick’), ”, __(‘Comments Closed’, ‘kubrick’) ); ?>
<?php $icons[] = ob_get_clean(); ?><?php endif; ?><?php if (0 != count($icons)): ?>
<div class="art-PostFooterIcons art-metadata-icons">
<?php echo implode(‘ | ‘, $icons); ?>

</div>
<?php endif; ?>

</div>

</div>
</div>

<?php endwhile; ?>
<?php
$prev_link = get_previous_posts_link(__(‘Newer Entries »’, ‘kubrick’));
$next_link = get_next_posts_link(__(‘« Older Entries’, ‘kubrick’));
?>
<?php if ($prev_link || $next_link): ?>
<div class="art-Post">
<div class="art-Post-tl"></div>
<div class="art-Post-tr"></div>
<div class="art-Post-bl"></div>
<div class="art-Post-br"></div>
<div class="art-Post-tc"></div>
<div class="art-Post-bc"></div>
<div class="art-Post-cl"></div>
<div class="art-Post-cr"></div>
<div class="art-Post-cc"></div>
<div class="art-Post-body">
<div class="art-Post-inner art-article">

</div>
<div class="cleared"></div>

</div>

</div>
</div>

<?php endif; ?>
<?php else : ?>
<h2 class="center"><?php _e(‘Not Found’, ‘kubrick’); ?></h2>
<p class="center"><?php _e(‘Sorry, but you are looking for something that isn’t here.’, ‘kubrick’); ?></p>
<?php if(function_exists(‘get_search_form’)) get_search_form(); ?>
<?php endif; ?>

</div>
<?php include (TEMPLATEPATH . ‘/sidebar1.php’); ?>
</div>
<div class="cleared"></div>

<?php get_footer(); ?>[/code]
И вот с третьего:

<?php get_header(); ?>
<div class="art-content-layout">
    <div class="art-content-layout-row">
        <div class="art-layout-cell art-content">
            <?php get_sidebar('top'); ?>
            <?php if(have_posts()) {
                
                
                    /* Display navigation to next/previous pages when applicable */
                    if ( theme_get_option('theme_' . (theme_is_home() ? 'home_' : '') . 'top_posts_navigation' ) ) {
                        theme_page_navigation();
                    }
                    
                    /* Start the Loop */ 
                    while (have_posts()) {
                        the_post();
                        get_template_part('content', get_post_format());
                    }
                    
                    /* Display navigation to next/previous pages when applicable */
                    if (theme_get_option('theme_bottom_posts_navigation')) {
                         theme_page_navigation();
                    }
                
                } else {
                
                     theme_404_content();
                     
                } 
            ?>
            <?php get_sidebar('bottom'); ?>
          <div class="cleared"></div>
        </div>
        <div class="art-layout-cell art-sidebar1">
          <?php get_sidebar('default'); ?>
          <div class="cleared"></div>
        </div>
    </div>
</div>
<div class="cleared"></div>
<?php get_footer(); ?>

В идеале узнать что править и в той и в той что править что бы вывод был в 2 колонки, но если я слишком много прошу то только в третьей версии.

P.S. в третьей версии для вывода помогает добавление вот такого когда в стили

.post {
width:250px;
float:left;
margin-right:12px;
}

И на главной выводится в две колонки как и надо:

но когда переходишь в полную новость, запись отображается не корректно:

Вот такие вот пироги, буду оч. признателен за подробный ответ, заранее спасибо.

Коментарии: 22

freekc

14.01.2013 11:41

Ответить

Смотрите, вы додаете етот стиль для вывода поста на главной, но при этом забываете изменить стиль для отображения одиночной новости.
Добавьте просто еще один стиль, например:

.postfull {
width:850px;
margin:12px;
}

и попавьте в коде single.php вместо class="post" пропешыте class="postfull".
Не забудьте поставить ширину ту, которую вам нужно.

mateys91

14.01.2013 12:43

Ответить

Все бы хорошо вот только в single.php нет
class="post"

Вот он целиком

<?php get_header(); ?>
<div class="art-content-layout">
    <div class="art-content-layout-row">
        <div class="art-layout-cell art-content">
            <?php get_sidebar('top');  ?>
            <?php 
                if (have_posts()){
                    /* Display navigation to next/previous posts when applicable */
                    if (theme_get_option('theme_top_single_navigation')) {
                        theme_page_navigation(
                            array(
                                'next_link' => theme_get_previous_post_link('&laquo; %link'),
                                'prev_link' => theme_get_next_post_link('%link &raquo;')
                            )
                        );
                    }
                    
                    while (have_posts())  
                    {
                        the_post();
                        get_template_part('content', 'single');
                        comments_template();
                    }
                    
                    /* Display navigation to next/previous posts when applicable */
                    if (theme_get_option('theme_bottom_single_navigation')) {
                        theme_page_navigation(
                            array(
                                'next_link' => theme_get_previous_post_link('&laquo; %link'),
                                'prev_link' => theme_get_next_post_link('%link &raquo;')
                            )
                        );
                    }
                    
                } else {    
                  
                    theme_404_content();
                    
                } 
            ?>
            <?php get_sidebar('bottom'); ?> 
          <div class="cleared"></div>
        </div>
        <div class="art-layout-cell art-sidebar1">
          <?php get_sidebar('default'); ?>
          <div class="cleared"></div>
        </div>
    </div>
</div>
<div class="cleared"></div>
<?php get_footer(); ?>

mateys91

16.01.2013 07:53

Ответить

Ауу, подскажите как быть

Plut-ON

16.01.2013 08:14

Ответить

Все бы хорошо вот только в single.php нет 
class="post"

А если в цсс убрать
.post {
width:250px;
float:left;
margin-right:12px;
}

В одиночной записи все станет нормально? Если да значит там есть этот класс.

Попробуйте сделать изменения только для главной через класс который назначается для <body>
вот так например
.home .post {
width:250px;
float:left;
margin-right:12px;
}

mateys91

16.01.2013 11:17

Ответить

Сейчас уже лучше, в полной записи отображается корректно. Вот только на главной все записи отображаются разной формы:

Менял параметр ширины, но все равно у каждой статьи разная рамка. Можно ли как то задать параметр что бы все были одинаковые.
Вообще хочется добиться вот такого вывода
http://stroyka16.ru/

mateys91

16.01.2013 11:25

Ответить

Пробовал ставить тэг more в записях после одинакового кол-ва символов, но все равно:

Plut-ON

16.01.2013 12:34

Ответить

Тегом more Вы точности не получите, т.к. есть еще заголовки
еще в разных браузерах шрифт могут быть чуть разного размера
Есть два варианта:
ставить в код счетчик и после каждого парного значения вставлять
<div style="clear:both"></div>

или установить своим блокам высоту с небольшим запасом
чтобы текст всегда туда помещался.

mateys91

16.01.2013 12:55

Ответить

Как установить высоту для блоков? я не очень в это силен 🙁

Plut-ON

16.01.2013 13:04

Ответить

http://htmlbook.ru/css/height

mateys91

16.01.2013 13:12

Ответить

то есть по сути из всего этого

 <style>
   .layer {
    height: 50px; /* Высота блока */
    width: 150px; /* Ширина блока */
    overflow: scroll; /* Добавляем полосы прокрутки */
    background: #fc0; /* Цвет фона */
    padding: 7px; /* Поля вокруг текста */
    border: 1px solid #333; /* Параметры рамки */
   }
  </style>

мне надо только

.layer {
    height: 50px; /* Высота блока */
    width: 150px; /* Ширина блока */
}

Вот только как это к записям на главной привязать, куда вставлять?

mateys91

16.01.2013 13:16

Ответить

Вот такое добавления в css не дает никакого результата 🙁

.home .post{
    height: 50px; /* Высота блока */
    width: 150px; /* Ширина блока */
}

Plut-ON

16.01.2013 13:27

Ответить

50 пикселей это приблизительно 4 строчки текста )

mateys91

16.01.2013 13:42

Ответить

Что-то я запутался основательно:( ересь какая-то получается

с вот такими характеристиками:

.home .post {
width:100px;
float:left;
margin-right:12px;
}


.home .post{
    height: 200px; /* Высота блока */
    width: 100px; /* Ширина блока */
}

Plut-ON

16.01.2013 14:20

Ответить

а зачем два раза?)

.home .post {
width:250px;
height: 280px;
float:left;
margin-right:12px;
}

mateys91

16.01.2013 14:36

Ответить

Ну вот что-то вырисовывается:

Когда нет картинок вроде все красиво.

Но при вставке картинки, текст съезжает:

Как это пофиксить?:(

mateys91

17.01.2013 10:36

Ответить

Неужто тупик?

Plut-ON

17.01.2013 10:44

Ответить

Поначалу даже думал написать что-то шуточно язвительное)

Но если Вы установили высоту блока так чтобы он как раз помещал определенное содержание
а затем значительно увеличили содержание и не знаете что делать, то тупик)

17.01.2013 10:54

Ответить

Неужто тупик?

Всегда есть как минимум два выхода – это закон природы 🙂

Можно использовать jquery-плагин выравнивания высоты всех блоков в контейнере (не помню как зовут).

Можно использовать jQuery плагин Masonry или аналогичный для динамического лейаута.

Можно переверстать на таблицах

Можно не переверстывать, а существующим DIVам указать табличный лейаут.

mateys91

17.01.2013 11:57

Ответить

[quote=mateys91]Неужто тупик?

Всегда есть как минимум два выхода – это закон природы 🙂

Можно использовать jquery-плагин выравнивания высоты всех блоков в контейнере (не помню как зовут).

Можно использовать jQuery плагин Masonry или аналогичный для динамического лейаута.

Можно переверстать на таблицах

Можно не переверстывать, а существующим DIVам указать табличный лейаут.[/quote]
Похожих плагинов не нашел. Для себя сделал вывод, стараться делать одинаковые заголовки, и раставлять <more> после одинакового кол-ва символов, и соответственно картинки брать тоже одного размера, тогда не придется меня высоту таблицы.
Вот правда найти бы такой плагин который выравнивал бы автоматически по высоте, в независимости от длины заголовка, записи и картинки. (собственно это и делает Masonry,но опять же из-за нестандартности темы вероятность 99% что не настрою его)

mateys91

17.01.2013 12:01

Ответить

Меня еще вот что интересует, почему нельзя сделать это небольшими поправками в index.php 🙁 почему жизнь такая не справедливая
*рыдаю*

Plut-ON

17.01.2013 16:01

Ответить

Меня еще вот что интересует, почему нельзя сделать это небольшими поправками в index.php

можно

ставить в код счетчик и после каждого парного значения вставлять 
<div style="clear:both"></div>

mateys91

18.01.2013 14:58

Ответить

Что значит после каждого парного значения? И куда именно в в index вставлять этот код? Я же говорю, я несколько далек от этого. По этому просьба чуть-чуть подробнее.

Вывод записей в две колонки

Свежее