Środowisko programistyczne: Docker, Composer, PSR-4, WordPress

Dzień dobry! Dzisiaj uruchomiłem swój kanał na YouTube oraz serię filmów poświęconą tworzeniu wtyczki dla WordPressa.

Co w przyszłości będzie robić nasza wtyczka?

Będzie umożliwiać przekształcenie Twojej strony w kompletny salon samochodowy.

Pierwszy film dotyczy konfiguracji środowiska programistycznego.

Zaczynajmy!

Pierwszą rzeczą, którą musimy zrobić, jest przejście na stronę https://www.docker.com/, a następnie pobranie i zainstalowanie Dockera na komputerze.

W kolejnym kroku musimy zainstalować globalnie Composera. Będzie nam potrzebny do automatycznego ładowania naszych przyszłych klas zgodnie ze standardem PSR-4. Więcej informacji na temat tego standardu znajdziesz tutaj: https://www.php-fig.org/psr/psr-4/.

Aby pobrać i zainstalować Composera, postępuj zgodnie z instrukcjami na oficjalnej stronie: https://getcomposer.org/doc/00-intro.md. Potrzebujemy instalacji globalnej.

Następnym krokiem jest sklonowanie repozytorium z konfiguracją środowiska Docker: https://github.com/wodby/docker4wordpress

Możesz napotkać z tym problemy, ponieważ w moim przypadku konfiguracja nie działała poprawnie na macOS, dlatego musiałem ją nieco zmodyfikować. Jeśli masz ten sam problem, sklonuj moją wersję z tego repozytorium: https://gitlab.com/AlsconWeb/wordpress-dev-environment-docker.

Wszystkie przygotowania mamy już za sobą, więc możemy zaczynać!

Przejdź do katalogu projektu — w moim przypadku jest to car-listing — i skopiuj do niego z powyższego repozytorium następujące pliki:

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

Teraz musimy skonfigurować plik .env.

W tym celu musimy zmienić następujące parametry:

PROJECT_NAME — odpowiada za nazwę projektu w Dockerze.
PROJECT_BASE_URL — adres URL, pod którym będzie dostępna nasza strona; w moim przypadku jest to carlisting.docker.localhost.

DB_NAME — nazwa utworzonej bazy danych (ustawiam ją zgodnie z nazwą projektu).
DB_USER — nazwa użytkownika bazy danych (ustawiam ją zgodnie z nazwą projektu).
DB_PASSWORD — hasło do bazy danych (ustawiam je zgodnie z nazwą projektu).

Zmienię również wersję PHP z domyślnej 7.4 na 8.0:

PHP_TAG=8.0-dev-macos-4.22.2

---

Teraz musimy przejść do tego folderu i wykonać polecenie make. Następnie czekamy, aż polecenie zostanie wykonane, wszystkie obrazy zostaną pobrane i połączone.

Kolejnym krokiem jest pobranie WordPressa. W tym celu wystarczy wykonać polecenie make wp core download. Jest to standardowe polecenie WP-CLI, ale musimy wykonać je za pomocą polecenia make, aby Docker wiedział, że powinien użyć odpowiedniego obrazu.

Wykonujemy polecenie i czekamy na jego zakończenie.

Następnie przechodzimy do folderu app i zmieniamy nazwę pliku wp-config-sample.php na wp-config.php.

Otwieramy go do edycji i ustawiamy dane dostępowe do bazy danych, które skonfigurowaliśmy w pliku .env.

Przede wszystkim musimy zmienić:

define( 'DB_HOST', 'localhost' );

na:

define( 'DB_HOST', 'mariadb' );

mariadb to nazwa kontenera Docker.

Następnie generujemy klucze dla naszej strony za pomocą: https://api.wordpress.org/secret-key/1.1/salt/

Wklejamy je, a następnie przechodzimy przez standardowy proces instalacji WordPressa.

Kolejnym krokiem jest utworzenie folderu naszej wtyczki w katalogu /wp-content/plugins. Nazwałem go ease-car-listing.

Konfiguracja Composera

