Lingkungan Pengembangan WordPress Terbaik

Diterbitkan: 2017-01-18

Selama beberapa tahun terakhir, saya telah menulis banyak tutorial di sini di Blog WPMU DEV di mana saya berbagi informasi tentang lingkungan pengembangan yang saya gunakan.

Jadi hari ini, saya pikir sudah waktunya saya berbagi lingkungan penuh, jenis yang akan saya kumpulkan dan gunakan untuk pengembangan skala yang lebih besar.

Gulung lengan baju Anda dan bersiaplah untuk mengotori tangan Anda! Karena di bawah ini adalah panduan lengkap tentang jenis lingkungan pengembangan yang saya siapkan, dan bagaimana Anda melakukannya juga.

Catatan: Tutorial ini bukan untuk pemula. Jika Anda baru mengenal pengembangan WordPress, Anda tidak memerlukan lingkungan yang rumit karena dapat menimbulkan kerumitan yang tidak perlu. Perhatikan juga bahwa artikel ini dimaksudkan khusus untuk WordPress. Ide dan tujuan mungkin sama untuk proyek non-WordPress tetapi pendekatan dan alat yang digunakan akan berbeda.

Daftar isi

    1. Apa yang Membuat Lingkungan Pengembangan yang Baik
    2. Lingkungan yang Berkembang
    3. Server Lokal
    4. Alat Baris Perintah
    5. Skrip Bash
    6. Plugin WordPress
    7. Alat Lainnya

Apa yang Membuat Lingkungan Pengembangan yang Baik?

Di mata saya, lingkungan pengembangan yang baik memiliki tiga sifat berikut:

  1. Sangat portabel
  2. Sangat dapat dikonfigurasi
  3. Sangat otomatis

Portabilitas

Portabilitas merupakan faktor penting karena selain berbagi tema/plugin yang saya kembangkan, saya juga ingin dapat berbagi lingkungan pengembang.

Saya ingin pengembang lain dapat memeriksa sumber dari GitHub dan segera memulai, termasuk penggunaan alat apa pun seperti Gulp atau Grunt. Ini membuat proyek mudah dilakukan dan jika Anda mendukung kolaborasi yang lebih baik, Anda memiliki peluang lebih tinggi untuk membuat sesuatu berhasil.

Portabilitas juga dapat membantu Anda jika Anda perlu bekerja di komputer lain atau Anda ingin menunjukkan kepada rekan kerja Anda apa yang telah Anda lakukan. Kemampuan untuk mengatur segala sesuatunya di mana saja dalam beberapa menit telah membantu saya lebih dari yang dapat saya hitung.

Dapat dikonfigurasi

Kemampuan untuk mengonfigurasi lingkungan Anda adalah yang terpenting. Di sisi server, WordPress sangat pemaaf tetapi mampu menyempurnakan pengaturan build Anda, tugas Grunt, dan opsi lainnya adalah manfaat besar.

Opsi konfigurasi dan portabilitas bersama-sama berarti Anda dapat menguji pekerjaan Anda dengan mudah dalam situasi yang berbeda. Bagaimana kalau beralih versi PHP atau bahkan HHVM hanya untuk memastikan? Mungkin Anda dapat memeriksa kompatibilitas dengan versi lama WordPress dan plugin populer? Ini adalah hal-hal yang Anda harus dapat menguji.

Otomatisasi

Otomatisasi adalah salah satu penggerak utama dalam menciptakan lingkungan pengembangan untuk pekerjaan WordPress. Saya tidak ingin khawatir tentang skrip, lembar gaya, menyimpan pekerjaan saya, penerapan, dan sebagainya.

Alat baris perintah membentuk tulang punggung rangkaian otomatisasi saya, yang dapat melakukan segalanya mulai dari menyiapkan WordPress dengan satu perintah hingga mengemas produk saya.

Pekerjaan sedang berlangsung

Sebelum kita membahas secara spesifik, saya pikir saya akan membahas tentang bagaimana lingkungan pengembangan diimpikan oleh mereka yang menggunakannya.

Jika Anda adalah pendatang baru di dunia command-line, membangun alat, sistem kontrol versi, dan yang lainnya, sepertinya saya adalah profesional yang mengetahui segalanya dan menggunakan alat yang sempurna untuk setiap tugas.

Ini cukup jauh dari kebenaran! Saya berpengalaman dalam semua hal WordPress tetapi yang lainnya hanyalah beberapa tambahan yang saya gunakan atau perlu/ingin pelajari untuk membuat hidup saya lebih cepat. Saya menyalin yang lain, menemukan bagian-bagiannya sendiri, dan memodifikasi hal-hal yang diperlukan (kadang-kadang gagal total!).

