Создание финансовой витрины с помощью ИИ. Часть 3. Формирование структуры сайта

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

Теперь можно переходить непосредственно к созданию структуры будущего сайта и его основных элементов интерфейса. Именно на этом этапе проект начинает приобретать собственный внешний вид и постепенно превращаться из стандартной установки WordPress в полноценную финансовую витрину.

Чтобы было проще ориентироваться в материалах цикла, ниже приведён полный список статей, которые будут опубликованы в рамках данной серии.

Часть 1. Анализ конкурентов и генерация прототипа через нейросеть

Выбор сайтов-конкурентов, создание прототипов различными способами и разработка основных страниц будущего проекта.

Часть 2. Покупка домена, хостинг, установка WordPress и пустой темы

Регистрация домена, выбор хостинга, установка WordPress и подготовка базовой структуры сайта для дальнейшей разработки.

Часть 3. Создание хедера, футера, логотипа и списка страниц

Формирование структуры проекта, создание основных элементов интерфейса и разработка фирменного стиля сайта через нейросеть.

Часть 4. Установка плагинов и создание типов записей для продуктов

Настройка необходимых плагинов, создание разделов для МФО, кредитов, кредитных карт и дебетовых карт, а также подготовка карточек предложений.

Часть 5. Создание шаблонов страниц и наполнение кодом

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

Часть 6. Финальная сборка: фильтры, сравнение, SEO и запуск

Настройка функционала сайта, базовая SEO-оптимизация, подключение аналитики и подготовка проекта к публикации.

Готовый сайт, который мы создаём в данной серии материалов, уже можно посмотреть по адресу https://centrzaima.ru

Что будет сделано в этой статье

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

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

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

Создание логотипа

Логотип является одним из базовых элементов любого сайта. Именно он помогает пользователям быстрее запомнить проект, формирует первое впечатление о бренде и делает сайт более узнаваемым. Многие наверняка слышали истории о компаниях, которые тратили на разработку логотипов десятки и даже сотни тысяч рублей. Однако сегодня ситуация заметно изменилась.

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

Для создания логотипа мы будем использовать ChatGPT. Поскольку ранее нами уже был подготовлен дизайн сайта, нейросеть сможет использовать его в качестве основы и подобрать логотип, который будет гармонично сочетаться с общей стилистикой проекта.

Для этого загружаем скриншот ранее созданного дизайна и используем следующий промпт:

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

Название сайта — «Центр займа».

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

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

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

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

Результат генерации:

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

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

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

Для этого можно воспользоваться любым онлайн-редактором изображений. Например, https://www.iloveimg.com/ru/crop-image/crop-png

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

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

Почему логотип обрезался в стороннем сервисе

Может возникнуть вопрос: почему для обрезки изображения использовался отдельный сервис, а не сама нейросеть.

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

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

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

Создание базовых файлов темы

После подготовки логотипа можно переходить к созданию базовых файлов темы WordPress. На этом этапе мы пока не верстаем отдельные страницы сайта, а формируем основу, которая будет использоваться во всём проекте.

В первую очередь нам понадобятся три ключевых элемента: header.php, footer.php и style.css. Эти файлы отвечают за общую структуру сайта и подключаются абсолютно на всех страницах будущей финансовой витрины.

Файл header.php отвечает за верхнюю часть сайта. Обычно в нём размещаются технические элементы страницы, открывающие теги документа, подключение служебных функций WordPress, логотип, главное меню и другие элементы шапки.

Файл footer.php отвечает за нижнюю часть сайта. В подвале обычно размещаются дополнительные ссылки, юридическая информация, копирайт, меню, контакты и служебные элементы, которые также должны отображаться на всех страницах проекта.

Отдельно используется файл style.css. Он отвечает за внешний вид сайта: цвета, шрифты, размеры блоков, отступы, сетку, адаптивность и оформление отдельных элементов интерфейса. Именно в этом файле постепенно будет собираться визуальная часть проекта, которая превратит пустую тему WordPress в полноценную финансовую витрину.

Создание header.php

Для генерации кода достаточно открыть диалог с нейросетью и ввести следующий промпт:

Необходимо создать базовый файл header.php для темы WordPress. На данном этапе нас интересует не внешний вид шапки сайта, а только стандартная техническая часть, которая присутствует практически в любой теме WordPress.

Сгенерируй код файла header.php, включив в него все необходимые служебные элементы: объявление структуры HTML-документа, метатеги кодировки и адаптивности, вызов функции wp_head(), ссылку на файл style.css, открывающие теги body и основные контейнеры страницы.

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

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

Результат генерации:

Мы получаем примерно вот такой код, который необходимо скопировать в буфер обмена.

