Unutar kuće Dev: Kako se bavimo automatskom implementacijom tema za teme LITE i PRO WordPress

Unutar kuće Dev: Kako se bavimo automatskom implementacijom tema za teme LITE i PRO WordPress

Unutar kuće Dev: Kako se bavimo automatskom implementacijom tema za teme LITE i PRO WordPress
СОДЕРЖАНИЕ
02 июня 2020

Kao što biste zamislili, razvoj tema je nešto što ovdje radimo u našoj tvrtki. S oko 4-5 novih tematskih projekata u radovima u bilo kojem trenutku i 80 tema u naš imenik sveukupno (što znači i aktivno održavanje i daljnji razvoj onih), imamo prilično pune ruke posla.


U ovakvim okruženjima ključna je neka optimizacija, pa čak i automatizacija, kad god je to moguće.

Pa vas danas želimo pozvati kroz vrata našeg vraga ThemeIsle, pa da vam kažem dva specifična dijela naše zagonetke o razvoju tema.

Neću sakriti da je ovakav post eksperiment. Ako uživate, mi ćemo se potruditi da u budućnosti iznesemo više ovakvih stvari.

Konkretno, današnja tema je nešto što se može nazvati, "automatska implementacija i vizualna regresija za razvoj teme WordPressa."

Čekaj, što je automatsko aktiviranje tema?

Ako ne govorite programer, onda to na engleskom znači da možete razviti teme za WordPress, staviti ih na poslužitelj i vizualno usporediti razlike s unaprijed definiranom osnovnom linijom, a da ne morate ništa ručno raditi.

Sve se događa automatski, točnije, "se automatski."

Kako ovo radi?

Razvili smo dvije usluge za brigu o ovom automatskom pokretanju tema: "Pirate Bootstrap" i "Pirate Wraith."

Prvi, Pirate Bootstrap, može se aktivirati putem Webhooks od GitHub-a.

Na zahtjev za povlačenjem, on koristi novu WordPress instancu, koristeći zadanu temu iz postavljenog spremišta + sve pakete i postavke baze podataka preuzete iz zadanog demo teme na ThemeIsle.

Potonji, Pirate Wraith, radi vizualnu regresiju (aka uspoređujući slike iz dva izvora). Test provjerava novo razvijanje teme u odnosu na demo iz ThemeIsle – vizualno – i zatim generira izvještaj. Na temelju tog izvješća brzo možete vidjeti jesu li nedavne promjene imale utjecaja na izgled teme.

Drugim riječima, kad god radite na temi i želite biti sigurni da vaše posljednje promjene koda nisu zabrljale dizajn teme, možete koristiti Pirate Wraith za rješavanje zadatka na autopilotu.

Objasnimo detaljnije svaku uslugu:

Pirate Bootstrap – koristi novu instancu WordPress-a pomoću zadane teme

Pirate Bootstrap domaćin je na forks.themeisle.com

Pirate Bootstrap izgrađen je na vrhu WP-CLI i ima metode za generiranje cjelovitih WordPress implementacija na temelju tematskih paketa i ovisnosti ThemeIsle.

Elementi:

GitHub Webhooks

Webhoke koriste se za pozivanje API-ja Pirate Bootstrap na (otvoren ili sinkroniziran) zahtjeve za povlačenjem slanjem JSON korisnog tereta na http://forks.themeisle.com

Ovaj start započinje tijek rada na implementaciji na forks.themeisle.com. Ovako:

Automatsko postavljanje tema za teme LITE i PRO WordPress

Primjer opterećenja GitHub zahtjeva za povlačenje:

{
"radnja": "otvori",
"broj": 1,
"pull_request": {

"glava": {
"označiti": "Preda-Bogdana: Proizvodnja",
"Najbolje": "proizvodnja",
"sha": "****",

"repo": {
"iskaznica": 82166596,
"Ime": "zerif-Lite",
"puno ime": "Preda-Bogdana / zerif-Lite",
"vlasnik": {
"prijaviti se": "Preda-Bogdana",

},
"privatna": lažno,

"git_url": "Git: //github.com/preda-bogdan/zerif-lite.git",
"ssh_url": "[email protected]: Preda-Bogdana / zerif-lite.git",
"clone_url": "https://github.com/preda-bogdan/zerif-lite.git",
"svn_url": "https://github.com/preda-bogdan/zerif-lite",

}
},

}
}

  • Mi koristimo "sha" ključ za provjeru je li to valjan zahtjev i je li nam dopušteno obraditi korisni teret.
  • Koristimo "prijaviti se", "Ime" i "Najbolje" generirati najmoprimca ako ga ne postoji.

Struktura datoteke