Teraz musimy zainicjalizować Composera. W tym celu wykonujemy polecenie composer init i odpowiadamy na wszystkie zadawane pytania lub pomijamy je.

Po wykonaniu tego polecenia powinien zostać utworzony plik composer.json.

Otwieramy go do edycji i dodajemy wymagane informacje:

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

Dodajemy opis oraz typ licencji.

"homepage": "https://i-wp-dev.com/", //package homepage
"type": "wordpress-plugin", // package type (if it's a plugin) or wordpress-theme if it's a theme
support: {
     "issues": https://i-wp-dev.com/ // url where you can leave comments
},
"prefer-stable": true,
"config": { 
// tells composer which PHP version to run dependencies and project on
     platform: {
         "php": "7.4"
     }
},

The main block for automatically loading our project’s classes

"autoload": {
     "psr-4": {
         "Iwpdev\\EaseCarListing\\": "src/php" //This means that all our classes will be in the src/php folder
     }
},

Minimalną stabilną wersję zazwyczaj ustawiam na dev:

"minimum-stability": "dev",

Następnie mamy zależności deweloperskie. Jest to bardzo ważna sekcja, aby PHP_CodeSniffer działał poprawnie.

"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"
}

Oto kompletny kod pliku composer.json, który otrzymałem:

{
    "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": "iw****@*****ok.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"
    }
}

Dodajemy dane zależności i wykonujemy polecenie composer update.

Konfiguracja PHPStorm

Następnie przechodzimy do ustawień PHP_CodeSniffer. Otwieramy ustawienia PHPStorm, przechodzimy do Preferences | PHP | Quality Tools, otwieramy PHP_CodeSniffer, a następnie klikamy wielokropek przy ustawieniu ścieżki do PHP_CodeSniffer.

Musimy wskazać plik znajdujący się w /vendor/bin/phpcs (w przypadku systemu Windows będzie to plik z rozszerzeniem .bat).

Klikamy przycisk Validate i powinniśmy otrzymać wynik taki jak na moim ekranie.

Jeśli widzisz podobny wynik, możemy przejść do kolejnego kroku.

Teraz musimy dodać plik odpowiedzialny za automatyczne poprawianie kodu. Znajduje się on nieco niżej, w polu Path to phpcbf. Wybieramy ten plik w taki sam sposób.

Zapisujemy ustawienia i wracamy do konfiguracji. Teraz musimy wybrać standard kodowania.

Korzystam z dedykowanego standardu, który otrzymałem od znajomego. Jest on wykorzystywany w wielu dużych studiach zajmujących się tworzeniem stron na WordPressie.

W polu Coding standard wybieram opcję Custom i wskazuję ścieżkę do tego pliku. Wcześniej skopiowałem go do katalogu głównego wtyczki. Plik znajdziesz pod tym adresem: https://codeshare.io/oQYERp.

Na tym etapie wystarczy zapisać ustawienia.

I tak dotarliśmy do samego kodu.

Główny plik wtyczki

Utworzyłem główny plik wtyczki, w którym będzie inicjalizowana sama wtyczka.

Wygląda on następująco:

<?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();

Klasa Carbon Fields

Utworzyłem również klasę odpowiedzialną za obsługę Carbon Fields, ale na tym etapie jest to jedynie szkielet, który rozbudujemy w kolejnym filmie i artykule.

/**
 * 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 {

	}
}

Klasa AddCPT

Utworzyłem również szkielet klasy odpowiedzialnej za tworzenie dedykowanego typu wpisu.

/**
 * Create Custom post type.
 *
 * @package iwpdev/ease-car-listing
 */

namespace Iwpdev\EaseCarListing\CPT;

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

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

	}
}

This is what my project tree looks like now

Koniecznie obejrzyj również film na ten temat na moim kanale!

Dziękuję za przeczytanie tego artykułu do końca. Mam nadzieję, że okazał się dla Ciebie przydatny. Zasubskrybuj mój kanał — już wkrótce pojawi się na nim wiele ciekawych materiałów!