Далее переходим в административную панель WordPress и открываем раздел «Внешний вид» → «Редактор тем». В правой колонке редактора находим файл header.php и кликаем на него.

Обратите внимание, что при первом открытии редактора WordPress может вывести предупреждение о том, что редактирование файлов темы потенциально опасно и может привести к ошибкам на сайте. Это предупреждение можно проигнорировать. После подтверждения оно больше не будет мешать дальнейшей работе.

Далее вставляем код, полученный от ChatGPT, и нажимаем кнопку сохранения изменений.

Создание footer.php

Файл footer.php создаётся по той же логике, что и header.php. Для генерации кода снова обращаемся к ChatGPT и просим подготовить минимальный корректный файл footer.php с помощью следующего промпта:

Для следующего этапа необходимо создать базовый файл footer.php для темы WordPress. На данном этапе нас интересует не внешний вид подвала сайта, а только стандартная техническая часть, которая должна присутствовать в любой корректно работающей теме WordPress.

Сгенерируй код файла footer.php, включив в него все необходимые служебные элементы: закрытие основных контейнеров страницы, вызов функции wp_footer(), а также закрывающие теги body и html.

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

В результате должен получиться минимальный, корректный и полностью рабочий файл footer.php, соответствующий современным требованиям WordPress и готовый для дальнейшего наполнения элементами дизайна и функционала сайта.

Результат генерации:

После получения кода возвращаемся в административную панель WordPress в раздел «Внешний вид» → «Редактор тем» и в правой колонке выбираем файл footer.php.

Вставляем в него код, полученный от ChatGPT, и сохраняем изменения.

Создание style.css

Для создания файла style.css снова обращаемся к ChatGPT и используем следующий промпт:

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

Сгенерируй код файла style.css, включив в него базовые стили для сайта: корректную работу html и body на всю высоту окна браузера, настройку структуры страницы через Flexbox, чтобы футер всегда располагался внизу экрана даже при отсутствии контента, а также сброс стандартных браузерных стилей, которые могут мешать дальнейшей разработке.

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

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

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

Результат генерации:

После получения результата возвращаемся в административную панель WordPress по адресу «Внешний вид» → «Редактор файлов темы», в правой колонке находим файл style.css, открываем его, вставляем сгенерированный код и сохраняем изменения.

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

Вёрстка хедера

Следующий этап — вёрстка хедера сайта. Для этого снова используем ChatGPT и загружаем в диалог изображение ранее созданного прототипа всего сайта.

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

После загрузки изображения используем следующий промпт:

Мне необходимо сверстать видимую часть хедера для собственной темы WordPress на основании загруженного макета дизайна.

Ранее базовая структура файла header.php уже была создана. Сейчас нужно подготовить только тот фрагмент HTML/PHP-кода, который будет вставлен внутрь файла header.php в заранее оставленное место для кода шапки сайта. Полностью переписывать файл header.php не нужно.

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

При этом логотип создавать не нужно. Вместо него оставь подготовленное место с корректной HTML-разметкой и классами, чтобы позже можно было легко вставить собственный логотип сайта через тег img, указав адрес картинки в параметр src.

Меню должно использовать стандартный механизм WordPress. Необходимо реализовать вывод меню через функцию WordPress таким образом, чтобы все пункты можно было редактировать через административную панель сайта без изменения кода. При добавлении новых страниц или изменении структуры меню изменения должны автоматически отображаться в шапке сайта. При этом меню должно быть адаптивным и при уменьшении ширины экрана переходить в кнопку “бургер” средствами css.

Шрифты необходимо определить по загруженному макету или подобрать максимально похожие. Подключение шрифтов можно выполнить через Google Fonts или другую внешнюю библиотеку. В коде CSS обязательно укажи строку подключения выбранного шрифта, чтобы её можно было вставить в файл style.css вместе с остальными стилями хедера.

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

В результате необходимо получить три отдельных блока кода:

• Код для functions.php, если требуется регистрация меню WordPress.
• HTML/PHP-фрагмент для вставки в файл header.php в место, заранее оставленное для кода шапки.
• CSS-код для вставки в файл style.css, включая подключение шрифтов и адаптивные стили.

Не создавай полный файл header.php заново. Нужен только фрагмент видимой части хедера и сопутствующий код, который требуется для его корректной работы внутри WordPress.

В результате нейросеть должна выдать несколько частей кода. Обычно это три отдельных блока, которые нужно вставить в разные файлы темы WordPress.

Первый блок — код для файла functions.php. Он нужен для регистрации меню WordPress, которое затем будет выводиться в хедере сайта. Благодаря этому пункты меню можно будет редактировать через административную панель, не меняя код вручную.

Если в вашем проекте меню в шапке не используется, этот этап можно пропустить. В таком случае соответствующий фрагмент промпта лучше убрать заранее, а код в functions.php не добавлять.

