Брачные игры с Wordpress

    Всем здравствуйте. В этой статье пойдет речь о первом неловком опыте верстки под Wordpress. Опишу ситуацию, клиент приобрел тему для WP, дизайнеры немного пофантазировали и вот мы получаем на выходе макет многостраничного сайта (интернет-магазин, плод извращенной фантазии клиента и кропотливой работы дизайнера) который необходимо сверстать, причем так, чтобы при натяжке на движок не захотелось задушить клиента, утопить дизайнера и застрелиться.

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

    Сразу следует отметить, что необходимо:

    Style Guide.
    По возможности Вам необходим guide, если проект небольшой, то вы без него можете обойтись, но если у Вас больше одной страницы, то настоятельно рекомендую оговорить это с дизайнером, а лучше, чтобы дизайнеры по умолчанию предоставляли вам его всегда. Это значительно ускорит верстку, если вы заранее сверстаете ряд компонентов и определите ряд базовых стилей.

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

    Header, Footer etc.
    Отличный способ потратить время – создание своего хэдера и футера!
    Можно пойти невероятно занимательным путем, имея header, footer, писать свои, а имеющимся в теме, задавать “display:none”. Да, кому-то может показаться это решение вполне приемлемым, а может и нет, я не знаю, я не читаю мысли. Но могу с уверенностью сказать какое решение значительно упрощает жизнь. Этот вариант менее веселый, но нужно найти исходники структуры (header.php, footer.php etc) и внести изменения в них. Это касается и остальных файлов.
    Если мы пишем на WP, то необходимо использовать все его возможности.

    Shortcode.
    Отличная вещь, хоть иногда и можно заиграться с ними и чуток переборщить. Используйте их только там, где это реально необходимо. Помните, Вы создаете сайт на CMS, клиент может захотеть потом что то поменять. Практически везде, где я читал рекомендуют писать в functions.php. Это вполне себе нормальный, а может и хороший вариант, но я поделюсь еще одним вариантом – это вынесение ваши шорткоды в отдельный файл shortcode.php. В вэбе сейчас царствует компонентный подход, давайте поддержим его правление!

    Images.
    Здесь просто небольшой совет, т.к. клиент не всегда следует логике при наполнении контентом своего сайта, то есть смысл сделать отображение картинок, фотографий максимально универсальным. Используйте overflow для обертки, object-fit для image, также для image вы можете использовать max-width. Помните, клиент может захотеть залить любую картинку.

    Шаблонные страницы.
    Есть страницы, структура которых повторяется или сама страница будет часто повторяться: страница новости, блога и т.д. Вам необходимо предусмотреть стили для максимального количества тегов (p, ul, li, h1 etc). Если вдруг клиент захочет добавить список или заголовок, span или em, а он будет выбиваться из стилистики сайта? Будет как-то неловко.

    Таблицы.
    При верстке заполняемых таблиц рекомендую не использовать классы, т.к. заказчик зачастую забывает проставлять классы таблицам. Да, знаю, это была бы лучшая работа на свете если бы не все эти заказчики.

    Параграфы.
    Если в параграфах используются выделения не только жирным стилем, то как показывает практика, лучше оборачивайте и используйте для этих целей em или в крайнем случае span. Клиенту проще оборачивать отдельные слова в тег em, потому что он на панели редактора.

    Стили.
    По этому поводу мнения у многих расходятся. Одни считают, что если вы работает с темой WP, то лучше писать большинство стилей именно через админку, клиенту проще будет это понять и изменять. Другие считают, что нечего заказчиков допускать к стилям и все стремятся прописать в файле. Здесь я считаю исключительно на ваше усмотрение и желание клиента. Если у него есть базовые знания HTML/CSS он может попросить Вас сделать именно в файле.

    В заключении хочу сказать, что верстка под CMS практически ничем не отличатся от просто верстки. В сети куча вопросов «как верстать по CMS?”. Соблюдая эти небольшие правила, Вам будет проще адаптировать верстку под движок.
    • –1
    • 6,2k
    • 9
    Поделиться публикацией

    Комментарии 9

      0
      В этой статье пойдет речь о первом неловком опыте верстки под Wordpress.

      Я думал будет больше конкретных примеров, а в итоге просто несколько советов
        0
        Могу рассмотреть Ваш конкретный вопрос.
          0
          Дело в каком то вопросе, а в том что в ведении вы пишите про первый опыт и готовую тему, а в самой статье обобщенные советы
        0
        Можно пойти невероятно занимательным путем, имея header, footer, писать свои, а имеющимся в теме, задавать “display:none”.

        Зачем использовать готовую тему, если дизайн рисуется с нуля?
        Почему не использовали голую тему для WP?
          0
          Часто возникает ситуация, что заказчик уже купил тему и не хочет с ней расставаться («Вот мне она понравилась, тем более что она уже готова, и времени у вас это займёт мало»). Тут и начинаются пляски с бубном, потому как многие вещи даже совпадающие с дизайном сложно реализовать. А если в исходниках ещё и нет psd файлов, то дизайн может быть нарисован вообще шедевральный. Тут то и начинается полная вакханалия и приходится шаблону ломать кости. А подружить конфиги шаблона со своим кодом это не такое уж и простое дело.
            +1
            В шею гнать таких заказчиков.
            Капсом в договоре прописать, что покупные темы изменяются только в рамках предоставляемых настроек. Хотел было написать, что максимум, что можно делать — цвета/шрифты менять, но современные темы умеют гораздо больше.
            Купил и не хочет расставаться — вообще детский сад (я_сделяль.jpg). Вы на переработку потратите времени больше (читай денег заказчика, по ставке часовой), чем на приобретение новой / верстку по макету. Потому что я видел такой «дизайн», что там проще с нуля было. А что, там же всего то пару блоков подвинуть. Только вот всю сетку переделывать. Мне кажется, это только с опытом приходит.

            За display:none по рукам бить надо. header.php — это вообще основы wp.

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

            Очень, конечно, наивно всё Вы пишете. И статья ни о чем, по сути. Посмотрите, хотя бы, в сторону theme-child. Потому что, как я понял, Вы прямо по живой теме правите, и любой апдейт все Ваши правки в Вальхаллу отправит.

            p.s.: у вас там ошибочка, файл правильно называется functions.php
          0
          Можно пойти невероятно занимательным путем, имея header, footer, писать свои, а имеющимся в теме, задавать “display:none”.

          Даже не представляю, как вы такое извращение придумали)
          А так в целом по делу, но очень общо.
          Ну и плюс всегда не лишним будет посматривать в codex
            +1
            Шорткоды в ВП очень мощная весч, используя компонентный подход к верстке, БЭМ-методологию в связке с шорт кодами можно преобразить обычную страницу ВП до неузнаваемости. Кстати специалисты по SEO советуют внедрять в обыкновенные текстовые страницы различные элементы захвата внимания посетителя(блоки с акциями или калькуляторы или просто формы заказа), что позволит удержать пользователя на странице и возможно повысить конверсию
              +1
              'лучше писать большинство стилей именно через админку, клиенту проще будет' — я вам сложнее. Кстати. На заметку файлы тоже можно через админка править, в той же степени неудобности как и стили в кастомайзере.

              Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

              Самое читаемое