Advertisement
  1. Code
  2. WordPress

Phát triển WordPress với VVV

Scroll to top
Read Time: 23 min

Vietnamese (Tiếng Việt) translation by Dai Phong (you can also view the original English article)

Japh, trong bài viết trước đây của anh ấy, đã giải thích lý do—và cuối cùng đã thuyết phục chúng tôi—thiết lập môi trường phát triển của chúng tôi gần giống các máy chủ web từ xa bằng cách sử dụng Vagrant. Bài viết đã trên hai tuổi, nhưng ý tưởng thì vẫn còn liên quan đến hôm nay. Hơn nữa, Vagrant đã mới có được sức hút từ cộng đồng WordPress với cấu hình Vagrant đặc biệt có tên là VVV, viết tắt của Varying Vagrant Vagrants.

VVV là một bộ thiết lập sẵn các cấu hình Vagrant hướng đến các dự án WordPress như phát triển một theme, một plugin, hoặc đóng góp cho nhân của WordPress. VVV cũng được đóng gói với một số các công cụ như WP-CLI, PHP Code Sniffer, và Composer thật sự cải thiện quy trình công việc phát triển của chúng ta.

Tuy nhiên, bằng cách sử dụng một ứng dụng như MAMP, WAMP hoặc XAMPP đã cung cấp đầy đủ sự thuận tiện nhất cho nhiều nhà phát triển; những công cụ này có thể đã phục vụ họ rất tốt cũng vì vậy mà chuyển sang VVV dường như là không cần thiết.

Với lý do đó, hướng dẫn này nhằm vào các bạn những người đã là người sử dụng một thời gian dài các ứng dụng truyền thống để phát triển WordPress, và bây giờ cảm thấy rằng các ứng dụng đó không còn phù hợp với các dự án lớn và phức tạp hơn.

Có thể bạn đã đọc ở đâu đó về Vagrant được xem như là một sự thay thế tuyệt vời, nhưng bạn không biết bắt đầu từ đâu và Vagrant có phải là công cụ phù hợp cho bạn hay không. Vì vậy trước khi tiếp tục đi sâu, chúng ta sẽ phác hoạ trường hợp của dự án phát triển của chúng ta trong đó sử dụng VVV sẽ là phù hợp.

Hãy bắt đầu nào.

Tóm tắt dự án

Trước hết, chúng ta có một đội ngũ các nhà phát triển giúp chúng ta trong dự án này. Nhóm của chúng ta được phân bổ trên toàn cầu, và mọi người đều có sở thích riêng của họ—một số sử dụng Windows, trong khi những người khác sử dụng OS X. Chúng ta áp dụng Vagrant và VVV do đó tất cả mọi người có môi trường tương tự và tạo đầu ra của bài kiểm tra thích hợp hơn.

Dự án của chúng ta là tạo ra một theme và một plugin mà chúng ta sẽ gửi đến kho lưu trữ WordPress.org tương ứng.

Theme sẽ tương thích với một số các plugin phổ biến như Jetpack, WooCommerce, EDDBBPress. Chúng ta cũng sẽ kiểm tra plugin đối với một số plugin khác, đảm bảo không có xung đột hoặc lỗi khi chúng đang hoạt động với nhau.

Hơn nữa, theme và plugin cũng sẽ tương thích với các hai phiên mới nhất cũng như hai phiên bản bản trước đó của WordPress và phải sẵn sàng cho bản phát hành WordPress trong tương lai bằng cách thử nghiệm chúng thông qua các phiên bản Beta.

Bảng sau đây cho thấy nơi theme và plugin sẽ tương thích với các phiên bản WordPress cũng như với một số plugin.

Tính tương thích Acme-StoreFront (theme) Acme-LocalCurrency (plugin)
WordPress 4.2 -
WordPress 4.3 -
WordPress mới nhất
WordPress Beta
Jetpack -
BBPress -
Easy Digital Downloads (EDD)
WooCommerce

Hơn nữa, chúng ta có thể có một trang web cục bộ tại jetpack.wordpress.dev mà sẽ chứa theme (hoặc plugin) phụ thuộc vào một hoặc nhiều mô-đun của Jetpack chẳng hạn như Infinite Scroll và Sharing.

