WordPress – standardy projektowe

Zbiór wytycznych dla projektów realizowanych z wykorzystaniem wordpress

Narzędzia programistyczne

Do realizacji projektów opartych o wordpress rekomendujemy wykorzystanie następujących narzędzi:

  • Visual studio code – jako edytor kodu (przydatne rozszerzenia: Beautify )
  • Sourcetree / Github Desktop / Github Console – narzędzie do zarządzania repozytorium
  • Buddy – narzędzie do zarządzania projektem dla środowisk testowych oraz produkcyjnych
  • Docker Desktop – program umożliwiający w łatwym sposób tworzenie i uruchamianie aplikacji w lokalnym środowisku

Zalecamy instalacje menedżerów pakietów npm lub yarn w wersjach:

  • npm – 8.19.4
  • yarn – 1.22.19

Repozytorium z podstawową konfiguracją projektów:

https://github.com/KamikazeDigital/project-starter

Struktura katalogowa

project_name
   --- wp-content 
      --- languages ( default )
      --- plugins ( custom plugin / default plugin add to gitignore ) 
      --- themes
          --- project-theme-name ( custom theme )
                --- assets 
                    --- css
                    --- fonts 
                    --- images 
                    --- js 
                    --- src ( not upload at production )
                       --- js ( working script files )
                       --- scss ( working style files )
                --- parts
                --- patterns
                --- template
                functions.php
                package.json ( theme 
                screenshot.png ( theme images ) 
                style.css ( set name, author, description and version ) 
                theme.json ( theme settings configuration )
          --- twentytwentyfour ( default wodpress theme / add to gitignore )
      --- upgrade
      --- uploads ( upload all files ) 
      index.php

   .env ( add to gitignore ) 
   .env-simple ( base env file ) 
   .gitignore ( ignore file ) 
   docker-compose.yml ( docker container configuration ) 
   Dockerfile ( docker file configuration ) 
   readme.txt ( project instruction ) 
   uploads.ini ( change apache configuration ) 
   wp-config.php ( wdopress configuration )

Plik konfiguracyjny .env

Wszystkie zmienne środowiskowe należy definiować w pliku konfiguracyjnym .env plik ten należy utworzyć samodzielnie na bazie pliku .env-simple

Praca na lokalnym środowisku

Do uruchomienia projektu na lokalnym środowisku potrzebujemy jedynie pliku konfiguracyjnego docker-compose.yml oraz opcjonalnie Dockerfile

docker-compose.yml – plik konfiguracyjny kontenera docker. Zawiera informacje dotyczące usług, kontenerów, sieci oraz innych ustawień

Dockerfile – plik tekstowy służący do definiowania kroku po kroku procesu budowy obrazu kontenera. Określa instrukcje, takie jak dodawanie plików, instalacja oprogramowania czy konfiguracja środowiska, które Docker następnie wykonuje w odpowiedniej kolejności podczas budowy obrazu.

docker-compose.yml

W poniższej konfiguracji uruchamiamy kontener wordpress w którym montujemy własne zasoby dla katalogu wp-content oraz pliki uplaods.ini, wp-config.php i .env Wszystkie pozostałe pliki będą zaczytywane z wewnątrz kontenera.

Dodatkowo uruchamiamy kontener z mysql oraz phpmyadminem do zarządzania bazą danych. Jeśli chcemy połączyć się z naszą lokalną bazą którą uruchomimy należy pamiętać aby dodać również dostępy do bazy danych w pliku env 

version: '3.1'
services:
  wordpress:
    image: wordpress
    restart: always
    volumes:
      - ./wp-content:/var/www/html/wp-content # folder współdzielony z kontenerem zawierający szablony, pluginy, etc.
      - ./uploads.ini:/usr/local/etc/php/conf.d/uploads.ini # ustawienia wysyłania plików na serwer (wyższy limit)
      - ./wp-config.php:/var/www/html/wp-config.php #wp-config
      - ./.env:/var/www/html/.env #environment variables
    ports:
      - 8080:80
  db:
    image: mysql:8
    restart: always
    platform: linux/arm64/v8
    environment:
      MYSQL_DATABASE: project_db
      MYSQL_USER: project_user
      MYSQL_PASSWORD: project_password
      MYSQL_RANDOM_ROOT_PASSWORD: '1'
    volumes:
      - db:/var/lib/mysql
  phpmyadmin:
    image: phpmyadmin/phpmyadmin:4.9
    restart: always
    ports:
      - 8085:80
    environment:
      PMA_HOST: db
      PMA_PORT: 3306
      MYSQL_ROOT_PASSWORD: password
volumes:
  wordpress:
  db:

Dockerfile

W tym pliku określamy wersję php na 8.1 oraz wersję wodpress na najnowszą stabilną. W razie potrzeby możemy dodać dodatkowe instrukcję określające np instalację dodatkowych modułów. 

FROM php:8.1-apache
FROM wordpress:latest

Szablon projektu

W aktualnie opracowanym podejściu dla projektów wodpress szablony budujemy poprzez bloki z wykorzystaniem wtyczek elementor lub kadence-blocks.


Jeśli potrzebujesz dodać dodatkowe style lub skrypty postępuj zgodnie z poniższą instrukcją:

  1. Przejdz do katalogu kamikaze_template
  2. Zainstaluj wszystkie niezbędne pakiety package.json
npm install lub yarn install
  1. Jeśli wszystkie pakiety zostaną pomyślnie zainstalowane uruchom:

npm run watch:scss – śledzi wszystkie zmiany w plikach scss znajdujących się w katalogu /assets/src/scss
npm run watch:js – śledzi wszystkie zmiany w plikach js znajdujących się w katalogu /assets/src/js

Pliki są na bieżąco komilowane do doclowych plików w katalogach /assets/css oraz /assets/js

Dodatkowe funkcjonalności lub niestandardowe rozserzenia takie jak dodatkowe custom post type lub eint pointy api należy zaimplementować w pliku function.php

Praca z repozytorium

Dla każdego projektu tworzymy osobne repozytorium na platformie github.

W repozytorium projektu tworzymy dwa branche: production oraz staging

Repozytorium aktualizujemy systematycznie wraz z rozwojem projektu. Rekomendujemy przy zakończeniu pracy nad każdą większą funkcjonalnością lub po zakończeniu pracy w danym dniu.