Ожидание — реальность: дизайн в WordPress
Дизайн в WordPress, ошибки при работе с нейросетью и мои 50 оттенков серого.
Оставлю заметку — записать и запомнить: записывать всё и не запоминать. Первая сложность, с чем можно столкнуться, — это дизайн, как ни странно. С технической стороны вопроса дела у меня обстоят еще хуже, но метод тыка до сих пор работает.
Я, как человек дальновидный, действительно промахнулся. Ожидание — реальность, грубо говоря, подводит, а самое обидное, когда структуру сайта (по советам) сначала на листе бумаги нужно сделать. В 2026 году-то.
Figma. Простая программа, ничего сложного, мне вообще всегда казалось, что там презентации только делают. Когда начал вникать в вопрос, то понял, что Фигму я знаю на уровне создания презентаций, а дальше у меня провал. Но, что бы я там ни городил, в реальности оказалось очень сложно в сайт перенести.
По непонятным мне причинам всё, что я делаю в Фигме, выглядит просто превосходно, даже если это плашка с текстом, но если это повторить в WordPress с каким-нибудь плагином, то начинается безобразие. Либо это соотношение в типографике, либо цвета — так и не разобрался.
Unlimited Elements (с ВПН) и куча проблем. Вот и вторая рекомендация, про которую я забываю. Зачем поставил плагин, я не помнил, когда использовал — не записал, и началось. В самом начале вёрстки я поспешил и сделал себе красивые карточки в блоге, с тенями, радиус углов 12, парящие в воздухе (записываем промт). А потом всё сломалось.
Astra. Спорная популярность, поставил эту тему методом «качаем всё самое модное и красивое». Нужно было просто оставаться на стандартной теме WordPress. Astra, по заверениям, не конфликтует с Элементором, этого не видно по багам и ошибкам в меню, но когда я к этому дуэту подключил Unlimited Elements, то поехало всё.
Шрифты свалились в кучу, причём в самых неожиданных местах, иногда просто в мобильной версии пропадал кусок текста.
Видимо, в настройках Astra не был выбран шаблон страницы Elementor, где-то я совершил ошибку.
Одно лечим — второе калечим, ещё и третье, и четвёртое. И так я всё сломал. Пока делал главную страницу — не тестировал остальные страницы, как результат — пришлось всё переделывать. На этом моменте я записал, что Unlimited Elements мне нужен был для визуализации блога и для быстрого переноса статей в одно место. Этим плагином можно управлять информацией на посте. Инструкция: кинуть плагин, далее в настройках выбрать рубрику — и готово, на странице отобразятся посты только из нужной рубрики.
Elementor у меня всё ещё в бесплатной версии, Astra тоже. Ноль вложений, и на картинке выше видно,как работает плагин Unlimited Elements. Когда мы его закидываем как плашку — он подтягивает все посты, которые написаны ранее, а потом фильтруем по рубрикам.
Идея была такая: моя главная страница состоит из блоков, которые я по ходу пьесы буду наполнять информацией, бесполезной и очень.
Одна из плашек главной страницы должна подтягивать посты, в моём случае в Unlimited Elements я настроил фильтр — показывать 4 поста по иерархии от самого нового к старому, как на картинке ниже.
Ошибка была в том, что в Elementor я на странице делал вёрстку по рекомендациям нейронки, примерно это звучало так: отступ 5, снизу 10, контейнер на 100%. Когда я протестировал через мобильную версию, то там из-за того, что один элемент вылетел правее, а второй левее — получилась проблема, которую я так до сих пор полностью не решил. Просто нужно запомнить, что ужно добавлять новый контейнер, и не копировать в него ошибки. На картинке ниже — то, как появилась первая проблема, я потом психанул и всё снёс.
Дизайн или функциональность. В нормальном мире, например, есть логический клапан и/или, и я понимаю пневматику, куда что ставить и как это работает. С сайтами всё не так однозначно, у меня или/или. Или дизайн, или функции. Например, я никак не победил вопрос, как сделать кликабельную капсулу. На картинке ниже у меня страница состоит из двух частей. Верхние капсулы — это ссылки, которые по сценарию должны сами появляться (не тестировал). Нижние капсулы — это кнопки, они сами не появляются, я их буду добавлять по мере появления рубрик.
Клик на верхнюю капсулу не работает, кликабельную область я не могу расширить, и чтобы открыть ссылку, нужно прицелиться в середину буквы. Я перепробовал всё: и код, и рамку, и добавлял текст ниже и делал его белым, чтобы дизайн не ломать, — всё мимо. Или капсула ломается в размере из-за разного текста, или код ломает остальные страницы. Проблему можно решить, если сделать подчёркивание, но смотрится плохо, проверял. Хотя сейчас родилась идея, надо подумать в эту сторону.
Структура страниц, точнее отсутствие структуры, — это третья проблема. У меня сейчас контакты, которые никому не нужны, в четырёх местах: в хедере, в футере, на главной, в тексте. Внизу прикрепил страницу, насколько я помню, это последнее, что я сделал перед тем, как всё снести. Потом я открыл весь сайт, и всё как в тумане. На картинке почти подошёл к задумке, кстати, ну почти — это за два километра (самоирония).
Дорогой дневник, это мой 7 пост по счёту, я научился соотносить картинку к тексту, разбивать на колонки, выделять главные слова, разобрался, что значат заголовки H1, H2, H3. Если ничего не удалю, можно покрутить карусельку. Сейчас под строкой поиска пусто, там будут кликабельные метки, когда я научусь их делать. Мобильную версию тоже переделал, планшетную не тестировал.
Используйте инструкцию с осторожностью.