Để tránh các rắc rối với các plugin khác, những plugin được kích hoạt bên trong jetpack.wordpress.dev chỉ là Jetpack, ngoại trừ đối các plugin hỗ trợ việc phát triển chẳng hạn như Query MonitorVIP Scanner, và Debug Bar.

Cuối cùng, chúng ta cũng có thể tạo ra woo.wordpress.dev, bbp.wordpress.dev và vân vân để xây dựng và kiểm thử các dự án của chúng ta xung quanh những tính năng của các plugin này.

Những gì bạn cần phải cài đặt?

  • Git: Trong hướng dẫn này, chúng ta sẽ chủ yếu sử dụng Git để clone một kho lưu trữ (repository). Tuy nhiên, nhìn chung, bạn nên sử dụng nó để theo dõi và quản lý các thay đổi dự án của bạn.
  • Terminal: hầu hết các tác vụ của chúng ta trong suốt hướng dẫn này sẽ được thực hiện tại Terminal. Người dùng Windows 10 cuối cùng sẽ có thể chạy các Bash script thông qua Command Prompt. Người dùng Windows 8 hoặc 7 thể sử dụng Bash Git, được cài đặt sẵn thông qua trình cài đặt Git, Cygwin. Cmder có thể là một sự thay thế tốt.
  • Homebrew: đối với người dùng OSX tôi khuyên bạn nên cài đặt HomebrewHomebrew Cask, việc này sẽ làm cho việc cài đặt một số thứ trong hướng dẫn này dễ dàng hơn. Đây là một hướng dẫn từ trang web anh chị của chúng tôi, Computer Tuts+, Các cấu hình hoàn hảo với Homebrew và Cask.

Bây giờ chúng ta đã có một ý tưởng sơ khai về những gì chúng ta đang làm và bạn có những công cụ này được cài đặt, chúng ta bây giờ sẽ tiến hành thiết lập và chạy VVV. Hãy bắt đầu nào!

Bước 1: Cài đặt VirtualBox

Trước tiên, chúng ta cần một máy ảo (VM) để lưu trữ các môi trường phát triển của chúng ta được tạo ra thông qua Vagrant. Trong hướng dẫn này, chúng ta chọn VirtualBox; nó thì miễn phí và làm việc đa nền tảng. Một trình cài đặt sẵn có cho mỗi nền tảng-Windows, OSX, và một số bản phân phối Linux — trên trang Tải về.

VirtualBox Download PageVirtualBox Download PageVirtualBox Download Page

Khởi động trình cài đặt và làm theo tất cả các bước cho đến khi kết thúc quá trình. Ngoài ra, người dùng OS X có thể cài đặt VirtualBox thông qua Homebrew Cask, nó cho phép bạn cài đặt VirtualBox thuận tiện hơn với một dòng lệnh như sau.

1
brew cask install virtualbox

Một khi VirtualBox được cài đặt, có thể mất một thời gian, thì chúng ta tiến hành cài đặt Vagrant.

Bước 2: Cài đặt Vagrant

Tương tự, một trình cài đặt Vagrant là sẵn có cho OS X, Windows và Linux. Tải về một trong những nền tảng của bạn và làm theo thông qua các bước. Người dùng OS X có thể cài đặt nó thông qua Homebrew Cask với dòng lệnh sau đây.

1
brew cask install vagrant

Một khi nó được cài đặt, bạn sẽ có thể truy cập đến vagrant CLI.

Vagrant command in OSX TerminalVagrant command in OSX TerminalVagrant command in OSX Terminal
Truy vấn phiên bản Vagrant được cài đặt trong OSX Terminal

Bước 3: Cài đặt các Plugin cho Vagrant

Cài đặt các plugin cho vagrant sau đây là không bắt buộc, nhưng nói chung nó là một ý tưởng tốt để đơn giản hoá quá trình thiết lập môi trường phát triển VVV, bao gồm thiết lập và chạy các trang web cục bộ.

Vagrant Hosts Updater: plugin này sẽ cho phép Vagrant cập nhật tập tin hosts để đăng ký tên miền cho các trang web cục bộ. Nếu không, chúng ta sẽ phải tự thêm nó, điều này nghe hơi bất tiện.

