Создание финансовой витрины с помощью ИИ. Часть 5. Создание шаблонов страниц и наполнение кодом

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Основное меню сайта

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

В предыдущем материале мы также создали страницу «МФО» и показали, как по аналогии можно подготовить страницы для остальных финансовых продуктов. Используя тот же подход, были созданы разделы «Кредиты», «Кредитные карты» и «Дебетовые карты».

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

Для этого в административной панели WordPress переходим в раздел «Внешний вид» → «Меню». После чего в левой части выбираем необходимые страницы и добавляем их в состав меню.

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

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

Главная страница

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

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

В нашем случае выглядит это примерно так:

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

Именно эти элементы мы и будем постепенно переносить в WordPress.

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

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

Создание баннера

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

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

Картинка

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

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

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

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

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

Сгенерируй изображение на прозрачном фоне (PNG) без каких-либо рамок, теней или декоративных элементов за пределами самой иллюстрации.

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

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

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

Вёрстка

Для написания кода открываем ранее созданный макет главной страницы и делаем скриншот только области баннера. Именно он будет использоваться в качестве образца для нейросети.

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

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

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

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

Создай только содержимое баннера без зависимости от родительских блоков.

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

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

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

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

1. HTML-код для вставки в шаблон front-page.php.
2. CSS-код для добавления в файл style.css.
3. При необходимости кратко укажи, куда необходимо вставить путь к изображению баннера.

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

После получения результата сначала добавляем CSS-код в файл style.css, а HTML-разметку вставляем непосредственно в редактор главной страницы.

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

После этого открываем раздел «Медиафайлы» → «Медиатека», находим загруженную иллюстрацию, открываем её и нажимаем кнопку «Скопировать URL в буфер».

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

Проверка

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

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

Блок финансовых продуктов

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

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

После этого просим нейросеть максимально точно повторить внешний вид данного элемента и подготовить код для его размещения на сайте.

Для генерации используем следующий промпт.

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

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

Создай только данный блок без привязки к родительским блокам.

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

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

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

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

1. HTML-код для вставки в код главной страницы.
2. CSS-код для добавления в файл style.css.
3. Дополнительно укажи куда именно в коде вставить адреса картинок и ссылки на страницы

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

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

Примеры иконок, созданных таким образом

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

После этого остаётся заменить временные ссылки в HTML-коде на адреса созданных ранее страниц финансовых продуктов — «МФО», «Кредиты», «Кредитные карты» и «Дебетовые карты». После сохранения изменений блок начнёт корректно отображаться на главной странице и станет полноценным элементом навигации по финансовой витрине.

Блок с предложениями

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

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

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

Как и ранее, всю необходимую логику мы создадим с помощью ChatGPT.

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

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

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

При этом блок должен работать динамически внутри WordPress.

Необходимо реализовать следующую архитектуру:

• HTML-разметку блока;
• CSS для оформления;
• PHP-код для файла functions.php;
• регистрацию шорткода.

Карточки должны выводиться автоматически из WordPress.

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

Тип записи и заголовок блока должны передаваться в параметры шорткода

В результате шорткод должен поддерживать примерно следующий синтаксис:

[home_products_sections]

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

Кнопка должна вести на ссылку, указанную в карточке оффера.

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

1. PHP-код для functions.php.
2. Используемый шорткод.
3. CSS-код для файла style.css.

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

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

Ответы на вопросы, преимущества и SEO-текст

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

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

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

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

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

Блок должен быть полностью независимым от остальных элементов страницы.

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

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

HTML-код для вставки в шаблон страницы.
CSS-код для добавления в файл style.css.

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

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

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

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

Важное уточнение

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

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

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

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

Внутренние страницы сайта

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

К таким страницам относятся, например, «О нас», «Контакты», «Политика конфиденциальности» и другие аналогичные разделы.

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

Для этого переходим в раздел «Страницы» → «Добавить страницу», указываем название и при необходимости изменяем её адрес (URL), если автоматически сформированный вариант нас не устраивает.

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

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

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

Напиши текст для страницы «О нас» финансовой витрины. Текст должен быть сразу оформлен в HTML с использованием корректной семантической разметки. Используй заголовки, абзацы, списки и другие необходимые HTML-теги. Не добавляй CSS, JavaScript или лишний код. На выходе должен получиться готовый HTML, который можно сразу вставить в редактор WordPress.

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

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

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

Записи и рубрики

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

Именно через записи обычно ведутся разделы «Новости», «Статьи», «Полезные советы», «Обзоры» и любой другой информационный контент. В отличие от страниц, записи могут объединяться в рубрики, что значительно упрощает их сортировку и навигацию по сайту.

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

Если тематических материалов на сайте планируется много, имеет смысл заранее создать несколько рубрик. Сделать это можно в разделе «Записи» → «Рубрики». Например, для финансовой витрины можно использовать рубрики «Новости», «Советы», «Обзоры», «Инструкции» и любые другие категории, которые будут удобны именно для вашего проекта.

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

Для создания новой рубрики необходимо ввести ее название и нажать кнопку «Добавить рубрику».

Для добавления новой записи необходимо перейти в раздел «Записи» → «Добавить запись», указать её заголовок и выбрать рубрику, к которой она будет относиться.

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

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

Пример записи на сайте

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

Заключение

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

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

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

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

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