Как и почему мы разрабатываем сайты для крупных клиентов на WordPress?

Как и почему в 2024 году мы разрабатываем сайты для крупных клиентов на WordPress?

Сегодня WordPress — один из лучших бесплатных инструментов на рынке. Как и многие IT-компании, мы начинали с разработки сайтов на коробочных решениях с низким порогом входа. Расширив экспертизу и собрав мощную команду, мы научились профессионально «готовить» WordPress и теперь грамотно используем его, чтобы облегчить жизнь себе и нашим клиентам. Коммерческая разработка присутствует там, где есть хорошие разработчики и мощный менеджмент, а инструменты могут быть любыми.

В этой статье мы расскажем, как строим архитектуру наших приложений на WordPress.

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

Мы подходим к этому максимально ответственно: продумываем архитектуру, применяем особые подходы к разработке и устанавливаем определенные правила:

Первое — мы используем систему готовых блоков и компонентов. У WordPress есть редактор Gutenberg (рассказывали об этом в одной из статей), и практически все страницы формируются из блоков, как в Tilda. Этот же принцип переносим и в построение архитектуры: формируем готовые блоки, shared-компоненты, глобальные пейдж-темплейты, отдельно бизнес-фичи и т.д.
Второе — мы не используем JQL, пишем все на чистом JS с использованием объектно-ориентированного подхода к построению логики. Для создания сложных интерфейсов можем на отдельных страницах прикрутить Vue или React (который на WP доступен из коробки). К тому же в WP доступен REST API, и если у нас нет каких-то методов или эндпоинтов, мы можем легко их добавить.

Структура папок и файлов внутри темы WordPress

Файлы в корне темы:

style.css

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

название темы
версия темы
минимальная версия WordPress
версия PHP

Подробнее тут

theme.json

Настройки темы (настройки типографики, цветовая палитра).

Пример файла настроек theme.json

{
    "version": 1,
    "settings": {
        "typography": {
            "customFontSize": false,
            "lineHeight": true,
            "fontSizes": [
                {
                    "slug": "h1",
                    "size": "6rem",
                    "name": "H1"
                },
                {
                    "slug": "h2",
                    "size": "2.88rem",
                    "name": "H2"
                },
                {
                    "slug": "h3",
                    "size": "1.5rem",
                    "name": "H3"
                },
                {
                    "slug": "text_46",
                    "size": "2.88rem",
                    "name": "Text 46"
                },
                {
                    "slug": "text_24",
                    "size": "1.5rem",
                    "name": "Text 24"
                },
                {
                    "slug": "text_16",
                    "size": "1rem",
                    "name": "Text 16"
                }
            ]
        },
        "spacing": {
            "spacingSizes": [
                {
                    "size": "clamp(1.5rem, 5vw, 2rem)",
                    "slug": "30",
                    "name": "1"
                },
                {
                    "size": "clamp(1.8rem, 1.8rem + ((1vw - 0.48rem) * 2.885), 3rem)",
                    "slug": "40",
                    "name": "2"
                },
                {
                    "size": "clamp(2.5rem, 8vw, 6.5rem)",
                    "slug": "50",
                    "name": "3"
                }
            ],
            "blockGap": true,
            "customPadding": true,
            "customMargin": true,
            "units": [
                "px",
                "rem",
                "%"
            ]
        },
        "color": {
            "palette": [
                {
                    "slug": "black",
                    "color": "#000000",
                    "name": "Black"
                },
                {
                    "slug": "pink",
                    "color": "#F2CFCE",
                    "name": "Pink"
                },
                {
                    "slug": "white",
                    "color": "#ffffff",
                    "name": "White"
                },
                {
                    "slug": "grey",
                    "color": "#A5A5A5",
                    "name": "Grey"
                }
            ]
        }
    }
}

functions.php

Входной файл для всех скриптов php. Тут выполняем объявления глобальных констант, подключение load файла из папки includes (где лежат все основные php скрипты), подключения load файла из папки blocks и components.

header.php

Шаблон шапки сайта. Тут выполняется функцияwp_head(), которая подключает ресурсы и выводит мета-теги.

footer.php

Шаблон подвала сайта. Тут выполняется функцияwp_footer(), которая подключает js-скрипты темы и плагинов.

page.php

Дефолтный шаблон страницы. Как правило, тут выполняется подключение header.php и footer.php c помощью функцийget_header()иget_footer()соответственно.

get_header();if ( have_posts() ) {
    while ( have_posts() ) {
        the_post();
        the_content();
    }
}
get_footer();

