logotip

Как сделать посты (записи) на главной в 1 колонку в Colormag, как на leadinlife.info

Всем привет. Пишет Денис Повага.

Часто у меня спрашивают, как сделать посты в теме Colormag в 1 колонку. Точно также, как делаю ученикам, точно также, как делаю на своих проектах. Ведь по умолчанию в wordpress теме Colormag записи на главной выводятся в 2 колонки, и только первый пост растянут по ширине.

Итак! Сегодня поэтапно расскажу, как сделать также, как на моем блоге leadinlife.info

Поехали…

Посты в 1 колонку в wordpress теме Colormag

Тоже самое, вы могли видеть на блогах учеников. Смотрится лучше, и как-то проще. Люблю классику…

Покажу, как всё сделать, на примере блога «Сам себе кулинар». По умолчанию, посты выглядят так:

Чтобы сделать в 1 колонку, в браузере google chrome, нужно нажать правой кнопкой мыши на элементе поста, который необходимо сделать по ширине, и немного ознакомиться со стилями, чтобы понять, почему вторые и следующие посты (то есть — 2 и 2+1, и т.д.) выравниваются по левому и по правому краю уменьшенным размером.

Итак, правой кнопкой мыши по нужному посту — «Просмотреть код»:

Далее, я нахожу тег <article… этого поста (он ещё будет отдельно выделяться, когда вы гуляете мышью по коду),  Как показано на скриншоте ниже. И в правой части, будет тот самый стиль, который отвечает за выравнивание поста по левому краю float: left, и размер width: 48.7013% (то есть, по ширине ).

Стрелочка справа, на скриншоте, или второй скрин ниже…

Ниже, показал наглядно это.

Теперь, попробуйте поиграться, и снимите галочки, чтобы посмотреть что произойдет если убрать эти правила…

После убирания галочек, пост становится по ширине. Точно также, как и первый.

То, что нам и нужно… Вы ведь так хотели сделать?

Хорошо. Первый пост нашли, и теперь знаем, что нужно изменить в основном файле стилей темы colormag. Но туда, мы перейдем чуть позже.

Давайте, спустимся ниже, и посмотрим, что третий пост выводится не понятно. Что-то уже сломалось значит. Вероятно, для следующий постов, действует отдельное правило. Посмотрим ещё раз файл стилей, внимательней, и найдем всё…

Но здесь ничего не увидели. Значит, нужно искать далее….

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

Правой кнопкой мыши по этому элементу и находим тег <article… принадлежащий конкретно этому элементу (он выделяется темным фоном. Обратите внимание!)

Справа, как вы могли заметить будет следующее:

.blog .post:nth-child(2n+1) …

и прописано выравнивание по правому краю (float:right), и размер по ширине 48.7013% (width:48.7013%). И если, убрать галочки на этих свойствах, то всё будет хорошо. Попробуйте!

Убираем галочки здесь:

Теперь смотрим, как это выглядит на странице блога. То, что нужно…

 

Теперь, остается подправить файл стилей, уже в самой консоли движка вордпресс, нашей темы. Чтобы быстро найти то, что подправить — нажмите по ссылке стилей, как показано на изображении ниже:

Нас перекидывает в файл стилей, и на строке 2010, мы видим то, что отключили ранее. Для поста (…2n) и для поста (…2n+1) . Строчки закомментированы. Хорошо. Не закрывайте эту страницу, так как сейчас будем копировать это дело, в файл стилей через консоль, чтобы изменения сохранились. Впрочем, можно было просто стереть эти строчки. Но мы, закомментируем также, просто изменив  на это:

Итак. Идем в консоль вордпресс, на вкладку — Внешний вид — Редактор, и откроется файл стилей (Таблица стилей style.css). Она нам и нужна. Как мы помним, примерно на 2010 строке, будет то, что нужно изменить. У меня оказалось на 2013 строке. Это не суть важно. Главное, найти те свойства, которые отвечают за вывод постов  (…2n) и (…2n+1). Вот они:

Далее, возвращаюсь на сайт, в ту вкладку, которая осталась открытая,  выделяю и копирую, как показано ниже:

Будьте внимательны при копировании, чтобы не забыть скобку. Иначе, при изменении, может выйти ошибка, и ничего не получится. Надеюсь, у вас есть резервная копия!

Далее, возвращаюсь в консоль вордпесс, и вместо старых строк, которые выделяю также, просто вставляю закомментированные (то есть, заменяю их). При желании, те же действия, можно проделать вручную. Если вам удобней…

Суть в том, чтобы получилось вот так, как показано на скриншоте ниже:

Вот и всё. Осталось сохранить файл стилей (синяя кнопка ниже), и почистить кеш браузера, чтобы увидеть изменения.

Быстрее всего, можно войти на сайт с другого браузера, или открыть режим инкогнито в гугл хром, и перейти на сайт.

Посты на главной будут в 1 колонку.

Удачи!

Автор публикации

не в сети 4 часа

Денис Повага

1-2 раза в год, веду до результата в блогинге, при наличии мест.
Для связи: ok.ru/denis.povaga

Комментарии: 2630Публикации: 657Регистрация: 12-03-2013

Не пропускай личные посты моего блога...

Лично на Ваш ящик, буду присылать секретные техники раскрутки блогов и сайтов на поиске и в социальных сетях. Информацию, которую не найдете нигде больше,
будет всегда с вами



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

Вход на сайт в 1 клик: 

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

Авторизация
*
*
Вход на сайт в 1 клик: 
Генерация пароля