Окружение для разработки Docker, Composer, PSR-4, WP

Добрый день сегодня я начал вести свой YouTube канал и серию видео по созданию плагина для WordPress.

Что в будущем будет делать наш плагин?

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

Первое видео рассказывает о том как я настраиваю окружение для разработки.

И так начнем!

Первое что нам нужно зайти на сайт https://www.docker.com/ скачать и установить на свой компьютер.

Для следующего шага нам нужно глобально установить Composer он нам нужен для автоматического импорта наших будущих классов по стандарту PSR-4 (о этом стандарте вы можете прочитать тут https://www.php-fig.org/psr/psr-4/ ).

Что бы скачать и установить Composer следуйте инструкциям на официальном сайте https://getcomposer.org/doc/00-intro.md нам нужна именно глобальная установка.

И так следующий шаг нам нужно клонировать данный репозиторий Docker image   https://github.com/wodby/docker4wordpress

У вас могут быть с ним проблемы потому что у меня он отказался работать на Mac OS поэтому мне пришлось его немного изменить если вы столкнулись с такой же проблемой клонируйте мою версию по данной ссылке https://gitlab.com/AlsconWeb/wordpress-dev-environment-docker

И так вся подготовка к старту уже позади и мы можем начинать!

Перейдите в папку с проектом в моем случае это car-listing и скопируйте туда следующие файлы с репозитория выше

1. .env
2. docker.mk
3. docker-compose.yml
4. Makefile
5. docker

Теперь нам нужно настроить .env

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

PROJECT_NAME // отвечает за имя проекта в докере 
PROJECT_BASE_URL // Url по которому будет доступен наш сайт в моем случае carlisting.docker.localhost

DB_NAME // имя создаваемой базы данных (Я делаю ее по имени проекта)
DB_USER // имя пользователя базы данных (Я делаю ее по имени проекта)
DB_PASSWORD // пароль к базе данных (Я делаю ее по имени проекта)

Так же я меняю версию PHP с стандартной 7.4 на 8.0

PHP_TAG=8.0-dev-macos-4.22.2

Теперь нам нужно перейти в эту папку и выполнить команду make  и дождаться пока команда выполнится все изображения сказаться и подключится

Дальше нам нужно загрузить WP для этого нам нужно просто выполнить команду make wp core download – эта стандартная команда wp-cli но нам ее нужно выполнять с командой make что бы докер понимал что образ ему нужно установить.

Выполняем и ждем когда команда выполнится.

Следующий шаг нам нужно перейти в папку app и изменить имя файла wp-config-sampel.php на wp-config.php

Открываем его на редактирование  

И установить доступы к базе данных те которые вы настроили в файле  .env

Главный момент в нужно поменять

define( 'DB_HOST', 'localhost' );

на

define( 'DB_HOST', 'mariadb' ); // 'mariadb' Это имя контейнера докер

Дальше генерируем ключи для сайта https://api.wordpress.org/secret-key/1.1/salt/
И вставляем их дальше стандартная установка WordPress
Следующим шагом нам нужно создать папку нашего плагина в папке /wp-content/plugins я ее назвал ease-car-listing. 

Настройки Composer

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

Результатом выполнение этой команды у нас должен появится файл composer.json

Открываем его на редактирование и добавляем нужную информацию 

"description": "Ease car listing for your site",
"license": "GPL-2.0-only",

Добавляем описание и вид лицензии

"homepage": "https://i-wp-dev.com/", - домашняя страница пакета

"type": "wordpress-plugin", - тип пакета (если это плагин) или wordpress-theme если это тема 

"support": {

    "issues": https://i-wp-dev.com/ - урл где можно оставить замечания 

},

"prefer-stable": true,

"config": { - говорит composer на какой версии PHP нужно запускать зависимости и проект 

    "platform": {

        "php": "7.4"

    }

},

Главный блок для автоматической загрузки классов нашего проекта

"autoload": {

    "psr-4": {

        "Iwpdev\\EaseCarListing\\": "src/php" // Это значит что все наши классы будут лежать в папке src/php

    }

},

Минимальная стабильная версия я обычно ставлю значение dev

"minimum-stability": "dev",

Дальше у нас есть зависимости для разработки это очень важный блок для работы PHP_CodeSniffer

"require-dev": {

    "roave/security-advisories": "dev-latest",

    "squizlabs/php_codesniffer": "^3.6",

    "phpcompatibility/php-compatibility": "^9.3",

    "phpcompatibility/phpcompatibility-wp": "^2.1",

    "wp-coding-standards/wpcs": "^2.3",

    "php-coveralls/php-coveralls": "^2.4"

}

Вот полный код composer.json

{
    "name": "iwpdev/ease-car-listing",
    "description": "Ease car listing for your site",
    "license": "GPL-2.0-only",
    "keywords": [
        "ease",
        "car",
        "listing",
        "car listing",
        "ease car listing",
        "ukrane product"
    ],
    "homepage": "https://i-wp-dev.com/",
    "type": "wordpress-plugin",
    "support": {
        "issues": "https://i-wp-dev.com/"
    },
    "prefer-stable": true,
    "config": {
        "platform": {
            "php": "7.4"
        }
    },
    "autoload": {
        "psr-4": {
            "Iwpdev\\EaseCarListing\\": "src/php"
        }
    },
    "authors": [
        {
            "name": "iwpdev",
            "email": "iwpdev@outlook.com"
        }
    ],
    "minimum-stability": "dev",
    "require": {
        "htmlburger/carbon-fields": "^3.3"
    },
    "require-dev": {
        "roave/security-advisories": "dev-latest",
        "squizlabs/php_codesniffer": "^3.6",
        "phpcompatibility/php-compatibility": "^9.3",
        "phpcompatibility/phpcompatibility-wp": "^2.1",
        "wp-coding-standards/wpcs": "^2.3",
        "php-coveralls/php-coveralls": "^2.4"
    }
}

Добавляем данные зависимости и выполняем команду composer update

Настройка PHP Storm

Дальше мы переходим к настройкам PHP_CodeSniffer, открываем настройки PHP Storm  переходим в Preferences | PHP | Quality Tools раскрываем  PHP_CodeSniffer нажимаем на троеточие в настройках  PHP_CodeSniffer path мы должны добавить файл котрый находится  /vendor/bin/phpcs (в случае с Windows это будет файл с расширение bat )

Нажимаем  на кнопку валедировать и мы должны получить результат как на моем скрине

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

Теперь нам нужно добавить файл который будет отвечать за авто исправление. Он находится чуть ниже в поле Path to phpcbf и мы выбираем в той же капке этот файл

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

Я использую кастомный который мне предоставил мой друг и этот стандарт используется в многих крупных студия которые занимаются разработкой для WordPress

В Coding standard я выбираю кастомный и у указываю путь к этому файлу который я заранее скопировав его в корень  плагина это файл вы можете найти по данной ссылке https://codeshare.io/oQYERp поле этого мы просто сохраняем настройки.

И так мы добрались до самого кода.

Главный файл плагина

Я создал главный файл плагина где будет инициализация самого плагина Выглядит он так

<?php
/**
 * Ease Car Listing.
 *
 * @package           iwpdev/ease-car-listing
 * @author            Alex Lavyhin
 * @license           GPL-2.0-or-later
 * @wordpress-plugin
 *
 * Plugin Name: Ease Car Listing.
 * Plugin URI: https://i-wp-dev.com
 * Description: Ease car listing for your site
 * Version: 1.0.0
 * Author: ALex Lavyhin
 * Author URI: https://i-wp-dev.com
 * License: GPL2
 *
 * Text Domain: key-crm-synchronization
 * Domain Path: /languages
 */

if ( ! defined( 'ABSPATH' ) ) {
	// @codeCoverageIgnoreStart
	exit;
	// @codeCoverageIgnoreEnd
}

use Iwpdev\EaseCarListing\Admin\Notification\Notification;
use Iwpdev\EaseCarListing\Main;


/**
 * Plugin version.
 */
const ECL_VERSION = '1.0.0';

/**
 * Plugin path.
 */
const ECL_PATH = __DIR__;

/**
 * Plugin main file
 */
const ECL_FILE = __FILE__;

/**
 * Min ver php.
 */
const ECL_PHP_REQUIRED_VERSION = '7.4';

/**
 * Plugin url.
 */
define( 'ECL_URL', untrailingslashit( plugin_dir_url( ECL_FILE ) ) );

/**
 * Check php version.
 *
 * @return bool
 * @noinspection ConstantCanBeUsedInspection
 */
function is_php_version(): bool {
	if ( version_compare( constant( 'KEY_CRM_SYNCHRONIZATION_PATH' ), phpversion(), '>' ) ) {
		return false;
	}

	return true;
}

if ( ! is_php_version() ) {

	add_action( 'admin_notices', [ Notification::class, 'php_version_nope' ] );

	if ( is_plugin_active( plugin_basename( constant( 'ECL_FILE' ) ) ) ) {
		deactivate_plugins( plugin_basename( constant( 'ECL_FILE' ) ) );
		// phpcs:disable WordPress.Security.NonceVerification.Recommended
		if ( isset( $_GET['activate'] ) ) {
			unset( $_GET['activate'] );
		}
	}

	return;
}


require_once ECL_FILE . '/vendor/autoload.php';

new Main();

Класс Carbone Fields

Так же я создал класс для управление Carbone Fields но это просто заготовка которую мы будем делать в следующем видео и статье

/**
 * Add Custom fields in project.
 *
 * @package iwpdev/ease-car-listing
 */

namespace Iwpdev\EaseCarListing;

/**
 * CarboneFields class file.
 */
class CarboneFields {

	/**
	 * CarboneFields construct.
	 */
	public function __construct() {
		$this->init();
	}

	/**
	 * Init hooks.
	 *
	 * @return void
	 */
	private function init(): void {

	}
}

Класс AddCPT

И создал заготовку для создание Custom post type  

<?php
/**
 * Add Custom fields in project.
 *
 * @package iwpdev/ease-car-listing
 */

namespace Iwpdev\EaseCarListing;

/**
 * CarboneFields class file.
 */
class CarboneFields {

	/**
	 * CarboneFields construct.
	 */
	public function __construct() {
		$this->init();
	}

	/**
	 * Init hooks.
	 *
	 * @return void
	 */
	private function init(): void {

	}
}

Вот как выглядит дерево моего проекта сейчас

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