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

Здравствуйте ! (извините за рекламу...)
написано: — 
отредактировано: 2017-01-05
издатель:  в теме: Контент, шапка site: кодингS вопрос в тему
 
Запросто с WordPress - студия ATs media fashion Reception WordPress golden

Стили 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: помогу в создании, раскрутке, развитии и целенаправленном сопровождении твоего ресурса в сети... - заказы, вопросы...разработка...


Нажатия на кнопочки определяют Ваше высокое гражданское сознание
Удачи в работе и творчестве..!
 ! самое читаемое:
   Как перевести сайт на https — сертификат ssl — шифрование   Как самостоятельно установить в Notepad++ плагин Compare   Ускоряем сайт: основные кэш и gzip правила .htaccess которые нужно знать   Убираем циклическую ссылку h1 логотипа на главной странице   Кнопка обратного звонка — анимация css плюс JS   Условные теги WordPress: наиболее полная подборка, пояснения   Подборка вариантов Redirect 301 — на все случаи жизни сайта   Создаём плагин — отдельный файл функций для сайта my-functions.php   Что такое Open Graph? как подключить протокол Open Graph к WordPress   14 полезных сниппетов — код для наилучшей работы сайта WordPress — функции   Условные теги woocommerce — наиболее полная подборка, пояснения   Как выбрать хостинг — пошаговые инструкции (обзоры 4 хостингов) — нюансы модного ssl сертифицирования   Woocommerce шорткоды и их применение   Включаем обслуживание gzip сжатия файлов на хостинге и в htaccess
↔ перетаскивайте ленту ↔

смотреть ещё статьи в теме Контент, шапка site: кодингS
меточная навигация:


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

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

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

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

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