Lingkungan pengembangan saya (dan banyak lainnya) adalah campuran dari yang berikut:

  • Pengetahuan pribadi yang diasah dengan baik
  • Tips hebat dari orang lain
  • Hanya beberapa hal acak yang saya temukan yang berhasil
  • Langkah-langkah yang bisa dilakukan jauh lebih baik tetapi saya tidak dapat diganggu untuk mengetahuinya

Dengan kata lain: Ini tidak sempurna tetapi menyelesaikan pekerjaan. Ada banyak ruang untuk perbaikan dan tempat untuk menggunakan alat lain, yang mungkin lebih Anda sukai. Jika Anda mengetahui alat atau alur kerja yang lebih bermanfaat, jangan ragu untuk menggunakannya dan beri tahu saya di komentar!

Server Lokal

WordPress berjalan pada PHP, yang merupakan bahasa pengkodean sisi server, sehingga kita memerlukan server untuk menjalankan WordPress. Opsi paling populer adalah:

  • Gelandangan
  • WAMP
  • XAMPP
  • MAMP

Saya mulai dengan XAMPP bertahun-tahun yang lalu. Saya kemudian pindah ke MAMP ketika saya menjadi pengguna Mac dan akhirnya beralih ke Vagrant sekitar dua tahun lalu. Web dan alat yang digunakan berkembang seperti biasa dan sekarang saya cenderung menggunakan Vagrant dan MAMP juga. Saya akan menjelaskan alasannya di bawah ini.

AMP

“AMP” dalam MAMP, XAMPP, dan WAMP adalah singkatan dari Apache, MySQL, dan PHP. Semua alat ini menginstal layanan dan GUI untuk membantu Anda mengelola proses yang digunakan oleh server. Anda mengunduh dan menginstal aplikasi, tekan tombol "on" dan semuanya akan berfungsi seperti yang diharapkan.

Antarmuka Pengguna MAMP
Antarmuka Pengguna MAMP

Kelebihan:
Ini cepat, mudah, intuitif, dan akan bekerja pada semua sistem sepanjang waktu. Ini memiliki antarmuka pengguna yang hebat, yang dapat Anda gunakan untuk mengubah pengaturan PHP, beralih ke Nginx, mengkonfigurasi Memcached, Postfix, mengatur server virtual, dan banyak lagi.

Kekurangan:
Meskipun ada banyak hal yang dapat Anda atur, kontrolnya terbatas. Anda tidak dapat mengubah sistem operasi atau membuat perubahan lain yang memungkinkan Anda melakukannya dengan akses SSH penuh.

Semua AMP kehilangan portabilitas karena alasan yang sama. Mereka cukup populer sehingga siapa pun dapat menginstalnya, tetapi mereka tidak mandiri dan minimal seperti konfigurasi Vagrant.

Gelandangan

Vagrant sedikit berbeda. Alih-alih pra-pengemasan dan lingkungan untuk Anda, ini memberi Anda kontrol penuh. Itu dibangun di atas VirtualBox (atau aplikasi VM lainnya) dan memungkinkan Anda untuk mengambil "kotak", yang pada dasarnya adalah sistem operasi. Anda kemudian dapat menggunakan skrip untuk mengonfigurasinya sendiri.

Kutipan Dari Skrip Penyediaan Gelandangan
Kutipan Dari Skrip Penyediaan Gelandangan

Kelebihan:
Konfigurasi mandiri hanya dalam dua file yang sangat kecil. Jika Anda terbiasa dengan baris perintah, pengaturan lingkungan bisa sesederhana vagrant up – sistem ini sangat portabel.

Anda dapat mengonfigurasinya sesuai keinginan Anda. Sistem operasi apa pun, perangkat lunak apa pun, dari berbagai metode caching hingga kompilasi PHP Anda sendiri. Anda dapat mereplikasi lingkungan host Anda yang sebenarnya dengan tepat untuk memastikan situs Anda akan berjalan dengan cara yang persis sama di mesin lokal Anda.

Kekurangan:
Jika Anda tidak cepat dalam penggunaan baris perintah, Vagrant dapat memiliki kurva belajar yang curam. Ketika semuanya berjalan lancar, yang perlu Anda lakukan hanyalah mengeluarkan satu perintah. Jika sesuatu menolak untuk bekerja, untuk alasan apa pun, Anda akan menemukan diri Anda dalam air yang dalam.

