Разбиваем записи, странички на колонки

MnogoBlog > WordPress > Дизайн > Юзабилити > Разбиваем записи, странички на колонки
7 комментариев

Здесь мы рассмотрим способы разбиение контента на колонки с помощью плагина, с помощью CSS, с помощью инструмента – таблицы и другие.

Скачать исходники для статьи можно ниже

Если Вы хотите быстро и легко создавать красивые и функциональные элементы для своего сайта – вам нужны хорошие инструменты, так что качайте и устанавливайте данную программу она вам очень поможет в разработке вашего сайта, рекомендую!

1. С помощью плагина WP Easy Columns

Данный плагин есть на wordpress.org:

Последнее обновление: 2011-6-17

Загрузок: 62,953 раз

Рейтинг: 4,8 звезды из 5, количество проголосовавших 37 человек.

Как пользоваться данным плагином можно найти по следующим ссылкам:

“n-wp.ru/3863”

“bloginblog.ru/plaginy/wordpress-plagin-easy-columns-zhurnalnyj-stil-bloga.html”

“wpmu.org/turn-your-free-theme-into-a-premium-design-wordpress-columns-plugin/”

2. С помощью элемента Таблицы

Я сам очень часто использую данный инструмент для разбиение на колонки своих страничек и записей.

Вообще для воплощения дизайнерских идей на сайте мне очень помогает Adobe Dreamweaver, советую его поставить каждому. Просто создаете в нем простой html документ и там также, как и в редакторе записей WordPress, есть закладки КОД (аналог HTML в WordPress) и Проект (аналог Визуального редактора в WordPress).

Так вот создаете в Проекте программы Dreamweaver например таблицу и смотрите во вкладке КОД ее html код, копируете его и вставляете во вкладку HTML в WordPress.

Пример: создаем таблицу в Dreamweaver во вкладке Проект.

создание колонок в WordPress

Переходим во вкладку КОД в Dreamweaver и видим следующее:

создание колонок в WordPress

Здесь копируем выделенный код (код, который расположен между тегами <body> и </body> ).

Вот у меня он получился вот такой: 

</pre>
<table width="700" border="1" cellpadding="10">
<tbody>
<tr>
<td width="323">Колонка 1</td>
<td width="325">Колонка 2</td>
</tr>
</tbody>
</table>
<pre>

Рассмотрим вышеуказанный код, здесь width – это параметр ширины, самый первый (width=”700″) задает ширину всей таблицы, второй и третий (width=”323″, width=”325″) задают ширину ячеек таблицы. Параметр border=”1″ – задает толщину границ таблицы, если поставить ее равной “0” (border=”0″ ), то границы исчезнут. Параметр cellpadding=”10″ – это отступ внутри ячейки, его тоже можно поставить любым.

Далее переходим в WordPress и например в редакторе записи во вкладке HTML вставляем данный код и вот что у меня получилось:

Колонка 1 Колонка 2

Мы видим во-первых, что таблица явно длиннее чем надо, поэтому во вкладке HTML в редакторе записей WordPress меняем немного сам код, подбирая нужную нам ширину таблицы, а именно меняем значение параметра width=”700″ – это для всей таблицы и параметры width=”323″, width=”325″ для ячеек.

Вот я поменял код на следующий: 

</pre>
<table width="570" border="1" cellpadding="10">
<tbody>
<tr>
<td width="285">Колонка 1</td>
<td width="285">Колонка 2</td>
</tr>
</tbody>
</table>
<pre>

И вот что у меня получилось:

Колонка 1 Колонка 2

Далее убираем границы таблицы, а именно ставим параметр border равным “0” (border=”1″)  или вообще можно его удалить и получаем следующий код: 

</pre>
<table width="570" border="0" cellpadding="10">
<tbody>
<tr>
<td width="285">Колонка 1</td>
<td width="285">Колонка 2</td>
</tr>
</tbody>
</table>
<pre>

И соответственно следующий результат:

