1. Giới thiệu Sublime Text 2:
Sublime Text 2 là một công cụ hỗ trợ lập trình mà mình nghĩ là hỗ trợ tốt nhất để viết WordPress nhờ các plugin đi kèm, ưu điểm của nó là nhẹ khởi động nhanh và dễ sử dụng.
Nó có thể tự hoàn thành hàm trong hầu hết các hàm của wordpress nhờ vào Plugin WordPress của Sublime Text 2, ngoài ra nó còn tự động sinh ra các hàm hỗ trợ trên nhiều trình duyệt cho một số hàm trong css mình sẽ giới thiệu kỹ hơn trong phần hướng dẫn về Plugin.
2. Hướng dẫn cài đặt Sublime Text 2:
Trước tiên các bạn truy cập vào trang download của sublime text 2 tại đây và tiến hành download phù hợp với hệ điều hành mà bạn đang sử dụng, có thể download bản portable về chạy luôn khỏi cài đặt.
Hướng dẫn download Sublime Text 2
Và đây là giao diện khi khởi động Sublime Text 2:
Phần mềm Sublime Text 2
Các bạn có thể thiết lập lại màu nền của trình soạn thảo bằng cách: Preferences -> Color Scheme -> Chọn màu nền phù hợp với mắt nhìn của mình sao cho cảm thấy dễ nhìn nhất là được.
3. Hướng dẫn cài đặt Plugin cho Sublime Text 2:
Đầu tiên ta cài đặt plugin cực kỳ quan trọng đó là Package Control, Plugin này dùng để cài đặt các Plugin cần thiết khác lên Sublime Text 2, bằng cách vào menu View -> Show Console và chèn đoạn code này vào textbox vừa xuất hiện.
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')
Click Enter và đợi cho hoàn tất việc cài đặt khi nào các bạn thấy thông báo “Sublime Text to finish installation’) Please restart Sublime Text to finish installation” nghĩa là đã thực hiện cài đặt thành công Plugin, các bạn khởi động lại Sublime Text 2 để Plugin có hiệu lực.
Thứ 2 là cài đặt các Plugin bằng Package Control: Để cài đặt plugin cho Sublime Text 2 thông qua Package Control ta vào Tool -> Command Palette… hoặc bấm tổ hợp phím Ctrl + Shift + P, một hộp thoại sẽ xuất hiện các bạn đánh install và enter để vào trang danh sách các plugin hiện có, đánh tên các plugin cần thiết enter để cài đặt.
WordPress: Đây là Plugin quan trọng nhất để viết WordPress, nó hỗ trợ gần như đầy đủ các hàm trong WordPress, ví dụ như bạn gõ “wp_nav_menu” gõ chưa xong bạn đã thấy nó gợi ý rồi và chỉ cần enter là coi như tất tần tật các tham số đều được show ra hết bạn chỉ việc sửa lại giá trị là xong, quá tiện lợi đúng không nào, phpDesigner cũng có hỗ trợ gợi ý nhưng ko có tự liệt kê danh sách các tham số như thằng Sublime Text 2.
Plugin WordPress Trong Sublime Text 2
Prefixr: Plugin này giúp các bạn tự hoàn thiện các đoạn code css giúp hỗ trợ thuộc tính đó trên nhiều trình duyệt, bằng cách bôi đen đoạn lệnh css đó và bấm tổ hợp phím “Ctrl + Alt + X” để hoàn thành. Ví dụ như đoạn code sau:
-webkit-box-shadow: 3px 3px 3px #dcdcdc; box-shadow: 3px 3px 3px #dcdcdc;
Color Picker: Đây là Plugin giúp bạn tạo một bảng mã màu hỗ trợ ngay trên Sublime Text 2 giúp bạn không phải mất thời gian lên mạng tìm mã màu hoặc là dùng Photoshop để lấy mã màu. Khi cài đặt xong các bạn muốn lấy mã màu chỉ cần click tổ hợp phím “Ctrl + Shift + C” và chọn màu mình muốn thêm click ok là xong.
Hướng dẫn Plugin Color Picker Sublime Text 2
Với 3 Plugin trên thì mình nghĩ cũng đủ để làm một theme wordpress một cách nhanh chóng rồi.
4. Giới thiệu phần mềm PrePros:
Đây là phần mềm giúp hỗ trợ viết css bằng ngôn ngữ Less, nó giúp cho chúng ta viết CSS một cách nhanh và chuẩn nhất, ví dụ như ta có khá là nhiều các class con trong các thẻ div mỗi lần muốn viết class con cho một div nào đó ta lại phải đánh dạng như thế này: “.class1 .class2 .class3 ul li a{color: #fff}” như thế chúng ta có tầm 10 class con thì ta phải copy dán 10 lần như thế, thay vì đối với ngôn ngữ PrePros thì chúng ta chỉ cần đánh như sau:
.class1{
.class2{
.class3{
ul{
list-style: none;
li{
a{
color: #fff;
&:hover{
color#F9156A;
}
}
}
}
}
.class3-1{
a{
text-decoration: none;
}
}
}
}
Như vậy khi ta muốn viết bất cứ một lớp con nào thì chỉ cần chèn ngay trong lớp mẹ tự động thằng PrePros nó biên dịch ra css cho các bạn.
Ngoài ra phần mềm này còn có thể bắt lỗi cú pháp, biên dịch ra CSS theo chuẩn SEO.
5. Hướng dẫn cài đặt PrePros:
Các bạn download Prepros tại đây và cài đặt vào máy tính, sẽ có giao diện như thế này
Phần mềm PrePros
6. Hướng dẫn sử dụng phần mềm PrePros:
Khởi động PrePros lên và click vào dấu “+” (Add new Project) trên menu của phần mềm để bắt đầu chọn đường dẫn đến folder chưa các file .less mà chúng ta tạo ra để viết CSS.
Lưu ý: Khi đang mở phần mềm PrePros nếu như bạn thêm bất cú file .less nào vào folder đã add project thì bạn vào PrePros click Refresh để file đó được thêm vào PrePros nha, bằng cách click vào hình mũi tên xoay vòng ở góc trái dưới cửa sổ PrePros.
Hướng dẫn sử dụng phần mềm Prepros
Xong phần chuẩn bị 2 phần mềm hỗ trợ đắc lực cho việc viết một Theme WordPress, bài tiếp theo chúng ta sẽ bắt tay vào việc viết HTML cho một Theme WordPress.