Ada alat untuk membuat host virtual dan melakukan tugas umum lainnya, UI MAMP lebih nyaman, setidaknya bagi saya. Jika saya memerlukan host virtual baru yang cepat dengan WP untuk diinstal, saya dapat melakukannya dengan MAMP + WP-CLI jauh lebih cepat daripada dengan Vagrant + WP-CLI.

Yang Mana yang Digunakan?

Jika Anda bekerja secara eksklusif dengan WordPress, alat seperti MAMP menawarkan lebih dari cukup fleksibilitas dan kekuatan. Ini memungkinkan Anda untuk bekerja dengan situs non-WordPress tentu saja, jadi jika Anda memiliki pekerjaan sampingan yang berada di luar lingkup WP, MAMP akan tetap melayani Anda dengan baik.

Jika Anda bekerja dengan tim besar pada proyek non-WP, saya sarankan untuk mengambil Vagrant dan mencobanya. Ini akan mengajari Anda banyak tentang bagaimana server bekerja secara internal dan memungkinkan Anda untuk berbagi lingkungan dengan tepat.

Preferensi saya adalah menggunakan keduanya. Ketika saya perlu (atau punya waktu), saya dapat mengonfigurasi lingkungan saya hingga detail terakhir dengan Vagrant. Ketika saya membutuhkan sesuatu yang sederhana atau untuk proyek WordPress, MAMP adalah pilihan pilihan saya.

Rachel McCollin, penulis lain di WPMU DEV, telah menulis panduan hebat tentang cara menyiapkan MAMP dan saya telah menyumbangkan Panduan untuk Pengembangan WordPress Dengan Vagrant, yang dapat Anda gunakan untuk menyiapkan lingkungan ini.

Alat Baris Perintah

Saya tidak menggunakan banyak alat CLI, tetapi yang saya gunakan adalah sebagian besar dari alur kerja saya. Yang paling menonjol adalah WP-CLI, Gulp, ngrok dan Ultrahook mari kita masuk ke sedikit detail.

WP-CLI

WP-CLI adalah alat baris perintah yang sangat kuat, yang memungkinkan Anda untuk mengotomatisasi segala sesuatu tentang WordPress. Saya sudah menulis tutorial tentang pengembangan WordPress Lanjutan dengan WP-CLI jadi saya akan menunjukkan kepada Anda beberapa keajaiban yang bisa dilakukan.

WP-CLI baru-baru ini memperoleh dukungan WordPress.org.
WP-CLI baru-baru ini memperoleh dukungan WordPress.org.

Menyiapkan Situs Baru

Anda dapat mengunduh, mengonfigurasi, dan menginstal WordPress dalam beberapa perintah sederhana seperti wp core download wp core config . Dokumentasinya banyak dan mudah diikuti.

Saya menggunakan WP-CLI bersama dengan skrip bash untuk membuat templat kecil untuk pembuatan situs baru. Anda dapat menggunakan perintah untuk menghapus plugin dan tema default serta mengunduh dan mengaktifkan plugin yang Anda gunakan secara teratur.

Cari dan Ganti

Pencarian dan penggantian basis data terkadang diperlukan tetapi bisa menyusahkan. Mengubah ke https, pindah ke domain baru, mengganti nama url, dan lainnya semuanya dapat membawa beberapa perubahan massal.

Karena database berisi sejumlah array serial, Anda tidak bisa hanya mencari dan mengganti SQL (kecuali nilai lama dan baru memiliki panjang yang sama). wp search-replace oldval newvalue akan melakukan semua itu untuk Anda, unserializing dan kemudian re-serializing array Anda.

Administrasi Jarak Jauh

WP-CLI memiliki SSH bawaan untuk membantu Anda mengelola situs melalui SSH. Ini berpotensi memungkinkan Anda mengelola ratusan situs dengan satu perintah (yaitu: memperbarui tema atau plugin di beberapa situs).

Banyak Lagi…

Hampir tidak ada akhir untuk apa yang dapat Anda lakukan dengan WP-CLI. Dari sekitar 35 kategori perintah bawaan, yang berisi sekumpulan sub-perintah hingga paket pihak ketiga, Anda dapat dengan mudah mengotomatiskan tugas apa pun.

Meneguk

Gulp adalah pekerja keras otomatisasi saya. Saya menggunakannya untuk mengelola skrip, gaya, gambar, bahkan pengujian seluler dan mekanisme penyegaran browser. Saya menulis artikel ekstensif tentang Menggunakan Gulp Dengan WordPress, lihat di sana untuk instruksi terperinci.

Saya lebih suka Gulp daripada pilihan populer lainnya – Grunt – karena perbedaan sintaks. Lihatlah artikel Grunt For WordPress Development saya dan buat keputusan sendiri!

