Trong bài viết này, chúng ta sẽ cùng thảo luận về cách làm sao để lập trình theme wordpress.

Mặc dù có vô vàn giao diện WordPress có sẵn trên thị trường.

Nhưng để tìm được theme theo đúng ý mình sẽ cực khó phải không các bạn?

Với lý do như vậy, nhiều người đã dành thời gian để lập trình giao diện theo ý họ.

Tuy nhiên, việc lập trình này sẽ quá khó với người mớ học sử dụng WordPress.

Nhưng may mắn là việc tự tạo giao diện wordpress hoàn toàn có thể làm được.

Hơn nữa biết đâu bạn sẽ tìm được niềm đam mê trong công việc này, và đi theo nó 😀

Giới thiệu về lập trình theme (WordPress Theme Developer)

Cùng với sự phát triển như vũ bão của WordPress thì nghề lập trình theme đã không còn xa lạ.

WordPress quá linh hoạt, quá mạnh mẽ. Từ website bán hàng, đến giới thiệu sản phẩm, cty nó đều làm được

Mọi doanh nghiệp hay cá nhân đều có thể sỡ hữu website.

Hoặc đơn giản bạn chỉ muốn chỉnh sửa theme đang sử dụng cho đẹp hơn.

Đây là lúc, bạn có thể sẽ nghĩ tới lập trình theme wordpress của riêng mình.

Kể cả để tùy biến một theme có sẵn, bạn cũng nên hiểu cấu trúc của theme WordPress.

Ngoài ra thì đây cũng có thể là một Job để bạn theo đuổi WordPress Website Designer.

Trước khi xây dựng website: chúng ta sẽ cần có hai thứ sau:

Ngoài ra thì bạn cũng có thể tạo website trên localhost để học cho tiết kiệm. Hãy tìm hiểu thêm về CSS và PHP, rất có ích cho bạn sau này.

Cuối cùng, chúng ta sẽ cần thêm một công cụ quan trọng nữa, nó sẽ làm cho quá trình lập trình theme trở nên dễ dàng hơn nhiều: Starter Theme

Starter Theme là gì? ( Và tại sao chúng ta cần nó?)

Genesis framework rất nổi tiếng và phổ biến

Starter Theme (giao diện khởi đầu) là một giao diện WordPress mà bạn sử dụng làm khung sườn để lập trình theme.

Sử dụng starter theme phép bạn có một Framework vững chắc và không phải lo lắng về việc phải coding một giao diện từ đầu.

Starter Theme cũng sẽ giúp bạn hiểu rõ hơn cách WordPress hoạt động.

Nhờ vào việc hiển thị cấu trúc cơ bản của giao diện cũng như cách các phần hoạt động với nhau.

Có rất nhiều starter theme trên thị trường hiện nay, bao gồm Underscores, FoundationPress, UnderStrap và Bones…

Trong bài viết này mình sẽ sử dụng Underscores để làm ví dụ.

Đây là một lựa chọn tốt dành cho người mới, vì công cụ này bao gồm các tính năng cơ bản và dễ sử dụng.

Bên cạnh đó, Underscores được phát triển bởi Automattic, an toàn hơn, tương thích và được hỗ trợ trong thời gian dài.

Làm cách nào để lập trình theme WordPress (5 bước)

Nếu đã chuẩn bị đầy đủ, hãy bắt đầu lập trình theme WordPress !

Như đã nói, mình sẽ sử dụng Stater Theme để hướng dẫn trở nên trực quan hơn.

Tuy nhiên, nếu các bạn muốn tạo mọi thứ từ đầu, không cần giao diện mẫu sẽ khó hơn nhiều.

Nó đòi hỏi bạn phải có kỹ năng thành thạo và kinh nghiệm dày dặn về coding cũng như kiến thức về lập trình web.

Bước 1: Thiết lập Local Environment

Trước tiên, bạn cần tạo ra local development environment (môi trường cục bộ).

Có thể hiểu đơn giản là bạn tạo một môi trường giả lập trên chính máy tính của bạn.

Để tiện lập trình theme và đây cũng là cách mà nhiều Developer làm sau đó mới cho lên Hosting.

LocalHost là cách an toàn để lập trình một giao diện mà không ảnh hưởng đến live website.

Có nhiều cách, mình thường dùng XAMPP. Quà trình cài đặt rất đơn giản hỗ trợ nhiều nền tảng như Windows, Linus

