! Запросто с WordPress - доступная ручная работа по правилам оптимального интернета

Здравствуй всегда, читатель !
написано: — 
отредактировано: 2019-09-26
издатель:  в теме: Контент, шапка site, Сниппеты, хаки, функции вопрос в тему
 
Запросто с WordPress — ATs media fashion

Стили 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 Online консультация по работе c сайтом на WordPress

 

 

 

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

 


...вопросы в комментариях - помогу, в чём дюжу...
mihalica.ru !


Михаил ATs - владелец блога запросто с Вордпресс - в сети нтернет давным-давно...

...веб разработчик студии ATs media: помогу в создании, раскрутке, развитии и целенаправленном сопровождении твоего ресурса в сети... - заказы, вопросы...разработка...


Нажатия на кнопочки определяют Ваше высокое гражданское сознание
Удачи в работе и творчестве..!
 ! самое читаемое:
   Подключение jQuery библиотеки от CDN Google — рационально!..   Выбираем хостинг для своего сайта — сервис — рейтинг хостингов   Как выбрать хостинг — пошаговые инструкции (обзор 4 хостингов) — нюансы модного ssl сертифицирования   Woocommerce шорткоды и их применение   Условные теги WordPress: наиболее полная подборка, пояснения   Включаем обслуживание gzip сжатия файлов на хостинге и в htaccess   Новые изменения в правилах AdSense вступили в силу!..   Добавим на сайт карту Google Maps с поиском указанных адресов…   Создаём плагин — отдельный файл функций для сайта my-functions.php   Подборка вариантов Redirect 301 — на все случаи жизни сайта   Условные теги woocommerce — наиболее полная подборка, пояснения   Ускоряем сайт: основные кэш и gzip правила .htaccess которые нужно знать   14 полезных сниппетов — код для наилучшей работы сайта WordPress — функции   Как создать на хостинге тестовый сайт за 5 10 минут..?
↔ перетаскивайте ленту ↔

смотреть ещё статьи в теме Контент, шапка site, Сниппеты, хаки, функции
меточная навигация:


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

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

Внимание! Обязательные поля помечены *

  отныне доступен плагин: privacy-policy ©

 необходимо принять правила конфиденциальности и пользовательского соглашения
Яндекс.Метрика
? стартовая линейка услугSkype консультацияЕсли вы выбрали для своего сайта WordPress и только-только начинаете изучать панель управления контентом, то этот вариант оnline консультаций — практически по любым вопросам — для вас! вопросы сюдаSkype онлайн