Chạy lệnh sau để cài đặt plugin:

1
vagrant plugin install vagrant-hostsupdater

Vagrant Triggers: plugin này sẽ cho phép VVV để tự động hoá một số tiến trình giống như sao lưu cơ sở dữ liệu. Để cài đặt nó, chạy:

1
vagrant plugin install vagrant-triggers

Điều kiện tiên quyết — VirtualBox và Vagrant cùng với các plugin — được thiết lập. Vì vậy, chúng ta có thể bắt đầu cài đặt VVV.

Bước 4: Cài đặt VVV

Trước tiên, clone VVV từ kho chứa trên GitHub vào một thư mục cục bộ.

1
git clone git://github.com/Varying-Vagrant-Vagrants/VVV.git

Sau khi đã clone, điều hướng đến thư mục nơi nó được đặt. Sau đó chạy nó lên với dòng lệnh sau đây:

1
cd vvv; vagrant up

VVV sẽ tải về và cài đặt Ubuntu như là hệ điều hành ảo, lưu trữ các trang web cục bộ. Tại một số thời điểm, bạn cũng có thể cần phải nhập mật khẩu của bạn để cho Vagrant ghi vào tập tin hosts của bạn.

Terminal is running vagrant up commandTerminal is running vagrant up commandTerminal is running vagrant up command
VVV khởi tạo lần đầu tiên

Hãy nhớ rằng, đây là lần đầu tiên chúng ta thiết lập VVV và chạy nó. Quá trình sẽ mất khá nhiều thời gian; nó có thể mất từ 30 phút đến một giờ hoặc lâu hơn để hoàn tất. Đi dạo, uống cà phê, hoặc nghỉ ngơi trong khi quá trình đang chạy.

Khi VVV được thiết lập và chạy, nó cung cấp cho chúng ta với một vài cài đặt mặc định của WordPress, như sau:

  • local.wordpress.dev: phiên bản ổn định mới nhất của WordPress.
  • local.wordpress-trunk.dev: nó là phiên bản nightly của WordPress. Nếu bạn đăng nhập vào Dashboard (bảng điều khiển), bạn sẽ thấy dòng chữ You are using a development version (4.5-RC1-37169) ở phía dưới trong phần footer.

Đăng nhập vào các trang này bằng người dùng admin và mật khẩu là password.

Bước 5: Thêm một dự án WordPress mới trong VVV

Bây giờ mà chúng ta đã thiết lập VVV và chạy nó, chúng ta có thể tạo dự án mới của chúng ta. Chúng ta sẽ tạo ra một theme và plugin. Và sở thích của tôi là luôn luôn bắt đầu một theme bằng Underscores và sử dụng plugin WPPB.

Chúng ta thêm các mẫu tương ứng vào trong thư mục bên trong /wp-content/ của local.wordpress.dev, nằm ở {vvv-directory}/www/wordpress-default/wp-content/.

WordPress local website installed by VVV viewed in ChromeWordPress local website installed by VVV viewed in ChromeWordPress local website installed by VVV viewed in Chrome

Tiếp tục phát triển các theme và plugin; Thêm một số tính năng, thêm một trang cài đặt cho theme, tích hợp sâu với Customizer cho theme, và cuối cùng đã làm cho chúng sẵn sàng cho các bản phát hành kế tiếp của WordPress.

Envato Tuts+ đã xuất bản nhiều bài viết hữu ích khác nhau cho quá trình phát triển. Sau đây là một vài lựa chọn yêu thích của tôi:

Tạo một trang cục bộ với VV

Như chúng ta đã đề cập trước đó, chúng ta sẽ tạo ra thêm một vài trang web cục bô nơi chúng ta sẽ phát triển theme và plugin của chúng ta để tích hợp với một plugin như Jetpack, WooCommerce, EDD và BBPress. Chúng ta cũng sẽ thiết lập một vài trang web để kiểm thử các dự án của chúng ta đối với các phiên bản trước của WordPress, trong trường hợp này, 4.3 và 4.2. Tại thời điểm này, chúng ta đã chỉ có local.wordpress-trunk.dev, lưu trữ bản nightly của WordPress, phiên bản beta hoặc phiên bản release candidate (RC).

