Di dalam Rumah Dev: Bagaimana Kami Menangani Penerapan Tema Otomatis untuk Tema WordPress LITE dan PRO

Seperti yang Anda bayangkan, pengembangan tema adalah sesuatu yang kami lakukan di perusahaan. Dengan sekitar 4-5 proyek tema baru dalam karya pada saat tertentu, dan 80 tema masuk direktori kami total (yang berarti pemeliharaan aktif dan pengembangan lebih lanjut dari mereka juga), kami memiliki tangan kami agak penuh.


Dalam pengaturan seperti ini, beberapa optimasi dan bahkan otomatisasi, bila memungkinkan, adalah kuncinya.

Jadi hari ini, kami ingin mengundang Anda melalui pintu rumah dev kami di Tema, jadi untuk berbicara, dan menunjukkan kepada Anda dua bagian spesifik dari teka-teki pengembangan tema kami.

Saya tidak akan menyembunyikan bahwa pos semacam ini adalah percobaan. Jika Anda menikmatinya, kami akan memastikan untuk membawa lebih banyak barang seperti ini di masa depan.

Secara khusus, topik hari ini adalah sesuatu yang bisa disebut, "penyebaran otomatis dan arsitektur regresi visual untuk pengembangan tema WordPress."

Tunggu, apa itu penyebaran tema otomatis?

Jika Anda tidak berbicara pengembang maka apa artinya dalam bahasa Inggris adalah bahwa Anda dapat mengembangkan tema untuk WordPress, membuat mereka digunakan untuk server, dan kemudian secara visual membandingkan perbedaan terhadap garis dasar yang telah ditentukan tanpa harus melakukan apa pun secara manual.

Itu semua terjadi secara otomatis, atau lebih tepatnya, "secara otomatis."

Bagaimana cara kerjanya??

Kami mengembangkan dua layanan untuk menangani penerapan tema otomatis ini: "Bajak Laut Bootstrap" dan "Perompak Bajak Laut."

Yang pertama, Pirate Bootstrap, dapat diaktifkan via Situs web dari GitHub.

Pada Permintaan Tarik, itu menyebarkan contoh WordPress baru, menggunakan tema yang diberikan dari repositori set + semua paket dan pengaturan database yang diambil dari demo default tema di ThemeIsle.

Yang terakhir, Pirate Wraith, melakukan Tes Regresi Visual (alias membandingkan gambar dari dua sumber). Tes ini memeriksa penyebaran tema baru terhadap demo dari ThemeIsle – secara visual – dan kemudian menghasilkan laporan. Berdasarkan laporan itu, Anda dapat dengan cepat melihat apakah perubahan terbaru berdampak pada penampilan tema.

Dengan kata lain, setiap kali Anda mengerjakan suatu tema, dan Anda ingin memastikan bahwa perubahan kode terbaru Anda tidak mengacaukan desain tema, Anda dapat menggunakan Pirate Wraith untuk menangani tugas dengan autopilot.

Mari kita jelaskan setiap layanan lebih detail:

Pirate Bootstrap – menyebarkan instance baru WordPress menggunakan set theme

Pirate Bootstrap di-host di forks.themeisle.com

Pirate Bootstrap dibangun di atas WP-CLI dan memiliki metode untuk menghasilkan penyebaran WordPress lengkap berdasarkan paket dan dependensi ThemeIsle.

Elemen-elemen:

GitHub Webhooks

Webhooks digunakan untuk memanggil API Bajak Laut Bootstrap di (dibuka atau disinkronkan) dengan Permintaan Tarik dengan mengirim muatan JSON ke http://forks.themeisle.com

Tendangan ini memulai alur kerja penempatan di forks.themeisle.com. Seperti itu:

Penyebaran Tema Otomatis untuk Tema WordPress LITE dan PRO

Contoh payload Permintaan GitHub Tarik:

{
"tindakan": "dibuka",
"jumlah": 1,
"pull_request": {

"kepala": {
"label": "preda-bogdan: produksi",
"ref": "produksi",
"sha": "****",

"repo": {
"Indo": 82166596,
"nama": "zerif-lite",
"nama lengkap": "preda-bogdan / zerif-lite",
"pemilik": {
"Gabung": "preda-bogdan",

},
"pribadi": Salah,

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

}
},

}
}

  • Kami menggunakan "sha" untuk memeriksa apakah itu permintaan yang valid dan apakah kami diizinkan memproses payload.
  • Kita gunakan "Gabung", "nama" dan "ref" untuk menghasilkan penyewa jika itu tidak ada.