Struktura datoteka na poslužitelju postavljena je tako da svakog stanara pohranimo u njegovu javnu mapu i imamo temeljnu instalaciju WordPress-a koju koristimo za referencu sa simlinkom za svakog najmoprimca..

Struktura datoteke stanara je sljedeća:

stanar/
| _ wp / / ** symlink core core instalirati WordPress
| _ sadržaj / / ** mapa sa sadržajem stanara za WordPress
| | _ themes / / ** mapa tema stanara za WordPress
| | _ dodaci / / ** mapa dodataka stanara za WordPress
| _ .htaccess / ** automatski generiran .htaccess za najmoprimca
| _ vhost.conf / ** alias config datoteka za apache
| _ wp-config.php / ** automatski generirana konfiguracijska datoteka za stanara

Wp / mapa upućuje na osnovnu instalaciju programa WordPress, koju dijele svi stanari. Na taj način možemo imati jednu instalaciju WordPress-a i više izoliranih primjeraka WordPress web mjesta, od kojih svaka sadrži inkapsulirane postavke, datoteke i resurse.

Datoteke jezgre i stanara wp-config.php

Primjer jezgre WordPress wp-config.php:

/ ** Apsolutni put do direktorija WordPress. * /
need_once ($ _SERVER [‘CONTEXT_DOCUMENT_ROOT’]. ‘wp-config.php’);

/ ** Postavlja WordPress vars i uključene datoteke. * /
need_once (ABSPATH. ‘wp-settings.php’);

Primjer stanara wp-config.php:

(Vrijednosti sadržane u dvostrukim kovrčavim zagradama automatski se zamjenjuju prilikom stvaranja stanara.)

/ ** DODATO U BOOTSTRAP API-ju * /
{{MYSQL_CONNECTION_TENANT_DATA}}

define (‘AUTH_KEY’, ‘{{AUTH_KEY}}’);
define (‘SECURE_AUTH_KEY’, ‘{{SECURE_AUTH_KEY}}’);
define (‘LOGGED_IN_KEY’, ‘{{LOGGED_IN_KEY}}’);
define (‘NONCE_KEY’, ‘{{NONCE_KEY}}’);
definiraj (‘AUTH_SALT’, ‘{{AUTH_SALT}}’);
define (‘SECURE_AUTH_SALT’, ‘{{SECURE_AUTH_SALT}}’);
define (‘LOGGED_IN_SALT’, ‘{{LOGGED_IN_SALT}}’);
define (‘NONCE_SALT’, ‘{{NONCE_SALT}}’);

define (‘WP_DEBUG’, false);

define (‘WP_CONTENT_DIR’, ‘{{tenant_folder}} / sadržaj’);
define (‘WP_CONTENT_URL’, ‘{{tenant_folder}} / sadržaj’);
define (‘WP_PLUGIN_DIR’, ‘{{tenant_folder}} / sadržaj / dodaci’);
define (‘WP_PLUGIN_URL’, ‘{{tenant_url}} / sadržaj / dodaci’);

if (! definirano (‘ABSPATH’))
define (‘ABSPATH’, dirname (__ FILE__). ‘/ wp’);

Nakon stvaranja stanara, tražimo krajnju točku kako bismo pronašli pakete potrebne za implementaciju tema (dodaci, podređene teme, baza podataka). Paketi se spremaju u memoriju / pohranjuju u mapu spremnika na poslužitelju i osvježavaju se svakih šest sati.

Sljedeći je korak provjeravanje da li je tema koju želimo implementirati pojedinačno ili treba generirati dodatne teme iz osnovne.

  • Ako se radi o jednom uvođenju, jednostavno radimo git potez "ssh_url" za najmoprimca / sadržaj / teme /.
  • U slučaju da nije pojedinačna implementacija, radimo git u tmp /, pokrećemo grunt generiranje i kopiramo rezultirajuće mape u stanara / sadržaj / teme /.

Zadatak generiranja grunta za nas je standard kada radimo s temama koje imaju više verzija (obično "lite" i "profesionalac"), dok koristite istu bazu kodova (spremište). Na primjer, ako pokrenemo grunt generator za skladište hestia-pro, automatski ćemo dobiti i verziju Lite.

Nakon postupanja s gore navedenim, koristimo WP-CLI za instaliranje svih potrebnih paketa (dodataka i / ili podređenih tema) i uvoza dump baze podataka s demo.themeisle.com.

Posljednji koraci su za ispiranje .htaccess pravila za prepisivanje i ažuriranje "SITEURL" i "Dom" s URL-om stanara i URL-om za WordPress Core ažurirajte veze za stavke izbornika i postove, a zatim na kraju ponovno učitajte apache.

