Tạo Theme WordPress 1: Hướng dẫn cài đặt Sublime Text 2 và PrePros

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
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
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.

install-plugin-on-package-controlWordPress: Đâ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
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
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
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
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.

Các công cụ cần thiết để học thiết kế website bằng WordPress

Bắt đầu học WordPress một mã nguồn mở lớn nhất thế giới, các bạn cần trang bị cho mình những thứ đồ nghề để chiến đấu với nó. Sau đây mình xin giới thiệu các bạn một số công cụ cần thiết nhất để bắt đầu với WordPress, những công cụ nâng cao hơn mình sẽ giới thiệu trong các bài chuyên về từng lĩnh vực đó.

Những công cụ hỗ trợ thiết kế web bằng wordpress
Những công cụ hỗ trợ thiết kế web bằng wordpress

1. Một phần mềm Localhost như Xampp, Wamp, …

Ở đây mình dùng Wamp vì nó khá là dễ để sử dụng và nhẹ nữa, nếu bạn nào chưa biết Wamp là gì và cài đặt sử dụng như thế nào thì các bạn có thể đọc bài Hướng dẫn cài đặt sử dụng localhost wampserver 2.0 toàn tập của mình trên Blog.

Localhost dường như là một phần mềm không thể thiếu đối với dân lập trình web nói chung và dân cày WordPress nói riêng. Mình không giới thiệu về nó vì đã có một bài viết đã nêu ở trên.

2. Trình soạn thảo code:

Có khá nhiều trình soạn thảo code nhưng ở đây mình xin giới thiệu các bạn một công cụ khá là phổ biến đó là Notepad++, ưu điểm nhẹ dễ sử dụng.

Các bạn có thể download phần mềm tại đây

Thế là đủ điều kiện để cài đặt code wordpress lên máy tính, giờ đến phần đưa website wordpress lên internet để nhiều người có thể truy cập website của mình.

3. Domain (Tên miền):

Domain nó giống như là số nhà của mình vậy, để cho người khác biết được nhà mình ở đâu để đến thăm, các bạn có thể đăng ký với một bên cung cấp dịch vụ domain như Mắt bão, PAVietnam, … hoặc cũng có thể đăng ký miễn phí một domain tại dot.tk.

Có domain xong ta tiến hành trỏ domain về ip của host, sẽ được giới thiệu ở mục 4.

4. Hosting (Máy chủ):

Hosting nó giống như là mãnh đất của mình vậy khi có được mãnh đất mình có thể xây nhà để ở, thì Hosting nó dùng để đặt code và database của mình trên đó để người dùng có thể truy cập tới website của mình thông qua tên miền.

Hosting có 2 dạng là Hosting windows và linux, ở đây mình dùng WordPress là ngôn ngữ PHP nên dùng Hosting Linux để quản trị.

5. Filezilla:

Đây là phần mềm dùng để kết nối với Hosting thông qua giao tiếp FTP, giúp ta tiện lợi trong việc upload source code, chỉnh sửa ngay trên hosting bằng phần mềm thông qua notepad.

Bạn có thể download và cài đặt tại đây

Bài tiếp theo mình sẽ bắt đầu hướng dẫn các bạn cài đặt và sử dụng WordPress căn bản.