Starter Theme: Bắt đầu viết giao diện với HTML5Blank

Starter Theme: Bắt đầu viết giao diện với HTML5Blank

Phần 2 serie tự làm theme WordPress với HTML5Blank. Ở bài này bạn sẽ biết cách cấu hình theme cơ bản và tùy biến các thành phần đơn giản có sẵn.

Đây là bài viết thứ 2 trong serie hướng dẫn starter theme với tựa đề bắt đầu viết giao diện với HTML5Blank. Trong bài trước Sáu đã gửi đến các bạn khái niệm Starter Theme cũng như giới thiệu các gói giao diện phổ biến hiện nay, đa số chúng đều có chức năng rất tốt và hơn hết là hỗ trợ HTML5, CSS3 và khả năng Responsive cho giao diện WordPress.

Đầu tiên thì bạn phải chuẩn bị mọi thứ theo yêu cầu bên dưới:

  • Một trang blog đang hoạt động được cài đặt bằng WordPress.
  • Bộ giao diện chuẩn HTML5 Blank.
  • Các phần mềm hỗ trợ công việc code giao diện.

Tải giao diện và kích hoạt

Đầu tiên bạn vào trang chủ của HTML5 Blank để tải giao diện mới nhất, phiên bản hiện tại tính đến thời điểm mình viết bài này là version 1.4.2, bạn vào tải bộ giao diện chuẩn này về và kích hoạt trên blog của bạn nhé.

Tải bộ giao diện HTML5 Blank mới nhất
Ảnh. Tải bộ giao diện HTML5 Blank mới nhất – Viết giao diện với HTML5Blank

Chắc có lẽ bước này các bạn biết làm hết rồi, mình không cần phải nói nhiều, nói sâu về cách kích hoạt giao diện cho WordPress nhé. Nếu đây là lần đầu tiên bạn tìm hiểu về WordPress thì mình xin mời bạn đọc qua bài hướng dẫn cài đặt giao diện trên Thạch Phạm Blog.

Tiến hành viết code và chỉnh sửa giao diện

Việc đầu tiên bạn cần làm đó là chỉnh sửa lại thông tin khai báo giao diện, bạn có thể làm việc này trước hoặc sau khi kích hoạt giao diện đều được. Bạn mở tập tin style.css lên và thay đổi những thông tin trong phần chú thích nằm trên cùng của file thành thông tin giao diện bạn muốn viết.

Bạn thay những dòng trên thành nội dung như bên dưới, chú ý là bạn có thể thay đổi phần này theo ý của mình, không nhất thiết phải làm theo mình ở bước này nhé.

Sau khi chỉnh sửa xong thì lưu lại và chuyển sang bước kế tiếp, bây giờ thông tin giao diện của bạn đã được thay đổi, bạn có thể vào phần quản lý giao diện trong dashboard để xem sự thay đổi này.

Thông tin giao diện HTML5 Blank sau khi đã được chỉnh sửa
Ảnh. Thông tin giao diện HTML5 Blank sau khi đã được chỉnh sửa – Viết giao diện với HTML5Blank

Và bây giờ bạn hãy ra ngoài trang chủ của blog, xem thử giao diện mình vừa kích hoạt nó đẹp hay xấu. Woaahh… như vậy là bạn đã tự tay chỉnh sửa được một giao diện đầu tiên, nhưng nó còn quá sơ khai và chưa có gì là đẹp mắt, nhưng hãy yên tâm vì còn có mình ở đây hướng dẫn tiếp cho bạn thực hiện công đoạn làm đẹp cho giao diện.

 
Giao diện HTML5 Blank sơ khai
Ảnh. Giao diện HTML5 Blank sơ khai – Viết giao diện với HTML5Blank

Việc tiếp theo bạn sẽ làm đó là tạo thư mục con bên trong thư mục chính của giao diện, việc này sẽ giúp ích cho bạn trong khâu quản lý những nội dung mà bạn đã sửa đổi, nếu như bạn không tạo thư mục con mà đặt thẳng vào thư mục chính của giao diện thì cũng được, nhưng nhìn nó sẽ rối mắt lắm, do vậy mà Sáu khuyên bạn nên tạo thư mục chỉnh sửa riêng.