Tạo và thiết lập một trang web cục bộ thường mất một vài bước. Trước tiên, chúng ta sẽ phải tải về bản sao của WordPress, giải nén và đặt nó trong thư mục gốc của localhost của chúng ta, tạo cơ sở dữ liệu, chạy trình cài đặt WordPress và thay đổi tập tin hosts để đăng ký tên miền. Nếu chúng ta tiến hành tạo ra, ví dụ, ba hoặc nhiều hơn các trang web cục bộ, chúng ta sẽ sớm thấy rằng quá trình này tốn thời gian.

Với VVV và phần mở rộng của nó được đặt theo tên VV, viết tắt Variable VVV, chúng ta sẽ có thể làm việc hiệu quả hơn với ít tốn công hơn. Hãy xem cách triển khai VV.

Cài đặt VV

Vì tiến trình cài đặt VV trong OS X và Windows khác nhau, nên phần này được chia thành hai phần. Bạn có thể nhảy ngay vào phần nền tảng mà bạn đang sử dụng.

Cài đặt VV trong OS X

Cách dễ nhất để cài đặt VV trong OSX là thông qua Homebrew. Chỉ cần gõ lệnh sau đây.

1
brew install bradp/vv/vv

Cài đặt VV trong Windows

Trong Windows, trước tiên bạn sẽ cần clone kho VV, một nơi nào đó trong thư mục máy tính của bạn.

1
git clone https://github.com/bradp/vv.git vv

Sau đó, chúng ta cần Windows nhận ra các lệnh vv.

Để làm điều đó, bấm chuột phải vào My Computer hoặc This PC và chọn Properties.... Sau đó, vào Advanced System Settings > Environment Variables. Chọn "Path" từ danh sách biến System và nhấp Edit....

Windows System PathWindows System PathWindows System Path

Thêm đường dẫn thư mục vv mà bạn đã clone trước đó. Ví dụ: C:\Users\thoriq\Sites\vv.

Edit System Variable diablog in WindowsEdit System Variable diablog in WindowsEdit System Variable diablog in Windows

Sau khi cài đặt, chúng ta sẽ được quyền truy cập vào các lệnh vv trên toàn cục. Lệnh này sẽ cho phép chúng ta thiết lập các cài đặt và chạy WordPress mới cùng với những thứ khác, mà bạn có thể tìm thấy các chi tiết của thông qua lệnh vv --help.

List of VV command viewed in OS X TerminalList of VV command viewed in OS X TerminalList of VV command viewed in OS X Terminal
Trong OS X: Danh sách lệnh VV CLI

Trong Windows, CLI là có thể truy cập thông qua cả Command Prompt (cmd.exe) và Bash Git.

Tạo một trang WordPress mới

VV đã thực hiện cài đặt một trang web WordPress mới dễ dàng như việc gõ lệnh sau đây:

1
vv create

Sau khi thực thi, nó sẽ nhắc một vài câu hỏi trên đường đi để cấu hình các trang web mới, cụ thể là:

1. Đặt tên thư mục của trang

Đối với người dùng MAMP, nó tương tự như việc tạo ra một thư mục mới trong tài liệu gốc của MAMP tại /MAMP/htdocs/. Đây là thư mục nơi cư trú của tất cả các tài nguyên của trang web. Trong bước này, hãy nhập tên thư mục không có khoảng cách, tốt hơn là chữ thường, ví dụ:

The directory name prompt in OS X TerminalThe directory name prompt in OS X TerminalThe directory name prompt in OS X Terminal

2. Đặt tên miền

Thiết lập tên miền cho trang web mới của chúng ta. Một tên miền cho một trang web cục bộ thường kết thúc với .dev hoặc .local. Trong trường hợp này, tôi sẽ đặt tên là 42.wordpress.dev. Nó là một tên miền con với số 42, tham chiếu đến các phiên bản WordPress, 4.2.x, mà chúng ta sẽ cài đặt.

Naming the domainNaming the domainNaming the domain

