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:
- Thuê hosting ở đâu là tốt nhất – Những điều bạn cần biết
- Mua tên miền ở đâu là tốt nhất, trong nước hay nước ngoài
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 //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ẻ