Struktur file

Struktur file di server diatur sehingga kami menyimpan setiap penyewa di folder publiknya sendiri dan memiliki instalasi inti WordPress yang kami gunakan untuk referensi dengan symlink untuk setiap penyewa.

Struktur file penyewa adalah sebagai berikut:

penyewa/
| _ wp / / ** symlink core install WordPress
| _ content / / ** folder konten penyewa untuk WordPress
| | _ themes / / ** folder tema penyewa untuk WordPress
| | _ plugins / / ** folder penyewa penyewa untuk WordPress
| _ .htaccess / ** .htaccess yang dibuat secara otomatis untuk penyewa
| _ vhost.conf / ** alias file konfigurasi untuk apache
| _ wp-config.php / ** file konfigurasi yang dibuat secara otomatis untuk penyewa

Referensi wp / folder menginstal inti WordPress, yang digunakan bersama oleh semua penyewa. Dengan cara ini, kita dapat memiliki satu instalasi WordPress dan beberapa contoh situs WordPress yang terisolasi, masing-masing dengan pengaturan, file, dan sumber daya yang dienkapsulasi..

Inti dan penyewa file wp-config.php

Contoh Core WordPress wp-config.php:

/ ** Path absolut ke direktori WordPress. * /
require_once ($ _SERVER [‘CONTEXT_DOCUMENT_ROOT’]. ‘wp-config.php’);

/ ** Mengatur vars WordPress dan file yang disertakan. * /
require_once (ABSPATH. ‘wp-settings.php’);

Contoh tenant wp-config.php:

(Nilai yang terkandung di dalam kurung kurawal ganda diganti secara otomatis pada pembuatan penyewa.)

/ ** DITAMBAHKAN OLEH BOOTSTRAP API * /
{{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}}’);
define (‘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}} / content’);
define (‘WP_CONTENT_URL’, ‘{{tenant_folder}} / content’);
define (‘WP_PLUGIN_DIR’, ‘{{tenant_folder}} / content / plugins’);
define (‘WP_PLUGIN_URL’, ‘{{tenant_url}} / content / plugins’);

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

Setelah pembuatan penyewa, kami meminta titik akhir untuk mengambil paket yang diperlukan untuk penerapan tema (plugin, tema anak, database). Paket-paket di-cache / disimpan dalam folder simpanan di server dan di-refresh setiap enam jam.

Langkah selanjutnya adalah memeriksa apakah tema yang ingin kita gunakan adalah penyebaran tunggal atau perlu menghasilkan tema tambahan dari basis.

  • Jika ini adalah penyebaran tunggal, kami hanya melakukan git pull menggunakan "ssh_url" menjadi penyewa / konten / tema /.
  • Jika itu bukan penyebaran tunggal, kami melakukan git pull ke tmp /, menjalankan grunt generate dan kemudian menyalin folder yang dihasilkan ke tenant / content / themes /.

Tugas menghasilkan kasar adalah standar bagi kami ketika bekerja dengan tema yang memiliki beberapa versi (biasanya "ringan" dan "pro") saat menggunakan basis kode yang sama (repositori). Sebagai contoh, jika kita menjalankan grunt generate untuk repositori hestia-pro, kita juga akan mendapatkan versi lite secara otomatis.

Setelah menangani hal di atas, kami menggunakan WP-CLI untuk menginstal semua paket yang diperlukan (plugin dan / atau tema anak) dan mengimpor dump basis data dari demo.themeisle.com.

Langkah terakhir adalah menyiram aturan .htaccess menulis ulang, perbarui "alamat URL" dan "rumah" dengan URL penyewa dan URL untuk WordPress Core, perbarui tautan untuk item menu dan posting, lalu akhirnya muat ulang apache.

