[Theme Development] Phần 1: Tổng quan việc lập trình theme WordPress
Tại sao lại nói là lập trình chứ không phải thiết kế mặc dù công việc này cũng liên quan tới thiết kế? Sở dĩ không gọi là thiết kế bởi vì trong serie này sẽ không hướng dẫn bạn thiết kế qua Photoshop hay các tiêu chuẩn thiết kế website, mà sẽ tập trung vào phần tự làm một theme WordPress dựa trên ý tưởng hoặc mẫu có sẵn.
Dĩ nhiên, đã gọi là lập trình thì bạn sẽ làm việc với các đoạn mã (code) của một vài ngôn ngữ lập trình website cần thiết để tạo một theme WordPress. Mình hiểu mọi người cũng khá nóng lòng để đi vào phần chính của serie này, nhưng ông bà ta thường có câu “giục tốc bất đạt” nên mọi người cứ từ từ, vì bạn sẽ cần hiểu sơ qua một vài khái niệm và tổng quan trong công việc này để có một sự hiểu biết nhất định về công việc này.
Mặc dù là kiến thức nền tảng nhưng ở đây mình sẽ không giải thích chi tiết hết về nó mà chỉ nhắc qua và nhấn mạnh vài điểm quan trọng. Nếu bạn chưa hiểu rõ về từng phần thì có thể lên Google tìm hiểu thêm khái niệm về nó.
Lập trình theme WordPress là như thế nào?
Với công việc này, bạn sẽ có nhiệm vụ chuyển một ý tưởng hay một mẫu giao diện có sẵn (Photoshop/HTML) sang thành một giao diện có thể cài vào WordPress, mà người ta hay gọi là Theme WordPress.
Mỗi theme WordPress luôn được xử lý dựa trên 4 ngôn ngữ thiết kế website phổ biến mà cũng quan trọng nhất, đó là:
- HTML – HyperText Markup Language.
- CSS – Cascading Style Sheets.
- PHP – PHP: HyperText Processor.
- Javascript – Bao gồm luôn jQuery nếu có.
Để hiểu rõ hơn về vai trò của 4 ngôn ngữ này trong một theme, mình xin giải thích chi tiết kèm ví dụ như sau:
Vai trò của các ngôn ngữ web trong một theme WordPress
Vai trò của HTML
HTML được ví như là bộ xương của một giao diện website, dù nó là dành cho WordPress hay bất cứ website nào. “Bộ xương” này sẽ giúp chúng ta xác định bố cục trên mỗi website và đánh dấu lại các phần đó bằng các thẻ (tag) nhất định, sau đó nó sẽ tự xác định mỗi đối tượng được đánh dấu mang một vài trò riêng trong website.
Ví dụ, nếu chúng ta muốn xác định một đoạn nào đó thành tiêu đề chính trong trang văn bản thì có thể viết code như thế này:
1
| <h1>Tiêu đề văn bản</h1> |
Lúc này chữ Tiêu đề văn bản sẽ tự động được hiển thị to lên mặc dù chúng ta không thêm các thuộc tính và thẻ khác. Lúc này, dựa theo chuẩn thiết kế website, các trình duyệt hoặc các bot tìm kiếm sẽ tự hiểu rằng nội dung được đặt trong cặp thẻ <h1> sẽ là tiêu đề của một văn bản.
Ngoài ra, HTML cũng là một ngôn ngữ hỗ trợ bạn định dạng văn bản, nghĩa là khi bạn bôi đậm, tô nghiêng, in màu, gạch chân,…cho văn bản thì nó sẽ sử dụng HTML. Bạn xem ví dụ bên dưới nhé:
Mỗi thẻ trong HTML khi đánh dấu đều phải có đủ cặp, nghĩa là một thẻ mở đầu và một thẻ kết thúc. Ví dụ, nếu bạn muốn tô đậm văn bản và dùng thẻ <strong> mà quên đóng lại thì tất cả các văn bản nằm sau thẻ đó đều in đậm hết.
Hầu như thẻ nào nó cũng bao gồm một thẻ đóng và thẻ mở, nhưng cũng có một vài thẻ đặt biệt không bao gồm thẻ đóng mà chỉ xác định đóng bằng ký tự gạch chéo (/) ở cuối. Ví dụ như thẻ
1
| <link rel="stylesheet" href="/abc.css" /> |
CSS – “Lớp da” của một website
Bạn hãy tưởng tượng, nếu chúng ta chỉ có mỗi bộ xương thì trông như thế nào? Hơi bị ghê đúng không, và website cũng vậy thôi. Nếu HTML được xem như là bộ xương của một website thì CSS chính là da thịt được đắp lên bộ xương đó, mục đích đơn giản là cho website trông đẹp đẽ và chuyên nghiệp hơn.
Lấy ví dụ, như mình đã nói, nếu không có HTML thì chúng ta không thể tạo dựng một bố cục giao diện website được. Nhưng nếu chỉ là HTML thôi thì cũng không được mà phải có sự góp mặt của CSS. Bởi vì HTML chỉ có nhiệm vụ đánh dấu bố cục thông qua các thẻ để CSS có thể định hình dựa vào các thẻ đó, chẳng hạn như tạo giao diện có nhiều cột. Dưới đây là ví dụ thực tế.
Đó là những gì mình cần bạn hiểu lúc này, còn chi tiết hơn về cách viết và cú pháp mình sẽ đề cập tới phần lên CSS cho giao diện.
PHP – Linh hồn của một theme WordPress
Một giao diện chẳng thể nào trở thành một theme cho WordPress nếu thiếu mặt PHP, bởi vì WordPress là một mã nguồn mở được viết bằng ngôn ngữ PHP nên giao diện chúng ta cũng phải nhúng PHP vào.
PHP là gì thì bạn có thể Google thêm vì nó hơi dài, ở đây mình chỉ đưa ra ví dụ mà thôi. Trong WordPress đã hỗ trợ gần như đầy đủ các hàm để lấy dữ liệu từ database để hiển thị lên giao diện nên khi làm theme chúng ta cũng sẽ sử dụng các hàm đó.
Giả sử, nếu chúng ta muốn gọi nội dung của một Post ra giao diện thì sẽ sử dụng hàm
wp_content() và đặt trong một Query là nó có thể gọi ra. Nghĩ xa hơn một xíu, chúng ta hoàn toàn có thể nhúng nó vào một thẻ HTML, ví dụ:
1
| <h1 class="post-title"><?php the_title(); ?></h1> |
.post-title.Javascript
Javascript bây giờ thì ít nhúng trực tiếp vào website như xưa mà chủ yếu chúng ta sẽ dùng một thư viện riêng của nó, đó là jQuery. Phải giải thích thế nào cho gần gũi nhỉ? Nói nôm na thì jQuery sẽ giúp chúng ta bổ sung một vài hiệu ứng đẹp mắt vào theme WordPress mà chúng ta không thể dùng HTML, CSS hay PHP để làm. Thậm chí nó còn có thể thay thế Flash để chèn các hiệu ứng chuyển động.
Mặc dù serie này có thể sẽ ít dùng jQuery nhưng mình cũng muốn cho bạn biết sơ qua luôn, dưới đây là một ví dụ nhúng jQuery vào website.
Nói vậy thôi chứ theo kinh nghiệm của mình thì bây giờ chúng ta ít có khi nào mà tự xây dựng một hiệu ứng riêng với jQuery cả mà đa phần đều có plugin dành riêng cho jQuery hết rồi. Nhưng biết sơ qua căn bản cũng tốt.
Quy trình các bước lập trình một theme WordPress
Thông thường (theo thói quen của mình) thì một công đoạn làm một theme thì bao gồm các bước như sau, trường hợp đã có file giao diện mẫu sẵn trên Photoshop.Chuyển PSD sang HTML
Mặc dù có rất nhiều người bỏ qua bước này và cũng không phải là bắt buộc nhưng mình luôn có thói quen làm việc này, mục đích là để mình lưu giữ lại file giao diện bằng HTML để sau này nếu có dịp rảnh rỗi sẽ tập code sang giao diện cho các CMS khác như Drupal, Joomla. Ngoài ra, nó cũng là một “con hàng” rất tốt để dành thực hành một số thủ thuật CSS hay jQuery mới.
Trong bước này, mình sẽ chia làm 4 cộng đoạn nhỏ như sau:
- Bóc tách một số hình ảnh cần thiết có trong file PSD mà CSS không thể định hình được.
- Xác định bố cục tổng thể, xem nó sẽ sử dụng các block thế nào.
- Viết lại toàn bộ giao diện bằng HTML đơn thuần.
- Sử dụng CSS để định hình giao diện và trang trí nó.
- Kiểm tra W3C Validator để xem nó đã đạt chuẩn chưa.
Nói thẳng ra là dù bước này có thể sẽ hơi khó khăn đối với người mới nhưng mình thành thật khuyên bạn nên cố gắng học theo một tutorial nào đó để chuyển một giao diện trên Photoshop ra website HTML.
Cài đặt một site WordPress mới trên Localhost với Dummy Data
Dummy Data nghĩa là một gói nội dung đã được thêm sẵn một vài bài viết, một vài category, một vài page,…để bạn sử dụng nó trong một số công việc mà không cần phải tự tay tạo ra thêm một số post mới.
Thông thường thì mình hay sử dụng file dummy do WordPress cung cấp luôn vì nó sẽ chứa nhiều post mang đầy đủ các thuộc tính văn bản để bạn xử lý nó.
Bước cài đặt mình sẽ đề cập ở phần sau.
Chuyển file HTML sang theme WordPress
Chà, đây là bước thú vị à nha. Lúc này, mình sẽ mở tập tin HTML ra và xác định từng phần trên giao diện và tiến hành tạo ra một số file cần thiết có trong một cấu trúc theme WordPress và tiến hành chuyển các dữ liệu tĩnh sang dữ liệu động thông qua các hàm của WordPress.
Nếu bạn mới làm lần đầu tiên thì nó sẽ hơi khó hơn việc các bạn vừa viết hàm WordPress, vừa viết CSS nhưng nếu bạn “pass” qua 2, 3 lần thì sẽ làm vô cùng nhanh vì bản chất là nó làm nhanh hơn việc bạn vừa định hình giao diện vừa viết hàm.
Làm chức năng Theme Option
Theme Option nghĩa là một bảng điều khiển giúp người sử dụng chỉnh sửa một số thành phần trên theme mà không cần đào xới đến tội nghiệp trong mớ code nhìn là muốn nhức mắt. Nếu như trước kia chỉ có các theme trả phí là có Theme Option riêng thì bây giờ các theme miễn phí cũng đã đều có hết rồi, lý do là bây giờ việc làm một Theme Option không còn khó như trước vì đã có framework hỗ trợ sẵn.
Còn sử dụng framework đó ra sao thì mình sẽ hướng dẫn trong cuối serie này nhé.
Debugging
Đây là một bước không bắt buộc nhưng lại vô cùng quan trọng nếu như bạn muốn hạn chế sản phẩm của bạn dính một số lỗi linh ta linh tinh về sau. Debugging là một thuật ngữ chỉ việc dò tìm các lỗi hay các bug ẩn và tiến hành sửa hoặc tối ưu hóa đoạn code chứa bug đó.
Nếu bạn làm theme, thì việc debugging sẽ giúp bạn tối ưu hóa các đoạn code còn sót hoặc được xử lý quá nhiều gây tình trạng làm website chậm đi. Còn nếu bạn viết plugin thì debugging sẽ giúp bạn tìm ra các bug ẩn để tránh các lỗi liên quan tới bảo mật vô cùng nguy hiểm.
Lời kết phần 1
Bạn thấy không? Để có thể làm ra một theme WordPress có thể không hề dễ dàng xíu nào vì nó bao gồm rất nhiều yếu tố và công sức của người trực tiếp làm ra nó. Nhưng nếu bạn thật sự yêu thích thì công việc này khá là thú vị vì bạn có thể sẽ phải làm hoài làm hoài không có hồi kết, trừ khi bạn tự đặt ra dấu chấm kết thúc cho sự nghiệp của bạn.
Trong phần này mình đã nói lướt qua tổng quan một quy trình để làm ra được một theme WordPress rồi, nếu bạn thấy nó nhiều quá và nản lòng thì có thể dừng lại vì các phần về sau sẽ phức tạp hơn rất là nhiều. Nhưng nếu bạn cảm thấy thích thú và thật sự muốn trải nghiệm cảm giác tự mình làm một theme thì hành trình của bạn vẫn chưa bắt đầu đâu……..Chúng ta sẽ nói tiếp ở phần 2 nhé.
Category: lập trình wordpress, WordPress
0 comments