Gulp menggunakan paket Node dan Node untuk fungsionalitasnya, menjadikannya sangat portabel dan kuat, karena ekstensi berbasis komunitas. Proses kerja saya dengan Gulp biasanya melibatkan hal-hal berikut:

  1. Temukan ekstensi yang sesuai dengan kebutuhan saya
  2. Instal paket node dengan npm
  3. Membutuhkan paket di Gulpfile
  4. Tulis tugas otomatisasi singkat

Satu-satunya bagian dari ini yang membutuhkan pemikiran sama sekali adalah nomor empat. Meski begitu, sebagian besar ekstensi memiliki contoh salin-tempel yang mungkin hanya perlu dimodifikasi sedikit.

Berikut adalah ekstensi yang paling sering saya gunakan:

  • gulp-sass untuk mengkompilasi Sass ke CSS
  • gulp-clean-css untuk mengecilkan CSS
  • gulp-autoprefixer untuk menambahkan awalan vendor secara otomatis
  • gulp-include untuk menggabungkan file JS
  • gulp-uglify untuk mengecilkan file JS
  • gulp-imagemin untuk mengoptimalkan gambar
  • Browsersync untuk membuat server dev yang membantu pengujian seluler
  • gulp-sourcemaps untuk membuat peta sumber untuk file yang diperkecil

ngrok

ngrok adalah layanan kecil dan alat baris perintah yang saya gunakan untuk membagikan pekerjaan lokal saya melalui internet. ngrok membuat terowongan aman ke lingkungan lokal, memaparkan aplikasi Anda pada URL khusus seperti http://7bbc49aa.ngrok.io .

Ultrahook

Ultrahook adalah kebalikan dari ngrok. Dimana ngrok merutekan localhost Anda ke web, ultrahook merutekan web ke localhost Anda. Ini sangat berguna untuk menguji API pihak ketiga seperti Stripe misalnya.

Anda dapat mengatur Stripe untuk mengirim webhook uji http://stripe.danielpataki.ultrahook.com yang akan diteruskan dengan aman ke server lokal Anda.

Plugin WordPress

Bagi kebanyakan dari kita, pengembangan WordPress identik dengan pengembangan plugin dan tema. Repositori penuh dengan plugin yang membantu pengembang membuat pekerjaan yang lebih baik lebih cepat. Berikut adalah beberapa yang saya gunakan atau gunakan secara teratur.

Pemeriksaan Tema

Plugin yang harus digunakan untuk pembuat tema. Pemeriksaan Tema akan menganalisis tema Anda dan memberikan alasan mengapa tema tersebut tidak memenuhi standar WordPress. Itu terlihat pada kode usang, file asing, praktik buruk, kesalahan umum, dan banyak masalah potensial lainnya.

Bidang Kustom Tingkat Lanjut

Bidang Kustom Lanjutan atau ACF adalah plugin favorit saya sepanjang masa. Ini memungkinkan pengembang untuk membuat bidang khusus yang indah untuk tema dan plugin mereka dalam UI yang intuitif dan cepat. Setelah selesai, Anda dapat menyembunyikan ACF sama sekali dan menempelkan kode PHP yang dihasilkan ke pekerjaan Anda untuk menjaga bidang tetap utuh. Plugin yang dijalankan dengan baik dan sangat berguna!

Bidang Kustom Lanjutan. Hal-hal yang kuat.

Pemantau Kueri

Query Monitor memungkinkan Anda untuk melihat dengan tepat apa yang terjadi di lingkungan WordPress Anda dari sudut pandang akses database. Anda dapat menangkap kueri yang berpotensi lambat atau berlebihan sebelum mereka keluar ke produk langsung dan mengoptimalkan yang sudah ada untuk membuat kode Anda lebih cepat.

Skrip Bash

Skrip Bash berisi sekumpulan perintah yang dijalankan satu demi satu dan dapat digunakan untuk mengotomatiskan tugas lebih lanjut. Misalnya, sudah mudah menginstal WordPress dengan WP-CLI. Yang diperlukan hanyalah sebagai berikut:

Perintah-perintah ini harus dikeluarkan satu demi satu, yang membutuhkan sedikit waktu. Dengan menempatkan ini dalam sebuah file, sebut saja install.sh , Anda dapat membuat template untuk membuat instalasi WP.

Tempatkan file di folder tempat Anda ingin membuat instalasi dan ketik bash install.sh . Semua perintah akan dikeluarkan dan dalam beberapa detik Anda akan memiliki situs dan berjalan.