3. Thiết lập phiên bản của WordPress

Ở đây chúng ta sẽ cài đặt WordPress 4.2.8, là phiên bản cuối cùng trong nhánh 4.2. Danh sách đầy đủ của các bản phát hành WordPress có thể được tìm thấy trên trang Release Archive.

Set the WordPress VersionSet the WordPress VersionSet the WordPress Version

4. Kích hoạt Multisite (Đa trang web)

Nó hỏi chúng ta có muốn kích hoạt chế độ WordPress Multisite không. Chúng tôi chọn N.

Prompt in Terminal Install as multisite yNPrompt in Terminal Install as multisite yNPrompt in Terminal Install as multisite yN

Thời điểm hiện tại, việc hỗ trợ WordPress Multisite cho theme và plugin của chúng ta không phải là ưu tiên hàng đầu. Nếu chúng ta có bao giờ cần phải xây dựng và kiểm thử dự án dưới môi trường đa trang web, thì sau đó, chúng ta có thể tạo ra các trang web khác dưới một tên miền mới, ví dụ như mu.wordpress.dev.

5. Các tài nguyên trong WP-Content

Thư mục wp-content của WordPress thường chứa một số thư mục con, chẳng hạn như themes, plugins và uploads. Đôi khi tôi cũng có thể tạo một vài các thư mục phụ để lưu trữ một số tập tin tùy ý. Nếu bạn có một nội dung sẵn lưu trữ trên một kho Git, bạn có thể nhập vào URL và cho VV clone kho.

Bây giờ, chúng ta để nó trống.

VV Prompt in Terminal Git repo to clone as wp-content leave blank to skipVV Prompt in Terminal Git repo to clone as wp-content leave blank to skipVV Prompt in Terminal Git repo to clone as wp-content leave blank to skip

6. Nhập SQL

Chúng ta không có một cơ sở dữ liệu SQL để nhập, vì vậy chúng ta cũng sẽ để dấu nhắc này trống. Tuy nhiên, nếu bạn có, chỉ rõ đường dẫn thư mục nơi các tập tin SQL cư trú, ví dụ: /Sites/db/wp.sql.

VV Prompt in Terminal Git repo to clone as wp-content leave blank to skipVV Prompt in Terminal Git repo to clone as wp-content leave blank to skipVV Prompt in Terminal Git repo to clone as wp-content leave blank to skip

7. Các theme và plugin mặc định

WordPress đi kèm với các theme mặc định (ví dụ như TwentyFifteen, TwentySixteen, vv) và các plugin (AkismetHello Dolly) mà thông thường, chúng tôi sẽ không sử dụng. Trong bước này, chúng ta có thể truyền y vào dấu nhắc để cho VV biết để loại bỏ chúng hoàn toàn.

VV Prompt in Terminal Remove default themes and pluginsVV Prompt in Terminal Remove default themes and pluginsVV Prompt in Terminal Remove default themes and plugins

8. Nội dung mẫu

Chúng ta có thể nói cho VV để cài đặt mẫu nội dung từ WPTest. Nó là một bộ nội dung mở rộng bao gồm các bài viết, trang và ý bình luận. Nội dung này sẽ có ích cho bất kỳ vấn đề nào, hoặc lỗi nào trong các theme và plugin. Do đó gõ y.

VV Prompt in Terminal Add sample content to siteVV Prompt in Terminal Add sample content to siteVV Prompt in Terminal Add sample content to site

9. WP_DEBUG

Chúng ta chắc chắn sẽ kích hoạt WP_DEBUG để cho WordPress in ra lỗi PHP trong quá trình phát triển. Do đó, gõ y tại dấu nhắc.

VV Prompt in Terminal Enable WP_DEBUG and WP_DEBUG_LOGVV Prompt in Terminal Enable WP_DEBUG and WP_DEBUG_LOGVV Prompt in Terminal Enable WP_DEBUG and WP_DEBUG_LOG

10. Xác nhận

Cuối cùng, xác nhận tất cả các cấu hình được định nghĩa là chính xác trước khi VV tiến hành cài đặt. Nếu tất cả mọi thứ có vẻ tốt, gõ y để tiến hành. Nếu không, gõ n để hủy bỏ tác vụ và bạn có thể lặp lại vv create từ đầu.