package.json

Зависимости приложения.

index.php

Пустой индексный файл.

Папки:

acf-json— Папка для автосохранения конфигов полей и страниц с опциями, созданных плагином Advanced Custom Fields. Это необходимо если разработка ведется в команде, все изменения полей будут отслеживаться в гите.
assets— Тут лежат все стили, скрипты, шрифты и прочие файлы, отвечающие за фронтенд.
blocks— Кастомные gutenberg блоки.
components— Переиспользуемые компоненты.
includes— Папка со всеми скриптами php.
page-templates— Шаблоны страниц.

Theme_folder
├── acf-json
│   ├── group_64c25ae72741a.json
│   └── ...
├── assets
│   ├── css
│   ├── js
│   │   ├── config
│   │   ├── admin.js
│   │   ├── editor.js
│   │   └── index.js
│   └── resource
├── blocks
│   ├── block1
│   │   ├── block.json
│   │   ├── functions.php
│   │   ├── template.php
│   │   ├── _index.scss
│   │   └── _index.js
│   └── load.php
├── components
│   ├── component1
│   │   ├── [component-name].php
│   │   ├── functions.php
│   │   ├── _index.scss
│   │   └── _index.js
│   └── load.php
├── includes
│   ├── [module-name].php
│   └── load.php
├── page-templates
├── footer.php
├── functions.php
├── header.php
├── index.php
├── package.json
├── page.php
├── style.css
└── theme.json

Gutenberg blocks

В этой папке хранятся сами блоки в подпапках и файлload.php, в котором находится функция регистрации всех блоков.

Блок представлен в виде папки со следующими файлами:

block.json— Данные для блока, такие как name, title, и т.д.
template.php— Файл с разметкой блока.
functions.php— PHP функции используемые только в рамках этого блока.
_index.scss— Стили для блока.
_index.js— Скрипты для блока.

{
  "name" : "mytheme/custom-block",
  "title" : "Custom Block",
  "icon": "admin-site",
  "description": "My awesome custom block.",
  "apiVersion": 3,
  "textdomain": "mytheme",
  "supports": {
    "align" : false,
    "mode"  : false,
    "jsx"   : true,
    "anchor": true
  },
  "acf": {
    "mode": "preview",
    "renderTemplate": "./template.php"
  }
}

add_action( 'init', 'mytheme_block_registration' );

function mytheme_block_registration() {
    foreach(glob(THEME_DIR . '/blocks/*', GLOB_ONLYDIR) as $dir){
        register_block_type( $dir );
        $dir_exploded = explode( '/', $dir );
         $block = $dir_exploded[ count( $dir_exploded ) - 1 ];
        //Подключение файла functions.php для каждого блока
        if ( file_exists( get_template_directory() . '/blocks/' . $block . '/functions.php' ) ) {
            include_once get_template_directory() . '/blocks/' . $block . '/functions.php';
        }
    }
}

Components

Примерно такая же концепция, как с gutenberg-блоками, набор компонентов представлен в виде папок со следующими файлами:

[component-name].php
functions.php
_index.scss
_index.js

И файлload.php, который подключает все php скрипты всех компонентов:

foreach(glob(THEME_DIR . '/components/*/functions.php') as $file){
    require_once $file;
}

Используем компоненты с помощью встроенной функцииget_template_part(), куда передаем параметромargsвходные данные:

get_template_part( 'components/checkbox/checkbox', args: [
    'label' => 'Сheckbox label',
    'name'  => 'checkbox-name',
] );

Внутри файла компонента мы обозначаем параметры по умолчанию, затем объединяем их с входными параметрами и распаковываем в переменные, на основе которых и строим разметку:

// Fix PhpStorm inspection on undefined variable.
if ( empty( $args ) ) {
    $args = [];
}$defaults = [
    'label'         => '',
    'checked'       => false,
    'disabled'      => false,
    'custom_class'  => '',
    'id'            => '',
    'name'          => '',
    'value'         => '',
];
// Fill args with defaults to avoid errors.
$args = mytheme_parse_args( $args, $defaults );
// Unpack arguments to variables for better readability.
// Should be in the same order as the keys in $defaults array.
[
    'label'         => $label,
    'checked'       => $checked,
    'disabled'      => $disabled,
    'custom_class'  => $custom_class,
    'id'            => $id,
    'name'          => $name,
    'value'         => $value,
] = $args;

Assets

Все фронтенд-файлы, которые не попали ни в components ни в blocks.