Tạo thư mục con với tên là sau
Ảnh. Tạo thư mục con với tên là sau

Mình đặt tên cho thư mục này là sau, sau này mọi thay đổi liên quan đến hình ảnh và các tập tin phát sinh mình đều đặt trong thư mục này.

Tiếp đến bạn tạo file custom-style.csscustom-function.php đặt nằm trong thư mục bạn vừa mới tạo xong. Sau khi hoàn thành, bạn mở tập tin functions.php của giao diện lên và thêm vào dưới cùng của tập tin đoạn code sau:

Nhớ là đặt trước dấu ?> kết thúc của ngôn ngữ PHP nhé. Đại loại là giống như đoạn code demo mình gửi bên dưới đây, lúc nãy nếu như bạn đặt tên thư mục khác thì nhớ chỉnh sửa lại cho đúng đường dẫn nha bạn.

Bây giờ thì tập tin custom-function đã có hiệu lực, bạn hãy điền dòng code sau để thêm tập tin custom-style vào giữa thẻ head, sử dụng hàm wp_enqueue_style.

Bước kế tiếp, bạn mở tập tin custom-style.css lên và cho vào những dòng định dạng css như sau:

Tuy vậy, kết quả sẽ chưa được đẹp lắm. Bây giờ bạn mở tập tin header.php lên (tập tin này nằm trong thư mục gốc của giao diện) và thêm vào dòng sau nằm ở vị trị cuối cùng của file:

Kết quả sẽ giống như bên dưới:


 

Tương tự như tập tin header.php, bạn mở tập tin footer.php lên để đóng thẻ div mà bạn vừa mở ở phần trên:

Bây giờ thì định dạng giao diện của bạn đã có thêm chút nhan sắc rồi. Quay lại phần function, bạn mở tập tin custom-function.php lên và thêm vào các dòng code bên dưới để hỗ trợ những kích thước mới của hình ảnh thumbnail.

Sau khi lưu lại, bạn tiếp tục mở tập tin loop.php lên và tìm tới dòng:


 

Thay dòng code:

Thành dòng code:

Sau khi thực hiện xong thì bạn thử tải lại trang xem nào? Thật tuyệt vời, nhìn đẹp như ông mặt trời mới mọc. Giao diện của bạn đã hình thành và đã được cải thiện rất nhiều so với giao diện ban đầu của HTML5 Blank.

Giao diện HTML5 Blank kết thúc phần 2
Ảnh. Giao diện HTML5 Blank kết thúc phần 2

Kết luận

Qua bài viết này thì bạn đã có thể tự tay chỉnh sửa cho mình một giao diện đơn giản nhất nhưng cũng đáp ứng đầy đủ yêu cầu của một giao diện WordPress. Mình đã nén giao diện và các tập tin hình ảnh lại và gửi lên đây, bạn có thể tải về để lấy thêm thông tin nhằm giúp cho việc code css nhé.

Tải tập tin đính kèm: html5blank_part2.zip

Trong phần sau mình sẽ hướng dẫn cho bạn cách tùy chỉnh nâng cao hơn, cũng như kiểm tra tất cả các thẻ HTML xem đã định dạng đúng theo ý mình hay chưa? Hãy đón chờ bài viết mới nhất trên WordPress.FAQ.edu.vn bạn nhé.

Các bài viết liên quan:

 

WordPress FAQ  » Sử dụng WordPress > Hướng dẫn Starter Themes


 WordPress FAQ   |   Hoc WordPress   |   Su dung WordPress   |   Lap trinh WordPress |   Plugin WordPress  |  Thuat ngu WordPress    |  Theme WordPress  |  Huong dan su dung WordPress | Huong dan Starter Theme

Ảnh. Starter Theme: Bắt đầu viết giao diện với HTML5Blank
Ảnh. Starter Theme: Bắt đầu viết giao diện với HTML5Blank

Chia sẻ bài viết

Bình luận