[Theme Development] Phần 2: Kiến thức và công cụ cần thiết

Sau khi biết được tổng quan quy trình lập trình một theme WordPress chắc bạn cũng đã hiểu ra ít nhiều công việc này bản chất là như thế nào rồi đúng không? Vậy thì bạn có thấy rằng trong tất cả các quy trình đó nó chứa đựng quá nhiều kiến thức mà có thể ngay bây giờ bạn chưa hiểu nhiều về nó? Mình nghĩ là có, không nhiều cũng ít.

Để cho bạn dễ dàng tiếp cận và chuẩn bị các kiến thức nền tảng tối thiểu mà các bạn cần, mình xin dành riêng một bài này để nói qua những gì mà các bạn cần bao gồm các kiến thức tối thiểu bắt buộc và danh sách tất cả các công cụ mà trong quá trình serie này chúng ta sẽ cần sử dụng.

Dĩ nhiên, mình cũng sẽ dừng lại ở mức giới thiệu sơ lược còn chi tiết thì để dành các bài sau mình sẽ tập trung vào từng mục cụ thể nếu cần thiết.

Các kiến thức nền cần có

HTML

Kiến thức về HTML vì là cơ bản nhưng quan trọng nên để có thể theo tốt serie, mình nghĩ các bạn nên có một kiến thức từ trung bình trở lên cho HTML. Cụ thể, bạn sẽ cần phải hiểu HTML là gì, các quy tắt viết thẻ HTML, cách nhúng CSS và Javascript vào tài liệu HTML.

Cái quan trọng nhất ở đây là bạn cần phải phân biệt được class là gì và ID là gì để có thể làm việc được với CSS và jQuery.

CSS

Cũng như HTML, bạn cũng cần phải có một lượng kiến thức về CSS nhất định. Mình hiểu rằng CSS về nâng cao khá là khó nhưng ở serie này mình không cần bạn phải thật rành về CSS, chỉ cần bạn nắm được các vấn đề sau:

• Quy tắt viết CSS cơ bản.


• Quy tắt vùng chọn (selector) cho CSS, biết luôn các selector cho CSS3 thì càng tốt.


• Các thuộc tính cơ bản: margin, padding, float, background, font-,….


• Hiểu được khái niệm clear CSS.


• Biết sử dụng LESS thì càng tốt, vì serie này mình sẽ dùng LESS.

PHP

Cái này thì mình không cần nhiều như 2 cái trên, bạn chỉ cần:

• Hiểu được PHP là gì.


• Quy tắt viết PHP cơ bản.


• Biết hàm (function), biến (variable), chuỗi (string), mảng (array) là gì.


• Các câu lệnh điều kiện: if, else, elseif, switch.


• 2 vòng lặp chính: while, foreach.


• Các toán tử so sánh.

Javascript

Phần này thì không quan trọng cho lắm nhưng nếu bạn biết về nó thì càng tốt.

• Hiểu được Javascript là gì và lợi ích của nó.


• Quy tắt viết Javascript cơ bản.


• Hiểu được jQuery là gì.


• Quy tắt viết jQuery cơ bản.


• Hiểu được hàm trong jQuery là gì.


• Cách vận dụng một số hành động cơ bản (action) của jQuery.

Đó là một số kiến thức nền cần có, dĩ nhiên các kiến thức tối thiểu cần thiết như sử dụng localhost, thành thạo WordPress cơ bản, cách dùng Code Editor thì chắc bạn đã mò tới bài này thì cũng đã có rồi hehe.

Các phần mềm hỗ trợ lập trình theme WordPress

Để có một theme tốt thì sẽ không bao giờ thiếu những công cụ hỗ trợ đắc lực. Dưới đây là một số phần mềm mà trong serie này mình sẽ cần dùng tới và mình nghĩ các bạn nên cài vào ngay và luôn, tới mỗi phần có đụng tới nó thì mình sẽ hướng dẫn sâu hơn.

Trình duyệt Safari, Firefox, Google Chrome bản mới nhất

Mục đích là để chúng ta kiểm tra xem giao diện đã hoạt động chuẩn trên 3 loại trình duyệt này chưa bằng cách sẽ luân phiên truy cập vào xem giao diện bằng các trình duyệt khác nhau và lỗi ở đâu chúng ta sẽ fix ở đó.