Второй блок — HTML и PHP-код самого хедера. Его необходимо вставить в файл header.php в то место, где ранее был оставлен комментарий для будущего кода шапки сайта. Именно этот фрагмент отвечает за вывод логотипа, навигации и остальных элементов верхней части страницы.

Третий блок — CSS-код. Его нужно добавить в файл style.css. Этот код отвечает за внешний вид хедера: расположение элементов, отступы, цвета, размеры, адаптивность и поведение шапки на разных устройствах.

Установка логотипа

После того как код хедера добавлен в файл header.php, необходимо подключить изображение логотипа. Для этого сначала загружаем файл логотипа в WordPress.

В административной панели открываем раздел «Медиафайлы» → «Добавить медиафайл» и загружаем изображение логотипа с компьютера.

Далее переходим в раздел «Медиафайлы» → «Медиатека», находим загруженный логотип и открываем его. В карточке файла нажимаем кнопку «Скопировать URL в буфер». Так мы получим прямую ссылку на изображение, которую будем использовать в коде хедера.

После этого возвращаемся в раздел «Внешний вид» → «Редактор тем», открываем файл header.php и находим в коде место, где должен выводиться логотип. Это проще всего сделать, задав в поиске по странице слово “src”.

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

После сохранения файла логотип начнёт отображаться в шапке сайта.

Вёрстка футера

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

Для этого используем следующий промпт:

Мне необходимо сверстать видимую часть футера для собственной темы WordPress на основании загруженного макета дизайна.

Ранее базовая техническая структура файла footer.php уже была создана. Сейчас нужно подготовить только тот фрагмент HTML/PHP-кода, который будет вставлен внутрь файла footer.php в заранее оставленное место для кода подвала сайта. Полностью переписывать файл footer.php не нужно.

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

Если в футере используется логотип, сделай его через обычный тег img с атрибутом src, чтобы позже можно было указать путь к загруженному изображению логотипа. Сам логотип создавать не нужно — необходимо только подготовить место для его вывода в разметке.

Если в футере присутствуют меню или списки ссылок, реализуй их в виде корректной HTML-разметки. Если требуется подключение стандартного меню WordPress, укажи отдельный блок кода для регистрации и вывода такого меню.

Шрифты необходимо определить по загруженному макету или подобрать максимально похожие. Подключение шрифтов можно выполнить через Google Fonts или другую внешнюю библиотеку. В CSS обязательно укажи строку подключения выбранного шрифта, чтобы её можно было вставить в файл style.css вместе с остальными стилями футера.

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

В результате необходимо получить отдельные блоки кода:

• HTML/PHP-фрагмент для вставки в файл footer.php в место, заранее оставленное для кода подвала сайта.
• CSS-код для вставки в файл style.css, включая подключение шрифтов и адаптивные стили.
• Код для functions.php, если потребуется регистрация меню WordPress.

Не создавай полный файл footer.php заново. Нужен только фрагмент видимой части футера и сопутствующий код, который требуется для его корректной работы внутри WordPress.

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

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

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

Как и в случае с хедером, на выходе нейросеть обычно создаёт несколько отдельных блоков кода. Один из них предназначен для файла footer.php, второй содержит стили для style.css, а третий может включать дополнительный код для functions.php, если это требуется для корректной работы отдельных элементов.

Далее полученные фрагменты необходимо разместить в соответствующих файлах темы по той же схеме, которую мы использовали при создании хедера. Код подвала вставляется в файл footer.php в место ранее оставленного комментария, стили добавляются в style.css, а дополнительный PHP-код при необходимости размещается в functions.php.

Установка логотипа

Поскольку изображение логотипа было загружено в WordPress на предыдущем этапе, остаётся только вставить его URL-адрес в соответствующую строку кода внутри файла footer.php. После сохранения изменений логотип автоматически начнёт отображаться как в шапке, так и в подвале сайта.

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

Создание оболочек страниц

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

Такой подход позволяет сразу сформировать архитектуру сайта и избежать ситуации, когда новые страницы приходится создавать уже в процессе разработки. Кроме того, нейросети гораздо проще работать с проектом, когда структура файлов изначально подготовлена.

Для нашей финансовой витрины будут использоваться следующие шаблоны страниц:

front-page.php — шаблон главной страницы сайта. Здесь будут размещаться основные разделы витрины, лучшие предложения и другая ключевая информация.

page.php — универсальный шаблон информационных страниц. Через него будут выводиться такие страницы, как «О нас», «Контакты», «Политика конфиденциальности», «Пользовательское соглашение» и другие текстовые разделы сайта.

page-mfo.php — шаблон страницы со списком финансовых предложений. В нашем случае через него будет выводиться каталог МФО и другие страницы со списками офферов.