Колонка 1 Колонка 2

Вот колонки готовы, а теперь просто заполняем ячейки в редакторе записей WordPress во вкладке Визуальный редактор, например вместо “Колонка 1” пишем: “Сегодня я научился создавать колонки в WordPress с помощью таблицы”, а вместо “Колонка 2” пишем: “А далее я научусь делить на колонки шапку, хэдер, контент и прочее”.

И видим следующее:

Сегодня я научился создавать колонки в WordPress с помощью таблицы А далее я научусь делить на колонки шапку, хэдер, контент и прочее

Все готово!

У таблицы есть еще очень много различных параметров, которые можно наглядно посмотреть в программе  Dreamweaver, так что качайте и устанавливайте данную программу она вам очень поможет в разработке вашего сайта, а не только в разработке таблиц.

Инструмент Таблицы можно применять не только при редактировании записей или страничек, но и при редактировании шапок(хэдер), подвала(футер), сайдбара (боковые колонки) сайта, но об этом в следующих уроках.

3. Использование CSS3

Здесь мы рассмотрим применение следующих свойств CSS на примерах:

column-count
column-gap
column-rule
-moz-column-count
-moz-column-gap
-moz-column-rule
-webkit-column-count
-webkit-column-gap
-webkit-column-rule

 
Пример.
Допустим у нас есть блок 

<div class="container8"> 
<p>
Здравствуйте, приветствую вас на сайте Mnogoblog.ru!
Данный сайт посвящен сайтостроению и акцентирует свое внимание на движок WordPress!
</p>
 <p>
Если вы начинающий вебмастер, то вам наверняка уже знакомы такие сервисы как:  narod.ru и ucoz.ru.
</p>
 <p>
С помощью которых многие из нас и создавали свои первые сайты, так как на них установлены бесплатные и достаточно удобные конструкторы сайтов.
</p>
 </div>

Нам нужно еще добавить следующее CSS стили для отображения содержимого в нескольких столбцах: 

.container8 { -moz-column-count: 3; -moz-column-gap: 10px; -moz-column-rule: none; -webkit-column-count: 3; -webkit-column-gap: 10px; -webkit-column-rule: none; column-count: 3; column-gap: 10px; column-rule: none; }

Параметр “moz-column-count” определяет количество колонок в многоколоночном тексте.
Параметр “-moz-column-gap” определяет интервал между колонками.
Параметр “-moz-column-rule” устанавливает вертикальный разделитель.
Более подробно об параметрах можете прочитать по следующей ссылке:
“htmlbook.ru” – содержит справочник по CSS.

разбиваем контент на колонки

или можно прописать стили вот так: 

.container8 {
    background:#C5DFF0;
    color:#000;
    margin:20px auto;
    padding:20px;
    position:relative;
    width:800px;

    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;

    box-shadow:1px 1px 5px #111111;

    column-count: 3;
    column-gap: 3em;
    column-rule: 1px dashed black;
    -moz-column-count: 3;
    -moz-column-gap: 3em;
    -moz-column-rule: 1px dashed black;
    -webkit-column-count: 3;
    -webkit-column-gap: 3em;
    -webkit-column-rule: 1px dashed black;
}

Тогда столбцы будут выглядеть следующим образом:

разбиваем страницу на колонки

PS: Есть еще множество способов разбиения записи на колонки, ну например с помощью шорткода, о данном методе можете прочитать вот по этой ссылке:

“wordpressadmin.ru/plugins/shortcodes-column/”

Но самый простой это конечно же разбиения на колонки с помощью инструмента Таблицы.

Похожие записи:

Введите свой email адрес для того, чтобы подписаться на мой блог:

knopkisoc

Разбиваем записи, странички на колонки: 7 комментариев

  4. Наталья

    Спасибо, было очень полезно! Я смогла с помощью кода разбить подвал своего блога на 3 колонки. Это было удобно делать, так как я знала какая цифра за какую величину отвечает.

    ↓

Добавить комментарий