Riêng với trình duyệt FireFox, đó là trình duyệt chính mà chúng ta sẽ sử dụng trong việc lập trình giao diện nên mình sẽ cần bạn cài một số addon sau:

• Firebug – Xem các phần tử trong giao diện và debug các đoạn mã Javascript.


• Web Developer Toolbar – Bộ công cụ không thể thiếu cho các web developer, cài vào sẽ biết.


• Firepicker – Thêm tính năng chọn mã màu cho Firebug.


• MeasureIT – Thêm cây thước đo cho trình duyệt, sẽ cần để xác định chiều cao, chiều rộng một đối tượng nào đó.

Photoshop CS3 trở lên

Làm cái gì chắc bạn cũng biết rồi ha, nhưng ở serie này chúng ta không cần dùng nó nhiều, chỉ để dành mở fire PSD mình đã làm sẵn thôi.  

Sublime Text 2

Một editor miễn phí chuyên cho việc viết các đoạn mã ở nhiều ngôn ngữ khác nhau. Sở dĩ mình khuyên các bạn dùng là nó vừa nhẹ, vừa đẹp, gọn gàng lại có nhiều plugin thêm vào rất là hay để mang những tính năng tuyệt vời vào đó, trong đó có một plugin khá là cần thiết khi làm theme đó là tự động gợi ý các hàm và tự động hoàn thành nó để bạn code nhanh hơn.

Nhưng quan trọng là nó nhẹ, tại máy mình cùi quá nên thích nhẹ rồi đâm ra quen dùng nó luôn rồi. 

DesktopServer

Phần mềm tạo localhost đặc biệt dành riêng cho WordPress này đã được mình cho hẳn một bài riêng tại đây, bạn có thể xem qua để biết thêm về nó. Sở dĩ mình dùng nó trong serie này là nó sẽ giúp bạn tránh được một số lỗi liên quan đến PHP khi code dưới localhost vì nó đã được tối ưu khá kỹ dành cho việc develop WordPress ở localhost.

Nói chung, nếu bây giờ máy bạn chưa cài cái localhost nào thì nên cài cái này vô nhé. 

SimpLESS

Đây là một phần mềm miễn phí giúp bạn biên dịch các đoạn code CSS viết bằng LESS ra định dạng CSS tối ưu nhất. Mặc dù LESS có hỗ trợ một processor trực tiếp để biên dịch code ngay trong website bằng Javascript nhưng theo mình biết thì nó khá nặng, đôi khi nó xung đột với các Javascript khác thì cả website của bạn cũng lỗi theo luôn.

Vì vậy, cách tốt nhất là nên dùng phần mềm này để nó tự động biên dịch một file .less thành một file .css theo chuẩn, dễ dàng chỉnh sửa sau này và nếu bạn có submit lên WordPress.org thì cũng coi là hợp lệ.

Phụ kiện cần thiết

Hà hà, kiến thức có, công cụ có, thế bạn có biết còn thiếu gì nữa không? Đây là một số gợi ý của mình:

• Cà phê, thuốc lá, thuốc lào nếu bạn có chơi mấy cái này.


• Kẹo ngậm hoặc kẹo cao su, mục đích là nó có đường, giúp bạn đỡ mệt mỏi hơn.


• Có một phòng riêng để chui vào thì càng tốt.


• Một ánh đèn vừa đủ sáng để thắp sáng chỗ ngồi nếu làm việc khuya.

Đùa tí cho vui thôi, nhưng nó cũng khá là cần thiết mà đúng không?

Đó là những phần mềm chính mà chúng ta sẽ sử dụng, còn một số công cụ nho nhỏ phát sinh trong quá trình làm việc thì mình sẽ đề cập tới sau khi nó thật sự cần thiết, nhưng cơ bản là chỉ cần các công cụ ở trên là đã quá đủ rồi.

Ngay trong phần 3, mình sẽ hướng dẫn bạn setup phần mềm Sublime Text 2 để nó làm việc hiệu quả nhất trong việc lập trình theme WordPress nhé.

Category: lập trình wordpress, WordPress