Сегодня мы подробнее рассмотрим, как вывести контент сайта на главной страничке в две или три колонки, соблюдая геометрию сайта на разных расширениях и типах экранов – без ошибок.
То есть закрепим посредством css все элементы сайта в строго отведённых им местах…
Тем кто не читал предыдущий пост, предлагаю вернуться, коли у вас есть желание наконец решить задачу вывода статей колоноками на своём сайте.
html вариант вывода двух колонок
Продолжим с того, что у вас в файле functions.php прописан код:
//две колонки
add_filter('post_class','category_two_column_classes');
function category_two_column_classes( $classes ) {
global $wp_query;
if( is_home() ):
$classes[] = 'two-column-post';
if( $wp_query->current_post%2 == 0 ) $classes[] = 'two-column-post-left';
endif;
return $classes;
}
//fin двух колонок
У вас условно должен работать двухколоночный вариант на home странице сайта. Сегодня рассматривавшем отработку колонок постов на главной…
Если вы желаете выводить колонки на страницах категорий, то всё делаете аналогично сегодняшней операции.
Файл функций больше не потребуется, а заместо его переходим в индексный файл index.php.
div классы для обработки кода…
Взгляните на фото (кликнете) – это индексный файл: зелёным подчёркнут оригинальный пример вывода контента статей…
Коричневым – div класс, которым вам нужно обернуть этот пример.
<div class="homm">КОД</div>
Идём дольше:
…всё что вам теперь требуется, так это – регулировка файла стилей.
css стили двухколоночного статейного варианта главной страницы
В этом селекторе можно задавать какие-то пользовательские значения свойств текста, например.
.homm p{margin:0 5px;font-size:12px}
.homm{float:left}
Теперь самое главное: будет неплохо, если вы разберётесь со своим файлом стилей подробнее. Нам потребуется так называемые …медиа-запросы css3.
В нашем случае помогут примеры с правилом @media, после которого назначено определённое условие для типов (screen) носителей: логические операторы и медиа-функции. В вашем файле стилей уже должны быть подобные строки (для значений стилистики каких-то иных элементов вашего шаблона).
Вот где-то после них и нужно добавить следующие строки, которые ниже: (пример обеспечит вывод двух колонок статей на главной странице: без ошибок и поломок колоночного отображения контента сайта при просмотре на различных расширениях экрана)
@media only screen and (max-width:778px){.two-column-post{width:50%;margin:10px 0;display:block}
}
@media only screen and (max-width:590px){.two-column-post, .homm {width:100%;margin:10px 0;display:block}
}
Далее вам предстоит настроить значения строки 3 под геометрику своего сайта, а именно:
max-width:590px – настройка ширины контента, после которой сайт перестраивается для правильного отображения на более мелких экранах.
Эти регулировки лучше всего выполнять браузером Mozilla Firefox, то есть путём стягивания окна браузера, отслеживая изменения адаптивной перестройки формы отображения блога.
.two-column-post, .homm – селекторы css на которые распространяется запрос нашей новой строки.
.homm – описан выше, и селектор –
.two-column-post который у вас уже должен быть в файле стилей. О нём рассказывалось в прошлой статье (ссылка также выше).
Для чего все сегодняшние работы нужны..?
Предположим, у вас, в финале контентового листа сайта, на главной странице закреплены элементы кнопок навигации, блок рекламы и социальные кнопки: следите при стягивании окна браузера, чтобы эти элементы не перемешались хаотично – к примеру, кнопки соцсетей могут уходить кверху между блоков анонсов статей. Это неправильно! …притом могут быть и иные ошибки.
В завершение можете (для закрепления безошибочного отображения) проверить свою работу на онлайн тестерах ТУТ И ТУТ
А лучше всего тестировать на реальных девайсах))))
Всё достаточно просто. В общем, нынешние регулировки значений величин легковыполнимы. Проще только приобрести шаблон.
…в принципе, после добавления сегодняшних поправок, всё должно работать правильно – пример сайта.
В следующих статьях, также будем подстраивать тонкое и правильное изящно-адаптивное отображение блога на различных экранах телефонов и ноутбуков и т.п.
Online консультация по настройкам и созданию сайтов на WordPress
полезное видео для любителей браузера Мозила)
mihalica.ru !
Михаил ATs -