Dengan menambahkan parameter, Anda dapat membuatnya lebih berguna. Jika Anda mengeluarkan perintah seperti ini: bash install.sh newsite Anda dapat menggunakan parameter untuk mengisi nama database, URL, dan judul situs.

File Bash juga dapat berguna untuk membuat build akhir (menghapus folder dan file asing, memindahkan direktori, dll.) dan tugas serupa lainnya. Mereka bahkan dapat dijalankan dari tugas Gulp yang memberi Anda banyak fleksibilitas dalam alur kerja Anda.

Alat Lain-Lain

Ekstensi browser sangat membantu saat menguji situs. Berikut adalah beberapa yang saya gunakan dalam alur kerja saya.

Tukang pos

Postman adalah ekstensi chrome untuk membangun, menguji, dan mendokumentasikan API. Saya menemukan bahwa setiap kali saya perlu memotret permintaan cepat untuk melihat cara kerja API, Tukang pos jauh lebih cepat daripada alat lainnya.

Kemampuan untuk menyimpan dan mengelola permintaan sangat berguna. Pengujian API adalah sesuatu yang jarang saya lakukan tetapi ketika saya melakukannya, itu menghabiskan sebagian besar hari saya, menggunakan sesuatu seperti Postman membuat hidup saya jauh lebih mudah.

Sunting Cookie Ini

EditThisCookie adalah contoh lain dari ekstensi Chrome yang tidak banyak saya gunakan, tetapi ketika saya melakukannya, saya menghemat waktu berjam-jam. Ini memungkinkan Anda melihat/menghapus/mengedit cookie satu situs. Itu saja, tapi astaga, betapa bergunanya itu!

Waktu Muat Halaman

Waktu Muat Halaman melakukan apa yang Anda pikirkan, menganalisis pemuatan halaman. Itu bisa masuk ke detail penting seperti DNS/Permintaan dan waktu respons, tetapi yang saya suka adalah ini menunjukkan waktu buka keseluruhan di bilah alat. Sangat berguna untuk perbandingan cepat.

Pemformat JSON

Entri ekstensi browser terakhir saya ke dalam kategori alat misc adalah JSON Formatter, yang mendeteksi ketika respons hanyalah string JSON dan memformat semuanya dengan baik dan tepat, bukan hanya mengeluarkan blok teks.

Franz

Yang ini sebenarnya tidak ada hubungannya dengan pengembangan! Franz adalah alat yang dapat menggabungkan sejumlah layanan web di bawah satu atap. Aplikasi My Messenger, Slack, Skype, Inbox by Gmail, Trello, Google Calendar, dan Todoist semuanya berjalan dalam satu jendela, bukan aplikasi asli mereka.

Semuanya terlihat persis seperti saya menjalankannya di lingkungan yang biasa, tetapi saya tidak perlu memiliki semua ikon itu dan saya dapat beralih di antara mereka dengan lebih mudah. Saya menyebut Franz karena itu membantu saya lebih fokus sekaligus berkomunikasi dengan lebih baik.

VVV

Memvariasikan Vagrant Vagrant atau disingkat VVV adalah konfigurasi Vagrant open-source untuk pengembangan untuk WordPress dan WordPress itu sendiri. Ini berisi semua alat yang Anda perlukan untuk memulai, termasuk build pengembangan WordPress.

Banyak Lagi!

Ada begitu banyak alat yang belum saya sebutkan, sebagian besar karena saya tidak menggunakannya. Mereka adalah alat yang hebat tetapi saya belum menggunakannya, tidak membutuhkannya atau tidak cocok dengan alur kerja saya. Berikut adalah daftar beberapa kehebatan yang harus Anda lihat:

  • Menggarisbawahi untuk boilerplate tema hebat yang dibuat oleh departemen tema WordPress
  • Root untuk seluruh tumpukan WordPress termasuk server, manajemen aplikasi, dan tema pemula. Saya menemukan ini terlalu rumit untuk selera saya, tapi mungkin terserah Anda.
  • WordPress Plugin Boilerplate untuk pengembangan plugin berorientasi objek standar.

Jadikan Lingkungan Pengembangan Anda Milik Anda

Kesimpulannya, ini adalah alat yang saya gunakan – alat ini mungkin belum tentu paling cocok untuk Anda, juga tidak paling cocok untuk setiap situasi. Penyiapan ini cukup fleksibel untuk kebutuhan saya, jadi luangkan waktu untuk meneliti opsi dan membuat alur kerja yang sesuai untuk Anda.

Semoga berhasil!

Jika Anda memiliki tip bagus untuk otomatisasi atau meningkatkan lingkungan pengembangan WordPress, beri tahu kami di komentar di bawah!
Tag: