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

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

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


Постановка проблемы:

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

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

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

Код HTML из скрипки поступает из раздела проверки веб-сайта, и я добавил коды CSS в раздел Дополнительный 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?


wordpress html css responsive-design inspect
person john    schedule 03.10.2018    source источник
comment
Я думаю, ты на правильном пути, Джон. Вы поместили CSS в раздел «Дополнительные CSS». Дополнительный раздел CSS или CSS дочерней темы не будут перезаписаны при обновлении темы. Судя по скрипке, вы использовали медиа-запросы. Так что я думаю, что вы на правильном пути.   -  person Hamza Ahmad    schedule 03.10.2018
comment
@HamzaAhmad Привет, Хамза, у меня есть похожий вопрос. Мне интересно, можете ли вы взглянуть. Это что-то связанное с плагином css. Раньше мой веб-сайт работал правильно, но каким-то образом в мобильном представлении появилось добавление css, что привело к полному изменению дизайна. Я не уверен, как появились эти дополнительные коды CSS.   -  person john    schedule 07.10.2018

Ответы (1)


arrow_upward
1
arrow_downward

Там будет две части два это.

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

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

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

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

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

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

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

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

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

Структура CSS на основе компонентов

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

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

  • Начальная загрузка
  • Фонд
  • Бульма
  • Материализоваться

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

Чтобы получить более подробные сведения о служебных платформах, перейдите сюда.

person user3325126    schedule 03.10.2018
comment
спасибо за подробное объяснение. Я задал этот вопрос ">вопрос от Хамзы выше. Мне интересно, если вы также можете посмотреть. Это что-то связанное с плагином css. Раньше мой веб-сайт работал правильно, но каким-то образом в мобильном представлении появилось добавление css, что привело к полному изменению дизайна. Я не уверен, как появились эти дополнительные коды CSS. - person john; 07.10.2018