студия занимательная МИХАЛИКА
! Михалика - запросто с WordPress:
доступная ручная работа по правилам оптимального интернет(а)
Здравствуйте !

издатель:   в теме: Техническое SEO
студия занимательная МИХАЛИКА

Стили css и html в варианте адаптивного двухколоночного вывода статей

Сегодня мы подробнее рассмотрим, как вывести контент сайта на главной страничке в две или три колонки, соблюдая геометрию сайта на разных расширениях и типах экранов — без ошибок.

То есть закрепим посредством 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 классы для обработки кода

 

Взгляните на фото (кликнете) — это индексный файл: зелёным подчёркнут оригинальный пример вывода контента статей…

 

 

 

Стили css и html в варианте адаптивного двухколоночного вывода статей

 

 

Коричневым — 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 который у вас уже должен быть в файле стилей. О нём рассказывалось в прошлой статье (ссылка также выше).

 

Для чего все сегодняшние работы нужны..?

 

Предположим, у вас, в финале контентового листа сайта, на главной странице закреплены элементы кнопок навигации, блок рекламы и социальные кнопки: следите при стягивании окна браузера, чтобы эти элементы не перемешались хаотично — к примеру, кнопки соцсетей могут уходить кверху между блоков анонсов статей. Это неправильно! …притом могут быть и иные ошибки.

В завершение можете (для закрепления безошибочного отображения) проверить свою работу на онлайн тестерах ТУТ И ТУТ

А лучше всего тестировать на реальных девайсах))))

 

Стили css в варианте двухколоночного вывода статей

 

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

…в принципе, после добавления сегодняшних поправок, всё должно работать правильно.

 

 

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

 

 

 


подписка feedburner МИГ подписки - ВРЕМЯ знаний!!

 

 

 

полезное видео для любителей браузера Мозила)

 


Если что-то не ясно, спрашивайте. Помогу… в чём дюжу.
Вместе мы многое сможем! Берегите себя и свой век - mihalica.ru


Нажатия на кнопочки определяют Ваше высокое гражданское сознание
Удачи в работе и творчестве..!


меточная навигация:


Комментарии © 0 к статье: Стили css и html в варианте адаптивного двухколоночного вывода статей

Поделитесь соображениями: Ваши мысли очень важны! $ правила комментирования ©

Ваш e-mail не будет опубликован. Обязательные поля помечены *