Đây là hướng dẫn chi tiết cài đặt LocalHost với XAMPP.

Bước 2: Tải xuống và cài đặt Starter Theme

Giống như hầu hết các giao diện mẫu khác, Underscores rất dễ dàng để tải về và cài đặt.

Thực tế, tất cả những gì bạn cần làm là vào website và đặt tên cho giao diện của mình.

Nếu muốn tuỳ biến hơn nữa, bạn cũng dễ dàng làm việc này bằng cách nhấn vào Advanced Options.

Tại đây sẽ có mục để bạn điền thêm thông tin, chẳng hạn như author và description.

Ngoài ra còn có tuỳ chọn nâng cao hơn nữa đó là thêm các file Syntactically Awesome StyleSheets (SASS) vào trong giao diện.

Nếu các bạn chưa biết, SASS là ngôn ngữ tiền xử lý cho CSS, cho phép người dùng sử dụng các thuật toán từ cơ bản đến phức tạp, v.v.

Khi đã lựa chọn và thiết lập xong, hay nhấn vào Generate, thao tác này sẽ tải xuống tệp .zip theme mà bạn vừa thiết lập ở trên.

Đây là bộ giao diện khung mà bạn sẽ sử dụng nó để lập trình cho giao diện của mình. Vì vậy hãy cài đặt theme này trên localhost.

Sau khi đã cài đặt giao diện, bạn dễ dàng xem trước website sẽ trông như thế nào.

Đây là một trong những bước “nền” giúp bạn lập trình giao diện lên một cấp độ chuyên nghiệp hơn.

Bước 3: Hiểu rõ cách nền tảng WordPress hoạt động

Trước khi tuỳ chỉnh giao diện của riêng mình, hãy tìm hiểu các file trong WordPress hoạt động như nào.

Trước tiên hãy nói về các template file, đây là các thành phần chính tạo nên giao diện WordPress.

Những file này xác định bố cục và giao diện của nội dung trên website.

Bạn có thể hiểu như này WordPress nó giống như trò chơi lego, được ghép bởi rất nhiều mảnh ghép để tạo thành một website hoàn chỉnh. Các template file này chính là những mảnh ghép đó.

Ví dụ: file header.php được sử dụng để tạo tiêu đề, trong khi comments.php cho phép bạn hiển thị các bình luận.

WordPress sẽ xác định template file nào được sử dụng trên mỗi trang nhờ vào phân cấp (template hierarchy).

Đây là thứ tự để WordPress tìm kiếm các template file phù hợp trong mỗi lần tải trang.

Ví dụ: nếu bạn truy cập vào URL http://example.com/post/this-post, WordPress sẽ tìm các tệp mẫu sau theo thứ tự sau:

• Tìm đúng đường dẫn, (this-post)
• Tìm các file phù hợp với ID bài viết
• Một file single post chung, chẳng hạn như single.php
• Một archive file, chẳng hạn như archive.php
• File index.php

Vì tất cả các giao diện đều yêu cầu tệp index.php, nên đây sẽ là tệp mặc định khi không tìm thấy các tệp khác.

Underscores chứa các template file cơ bản nhất, chúng luôn hoạt động một cách hoàn hảo.

Tuy nhiên, bạn dễ dàng chỉnh sửa các tệp mẫu này và xem cách chúng hoạt động.

Một yếu tố quan trọng khác bạn cần nắm được đó là The Loop.

Đây là đoạn mã mà WordPress sử dụng để hiển thị nội dung, do đó chúng ta có thể hiểu đây như là trái tim của WordPress vậy.

The Loop xuất hiện trong tất cả các template file hiển thị nội dung post. Chẳng hạn như tệp index.php hay sidebar.php.

Nó khá phức tạp mà mình khuyến khích các bạn nên đọc thêm để hiểu rõ hơn về cách WordPress hiển thị nội dung bài đăng.

May mắn là The Loop sẽ được tích hợp vào giao diện nhờ vào Underscores, cho nên bạn cũng không cần quá lo lắng về vấn đề này.

Bước 4: Lập trình theme wordpress của bạn

Nhiều người hay nghĩ rằng các giao diện chỉ dành cho mục đích thẩm mỹ.

Nhưng chúng thực sự có tác động rất lớn đến hiệu năng cũng như chức năng trong website của bạn.

