Интеграция простых CSS Grid Layouts в WordPress
Внедрение в WordPress последовательной, сплошной сетки может быть безболезненным процессом, если вы используете правильные инструменты. В этом уроке вы шаг за шагом узнаете, как быстро настроить систему сетки в WordPress, которая очень легка и легко модифицируема. Мы сделаем дизайн простым, чтобы мы могли сосредоточиться на использовании правильных инструментов для настройки вашей сетки, но имейте в виду, что вы можете создать собственную сетку, если это необходимо.
В этом уроке я буду использовать тему пула по умолчанию в WordPress, чтобы показать вам подход «с нуля» к правильной настройке сетки..
Шаг 1: Определите ширину вашей сетки
Прежде чем начать, вам нужно определить, насколько широкой должна быть ваша сетка. Что касается моего сайта WordPress, я вижу, что ширина моего основного столбца составляет 450 пикселей с помощью функции «Проверка элемента» в Google Chrome, когда вы щелкаете правой кнопкой мыши по объекту. Это самый быстрый способ, который я нашел, который может быстро определить ширину и высоту объекта на веб-странице.
Шаг 2: Grid Designer
Вместо того, чтобы вручную строить сетку, которую вы можете сделать, если хотите, я предлагаю использовать один из многих доступных инструментов генератора сетки. Для этого урока я буду использовать генератор сетки MindPlay. Это очень простой и легкий генератор сетки.
Мне нужно отображение с тремя столбцами, и я должен убедиться, что мои пиксели равны 450. Поэтому настройте их соответствующим образом и перейдите на вкладку «Экспорт». Мы не будем идти по *типография функции в этом уроке, хотя это, безусловно, стоит изучить самостоятельно.
На вкладке «Экспорт» используйте самый верхний фрейм «Таблицы стилей» и прокручивайте вниз, пока не увидите комментарий «Сетка». Вы скопируете все из комментария в конец этого кадра. Это должно быть только около 30 строк .
Шаг 3: Обновление вашей таблицы стилей WordPress
Войдите на свой сайт WordPress и выберите «Внешний вид»> «Редактор»..
В правом нижнем углу панели редактора вы увидите styles.css файл (или что-то подобное, в зависимости от вашей темы). Нажмите, чтобы открыть.
Прокрутите до конца листа и вставьте свой предварительный файл из MindPlay.dk:
Шаг 4: Реализация сетки
Чтобы использовать сетку, вы просто создаете Вот пример предварительно, который вы можете вставить на место, чтобы начать работу: Левый столбец Средняя колонна Правая колонка Вот как это выглядит в WordPress: Сохраните / обновите страницу и посмотрите на результаты. В моем случае это домашняя страница сайта: Как вы можете видеть из приведенного выше снимка экрана, у нас есть три столбца, и все идет именно так, как мы и ожидаем. Вы можете добавить столько строк, сколько захотите, просто начав со следующего Левый столбец Средняя колонна Правая колонка Левая строка № 2 Средняя строка № 2 Правая строка № 2 Вот как это выглядит до сих пор: Теперь вы можете добавлять изображения или текст, и стилизовать каждую строку точно так, как вы хотите. У вас могут возникнуть проблемы в некоторых браузерах, когда у вас более одной строки. Чтобы обойти эту проблему, вам нужно будет сделать край справа ( Это сделает ваш Если вы хотите стилизовать фон всей сетки, вам нужно будет отрегулировать высоту В зависимости от версии используемого вами генератора сетки MindPlay.dk, сайт может не генерировать «.grid-m4», и вместо этого вам нужно будет использовать Левый столбец Средняя колонна Правая колонка Вот как выглядят мои окончательные результаты с двумя строками и простой графикой: Получайте удовольствие от разработки и помните, что вы можете стилизовать вашу сетку так, как вам нравится. Примечание редактора: Этот пост написан Тара Хорнор для Hongkiat.com. Тара имеет степень по английскому языку и пишет о маркетинге, рекламе, брендинге, графическом дизайне и настольных издательских системах. В дополнение к своей писательской карьере, Тара также любит проводить время со своим мужем и двумя детьми.
:
Советы по настройке
.Сетка-m4, в нашем случае) на высоту, которую вы хотите, чтобы каждый ряд был. Если вы используете изображения размером 250 на 250 пикселей, задайте высоту строки в .Сетка-m4 быть 250px:.grid-m4 float: left; ширина: 20 пикселей; высота: 250 пикселей;
.Сетка-m1 на левой стороне следующего ряда не всплывает до ряда над ним..сетка учебный класс. Допустим, у вас в сетке четыре ряда, каждый по 250 пикселей. Вы захотите добавить высоту к классу .grid в 1000px, чтобы любые добавленные вами элементы стилей охватывали весь дизайн сетки...сетка ширина: 450px; высота: 1000 пикселей; наценка: авто;
.Сетка-m1 после .Сетка-c3 чтобы убедиться, что ваша сетка распространяется в нужное место:Окончательные результаты