single-offer.php — шаблон карточки отдельного оффера. Именно здесь будет отображаться информация о конкретном финансовом предложении: логотип, рейтинг, параметры займа, описание и кнопка перехода к рекламодателю.

single.php — шаблон отдельной записи блога или новости. Его можно использовать для публикации информационных материалов, например статей о выборе займов, кредитных карт или других финансовых продуктов.

archive.php — шаблон архива записей. Через него будет выводиться список всех опубликованных статей и новостей сайта.

search.php — шаблон страницы результатов поиска. Он используется в тех случаях, когда посетитель выполняет поиск по содержимому сайта.

404.php — шаблон страницы ошибки 404. Он отображается в случаях, когда пользователь переходит по несуществующему адресу или удалённой странице.

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

Используя один и тот же подход, мы будем последовательно создавать оболочки для каждой страницы сайта. На данном этапе нам важно получить не финальную вёрстку, а корректную основу файлов, которую в дальнейшем будем постепенно наполнять функционалом и элементами дизайна.

Для генерации оболочек будем использовать один универсальный промпт. В нём достаточно менять название файла, для которого создаётся шаблон. Например, если сейчас нужно подготовить главную страницу, указываем front-page.php. Если создаём страницу отдельного оффера — указываем single-offer.php.

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

Текст промпта:

Мне необходимо создать базовую оболочку шаблона WordPress для файла [УКАЗАТЬ НАЗВАНИЕ ФАЙЛА: front-page.php, page.php, page-mfo.php, single-offer.php, single.php, archive.php, search.php или 404.php].

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

Шаблон должен быть подготовлен для собственной темы WordPress и обязательно содержать:

• подключение хедера через get_header(); в верхней части файла;
• подключение футера через get_footer(); в нижней части файла;
• основную область страницы между хедером и футером;
• общий контейнер контента с едиными классами, которые можно использовать на всех шаблонах сайта;
• вывод хлебных крошек Yoast SEO на всех страницах, кроме front-page.php;
• корректную PHP-структуру, соответствующую типу создаваемого шаблона;
• HTML-разметку базовой оболочки страницы;
• CSS-код для оформления только новых элементов, которые ещё не были описаны ранее.

Для хлебных крошек используй стандартный вывод Yoast SEO:

Хлебные крошки не нужно выводить на главной странице front-page.php. На всех остальных шаблонах они должны присутствовать в верхней части основной области контента.

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

Фактически результат должен представлять собой каркас страницы, который в дальнейшем будет наполняться отдельными элементами дизайна и функционала.

Логика шаблона должна соответствовать названию файла:

• front-page.php — оболочка главной страницы без хлебных крошек.
• page.php — оболочка универсальной текстовой страницы.
• page-mfo.php — оболочка страницы со списком офферов. Наверх добавить код

/**

* Template Name: Каталог офферов

*/

чтобы это был отдельный шаблон Wordpress

single-offer.php — оболочка карточки отдельного оффера.

single.php — оболочка отдельной записи блога или новость. Нужно вывести заголовок, дату публикации, миниатюру при наличии и основной контент записи.

archive.php — оболочка архива записей. Нужно создать структуру списка материалов с миниатюрой, заголовком, кратким описанием и ссылкой на полную запись

search.php — оболочка страницы результатов поиска. Нужно вывести поисковый запрос, список найденных материалов и сообщение на случай, если результатов нет.

404.php — страница ошибки. Нужно вывести сообщение о том, что страница не найдена, краткое пояснение и ссылку на главную страницу.

Если для выбранного шаблона требуется WordPress Loop, добавь его в корректном виде. Если шаблон должен выводить статическое место под будущие блоки, оставь понятные комментарии, куда позднее будет вставляться код.

В результате выдай код отдельными блоками:

1. PHP/HTML-код для вставки в файл.

2. CSS-код для вставки в style.css, только если для этого шаблона нужны новые стили.

Далее остаётся последовательно менять в промпте название необходимого шаблона и повторять описанную выше процедуру для каждого файла темы.

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

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

Важно обратить внимание, что практически после каждой генерации нейросеть создаёт не только код самого шаблона, но и дополнительные CSS-стили. Поэтому работа обычно состоит из двух этапов: сначала обновляется код конкретного файла страницы, а затем полученные стили добавляются в файл style.css. Как правило, ChatGPT отдельно указывает, в какой файл необходимо вставить каждый фрагмент кода, поэтому запутаться в этом процессе достаточно сложно.

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

Примерно так выглядела главная страница нашего сайта после этого этапа

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

Заключение

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

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

Желаем вам превратить подготовленную структуру в полностью рабочую витрину с минимальными затратами времени!
Команда Saleads.pro