css— Папка с общими стилями, глобальными лэйаутами, переменными и миксинами.
js— Папка с утилитарными js функциями и настройками webpack.
resource— Папка с прочими файлами, такими как картинки, шрифты, видео и т.д.

Вjs/configлежат настройки webpack, они могут отличаться от проекта к проекту, но основной принцип такой, что у нас есть 3 точки входа:

index.js— Основная точка входа, используемая во фронт-енд части приложения.
admin.js— Специфические стили и скрипты для admin-части приложения.
editor.js— Специфические стили и скрипты для области редактирования.

После компиляции создается по 3 css и js файла, которые мы подключаем в соответствующих хуках WordPress.

wp_enqueue_scripts— Стили и скрипты для фронтенда.
enqueue_block_editor_assets— Стили и скрипты для редактора.
admin_enqueue_scripts— Стили и скрипты для админ части сайта.

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

import '../css/style.scss';function importAll(r) {
  r.keys().forEach(r);
}
importAll(require.context('./../../assets/resource/fonts/', true, /.(woff|woff2|eot|ttf|otf)$/));
// Импортируем все файлы js и scss из каждой подпапки 'components'
importAll(require.context('./../../components', true, /.js$/));
importAll(require.context('./../../components', true, /.scss$/));
// Импортируем все файлы js и scss из каждой подпапки 'blocks'
importAll(require.context('./../../blocks', true, /.js$/));
importAll(require.context('./../../blocks', true, /.scss$/));

Такой базовый сетап уже позволяет закрывать 90% задач в рамках разработки кастомной темы для WordPress.

Использование REST API

Для асинхронных запросов чаще всего мы используем WP REST API. Это не единственный способ создать кастомный эндпоинт, но, как показывает практика, самый удобный. Все что нам нужно сделать — это воспользоваться функциейregister_rest_routeв хукеrest_api_initи написать функцию-колбэк, которая будет обрабатывать этот маршрут.

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

add_action( 'rest_api_init', 'wwzrds_news_list_route' );function wwzrds_news_list_route() {
    register_rest_route( 'wwzrds/v1', '/news-list', [
        'methods'             => 'GET',
        'callback'            => 'wwzrds_news_list_route_callback',
        'permission_callback' => '__return_true',
    ] );
}
function wwzrds_news_list_route_callback( WP_REST_Request $request ) {
    $json_params = ! empty( $request['json'] ) ? $request['json'] : null;
if ( ! $json_params ) {
    return new WP_REST_Response( [
        'error' => 'Params are empty',
    ], 400 );
}

$query_args = json_decode( $json_params, true );

if ( ! $query_args ) {
    return new WP_REST_Response( [
        'error' => 'Params are empty',
    ], 400 );
}

$term = ! empty( $request['term'] ) ? $request['term'] : null;
$page = ! empty( $request['page'] ) ? $request['page'] : null;
$tax  = ! empty( $request['taxonomy'] ) ? $request['taxonomy'] : 'technology';

$query_args['tax_query'] = [
    'relation' => 'AND',
];

if ( $term && $term !== 'all' ) {
    $query_args['tax_query']['term'] = [
        'taxonomy' => $tax,
        'terms'    => [ $term ],
        'field'    => 'slug',
    ];
}

if ( $page ) {
    $query_args['paged'] = $page;
}

if ( $query_args['post_type'] !== 'post' || $query_args['post_status'] !== 'publish' ) {
    return new WP_REST_Response( [
        'error' => 'Invalid data',
    ], 400 );
}

$query     = new WP_Query( $query_args );
$max_pages = $query->max_num_pages;
$news      = $query->posts;
wp_reset_query();

$response = [];

if ( ! empty( $news ) ) {
    $response['posts'] = [];
    foreach ( $news as $new ) {
        $response['posts'][] = wwzrds_get_template_string( 'template-parts/components/post-item', [
            'post_id'      => $new->ID,
            'attrs'        => [
                'style'      => 'opacity:1; transform: translateY(0)',
            ],
            'taxonomy'     => $tax,
            'custom_class' => 'news-list__post',
        ] );
    }
    $response['pagination'] = wwzrds_generate_pagination( $page, $max_pages, false );
} else {
    $response['empty'] = wwzrds_get_template_string( 'template-parts/blocks/block-news-list/empty-results' );
}

return new WP_REST_Response( $response, 200 );
}

wwzrds_generate_pagination— Функция, которая формирует разметку пагинации на основе входных данных.

wwzrds_get_template_string— Функция-хелпер, которая возвращает шаблон как строку.

