Натяжка проекта на WordPress старый документ

Требования: php > 8.2, composer

Подготовка окружения к натяжке

Установка BedRock

1. Подключаемся по ssh к дев серверу и устанавливаем wordpress на базе bedrock через composer:

composer create-project roots/bedrock .

2. Скопируйте env.example и на его основе создайте .env, куда необходимо прописать все необходимые переменные среды:

DB_NAME - Имя базы данных
DB_USER - Пользователь базы данных
DB_PASSWORD - Пароль базы данных
DB_HOST - Хост базы данных

WP_ENV - development (в соответствии в оскружающей средой)
WP_HOME - https://example.com
WP_SITEURL - https://example.com/wp

Соли ниже генерируется здесь (Env Format)

AUTH_KEY, SECURE_AUTH_KEY, LOGGED_IN_KEY, NONCE_KEY, AUTH_SALT, SECURE_AUTH_SALT, LOGGED_IN_SALT,NONCE_SALT

3. Установите папку Bedrock в качестве корневого каталога документов на вашем веб-сервере web:/path/to/site/web/

Заведение новой темы

Добавьте тему в web/app/themes/

1. Создайте папкус названием вашей темы
2. Внутрои папки с темой создайте пустой файл index.php и style.css

Первичная настройка админки

Доступ к админке WordPress по адресу: https://example.com/wp/wp-admin/

1. Перейдине во вкладку внешний вид->темы и выберите созданную ранее тему, активируйте ее
2. Переходим в настройки->чтение и изменяем пункт “на главной странице отображать”. Выбираем статическую страницу и определяем ее как главную
3. Переходим в настройки->постоянные ссылки и изменяем формирование роутов в зависимости от требований проекта (обычно указывается произвольно /%category%/%postname%/)

Установка необходимых в разработке плагинов

Устанавливать плагины можно как вручную из админки, так и при помощи composer. Так же плагины могут быть доступными и недоступными из админпанели (mu плагины).

Список обязательных плагинов для каждого проекта:

1. Classic Editor - Автор: WordPress Contributors [classic-editor]
2. Cyr-To-Lat - Автор: Sergey Biryukov, Mikhail Kobzarev, Igor Gergel [cyr2lat]
3. Yoast SEO - Автор: Team Yoast [wordpress-seo]
4. SVG Support - Автор: Benbodhi [svg-support]
5. Duplicate Page - Автор: mndpsingh287 [duplicate-page]

Помогающие в разработке плагины (рекоммендуются): 6. [ ] Query Monitor - Автор: John Blackbourn [query-monitor] 7. [ ] WP phpMyAdmin - Автор: Puvox.software [wp-phpmyadmin-extension]

Плагин для настройки smtp сервера 8. [ ] WP Mail SMTP от WPForms - Автор: WP Mail SMTP [wp-mail-smtp]

Плагин для интернет-магазина 9. [ ] WooCommerce - Автор: Automattic [woocommerce]

Поставим необходимые плагины через зависимости composer. Для этого деобходимо отредактировать composer.json, добавив в него зависимости на необходимые пакеты в виде namespase/название плагина ^минимальная версия. Добавляем в require

 "wpackagist-plugin/classic-editor": "^1.6"
 "wpackagist-plugin/cyr2lat": "^6.1"
 "wpackagist-plugin/wordpress-seo": "^23.2"
 "wpackagist-plugin/svg-support": "^2.5"
 "wpackagist-plugin/duplicate-page": "^4.5"
 "wpackagist-plugin/query-monitor": "^3.16"
 "wpackagist-plugin/wp-phpmyadmin-extension": "^5.2.1"

Так же для всех проектов обязательно устанавливать ACF, но его можно загрузить только лишь как zip архив. Последняя версия ACF

Натяжка верстки

План действий

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

На основе анализа можно составить приблезительный план по натяжке проекта. Он должен подчиняться логике “идем от общего к частному”.

Архитектура проекта