Kami kemudian mengirimkan pengguna email dengan URL bercabang mereka untuk Permintaan Tarik dan log yang dihasilkan selama penyebaran. (Setiap penyewa yang dihasilkan mengikuti model URL umum ini: http://forks.themeisle.com/github-login/theme-slug/branch/)

Bajak Laut Bootstrap – tips & trik, dan informasi bermanfaat lainnya

Ketika Anda pergi ke forks.themeisle.com, Anda dapat mengakses antarmuka seperti terminal dengan menekan "~" (kunci tilde) dan kemudian jalankan banyak perintah yang berguna dari sana. Yang paling relevan adalah:

Menyetel ulang penempatan penyewa

Perintahnya adalah bajak ulang penyewa [tenant] (* theme-slug) |

Contoh:

pembajakan ulang penyewa preda-bogdan / zerif-lite / development |  

Atau:

pembajakan ulang penyewa preda-bogdan / hestia / development hestia-pro |

Perintah reset mengatur penyewa kembali ke status penyebaran aslinya (reset database, instal ulang plugins dan / atau tema anak).

Melihat log

Perintahnya adalah tampilkan log. Perintah ini berguna jika Anda perlu memeriksa file log setelah penyebaran dan Anda belum menerima email atau Anda perlu men-debug.

Catatan: File log diputar jika ukuran file menjadi lebih besar dari 9000 byte, jadi jika Anda tidak dapat menemukan apa yang Anda cari, Anda mungkin perlu memeriksa arsip log secara langsung di server.

Pirate Wraith – membandingkan dua versi tema secara visual

Pirate Wraith di-host di wraith.themeisle.com

Pirate Wraith dibangun di atas Hantu dan memiliki titik akhir untuk berinteraksi dengan permintaan Slack, Travis dan AJAX untuk meningkatkan kemampuan Wraith dan menghasilkan Tes dan Laporan Regresi Visual.

Travis

Pirate Wraith memaparkan titik akhir di wraith.themeisle.com yang mendengarkan permintaan dari Travis build, dan "gagal" atau "melewati" build sesuai dengan hasil Uji Regresi Visual.

Di dalam file .travis.yml, kami menambahkan matriks baru yang mendefinisikan bangunan baru di atas yang sudah ada. Ini menetapkan izin untuk menjalankan skrip bash di dalam proyek dan kemudian menjalankannya.

File Travis YML:

matriks:
termasuk:
– php: "7.0"
before_install: chmod + x wraith.sh
Install:
before_script:
env: TEST_SUITE = Wraith_Visual_Regression_Testing WRAITH_FAIL = 5
skrip: ./wraith.sh

Anda bisa melihatnya "Install" dan "before_script" dibiarkan kosong. Ini sengaja, agar build tidak mewarisi tindakan dari build yang didefinisikan sebelumnya. Kami tertarik hanya menjalankan skrip bash (skrip: ./wraith.sh) pada bangunan ini.

Juga perlu diperhatikan; kami sedang mengatur variabel lingkungan yang disebut WRAITH_FAIL. Nilai ini digunakan untuk memberi tahu Pirate Wraith apa perbedaan persentil maksimum yang diizinkan untuk lulus tes.

Skrip Bash:

#! / bin / bash
WRAITH_SLUG = $ (node ​​-pe "membutuhkan (‘./ package.json’). wraithSlug")
WRAITH_FAIL = $ {WRAITH_FAIL: -5}
tubuh ="{
‘permintaan’: {
‘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,
}
}"
gema "Memicu pembangunan cabang $ TRAVIS_PULL_REQUEST_SLUG
$ TRAVIS_PULL_REQUEST_BRANCH ‘di Travis."
output = $ (curl -sw "% {http_code}" -X POST \
-H "Content-Type: application / json" \
-H "Terima: aplikasi / json" \
-H "Travis-API-Version: 3" \
-d "$ {tubuh // \ ‘/ \"}" \
‘http://wraith.themeisle.com’)
http_code ="$ {output: $ {# output} -3}"
if [$ {# output} -eq 3]; kemudian
tubuh =""
lain
tubuh ="$ {output: 0: $ {# output} -3}"
fi

if [$ http_code! = 200]; kemudian
gema "$ output";
keluar 1
lain
gema "$ output";
keluar 0
fi

Singkatnya, skrip ini membuat muatan JSON yang berisi variabel lingkungan Travis default dan yang ditetapkan pengguna. Juga, ia membaca paket.json dan mendapatkan tema slug.

Bagian kedua dari skrip melakukan permintaan POST via "ikal" ke Pirate Wraith dan mem-parsing respons untuk mengambil kode status HTTP / 1.1 dari respons.

Kami menggunakan kode status untuk "gagal" atau "lulus" membangun. API Pirate Wraith mengembalikan kode HTTP / 1.1 yang valid untuk setiap permintaan yang diprosesnya.

  • Ini akan mengembalikan kode 200 untuk menyelesaikan, lulus tes.
  • Untuk yang lainnya, build akan gagal dengan kode keluar 1 (keluar 1)

Anda mungkin bertanya-tanya apa yang dibandingkan dengan Wraith. Jawabannya sederhana; itu membandingkan penyebaran penyewa dari Permintaan Tarik saat ini dari Pirate Bootstrap dengan demo dari tema target.

Untuk pemahaman yang lebih baik tentang siklus hidup GitHub – Travis – Pirate – Pirate Wraith, berikut adalah diagram yang menggambarkan alur kerja layanan ini:

Pirate Bootstrap / alur kerja Pirate Wraith

Seperti yang Anda lihat, GitHub memberi tahu keduanya Bajak Laut Bootstrap dan Travis tentang Permintaan Tarik baru. Bootstrap mulai menyebarkan penyewa, Travis bertanya Perompak Bajak Laut untuk memulai tes.

Perompak Bajak Laut membandingkan versi Tenant dari Demo dengan Tema Demo dan kembalikan hasilnya ke Travis, sehingga bisa lulus atau gagal membangun.

Kendur

Selain dukungan Travis, Pirate Wraith memiliki titik akhir untuk berintegrasi dengan Slack.

Setelah build dari Travis selesai (lulus atau gagal), sebuah laporan dibuat di dalam saluran #eyepatch, berisi tautan ke galeri yang dihasilkan dan ringkasan dari perbedaan yang ditemukan.

Juga ada beberapa perintah Slack berguna yang dapat Anda gunakan di saluran apa pun (Catatan: API Wraith Pirate akan merespons di saluran itu dengan respons publik, jadi kami sarankan untuk menggunakan perintah dalam obrolan sendiri). Berikut adalah perintah untuk Slack:

Mengatur ulang pemotretan garis dasar riwayat tema

/ hantu-sejarah [tema-siput]

Contoh:

/ sejarah hantu zerif-lite |

Membandingkan dengan foto histori tema

/ wraith-terbaru [theme-slug] [url]

Contoh:

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

Perintah ini menggunakan siput yang disediakan untuk membandingkan URL yang diberikan dengan riwayat siput itu.

Membandingkan dua URL

/ perbandingan hantu [url] vs [url]

Contoh:

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

Bajak Laut Wraith – tips & trik, dan informasi bermanfaat lainnya

Mengatur ulang pemotretan garis dasar riwayat tema

reset sejarah wraith [theme-slug]

Perintah ini mengatur ulang sejarah untuk siput yang diberikan.

Membandingkan dengan foto histori tema

hantu memeriksa terbaru [theme-slug] [url]

Perintah ini menggunakan siput yang disediakan untuk membandingkan URL yang diberikan dengan riwayat siput itu.

Membandingkan dua URL

hantu membandingkan url [url-one] [url-two]

Melihat log

Perintahnya adalah tampilkan log. Perintah ini berguna jika Anda perlu memeriksa file log. Ini bekerja dengan cara yang sama seperti di Boot Bajak Laut.

Anda ambil?

Ini cukup meringkas dua layanan baru kami dan bagaimana mereka dapat digunakan untuk mengotomatiskan penerapan tema WordPress.

Kami menciptakan Pirate Bootstrap dan Pirate Wraith untuk melayani kebutuhan kami sendiri, tetapi kami percaya bahwa konsep-konsep ini dapat bermanfaat bagi siapa pun yang bekerja pada proyek dev yang sama. Terutama jika Anda sedang membangun produk turunan (seperti tema WordPress pro dan lite dalam kasus kami) dan Anda ingin memeriksa apa dampak perubahan kode spesifik pada penampilan mereka.

Masalahnya dengan tema WordPress adalah bahwa basis kode dari kebanyakan tema modern cenderung tumbuh cukup cepat, dan beberapa elemen spesifik dari basis kode tersebut dapat memiliki dampak yang tidak terduga pada penampilan elemen-elemen lain dari tema tersebut. Mencoba menangkap semua itu secara manual – hanya dengan melihat sesuatu melalui mata manusia Anda sendiri – bisa sangat menantang, jadi selalu sangat membantu untuk memperkenalkan beberapa bentuk algoritma / otomatisasi ke dalam campuran..

Tapi bagaimana menurutmu? Apakah Anda melihat nilai alat seperti ini untuk proyek lain juga?

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