Sau khi thực hiện xong, VV sẽ hiển thị các trang web cũng như tên người dùng và mật khẩu — để đăng nhập, như sau.

The New Site Address and its CredentialThe New Site Address and its CredentialThe New Site Address and its Credential

Lặp lại các bước này để cài đặt các trang web nói trên trong phần "Project Briefing" của hướng dẫn này.

Tổ chức và đồng bộ hóa dự án

Bây giờ chúng ta có một số trang web với các môi trường khác nhau để kiểm thử các dự án của chúng ta — các theme hoặc plugin. Số lượng các trang web của chúng ta sẽ tăng lên theo thời gian, đến các thời điểm nơi mà việc sao chép các thư mục dự án xung quanh cho những môi trường thử nghiệm này sẽ là một sự bất tiện.

Do đó, chúng ta sẽ cần một thư mục duy nhất mà chúng ta có thể bố trí dự án vào các trang web cùng một lúc, cuối cùng làm cho công việc của chúng ta có tổ chức hơn.

Tóm tắt về Drive Mapping

Vagrant cho phép chúng ta đồng bộ hoá thư mục đến các máy ảo. Trong thực tế, Vagrant triển khai tính năng rất riêng của nó ở bên dưới. Nếu chúng ta nhìn vào Vagrantfile dưới phần "Drive Mapping", chúng ta sẽ thấy nó đồng bộ một số thư mục trong đó có www/ nơi cài tất cả các cài đặt của trang web của chúng ta được lưu trữ.

Vagrantfile source code defining the www folder map to the Virtual MachineVagrantfile source code defining the www folder map to the Virtual MachineVagrantfile source code defining the www folder map to the Virtual Machine

Ánh xạ một thư mục tuỳ biến

Để bắt đầu, đầu tiên chúng ta cần tạo ra hai thư mục tương ứng để lưu trữ các plugin và theme của chúng ta. Bạn có thể đặt những thư mục này bất cứ nơi nào trên máy tính của bạn. Trong trường hợp của tôi, tôi có một thư mục tên là dev có chứa tất cả các dự án của tôi, như sau.

1
.
2
└── dev
3
  └── library
4
    ├── plugins
5
    └── themes

Sau đó, chúng ta sẽ đăng ký bản ánh xạ của những thư mục này. Chúng ta có ba trang web WordPress được cài đặt tại local.wordpress.devlocal.wordpress-trunk.dev. Vì vậy, những thư mục này sẽ được ánh xạ, trỏ đến và đồng bộ hoá cho mỗi thư mục trong /plugins//themes/ của các trang web này trong máy ảo.

Tuy nhiên, nên luôn luôn hạn chế việc sửa đổi tập tin hệ thống mặc định. Do đó thay vì việc sửa đổi Vagrantfile, chúng ta sẽ thêm cấu hình ánh xạ trong một tập tin tên Customfile—nhìn vào Vagrantfile, dòng 241, chúng ta sẽ thấy nó được nạp để áp dụng tuỳ chỉnh hoặc ghi đè lên các cấu hình mặc định.

Vagrantfile source code for CustomfileVagrantfile source code for CustomfileVagrantfile source code for Customfile

Tạo tập tin Customfile trong cùng một vị trí với Vagrantfile.

1
.
2
└── vvv
3
	└── Vagrantfile
4
    ├── Customfile

Thêm những dòng mã sau đây, tôi nghĩ là tự bản thân các tập tin đã tự giải thích chính nó.

1
##Plugins

2
config.vm.synced_folder "/Users/thoriq/Sites/dev/plugins/", "/srv/www/wordpress-default/wp-content/plugins", :owner => "www-data", :mount_options => [ "dmode=775", "fmode=774" ]
3
config.vm.synced_folder "/Users/thoriq/Sites/dev/plugins/", "/srv/www/wordpress-develop/wp-content/plugins", :owner => "www-data", :mount_options => [ "dmode=775", "fmode=774" ]
4
config.vm.synced_folder "/Users/thoriq/Sites/dev/plugins/", "/srv/www/wordpress-42/htdocs/wp-content/plugins", :owner => "www-data", :mount_options => [ "dmode=775", "fmode=774" ]
5
6
##Themes

