Dev-talon sisällä: Kuinka käsittelemme automaattista teeman käyttöönottoa LITE- ja PRO WordPress -teemoille

Kuten voitte kuvitella, teemakehitys on asia, jota teemme melko paljon täällä yrityksessä. Teoksissa on kulloinkin noin 4-5 uutta teemaprojektia ja 80 teemaa vuonna hakemistomme Kaiken kaikkiaan (mikä tarkoittaa myös näiden aktiivista ylläpitoa ja kehittämistä), kätemme ovat melko täynnä.


Tällaisessa ympäristössä avain on optimointiin ja jopa automatisointiin, aina kun se on mahdollista.

Joten tänään haluamme kutsua sinut dev-talon oven kautta ThemeIsle, niin sanoakseni, ja näyttää sinulle kaksi erityistä kappaletta teemakehityspelissämme.

En piilota, että tällainen viesti on kokeilu. Jos pidät siitä, tulemme varmasti tuomaan tulevaisuudessa lisää tällaista tavaraa.

Erityisesti tämän päivän aihe on jotain, jota voidaan kutsua, "automaattinen käyttöönotto ja visuaalinen regressioarkkitehtuuri WordPress-teeman kehittämiseen."

Odota, mikä on automaattinen teeman käyttöönotto?

Jos et puhu kehittäjää, englanniksi se tarkoittaa, että voit kehittää teemoja WordPressiin, saada ne käyttöön palvelimelle ja verrata sitten visuaalisesti eroja ennalta määritettyyn perustasoon ilman, että sinun tarvitsee tehdä mitään käsin.

Kaikki tapahtuu automaattisesti, tai pikemminkin, "automaagisesti."

Miten tämä toimii?

Kehitimme kaksi palvelua huolehtimaan tästä automaattisesta teeman käyttöönotosta: "Pirate Bootstrap" ja "Merirosvo Wraith."

Ensimmäinen, Pirate Bootstrap, voidaan aktivoida kautta Webhooks GitHubilta.

Pull-pyynnöstä se asentaa uuden WordPress-ilmentymän, käyttämällä tiettyä teemaa asetetusta arkistosta + kaikki paketit ja tietokanta-asetukset, jotka on otettu teeman oletusdemossa osoitteessa ThemeIsle.

Jälkimmäinen, Pirate Wraith, tekee visuaalisen regression testin (eli vertaamalla kuvia kahdesta lähteestä). Testi tarkistaa teeman uuden käyttöönoton ThemeIslen esittelyn perusteella – visuaalisesti – ja luo sitten raportin. Tämän raportin perusteella voit nopeasti nähdä, oliko viimeaikaisilla muutoksilla ollut vaikutusta teeman ulkonäköön.

Toisin sanoen, kun työskentelet teeman parissa ja haluat varmistaa, että viimeisimmät koodisi muutokset eivät ole sekoittaneet teeman muotoilua, voit käyttää Pirate Wraithia käsittelemään tehtävää autopilotissa.

Selitetään jokainen palvelu yksityiskohtaisemmin:

Pirate Bootstrap – ottaa käyttöön uuden WordPress-esiintymän käyttämällä asetettua teemaa

Pirate Bootstrap -palvelinta ylläpidetään sivustolla forks.themeisle.com

Pirate Bootstrap on rakennettu WP-CLI ja sisältää menetelmiä täydellisten WordPress-käyttöönottojen tuottamiseksi perustuu ThemeIsle-teemapaketteihin ja riippuvuuksiin.

Elementit:

GitHub Webhooks

Webhooksia kutsutaan Pirate Bootstrap -sovelluksen sovellusliittymään (avattu tai synkronoitu) Pull-pyynnöt lähettämällä JSON-hyötykuorma osoitteeseen http://forks.themeisle.com

Tämä käynnistyy käyttöönoton työnkulku forks.themeisle.com -sivustolla. Niin kuin:

Automaattinen teeman käyttöönotto LITE- ja PRO WordPress -teemoille

Esimerkki GitHub Pull -pyyntökuormasta:

{
"toiminta": "avattu",
"määrä": 1,
"pull_request": {

"pää": {
"etiketti": "Preda-Bogdan: tuotanto",
"viite": "tuotanto",
"sha": "****",

"repo": {
"id": 82166596,
"nimi": "zerif-lite",
"koko nimi": "Preda-bogdan / zerif-lite",
"omistaja": {
"Kirjaudu sisään": "Preda-Bogdan",

},
"yksityinen": väärä,

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

}
},

}
}

  • Käytämme "sha" -näppäimellä tarkistaa, onko kyseessä pätevä pyyntö ja saako me käsitellä hyötykuormaa.
  • Käytämme "Kirjaudu sisään", "nimi" ja "viite" luoda vuokralainen, jos sitä ei ole olemassa.

Tiedoston rakenne

Palvelimen tiedostorakenne on asetettu siten, että me tallennamme jokaisen vuokralaisen omassa julkisessa kansiossaan ja meillä on WordPress-ydinasennus, jota käytämme viittaamalla linkillä kunkin vuokralaisen kanssa.

Vuokralaisen tiedostorakenne on seuraava:

vuokralainen/
| _ wp / / ** WordPress-symlink-ytimen asennus
| _ sisältö / / ** vuokralaisen sisältökansio WordPressille
| | _ teemat / / ** vuokralaisen teemakansio WordPressille
| | _ plugins / / ** vuokralaisen plugins-kansio WordPressille
| _ .htaccess / ** automaattisesti generoitu .htaccess vuokralaiselle
| _ vhost.conf / ** aliaksen konfigurointitiedosto apachelle
| _ wp-config.php / ** vuokralaisen itsensä luoma konfigurointitiedosto

Wp / kansio viittaa WordPressin ydinasennukseen, joka on kaikkien vuokralaisten yhteinen. Tällä tavalla meillä voi olla yksi WordPress-asennus ja useita erillisiä WordPress-sivustojen ilmentymiä, jokaisella on kapseloidut asetukset, tiedostot ja resurssit.

Wp-config.php-ydin- ja vuokralaisetiedostot

Ydin WordPress wp-config.php-esimerkki:

/ ** Absoluuttinen polku WordPress-hakemistoon. * /
vaadi_sana ($ _SERVER [‘CONTEXT_DOCUMENT_ROOT’]. ‘wp-config.php’);

/ ** Asettaa WordPress-varsit ja mukana olevat tiedostot. * /
vaatia_sanaa (ABSPATH. ‘wp-settings.php’);

Esimerkki vuokralaisesta wp-config.php:

(Tupla-kiharanauhojen sisällä olevat arvot korvataan automaattisesti vuokralaisen luomisen yhteydessä.)

/ ** LISÄTY BOOTSTRAP-sovellusliittymällä * /
{{MYSQL_CONNECTION_TENANT_DATA}}

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

define (‘WP_DEBUG’, epätosi);

define (‘WP_CONTENT_DIR’, ‘{{vuokralainen_kansio}} / sisältö’);
define (‘WP_CONTENT_URL’, ‘{{vuokralainen_kansio}} / sisältö’);
define (‘WP_PLUGIN_DIR’, ‘{{tenant_folder}} / content / plugins’);
define (‘WP_PLUGIN_URL’, ‘{{tenant_url}} / content / plugins’);

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

Vuokralaisen luomisen jälkeen kysymme päätepistettä hakeaksesi teeman käyttöönottoon tarvittavia paketteja (laajennukset, alateemat, tietokanta). Paketit välimuistissa / tallennetaan palvelimen stash-kansioon ja päivitetään kuuden tunnin välein.

Seuraava askel on tarkistaa, onko haluamamme teema yksi ainoa käyttöönotto vai onko sen luotava ylimääräisiä teemoja.

  • Jos kyseessä on yksi käyttöönotto, teemme vain helpon vedon käyttämällä "ssh_url" vuokralaiseksi / sisältö / teemat /.
  • Jos kyseessä ei ole yksi ainoa käyttöönotto, suoritamme vain tmp / t-tiedoston, ajamme virnistellä luodaan ja kopioimme sitten tuloksena olevat kansiot vuokralaiseen / sisältöön / teemiin /.

Grunt-generointitehtävä on meille standardi työskennellessäsi teemoilla, joilla on useita versioita (yleensä "lite" ja "ammattilainen") samalla, kun käytetään samaa kooditietokantaa (arkisto). Esimerkiksi, jos ajamme grunt genereta hestia-pro-arkistoon, saamme myös lite-version automaattisesti.

Edellä mainitun käsittelyn jälkeen asennamme WP-CLI: n avulla kaikki vaadittavat paketit (laajennukset ja / tai alateemat) ja tuomme tietokannan sivun demo.themeisle.com.

Viimeiset vaiheet on .htaccess-uudelleenkirjoituksen sääntöjen huuhtelu, päivitys "SITEURL" ja "Koti" päivitä vuokralaisen ja WordPress Coren URL-osoitteella, päivitä valikkokohtien ja viestien linkit ja lataa sitten lopulta apache.

Lähetämme sitten käyttäjälle sähköpostin, jossa on haarukka URL-osoite Pull-pyyntöä ja käyttöönoton aikana luotavaa lokia varten. (Jokainen tuotettu vuokralainen noudattaa tätä yleistä URL-mallia: http://forks.themeisle.com/github-login/theme-slug/branch/)

Pirate Bootstrap – vinkkejä & temppuja ja muuta hyödyllistä tietoa

Kun siirryt osoitteeseen forks.themeisle.com, pääset päätteen kaltaiseen rajapintaan painamalla "~" (tilde-näppäin) ja suorita sitten joukko hyödyllisiä komentoja sieltä. Asiaankuuluvia ovat:

Vuokralaisen käyttöönoton nollaaminen

Komento on pirate reset vuokralainen [vuokralainen] (* teema-etana) |

Esimerkki:

merirosvojen palautus vuokralaisen preda-bogdan / zerif-lite / kehitys |  

Tai:

merirosvo reset vuokralainen preda-bogdan / hestia / kehitys hestia-pro |

Reset-komento asettaa vuokralaisen takaisin alkuperäiseen käyttöönotto tilaansa (tietokannan palautus, asennuslaajennusten uudelleenasennus ja / tai alateemat).

Lokien tarkastelu

Komento on näyttää lokit. Tämä komento on hyödyllinen, jos joudut tarkistamaan lokitiedostot käyttöönoton jälkeen, etkä saanut vielä sähköpostia tai joudut korjaamaan virheen.

Huomaa: Lokitiedostoa kierretään, jos tiedoston koko on suurempi kuin 9000 tavua, joten jos et löydä etsimääsi, sinun on ehkä tarkistettava loki-arkisto suoraan palvelimelta.

Pirate Wraith – vertaa teeman kahta versiota visuaalisesti

Pirate Wraith -palvelinta ylläpidetään osoitteessa wraith.themeisle.com

Pirate Wraith on rakennettu haamu ja sillä on päätepisteitä vuorovaikutukseen Slack-, Travis- ja AJAX-pyyntöjen kanssa Wraith-ominaisuuksien hyödyntämiseksi ja visuaalisen regression testien ja raporttien luomiseksi.

Travis

Pirate Wraith paljastaa sivustossa wraith.themeisle.com päätepisteen, joka kuuntelee Travis-rakennuksen pyyntöjä, ja "epäonnistuu" tai "kulkee" rakenne visuaalisen regression testin tulosten mukaisesti.

Lisäsimme .travis.yml-tiedoston sisään uuden matriisin, joka määrittelee uuden rakenteen olemassa olevien päälle. Tämä asettaa oikeudet bash-komentosarjan ajamiseen projektin sisällä ja suorittaa sen sitten.

Travis YML-tiedosto:

matriisi:
sisältää:
– php: "7,0"
before_install: chmod + x wraith.sh
Asentaa:
before_script:
env: TEST_SUITE = Wraith_Visual_Regression_Testing WRAITH_FAIL = 5
käsikirjoitus: ./wraith.sh

Voit nähdä sen "Asentaa" ja "before_script" jätetään tyhjiksi Tämä on tarkoituksella, joten rakennus ei peri toimintoja aiemmin määritellyistä rakennuksista. Olemme kiinnostuneita vain bash-komentosarjan (komentosarja: ./wraith.sh) suorittamisesta tässä rakennuksessa.

Myös huomata; asetamme ympäristömuuttujan nimeltä WRAITH_FAIL. Tätä arvoa käytetään kertomaan Pirate Wraithille, mikä on suurin sallittu prosenttiosuusero testin läpäisemiseen.

Bash-käsikirjoitus:

#! / Bin / bash
WRAITH_SLUG = $ (solmu-tyyppi "vaatia ( ‘./ package.json’). wraithSlug")
WRAITH_FAIL = $ {WRAITH_FAIL: -5}
body ="{
‘pyyntö’: {
‘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,
}
}"
kaiku "Käynnistetään $ TRAVIS_PULL_REQUEST_SLUG -haaran rakennus
$ TRAVIS_PULL_REQUEST_BRANCH ‘Travisilla."
output = $ (curl -sw "% {HTTP_CODE tilan}" -X POST \
-H "Sisältö-tyyppi: application / json" \
-H "Hyväksy: hakemus / json" \
-H "Travis-API-versio: 3" \
-d "$ {Kehon // \ ‘/ \"}" \
‘Http://wraith.themeisle.com’)
HTTP_CODE tilan ="$ {Ulostulo: $ {# lähtö} -3}"
jos [$ {# output} -eq 3]; sitten
body =""
muu
body ="$ {Ulostulo: 0: $ {# lähtö} -3}"
fi

jos [$ http_code! = 200]; sitten
kaiku "$ ulostulo";
poistuminen 1
muu
kaiku "$ ulostulo";
poistu 0
fi

Lyhyesti sanottuna, tämä skripti luo JSON-hyötykuorman, joka sisältää Travis-ympäristön oletusmuuttujat ja käyttäjän asettamat. Lisäksi se lukee paketit.json ja saa teeman etusijalle.

Komentosarjan toinen osa suorittaa POST-pyynnön kautta "kiemura" Pirate Wraithille ja jäsentää vastauksen saadakseen vastauksen HTTP / 1.1-tilakoodin.

Käytämme tilakoodia "Fail" tai "kulkea" rakentaa. Pirate Wraith API palauttaa kelvolliset HTTP / 1.1-koodit jokaiselle prosessoidulle pyynnölle.

  • Se palauttaa koodin 200 suoritetuista, läpäistyistä testeistä.
  • Kaiken muun suhteen rakennus epäonnistuu poistumiskoodilla 1 (exit 1)

Saatat ihmetellä, mitä Wraithin vertailu on. Vastaus on yksinkertainen; siinä verrataan Pirate Bootstrap -yrityksen nykyisen Pull-pyynnön vuokralaisen käyttöönottoa kohdeteeman demossa.

GitHub – Travis – Pirate Bootstrap – Pirate Wraith -ketjun elinkaaren ymmärtämiseksi on tässä kaavio, joka kuvaa näiden palvelujen työnkulkua:

Pirate Bootstrap / Pirate Wraith -prosessin kulku

Kuten näet, GitHub ilmoittaa molemmille Pirate Bootstrap ja Travis uudesta Pull-pyynnöstä. Bootstrap aloittaa vuokralaisen lähettämisen, Travis kysyy Merirosvo Wraith aloittaa testit.

Merirosvo Wraith vertaa demon vuokralaisen versiota ThemeIsle Esittely ja palauttaa tulokset Travis, jotta se voi kulkea tai Fail rakentaa.

löysä

Travis-tuen lisäksi Pirate Wraithilla on päätepiste integroitumiseen Slackiin.

Kun Travisista muodostettu rakennus on valmis (hyväksy tai hylä), #eyepatch-kanavassa luodaan raportti, joka sisältää linkin luotuun galleriaan ja yhteenvedon löydetyistä eroista.

Sisältä on myös muutama hyödyllinen Slack-komento, jota voit käyttää missä tahansa kanavassa (Huomaa: Pirate Wraith -sovellusliittymä vastaa tällä kanavalla julkisella vastauksella, joten suosittelemme komentojen käyttämistä itsekeskusteluissa). Tässä ovat Slack-komennot:

Teeman historian peruskuvien nollaus

/ wraith-historia [teema-etana]

Esimerkki:

/ wraith-historia zerif-lite |

Verrataan teeman historiakuviin

/ wraith-viimeisin [teema-etana] [URL]

Esimerkki:

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

Tämä komento käyttää annettua etikettiä vertaamaan annettua URL-osoitetta kyseisen etiketin historiaan.

Vertaa kahta URL-osoitetta

/ wraith-vertaa [URL] vs. [URL]

Esimerkki:

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

Pirate Wraith – vinkkejä & temppuja ja muuta hyödyllistä tietoa

Teeman historian peruskuvien nollaus

tyhjä historia [teema-etana]

Tämä komento nollaa annetun etiketin historian.

Verrataan teeman historiakuviin

wraith tarkistaa viimeisin [teema-etana] [URL]

Tämä komento käyttää annettua etikettiä vertaamaan annettua URL-osoitetta kyseisen etiketin historiaan.

Vertaa kahta URL-osoitetta

wraith vertaa URL-osoitteita [URL-yksi] [URL-kaksi]

Lokien tarkastelu

Komento on näyttää lokit. Tämä komento on hyödyllinen, jos joudut tarkistamaan lokitiedostot. Se toimii samalla tavalla kuin Pirate Bootstrap -sovelluksessa.

Sinun otteesi?

Tämä kiteyttää kahta uutta palveluamme ja kuinka niitä voidaan käyttää automatisoimaan WordPress-teeman käyttöönottoa.

Olemme luoneet sekä Pirate Bootstrap- että Pirate Wraith -palvelut omien tarpeidemme palvelemiseksi, mutta uskomme, että nämä konseptit voivat olla yhtä hyödyllisiä jokaiselle, joka työskentelee samanlaisissa dev-projekteissa. Varsinkin jos rakennat johdannaistuotteita (kuten tapauksessamme pro- ja lite WordPress-teemoja) ja haluat tarkistaa, millaisia ​​vaikutuksia erityisillä koodimuutoksilla on heidän esiintymisensä.

WordPress-teemojen asia on, että nykyaikaisimpien teemojen koodipohjat kasvavat melko nopeasti, ja joidenkin näiden koodipohjien erityisillä elementeillä voi olla arvaamaton vaikutus aiheen muiden elementtien ulkonäköön. Yritä kiinni kaikki tämä manuaalisesti – vain katsomalla asioita omien silmiesi kautta – voi olla todella haastavaa, joten se on aina valtava apu ottaa algoritmin / automaation muodot käyttöön sekoituksessa.

Mutta mitä luulet? Näetkö tällaisten työkalujen arvon myös muissa projekteissa??

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map