Zatim korisniku šaljemo e-poštu s njihovim forkiranim URL-om za Zahtjev za povlačenje i zapisnik generiran tijekom implementacije. (Svaki generirani najmoprimac slijedi ovaj opći model URL-a: http://forks.themeisle.com/github-login/theme-slug/branch/)

Pirate Bootstrap – savjeti & trikove i druge korisne informacije

Kada odete na forks.themeisle.com, možete pristupiti sučelju sličnom terminalu pritiskom na "~" (tipka tilde) i odatle pokrenite gomilu korisnih naredbi. Najrelevantniji su:

Ponovno postavljanje stanara

Naredba je stanar za resetiranje gusara [stanar] (* tema-slug) |

Primjer:

resetirati piratski stanar prethod-bogdan / zerif-lite / razvoj |  

Ili:

resetirati piratski stanar prethod-bogdan / hestia / razvoj hestia-pro |

Naredba za resetiranje vraća stanara u prvotno stanje raspoređivanja (resetiranje baze podataka, ponovno instaliranje dodataka i / ili podređenih tema).

Pregled trupaca

Naredba je show logs. Ova naredba je korisna ako trebate provjeriti datoteke dnevnika nakon raspoređivanja, a još niste dobili e-poštu ili trebate ispraviti pogrešku..

Napomena: Datoteka zapisa zakreće se ako veličina datoteke bude veća od 9000 bajtova, tako da ako ne možete pronaći ono što tražite, možda ćete trebati provjeriti arhivu dnevnika izravno na poslužitelju.

Pirate Wraith – vizualno uspoređuje dvije verzije teme

Pirate Wraith domaćin je na wraith.themeisle.com

Pirate Wraith izgrađen je na vrhu utvara i ima krajnje točke za interakciju sa zahtjevima Slack, Travis i AJAX kako bi se iskoristili Wraith mogućnosti i generirali testovi i izvještaji vizualne regresije.

Travis

Pirate Wraith otkriva krajnju točku na wraith.themeisle.com koja sluša zahtjeve Travisove građevine i "ne" ili "prolazi" izrada prema rezultatima testa vizualne regresije.

Unutar .travis.yml datoteke dodali smo novu matricu koja definira novu gradnju povrh postojećih. Ovo postavlja dopuštenja za pokretanje bash skripte unutar projekta, a zatim ga izvršava.

Travis YML datoteka:

matriks:
uključuju:
– pHP: "7.0"
before_install: chmod + x wraith.sh
instalirati:
before_script:
env: TEST_SUITE = Wraith_Visual_Regression_Testing WRAITH_FAIL = 5
skripta: ./wraith.sh

To možete vidjeti "instalirati" i "before_script" ostaju prazni. Ovo je namjerno, tako da sastav ne nasljeđuje radnje iz prethodno definiranih sastava. Zanimalo nas je upravo pokretanje bash skripte (skripta: ./wraith.sh) na ovoj verziji.

Također napomenuti; postavljamo varijablu okruženja zvanu WRAITH_FAIL. Ova se vrijednost koristi da bi se Pirate Wraithu rekla kolika je maksimalna dopuštena postotna razlika za polaganje testa.

Bash skripta:

#! / Bin / bash
WRAITH_SLUG = $ (čvor -pe "zahtijevaju ( ‘./ package.json’). wraithSlug")
WRAITH_FAIL = $ {WRAITH_FAIL: -5}
tijelo ="{
‘zahtjev’: {
‘travis_event_type’: ‘$ TRAVIS_EVENT_TYPE’,
‘travis_pull_request’: ‘$ TRAVIS_PULL_REQUEST’,
‘travis_repo_slug’: ‘$ TRAVIS_PULL_REQUEST_SLUG’,
‘travis_branch’: ‘$ TRAVIS_PULL_REQUEST_BRANCH’,
‘wraithSlug’: $ WRAITH_SLUG,
‘wraithFail’: $ WRAITH_FAIL,
}
}"
jeka "Pokretanje izrade od $ TRAVIS_PULL_REQUEST_SLUG podružnice
$ TRAVIS_PULL_REQUEST_BRANCH ‘na Travisu."
izlaz = $ (zavoj -sw "% {HTTP_CODE}" -X POST \
-H "Vrsta sadržaja: aplikacija / json" \
-H "Prihvati: application / json" \
-H "Travis-API-verzija: 3" \
-d "$ {Tijelo // \ ‘/ \"}" \
‘Http://wraith.themeisle.com’)
HTTP_CODE ="$ {Izlaz: $ {# izlaz} -3}"
ako je [$ {# izlaz} -eq 3]; zatim
tijelo =""
drugo
tijelo ="$ {Izlaz: 0: $ {# izlaz} -3}"
fi

ako je [$ http_code! = 200]; zatim
jeka "$ izlaz";
izlaz 1
drugo
jeka "$ izlaz";
izlaz 0
fi

Ukratko, ova skripta stvara JSON korisni teret koji sadrži zadane varijable okruženja Travis i one koje postavlja korisnik. Također čita pakete.json i dobiva puž za temu.

Drugi dio skripte čini POST zahtjev putem "kovrča" na Pirate Wraith i raščlanjuje odgovor kako bi dohvatio HTTP / 1.1 statusni kod odgovora.

Koristimo statusni kod za "iznevjeriti" ili "proći" graditi. Pirate Wraith API vraća važeće HTTP / 1.1 kodove za svaki zahtjev koji obrađuje.

  • Vratit će se kod 200 za kompletne, položene testove.
  • Za sve ostalo, sastavljanje neće uspjeti s izlaznim kodom 1 (izlaz 1)

Možda se pitate što Wraith uspoređuje. Odgovor je jednostavan; uspoređuje postavljanje trenutnog zahtjeva za povlačenjem iz Pirate Bootstrapa sa stanarom i demo ciljne teme.

Za bolje razumijevanje životnog ciklusa GitHub – Travis – Pirate Bootstrap – Pirate Wraith, evo dijagrama koji ilustrira tijek rada ovih usluga:

Pirate Bootstrap / Pirate Wraith tijek rada

Kao što vidiš, GitHub obavještava oboje Pirate Bootstrap i Travis o novom Zahtjevu za povlačenje. Bootstrap počinje raspoređivati ​​stanara, pita Travis Pirate Wraith za pokretanje testova.

Pirate Wraith uspoređuje inačicu Demo stanara sa Demo ThemeIsle Demo i vrati rezultate u Travis, tako da može proći ili iznevjeriti graditi.

Zatišje

Pored Travisove podrške, Pirate Wraith ima i krajnju točku integracije sa Slackom.

Nakon dovršetka gradnje iz Travisa (prolazak ili neuspjeh) generira se izvještaj unutar #eyepatch kanala, koji sadrži vezu na generiranu galeriju i sažetak pronađenih razlika.

Također je ugrađeno nekoliko korisnih naredbi za slackanje koje možete koristiti na bilo kojem kanalu (Napomena: Pirate Wraith API na tom će kanalu odgovoriti javno, pa preporučujemo uporabu naredbi u self chatu). Evo naredbi za Slack:

Poništavanje osnovnih snimaka povijesti teme

/ wraith-povijest [tema-slug]

Primjer:

/ wraith-history zerif-lite |

Usporedba sa snimkama povijesti teme

/ wraith-najnovije [tema-slug] [url]

Primjer:

/ wraith-najnoviji zerif-lite http: //forks.url/pb/zerif-lite |

Ova naredba koristi ponuđeni slug za usporedbu datog URL-a s njegovom povijesti.

Usporedba dva URL-a

/ wraith-usporediti [url] vs [url]

Primjer:

/ wraith-usporedite http://url.one vs http: //url.two 

Pirate Wraith – savjeti & trikove i druge korisne informacije

Poništavanje osnovnih snimaka povijesti teme

Povijest reseta with [tema-slug]

Ova naredba resetira povijest datog sluga.

Usporedba sa snimkama povijesti teme

wraith provjeriti najnovije [tema-slug] [url]

Ova naredba koristi ponuđeni slug za usporedbu datog URL-a s njegovom povijesti.

Usporedba dva URL-a

wraith usporediti URL-ove [url-one] [url-dva]

Pregled trupaca

Naredba je show logs. Ova naredba je korisna ako trebate provjeriti datoteke dnevnika. Djeluje na isti način kao u Pirate Bootstrapu.

Vaša uzmi?

To prilično rezimira naše dvije nove usluge i kako se mogu koristiti za automatizaciju implementacije WordPress teme.

Stvorili smo i Pirate Bootstrap i Pirate Wraith kako bismo zadovoljili svoje potrebe, ali vjerujemo da i ti koncepti mogu biti jednako korisni svima koji rade na sličnim razvojnim projektima. Naročito ako gradite izvedene proizvode (kao što su pro i lite WordPress teme u našem slučaju) i želite provjeriti kakav utjecaj određene promjene koda imaju na njihove pojavljivanja.

Stvar s WordPress temama je da se kodne baze najsuvremenijih tema prilično brzo razvijaju, a neki specifični elementi tih baza koda mogu imati nepredvidiv utjecaj na izgled ostalih elemenata teme. Pokušaj uhvatiti sve to ručno – samo gledanjem stvari vlastitim ljudskim očima – može biti doista izazovan, tako da je uvijek velika pomoć uvesti neki oblik algoritma / automatizacije u miks.

Ali što mislite? Vidite li vrijednost alata poput ovih i za druge projekte?

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Это интересно
    Adblock
    detector