7
config.vm.synced_folder "/Users/thoriq/Sites/dev/themes/", "/srv/www/wordpress-default/wp-content/themes", :owner => "www-data", :mount_options => [ "dmode=775", "fmode=774" ]
8
config.vm.synced_folder "/Users/thoriq/Sites/dev/themes/", "/srv/www/wordpress-trunk/wp-content/themes", :owner => "www-data", :mount_options => [ "dmode=775", "fmode=774" ]
9
config.vm.synced_folder "/Users/thoriq/Sites/dev/themes/", "/srv/www/wordpress-42/htdocs/wp-content/themes", :owner => "www-data", :mount_options => [ "dmode=775", "fmode=774" ]

Nạp lại Vagrant bằng cách chạy vagrant reload, hoặc vagrant up nếu nó hiện không chạy. Các plugin và theme trong /dev/plugins//dev/themes/ bây giờ sẽ được liệt kê trong tất cả các trang web.

List of plugins in the sitesList of plugins in the sitesList of plugins in the sites

Thêm GUI Layer

Tại thời điểm này, chúng ta đã thiết lập Vagrant và VVV và chạy nó. Bây giờ, chúng ta đã có thể tạo ra một trang web cục bộ mới trong một vài phút mà không phải tải về gói .zip của WordPress, giải nén gói và chỉnh sửa tập tin hosts một cách rắc rối.

Hầu hết các tác vụ của chúng ta cho đến thời điểm này đã được thực hiện thông qua giao diện dòng lệnh. Có thể thông cảm là có thể có một chút e ngại cho những người lần đầu tiên, đặc biệt là đối với những người đến từ giao diện đồ họa ứng dụng như MAMP hoặc WAMP. Chỉ mất thời gian để sử dụng nó.

Tuy nhiên, một số tác vụ của Vagrant có thể được thay thế bởi một đối tác GUI (Giao diện đồ hoạ). Hiện có một số tiện ích mở rộng có sẵn mà thêm lớp GUI vào Vagrant và VVV, làm cho việc thực hiện một số công việc dễ dàng như một cú nhấp chuột. Một số chúng bao gồm:

Vagrant Dashboard

Vagrant Dashboard tại vvv.dev có lẽ là một công cụ tương đương với MAMP của trang localhost/MAMP/, ngoại trừ nó sẽ xuất hiện ở màu trắng thuần tuý.

VVV default dashboard appearanceVVV default dashboard appearanceVVV default dashboard appearance

May mắn thay, chúng ta có thể làm cho nó hoạt động với một phần mở rộng. Có một vài lựa chọn, và tôi sẽ lựa chọn VVV Dashboard bởi topdown. Để triển khai các mở rộng, di chuyển vào thư mục /www/default/ và kéo về các kho tiện ích mở rộng:

1
git clone https://github.com/topdown/VVV-Dashboard.git dashboard

Sau đó sao chép /dashboard/dashboard-custom.php vào /defaults/, như sau.

1
.
2
── dashboard
3
├── dashboard-custom.php (the customized dashboard)
4
├── database-admin
5
├── index.php
6
├── memcached-admin
7
├── opcache-status
8
├── phpinfo
9
└── webgrind

Không cần phải nạp lại Vagrant. Chỉ đơn giản là làm mới VVV Dashboard tại vvv.dev. Bây giờ, bạn sẽ thấy rất nhiều chi tiết cấu hình khác nhau của Vagrant trên bảng điều khiển, bên cạnh việc liệt kê các trang web được cài đặt.

Sidebar of the new VVV dashboardSidebar of the new VVV dashboardSidebar of the new VVV dashboard
Tuỳ biến VVV Dashboard.

Vagrant Manager

Một tiện ích khác mà bạn có thể cài đặt là Vagrant Manager.

