[Theme Development] Phần 3: Thiết lập Sublime Text 2

Trong quá trình làm theme WordPress chúng ta sẽ sử dụng hoàn toàn bằng code và hầu như là làm việc với các hàm có sẵn của WordPress nên việc tìm một code editor hoặc IDE hỗ trợ tự nhận dạng và hoàn thành các hàm của WordPress là một điều vô cùng cần thiết nếu bạn muốn giảm thời gian code xuống mức thấp nhất.

Trong các phần mềm hỗ trợ soạn thảo code thì phải nói là mình thích Sublime Text 2 nhất, bởi vì:

• Miễn phí (nếu bạn không mua bản trả phí thì mỗi 20 lần save nó sẽ hiện thông báo kêu mua, bạn chỉ cần bỏ qua).


• Nhẹ, thời gian khởi động trong tích tắt.


• Tự động sao lưu vào bộ nhớ đệm, có nghĩa là đang code mà cúp điện thì mở lên thì code bạn vẫn còn ở đó.


• Hỗ trợ rất nhiều plugin với số lượng developer không đếm xuể, vì nó là nguồn mở.


• Hỗ trợ tùy chỉnh xem nhiều cột, nghĩa là bạn có thể code cùng một lúc nhiều file mà không cần chuyển tab.


• Và còn nhiều lợi ích khác.

Vì vậy, nên trong toàn bộ serie này mình sẽ sử dụng Sublime Text 2 cùng với một số plugin hỗ trợ. Nếu bạn đã quen làm việc với các editor khác thì vẫn không sao cả, nhưng nếu bạn chưa thử Sublime Text 2 thì nên thử ngay.

Editor này hỗ trợ rất nhiều plugin khác nhau nên việc tìm ra plugin nào phù hợp để sử dụng cũng không phải dễ dàng, vì vậy để cho các bạn đỡ bối rối, mình sẽ liệt kê các plugin cần thiết ra và hướng dẫn bạn cách cài đặt luôn.

Hướng dẫn cài đặt Sublime Text 2

Trước tiên bạn cần cài đặt phần mềm này vào máy trước đã, mình khuyến khích các bạn nên sử dụng bản Portable (chỉ có trên Windows) vì có thể copy vào USB mang đi nơi khác sử dụng mà không cần cấu hình lại. Để tải bản cài đặt các bạn truy cập vào trang Download Sublime Text 2, và chọn bản Portable thích hợp cho hệ điều hành máy tính.

Cài xong bạn chạy chương trình và màn hình khởi động đầu tiên sẽ như thế này.

Nhìn hơi xấu xí tí thôi, nhưng sức mạnh thì tràn trề đó nhé. Bây giờ chúng ta sẽ tiến hành cài các plugin cần thiết cho nó cái đã, nhưng trước khi cài plugin thì chúng ta cần cài một plugin cực kỳ quan trọng mang tên Package Control, công dụng của nó là có thể cài đặt các plugin khác có trong thư viện Package Control để bạn cài plugin nhanh chóng mà không cần đụng chạm vào thư mục cài đặt.

Để cài Package Control, bạn vào View -> Show Console. Lúc này bạn sẽ thấy một bảng console nhỏ phía dưới, hãy copy đoạn code dưới đây và paste vào khung nhập lệnh rồi ấn Enter.

import urllib2,os; pf='Package Control.sublime-package'; ipp = sublime.installed_packages_path(); os.makedirs( ipp ) if not os.path.exists(ipp) else None; urllib2.install_opener( urllib2.build_opener( urllib2.ProxyHandler( ))); open( os.path.join( ipp, pf), 'wb' ).write( urllib2.urlopen( 'http://sublime.wbond.net/' +pf.replace( ' ','%20' )).read()); print( 'Please restart Sublime Text to finish installation')

Khi bạn thấy console nó hiện lên log như thế này nghĩa là cài đặt Package Control thành công.

Giờ thì bạn có thể ấn nút Esc để tắt cái console đi. Cuối cùng là khởi động lại Sublime Text 2 nhé.

Cách cài một plugin thông qua Package Control

Để cài một plugin bất kỳ cho Sublime Text 2 thông qua Package Control này, bạn ấn tổ hợp phím Ctrl + Shift + P để mở thanh tác vụ nhanh, sau đó gõ install, bạn sẽ thấy một tác vụ mang tên Package Control: Install Package, đó chính là tính năng cài plugin cho Sublime Text 2. Các bạn ấn chọn nó hoặc ấn Enter để nó tự chọn nhé.

Sau đó, một bảng tìm kiếm plugin cho Sublime Text 2 sẽ hiển thị như thế này.

Ở đây, muốn cài plugin nào chỉ cần gõ tên plugin đó ra và Enter, quá nhanh phải không? Nhưng cài plugin nào thì đó mới là vấn đề vì không phải plugin nào bạn cũng cần.

Các plugin cần thiết cho Sublime Text 2 dành cho WordPress Development

WordPress

Công dụng của plugin này đơn giản lắm: tự động gợi ý các hàm có sẵn của WordPress khi bạn gõ đúng một vài chữ cái trùng với tên hàm cần dùng. Chút nữa bạn xem video phía dưới sẽ có thể hiểu nhanh hơn.

Emmet

Emmet hay còn gọi là Zen Coding, là plugin thêm vào các IDE giúp bạn viết HTML và CSS nhanh hơn thông thường bằng việc tự hoàn thành các thẻ thông qua một số cú pháp nhất định. Cách sử dụng mời bạn xem video phía dưới.

Prefixr

Công dụng của nó là giúp bạn bổ sung thêm một số thuộc tính CSS với các cú pháp riêng của từng trình duyệt để hoạt động tốt trên từng trình duyệt khác nhau. Ví dụ, nếu bạn viết thuộc tínhborder-radius: 10px thì sau khi dùng plugin này cập nhật lại, nó sẽ thành:

Quá tuyệt vời ông Mặt Trời chưa nào.

Color Picker

Công cụ chọn mã màu rất tiện lợi khi bạn viết CSS, không có thì mất công lắm nhé.

Video hướng dẫn cài đặt, cấu hình và sử dụng plugin Sublime Text 2

Do phần này viết bằng chữ hơi khó hiểu nên mình xin bổ sung một video hướng dẫn nhỏ để bạn theo dõi nhé, qua đó bạn có thể hiểu vì sao mình thích Sublime Text 2.

Nên xem: Bộ video thủ thuật sử dụng Sublime Text 2 (English)

Nào, bây giờ bạn đã thiết lập xong Sublime Text 2 và đã hiểu qua cách sử dụng của nó rồi chứ? Okay, ngay từ phần sau chúng ta sẽ bắt đầu đi những đoạn code đầu tiên để tự lập trình một theme WordPress dành cho riêng mình.

Category: WordPress