Как сделать адаптивный дизайн для сайта на тему WordPress? - PullRequest
Новая
       10

Как сделать адаптивный дизайн для сайта на тему WordPress?

0 голосов
/ 03 октября 2018

Я работаю над веб-сайтом (созданным на основе пользовательской темы WordPress), на котором я должен сделать адаптивный веб-дизайн.

На этом веб-сайте я должен повторить дизайн мобильного устройства из PSD, чтобы он хорошо смотрелся на всех устройствах.


Постановка задачи:

Сайт построен на пользовательской теме WordPress.

Чтобы сделать сайт отзывчивым, я увидел HTML-код после проверки, я написал CSS-коды в Дополнительном разделе CSS wordpress.

Вот пример fiddle (в нем HTML-код скопирован из раздела проверки веб-сайта) , который я создал.

HTML-код скрипки поступает из раздела проверки на веб-сайте, и я добавил CSS-коды в раздел Additional CSS на веб-сайте WordPress.

Фрагменты HTML-кода, который я использовал: 

<tr class="alt">
       <td id="gv-field-6-29" class="gv-field-6-29">2016</td><td id="gv-field-6-1" class="gv-field-6-1">
       <a href="">Hello World</a></td><td id="gv-field-6-31" class="gv-field-6-31">McMaster University</td><td id="gv-field-6-25" class="gv-field-6-25"></td>           
</tr>

<tr class="">
       <td id="gv-field-6-29" class="gv-field-6-29">2016</td><td id="gv-field-6-1" class="gv-field-6-1">
       <a href="">Hello Universe</a></td><td id="gv-field-6-31" class="gv-field-6-31">TÉLUQ</td><td id="gv-field-6-25" class="gv-field-6-25">Open Category</td>         
</tr>


Мой вопрос: правильный ли это способ сделать адаптивный веб-дизайн длясайт построен на тему WordPress?

1 Ответ

0 голосов
/ 03 октября 2018

Здесь будет две части, две.

Для адаптивного дизайна вы на правильном пути.Вы используете медиа-запросы в своем CSS, никаких проблем там нет.Проблема может быть связана с тем, что вы пытаетесь создать собственную тему, которая уже не отвечает требованиям.Но я бы посоветовал вам прочитать о mobile first design , если вы этого еще не сделали.

То, что большинство из нас делает, это пишет тему HTML и CSS, а затем объединяет ее с Wordpress, создаваянастраиваемая тема.Пользовательскую тему можно создать двумя способами:

Дочерняя тема

Дочерняя тема - это тема, которая наследует функциональность и стильдругой темы, называемой родительской темой.Дочерние темы - это рекомендуемый способ изменения существующей темы.

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

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

Хорошо, учитывая, что у вас есть тема, над которой вы работаете, вы можете изменить ее напрямую (я бы посоветовал против этого, если вы не знаетесоздатель темы), создайте дочернюю тему из пользовательской темы или просто создайте новую тему, которая выглядит так же (я был бы осторожен с этим, если вы не знаете автора темы).

Для CSSновый стандарт для дизайна - это использование flexbox или CSS-сеток. Вот отличная статья о них.

Вы также можете использовать CSS-фреймворк, который будет иметь два варианта:

Компонентно-основанный CSS Framework

Это когда есть готовые компоненты, такие как навигация, статьи и иногда модалы.

Список компонентов на основе фреймворков

  • Bootstrap
  • Основа
  • Бульма
  • Материализация

Или вы можете использовать утилиту CSS, например, попутный ветер.Платформы утилит дают вам больший контроль над внешним видом вашего css без необходимости вообще писать много CSS, просто добавляя различные готовые классы в вашу HTML-структуру.

Более подробное описание платформ утилит см. Здесь.

...