Vagrant Manager thì giống như MAMP và WAMP ở nơi, trong trường hợp này, mà nó cho phép chúng ta chạy, tạm dừng và tải lại Vagrant bằng vài cú nhấp chuột. Vagrant Manager có sẵn trong OS X thông qua Homebrew Cask và tập tin .dmg, và trong Windows thông qua gói cài đặt .exe. Do đó việc cài đặt ứng dụng sẽ là một việc không cần phải suy nghĩ nhiều.

Sau khi Vagrant Manager được cài đặt và chạy, bạn có thể thấy một danh sách cấu hình Vagrant và mà hiện nay đang hoạt động.

Vagrant Manager IU in OS X taksbarVagrant Manager IU in OS X taksbarVagrant Manager IU in OS X taksbar

phpMyAdmin

Vagrant cũng đi kèm với phpMyAdmin, có thể truy cập tại vvv.dev/database-admin/. Tuy nhiên, tôi không phải là một fan của phpMyAdmin. Ngoài giao diện không thu hút, thật chậm chạp để xử lý một truy vấn trong cơ sở dữ liệu khổng lồ. Đây là những lý do mà tôi thích sử dụng một ứng dụng gốc giống như Sequel Pro, hoặc SQL Workbench cho Windows. Tuy nhiên, chúng ta trước hết phải kết nối các ứng dụng tới MySQL.

Kết nối tới MySQL với ứng dụng gốc

Ở đây tôi sử dụng Sequel Pro cho OS X. Tuy vậy, các thông tin cần thiết để kết nối được với MySQL áp dụng được trên bất kỳ các ứng dụng nào mà bạn đang sử dụng. Chúng đều giống nhau.

  • MySQL Host127.0.0.1
  • MySQL Usernameroot
  • MySQL Passwordroot
  • SSH Hostlocal.wordpress.dev (cũng có thể áp dụng với bất kỳ tên miền nào được đăng ký trong VVV)
  • SSH Uservagrant
  • SSH Passwordvagrant

Nếu bạn thấy một cảnh báo như hình dưới đây, bạn có thể bỏ qua nó và chỉ cần nhấp vào "Yes" hoặc "OK" để tiếp tục. Chúng ta chỉ đang kết nối với một máy ảo trên máy tính của riêng chúng ta, vì vậy không có bất cứ điều gì phải lo lắng.

Một khi đã kết nối, chúng ta có thể thấy cơ sở dữ liệu của trang web của chúng ta. Bây giờ, chúng ta có thể làm một số thứ như nhập và xuất cơ sở dữ liệu, hoặc có thể thực hiện một số truy vấn SQL.

Tiếp theo là gì?

Như đã đề cập, VVV đi kèm với một gói công cụ bao gồm PHP CodeSniffer, cho phép bạn thực hiện các kiểm tra mã các dự án của bạn đề phù hợp với các tiêu chuẩn viết mã WordPress. Đó là một thứ mà tôi nghĩ rằng bạn nên làm, đặc biệt là trước khi khởi động dự án.

Tuy nhiên, vì PHP CodeSniffer vượt ra ngoài phạm vi của hướng dẫn này, tôi để nó lại cùng một số tài liệu tham khảo để giúp bạn bắt đầu trên các chủ đề.

Tổng kết

Chúng ta đã đi một chặng đường dài để thiết lập và chạy VVV cũng như nâng cao nó với một số tiện ích mở rộng. Cuối cùng, nó sắp xếp quy trình làm việc của chúng ta khi nói đến việc tạo ra một trang web cục bộ hoặc môi trường thử nghiệm với WordPress, mặc dù mất một thời gian để có thể sử dụng được nó.

WordPress có một cơ cấu tổ chức vô cùng năng động. Chúng là các theme, plugin, thư viện và nhiều sản phẩm khác giúp bạn xây dựng trang web và dự án của bạn. Bản chất nguồn mở của nền tảng này cũng làm cho nó là một lựa chọn tuyệt vời mà từ đó bạn có thể nâng cao tốt hơn kỹ năng lập trình của bạn. Bất kể trường hợp nào, bạn có thể xem tất cả mọi thứ mà chúng tôi có trên thị Envato Market.

Tôi hy vọng bạn thấy hướng dẫn này là một tài liệu tham khảo hữu ích để bắt đầu với Vagrant và VVV.

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.