Тема для проекта обязана подчиняться определенной структуре организации файлов в теме:

img
style
js
...
(могут быть разные вспомогательные директории, идущие с версткой)
html
    - .html
    ...
templates
    -breadcrumbs.php
    ...
-index.php
-style.css
-header.php
-footer.php
-front-page.php
-functions.php
-page.php
-category.php
...

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

Статичная информация

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

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

1. Разделите страницу на части: хедер, контент страницы, футер

Разделенный код index.php на 3 файла:

header.php

<!doctype html>
...
(до окончания верстки хедера)

Чтобы произошла магия подключения wp, перед закрывающим тегом необходмо добавить wp_head()

footer.php

(код футера)
...
</html>

Перед закрывающим тегом необходмо добавить wp_footer()

front-page.php

wp-header()
...
(Код контента страницы)
...
wp-footer()

Через функции wp-header() и wp-footer() вызывайте шаблоны хедера и футера на странице.

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

---

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

?? , если возвращается null,

?: , если возвращается ' ' или false

---

2. Выделите все панели навигации, которые находятся на сайте

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

Шаблоны (templates)

При создании шалона необходимо:

1. Вынести код будущего шаблона в отдельный файл .php в директории templates
2. В шаблоне страницы вместо кода добавить функцию wp

get_templates_part('templates/template_name')

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

$args = [
    'productId' => index,
];
get_templates_part('templates/template_name', null, $args)

Тогда в скрипте template_name.php получитиь эти переменные можно, обращаясь к массиву аргументов $args(данная переменная зарезервированная и постоянная!)

$productId = $args['productId'] ?? 0;

Примеры компонентов, выносимых в templates:

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

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

Статичные страницы

Статичные страницы имеют свой шаблон wp: page-slug_страницы.php

1. Добавляем на страницу header и footer через функции wp.
2. Выводим контент страницы
3. Текстовые страницы должны выводится через текстовый редактор, в виде текста, обернутого простыми тегами:

<h>, <p>, <ul> и тд

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

---

Полезные функции:

get_permalink() - ссылка на страницу
the_title() - заголовок страницы
get_the_post_thumbnail_url() - путь к картинке записи
get_queried_object - получение объекта страницы
the_content() - получить контентсную часть страницы (если она в стандартном текстовом редакторе)

---

Рубрики

Рубрика - это страница, на которой выводится список записей. Так же она отображается во вложенности записей в url и хлебных крошках (прим. услуги - конкретная услуга).

Рубрики имеют свой шаблон wp: category-slug_страницы.php

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

---

Полезные функции:

get_queried_object - получение объекта рубрики
get_term_link() - ссылка на рубрику
get_field('field_slug', 'categoty_' . $category_id) - получения поля ACF рубрики
get_categories([]) - получить категории

---

Страница магазина

При установке woocommerce, плагин автоматически создает некоторые страницы, в том числе и страницы магазина (shop). Шаблон страницы - archive-product.php

К ней наеобходимо всегда обращаться как к странице магазина (is_shop())

Страницу магазина можно задать вручную, для этого необходимо перейти на вкладку woocommerce->настройки->товары и выбрать в селекте “Страница Магазина” нужную.

Категории

Категории - тот же объект wp, что и рубрики, но объединенные другой таксономией (product_cat вместо category). Из-за этого к ним всегда нужно обращаться функциями таксономий(в названии term) ,а не рубрик(в названии category).

Шаблон у них тоже свой: taxonomy_product_cat.php

Записи

Товары

Атрибуты и данные товара WooCommerce

Корзина товаров WooCommerce

Постраничная навигация

Сортировка

Фильтрация

Формы обратной связи

Рассылка писем на почту

Работа с комментариями

Страница поиска

Поиск по странице

Страница оформления заказа

Полезные хуки

Написание кастомных сервисов

Общие штуки

Сравнение товаров

Выгрузки и получение данных по стороннему api

Хуки и скрипты для изменения админки

Написание api