Đây là một số cách cơ bản để thiết lập giao diện.

Thêm các chức năng với “Hook”

Trong quá trình lập trình theme bạn sẽ gặp được khái niệm Hook.

Hook là các đoạn code được chèn vào template file, cho phép chạy các PHP action trên các khu vực khác nhau của website để: hiển thị các thông tin khác, chèn định dạng…

Hầu hết các hook được triển khai trực tiếp vào lõi WordPress, nhưng một số hook cũng để mở và cho phép developer tuỳ chỉnh chúng.

Chúng ta hãy cùng xem qua một số các hook và các chức năng thường gặp:

wp_head () – Dùng để thêm vào

trong header.php và kích hoạt style, script và thông tin khác chạy trong khi web đang load.

wp_footer () – Để thêm vào tệp footer.php ngay trước thẻ . Hook này thường được sử dụng để chèn mã Google Analytics.

wp_meta () – Chúng ta sẽ hay thấy hook này xuất hiện trong sidebar.php, cung cấp các tập lệnh bổ sung (như đám mây thẻ – tag cloud).

comment_form () – Dùng để thêm trực tiếp vào comments.php trước đóng thẻ

nhằm hiển thị dữ liệu nhận xét.

Các hook này sẽ được đi kèm theo giao diện Underscores.

Tuy nhiên, nếu như các bạn muốn tìm hiểu thêm về nó hãy vào Hooks Database (giống kiểu wiki về Hook).

Để xem tất cả các hook có sẵn và tìm hiểu thêm về chúng.

Chỉnh sửa style với CSS

Cascading Style Sheets (CSS) là một ngôn ngữ lập trình diện mạo cho tất cả nội dung trên website của bạn.

Trong WordPress, việc này được thực hiện bằng cách sử dụng file style.css.

Đây là file sẽ thường có trong mọi theme, nhưng đây chỉ là kiểu cơ bản chưa được tuỳ biến.

Nếu bạn muốn một ví dụ nhanh về cách CSS hoạt động, hãy chọn bất kỳ phần từ nào trên website và chuột phải + Inspect

Ví dụ: Tôi sẽ đổi màu chữ Demo từ màu tím sang màu Cam chẳng hạn, hãy để ý đến ô đỏ tôi khoanh tròn.

Việc bây giờ là copy đoạn code trong ô tôi khoanh tròn và dán vào file style.css.

Trên con đường trở thành một Website Designer chắc chắn bạn sẽ phải thành thạo CSS.

Nó có nhiều tác dụng như đổi màu, căn chỉnh lề, đổ bóng…. rất rất nhiều thứ.

Bước 5: Nén giao diện và tải lên Web

Khi bạn đã hoàn thành việc lập trình theme đầu tiên của mình.

Đây là lúc bạn cần chạy thử nghiệm để xem giao diện có hoạt động tốt không?

Để đảm bảo là giao diện sẽ hoạt động hoàn hảo trong mọi trường hợp, bạn nên sử dụng dữ liệu từ Theme Unit Test.

Đây là những file nội dung demo dạng XML, đa dạng với nhiều loại nội dung khác nhau.

Download tại đây.

Tải về và chọn Tool » Import » Run Importer. Chọn file themeunittestdata.wordpress.xml

Hãy quay lại xem theme có hoạt động tốt với những nội dung demo đấy không. Tất nhiên theme này mình cũng chưa phải là hoàn thiện.

Cuối cùng hãy nén theme lại và cài đặt trên bất kỳ trang nào bạn muốn. Nhớ là nén file zip nhé !

Kết luận

Để lập trình theme WordPress từ đầu đến cuối không phải đơn giản.

Nhưng với cách trên của tôi sẽ rút ngắn rất nhiều thời gian và giúp bạn hiểu hơn về WordPress. Cách các file hoạt động như thế nào để tạo được một website WordPress.

Nếu bạn đang định trở thành WordPressTheme Developer, sẽ là cả một con đường dài.

Nhiều thứ phải học, nhưng nếu bạn đam mê và quyết tâm MỌI THỨ ĐỀU CÓ THỂ.

Đây cũng chỉ là những hướng dẫn căn bản. Tôi sẽ viết sâu hơn trong phần tới với seri này.

Mọi thắc mắc cứ comment ở dưới nhé ! Hoặc chỉ đơn giản muốn giao lưu mình rất sẵn sàng 😀