Sage ir DeployHQ: išsamus vadovas

Sage yra WordPress pradinė tema, sukurta Roots komandos, kuri į temų kūrimą įneša modernias programavimo praktikas. Jei čia patekote ieškodami Sage apskaitos programinės įrangos – šis vadovas ne apie tai. Čia aprašoma Roots Sage WordPress pradinė tema – Composer valdoma, Blade šablonais pagrįsta tema, naudojama agentūrų ir kūrėjų, norinčių turėti Laravel įkvėptą darbo eigą WordPress viduje.

Sage natūraliai dera su Bedrock – Roots WordPress karkasu – sudarydami modernią WordPress sistemą. Šis vadovas apžvelgia, ką Sage siūlo, kaip ji yra struktūruota ir kaip ją patikimai diegti naudojant DeployHQ.

Kodėl Sage

Tradicinės WordPress temos sumaišo PHP logiką, HTML žymėjimą ir išteklių tvarkymą į vieną painų sluoksnį. Sage atskiria šias atsakomybes naudodama modelius, pasiskolintus iš Laravel:

• Blade šablonai – Laravel šablonų variklis pakeičia WordPress šablonų hierarchiją švariais, sudedamaisiais rodiniais. Išdėstymai, dalys ir direktyvos kaip @if, @foreach ir @include pakeičia įprastus get_template_part() iškvietimus.
• Composer priklausomybių valdymas – Sage ir jos priklausomybės valdomos per Composer, o ne rankiniu būdu įkeliamos. Tai apima Acorn – paketą, kuris integruoja Laravel komponentus į WordPress.
• Bud.js kūrimo grandinė – Sage 10 ir 11 naudoja Bud.js išteklių kompiliavimui. Bud pakeitė tiek Laravel Mix, tiek ankstesnių versijų Webpack konfigūracijas, siūlydamas greitesnę ir ergonomiškesnę kūrimo sistemą su iš karto veikiančiu karštojo modulio keitimu.
• Modernus sąsajos kūrimo procesas – PostCSS arba Tailwind CSS stiliams, ES moduliai scenarijams ir kūrimo serveris su tiesioginiu atnaujinimu kūrimo metu.

Jei jūsų komanda jau žino Laravel, Sage atrodys pažįstamai. Jei ne – mokymosi kreivė yra statesnė nei su įprasta tema, tačiau rezultatas yra žymiai lengviau prižiūrima kodų bazė.

Sage projekto struktūra

Sage tema laikosi struktūrizuoto išdėstymo, atskiriančio programos logiką nuo pateikimo:

themes/sage/
├── app/                    # PHP programos kodas
│   ├── Providers/          # Paslaugų teikėjai (temos funkcijų inicijavimas)
│   ├── View/               # View composers (duomenų perdavimas Blade rodiniams)
│   └── filters.php         # WordPress filtro kabliukai
├── resources/
│   ├── views/              # Blade šablonai (.blade.php)
│   │   ├── layouts/        # Pagrindiniai puslapių išdėstymai
│   │   ├── partials/       # Daugkartinio naudojimo komponentai
│   │   └── sections/       # Puslapių sekcijos
│   ├── styles/             # CSS/PostCSS/Tailwind šaltinio failai
│   └── scripts/            # JavaScript šaltinio moduliai
├── public/                 # Sukompiliuoti ištekliai (kūrimo rezultatas)
├── bud.config.js           # Bud.js kūrimo konfigūracija
├── composer.json           # PHP priklausomybės
└── package.json            # Node priklausomybės

app/ kataloge laikomas PHP kodas – paslaugų teikėjai, view composers ir filtrai. resources/views/ kataloge yra Blade šablonai. Sukompiliuoti ištekliai patenka į public/ – tai vienintelis katalogas, kurį WordPress faktiškai pateikia lankytojams.

Acorn: Laravel ir WordPress tiltas

Acorn yra paketas, kuris padaro Laravel funkcijas prieinamas WordPress viduje. Jis suteikia paslaugų konteinerį, konfigūracijos sistemą ir konsolės komandas, nuo kurių priklauso Sage. Be Acorn, Blade šablonai, view composers ir paslaugų teikėjai neveiktų.

Acorn įdiegiamas per Composer kaip Sage priklausomybė. Jis suteikia wp acorn CLI, kurį naudosite užduotims kaip sukompiliuotų rodinių talpinimas ir automatiškai įkeliamų klasių optimizavimas:

wp acorn optimize          # Konfigūracijos, maršrutų, rodinių talpinimas
wp acorn view:cache        # Išankstinis visų Blade rodinių kompiliavimas
wp acorn view:clear        # Sukompiliuotų rodinių išvalymas

Šios komandos svarbios diegiant – wp acorn optimize paleidimas po diegimo užtikrina, kad rodiniai būtų iš anksto sukompiliuoti ir konfigūracijos talpykla būtų šilta, sumažinant pirmojo užklausos delsą produkcijoje.

Bud.js kūrimo konfigūracija

Bud.js tvarko visą išteklių kompiliavimą. Konfigūracija yra bud.config.js faile temos šakninėje direktorijoje. Tipinė sąranka atrodo taip:

export default async (app) => {
  app
    .entry('app', ['@scripts/app', '@styles/app'])
    .entry('editor', ['@scripts/editor', '@styles/editor'])
    .assets(['images'])
    .setPublicPath('/app/themes/sage/public/');
};

entry() iškvietimai apibrėžia paketus – app sąsajai, editor WordPress blokų redaktoriui. setPublicPath() turi atitikti vietą, kur sukompiliuoti ištekliai yra pasiekiami serveryje – tai priklauso nuo to, ar diegiate Sage kaip viso Bedrock projekto dalį, ar kaip savarankišką temą.

Pagrindinės kūrimo komandos:

yarn build                 # Produkcijos kūrimas su minifikacija ir hash'avimu
yarn dev                   # Kūrimo aplinkos kūrimas su šaltinio žemėlapiais

Diegimo aspektai

Kaip diegiate Sage priklauso nuo jūsų WordPress sąrankos.

Pilnas Roots karkasas (Bedrock + Sage): Tema yra web/app/themes/sage/ viduje Bedrock projekte. Diegiate visą saugyklą, o jūsų kūrimo pipeline tvarko tiek Composer priklausomybes projekto šakninėje direktorijoje, tiek Node priklausomybes temos kataloge. Tai yra rekomenduojamas metodas.

Tik temos diegimas: Jei pridedate Sage prie esamos WordPress instaliacijos be Bedrock, diegiate tik temos katalogą į wp-content/themes/sage/. Kūrimo pipeline veikia temos aplanke, ir turite užtikrinti, kad Composer automatinis įkėlimas ir Acorn būtų tinkamai sukonfigūruoti temos lygiu.

Abiem atvejais public/ katalogas su sukompiliuotais ištekliais turi būti įtrauktas į diegimą. node_modules/ katalogas turi būti neįtrauktas – jis reikalingas tik kūrimo žingsnyje.