add_action( 'rest_api_init', 'db_user_bank_endpoints' );

/**
 * Get user's bank
 *
 * @param  WP_REST_Request $request Full details about the request.
 * @return array $args.
 **/
function db_user_bank_endpoints( $request ) {
    register_rest_route('wp/v2', 'users/bank', array(
        'methods'             => 'GET',
        'callback'            => 'db_rest_user_bank_handler',
        'permission_callback' => function() {
          return is_user_logged_in();
        },
    ));
}

function db_rest_user_bank_handler( $request = null ) {
    $user     = wp_get_current_user();
    $error    = new WP_Error();

    if ( empty( $user ) ) {
        $error->add( 400, __( 'Invalid user.', 'wp-rest-run' ), ['status' => 400] );
        return $error;
    }

    return new WP_REST_Response( db_calculate_user_store( $user->ID ), 123 );
}

Пример интеграции React-приложения

Сначала в папке темы создаем отдельную папку для файлов виджета, и внутри этой папки инициализируем package.json командой:

npm init

После этого устанавливаем WP Scripts командой:

npm install @wordpress/scripts --save-dev

Открываем package.json и добавляем следующую секцию:

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "wp-scripts build",
    "check-engines": "wp-scripts check-engines",
    "check-licenses": "wp-scripts check-licenses",
    "format": "wp-scripts format",
    "lint:css": "wp-scripts lint-style",
    "lint:js": "wp-scripts lint-js",
    "lint:md:docs": "wp-scripts lint-md-docs",
    "lint:md:js": "wp-scripts lint-md-js",
    "lint:pkg-json": "wp-scripts lint-pkg-json",
    "packages-update": "wp-scripts packages-update",
    "plugin-zip": "wp-scripts plugin-zip",
    "start": "wp-scripts start",
    "test:e2e": "wp-scripts test-e2e",
    "test:unit": "wp-scripts test-unit-js"
},

В той же папке добавляемwebpack.config.js:

const defaults = require('@wordpress/scripts/config/webpack.config');module.exports = {
    ...defaults,
    externals: {
        react: 'React',
        'react-dom': 'ReactDOM',
    },
};

Вindex.jsбудем использовать методrenderне из ReactDom, а изwp.element, в остальном это будет обычное react приложение:

const { render } = wp.element; // we are using wp.element here!
import App from './calculator/components/App';// check if element exists before rendering
const appElement = document.getElementById('calculator-app');
if (appElement) {
    render(<App />, appElement);
}

ВApp.jsпоместим основное react приложение. Если нам необходимо импортировать что-то из React или ReactDOM, то импортируем это изwp.element, например:

const { useState, useEffect } = wp.element;

При подключении react приложения в WordPress указываем зависимость от'wp-element':

add_action('wp_enqueue_scripts', 'calc_react_app');
function calc_react_app()
{
    $calc_script_url = THEME_URL . '/calculator/build/index.js';
    $calc_script_path = THEME_DIR . '/calculator/build/index.js';
    wp_enqueue_script(
        'my_react_app',
        $calc_script_url, // This refer to the built React app
        ['wp-element'], //This dependency indicates that you need React at Frontend
        filemtime($calc_script_path) // This could be changed to the theme version for production
    );
}

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

Конечно, многие скажут, что надо писать фронт на Vue или React целиком, получать данные по REST API и т.д. — и мы частично согласны, но каждая задача требует индивидуального подхода, в том числе и в выборе наиболее подходящего инструмента для ее реализации. Подписывайтесь на соцсети We Wizards и читайте о том, как мы делаем Headless WordPress + Vue/React в следующих статьях.

Давайте зажжем
вместе?

Как и почему в 2024 году мы разрабатываем сайты для крупных клиентов на WordPress?

Структура папок и файлов внутри темы WordPress

style.css

theme.json

functions.php

header.php

footer.php

page.php

package.json

index.php

Папки:

Gutenberg blocks

Components

Assets

Использование REST API

Пример интеграции React-приложения

Обсудим ваш проект

Давайте зажжемвместе?

Как и почему мы разрабатываем сайты для крупных клиентов на WordPress?

Как и почему в 2024 году мы разрабатываем сайты для крупных клиентов на WordPress?

Структура папок и файлов внутри темы WordPress

style.css

theme.json

functions.php

header.php

footer.php

page.php

package.json

index.php

Папки:

Gutenberg blocks

Components

Assets

Использование REST API

Пример интеграции React-приложения

Обсудим ваш проект

Давайте зажжем
вместе?