Інтеграція простих макет CSS Grid в WordPress
Отримання послідовної, твердої сітки в WordPress може бути безболісним процесом, якщо ви використовуєте правильні інструменти. У цьому підручнику ви дізнаєтеся поступово, як швидко налаштувати систему сіток у WordPress, яка дуже легка і легко модифікована. Ми будемо тримати дизайн простим, щоб ми могли зосередитися на використанні правильних інструментів для налаштування вашої сітки, але майте на увазі, що ви можете створити власну сітку, якщо потрібно.
Я буду використовувати тему пулу за замовчуванням у WordPress для цього підручника, щоб показати вам підхід "починати з нуля" для отримання правильної сітки.
Крок 1. Визначте ширину сітки
Перш ніж розпочати роботу, потрібно визначити, наскільки широкою буде ваша сітка. Для мого сайту WordPress, я бачу, що ширина мого головного стовпця становить 450 пікселів, використовуючи функцію "Перевірити елемент" Google Chrome, коли ви клацаєте правою кнопкою миші на об'єкті. Це найшвидший спосіб, який я знайшов, що дозволяє швидко визначити ширину та висоту об'єкта на веб-сторінці.
Крок 2: Конструктор сітки
Замість того, щоб створити сітку, яку ви можете робити, якщо ви хочете, я пропоную перейти з одним з багатьох доступних інструментів генератора сітки. Для цього підручника, я буду використовувати генератор сітки від MindPlay. Це дуже простий і легкий генератор сітки.
Я хочу відобразити три колонки, і я повинен переконатися, що мої пікселі знаходяться на рівні 450. Отже, налаштуйтеся відповідно і перейдіть на вкладку "Експорт". Ми не будемо переходити * типографіка функції в цьому підручнику, хоча це, безумовно, варто вивчити самостійно.
На вкладці "Експорт" скористайтеся найпопулярнішим кадром "Таблиця стилів" і прокрутіть вниз, поки не побачите коментар "Сітка". Ви скопіюєте все з коментаря на дно цього кадру. Вона повинна бути лише близько 30 рядків .
Крок 3. Оновлення таблиці стилів WordPress
Увійдіть у свій сайт WordPress і перейдіть до Appearance> Editor.
У нижньому правому куті панелі редактора ви побачите a Styles.css файл (або щось подібне, залежно від вашої теми). Натисніть цю кнопку, щоб відкрити її.
Перейдіть до нижньої частини аркуша та вставте свій файл із MindPlay.dk:
Крок 4: Впровадження сітки
Для використання сітки ви просто створюєте a Нижче наведено зразок попереднього зразка, який можна вставити на місце для початку роботи. Ліва колонка Середній стовпець Права колонка Ось як це виглядає в WordPress: Зберегти / оновити сторінку та переглянути результати. У моєму випадку це головна сторінка сайту: Як видно з наведеного вище знімка екрана, ми маємо три колонки, і все правильно, де ми очікуємо, що це буде. Можна додати стільки рядків, скільки потрібно, починаючи з наступного Ліва колонка Середній стовпець Права колонка Лівий рядок # 2 Середній рядок №2 Правий рядок # 2 Ось як виглядає так: Тепер ви можете додавати зображення або текст, а також створювати стили в кожному рядку точно так, як ви хочете. У деяких веб-переглядачах можуть виникнути проблеми, якщо у вас більше одного рядка. Щоб обійти цю проблему, потрібно зробити край на крайньому правому куті ( Це гарантує, що ваш Якщо ви хочете накреслити фон всієї сітки, вам потрібно буде налаштувати висоту Залежно від версії генератора сітки MindPlay.dk, який ви використовуєте, сайт може не генерувати ".grid-m4", а замість цього потрібно використовувати Ліва колонка Середній стовпець Права колонка Ось як виглядають мої кінцеві результати з двома рядками та деякою простий графікою: Удачи в проектуванні і пам'ятайте, що ви можете стиль вашого сітки в будь-якому випадку ви хочете. Примітка редактора: Цей пост написано Тара Хорнор для Hongkiat.com. Тара має ступінь англійської мови і пише про маркетинг, рекламу, брендинг, графічний дизайн і настільні видавництва. Крім своєї кар'єри, Тара також любить проводити час зі своїм чоловіком і двома дітьми.
:
Поради щодо налаштування
.сітка-м4, у нашому випадку) до висоти, яку потрібно кожен рядок. Якщо ви використовуєте зображення розміром 250px на 250px, зробіть висоту рядка в .сітка-м4 має бути 250px:.grid-m4 float: left; ширина: 20px; висота: 250px;
.сітка-м1 на лівій стороні наступного рядка не плаває до рядка над ним..сітки клас. Отже, скажімо, у вашій сітці є чотири рядки, кожна з яких має 250px. Ви хочете додати висоту до класу .grid при 1000px, щоб будь-які елементи стилізації, які ви додасте, охоплюють весь дизайн сітки..сітка ширина: 450px; висота: 1000px; margin: auto;
.сітка-м1 після .grid-c3 щоб переконатися, що ваша сітка поширюється на належне місце:Остаточні результати
