LMT Group - Chia sẻ để thành công !: Thiết kế website

Cấu trúc theme WordPress

15:20 |
Vậy là phần quan trọng nhất trong khâu tự làm theme WordPress đã tới sau khi chúng ta đã trải qua các công đoạn cơ bản như viết mã HTML và CSS cho giao diện. Thực chất, việc làm một theme WordPress không khó nhưng cái khó nhất ban đầu là chúng ta sẽ bắt đầu như thế nào và quy trình lập trình theme WordPress ra sao.
Để có thể hiểu được và làm được, việc đầu tiên mà chúng ta cần quan tâm đến là hiểu được cấu trúc cơ bản của một theme WordPress. Thực tế, mỗi theme WordPress có thể có cấu trúc phức tạp hoặc đơn giản nhưng ít nhất là nó cũng sẽ có một số file bắt buộc nên trong bài này chúng ta cũng sẽ chỉ tập trung vào các file bắt buộc.

1. Cấu trúc cơ bản của một theme WordPress
Bạn hãy vào WordPress.org tải một theme bất kỳ về mở ra xem thì sẽ dễ dàng nhận ra nó thường có 1 số file bắt buộc sau:

Trong hình trên, mình đã ghi thiếu một file cực kỳ quan trọng đó là file style.css. File này mở ra thì thường ta sẽ thấy có những thông tin bắt buộc như sau:
Những thông tin trên nó sẽ hiển thị trong phần Appearance -> Themes. Nếu bạn muốn thử, hãy tạo 1 folder tên bất kỳ và tạo một file style.css rồi viết nội dung y chang đoạn bên trên. Bạn sẽ thấy trong phần theme của website bạn hiển thị theme ra rồi. Nhưng khi kích hoạt lên thì trang sẽ không có nội dung gì cả vì chúng ta chưa có gì hết. Đó là ý nghĩa của file style.css.

Ngoài ra, còn có một file khá quan trọng nữa là file screenshot.png. Mục đích của file này là sẽ hiển thị một hình ảnh thumbnail của theme trong phần chọn theme của website. File này phải được lưu dưới file type là PNG và phải có tên là thumbnail. Đó là quy tắc của WordPress.

2. Giao diện của WordPress sẽ bị cắt nhỏ ra từng file
Trước khi hiểu ý nghĩa của các file PHP thì mình nghĩ cần nhắc lại cho mọi người biết rằng cơ chế hoạt động của mỗi file là nó sẽ tự ráp lại với nhau để tạo thành một giao diện hoàn chỉnh. Ví dụ như ở phần trước ta đã làm một giao diện HTML cho theme thì tất cả mọi thứ ngoài trang chủ ta đều nhét vào file index.html.

Nhưng khi chuyển qua theme WordPress với kiểu file là PHP, chúng ta sẽ cắt nội dung bên trong đó thành nhiều file khác nhau (thường là 3). Ví dụ như file header.php sẽ bao gồm các thẻ từ html cho đến body, file footer.php sẽ từ #footer xuống cuối file.

Bạn có thể mở một theme nào đó ra và xem thử sẽ hiểu rõ hơn.

3. Ý nghĩa các file PHP trong cấu trúc theme
Chỉ có 2 file bắt buộc style.css và screenshot.png là không phải PHP. Còn lại tất cả các file đều là PHP hết vì WordPress được viết bằng ngôn ngữ PHP mà. Bây giờ chúng ta sẽ cùng phân tích đặc điểm của từng file.

header.php
File này được hiểu như nó có nhiệm vụ khai báo tất cả các thành phần ở đầu trang. Bao gồm thành phần không thấy được (thẻ head) và phần thấy được (thành phần hiển thị logo, menu,…).

index.php
File chứa code phần nội dung của trang chủ không bao gồm phần header và footer vì 2 phần đó đã có file riêng. Hơn nữa, nếu bạn muốn cho một code nào tự động làm trang chủ thì có thể đặt tên file đó là home.php hoặc frontpage.php.

footer.php
File này có thể hiểu đơn giản là nó sẽ chứa các đoạn code in nội dung phần chân trang và bao gồm các thẻ đóng của html và body.

archive.php
File này sẽ hiển thị nội dung của các bài viết khi được phân loại bằng tag, category hoặc bất kỳ taxonomy khác. Nếu bạn muốn các bài viết liệt kê theo kiểu giống nhau thì có thể chỉ cần tạo file này là được. Nhưng nếu bạn muốn cho hiển thị danh sách bài viết trong tag hiển thị khác với bài viết trong category thì có thể tạo ra thêm 2 file tag.php và category.php. Lúc này khi bạn vào xem danh sách bài trong một category thì nó sẽ gọi file category.php ra và tương tự như thế với tag.

Ngoài ra nếu bạn muốn làm giao diện khác nhau ở mỗi category thì có thể tạo thêm file category-{ID}.php và đặt ID tương ứng với ID category. Bạn có thể làm tương tự với tag. Tips này dành cho những ai muốn làm giao diện hiển thị bài ở các category khác nhau.

404.php
Đơn giản là sẽ in nội dung của trang 404 ra. Bạn không nhất thiết phải sử dụng hàm của WordPress trong này, cứ viết cái gì vào mà bạn thích.

comments.php
File hiển thị comment form và nội dung comment.

page.php
Hiển thị nội dung khi xem Page. Bạn cũng vẫn có thể làm nhiều kiểu page khác nhau bằng Custom Page Template hoặc đặt tên file pà page-{ID}.php.

single.php
Hiển thị nội dung của Post, hay còn gọi là bài viết. Thường thì code file này cũng giống file page.php.

search.php
Hiển thị danh sách các bài viết trong trang kết quả tìm kiếm. Code cũng có phần giống với file archive.php

functions.php
Là một file khá quan trọng để bạn custom theme bằng filter và action hoặc tất cả những cái khác mà bạn có thể viết bằng PHP. Mặc định chúng ta không cần viết gì vào đây nhưng trong quá trình làm theme sẽ chắc chắn viết linh ta linh tinh vào.

Nói chung, thì khi bạn viết code vào file này thì nó sẽ tự động thực thi trong theme, bất cứ cái gì. Và nếu bạn cần include một file PHP khác vào thì bạn cũng include vào file này.

Lời kết
Đó là tất cả những gì mình cần bạn biết qua để trước khi bắt đầu viết những đoạn code bằng PHP để làm một giao diện WordPress. Cấu trúc theme trong WordPress khá linh hoạt mà nếu bạn hiểu rõ nó thì có thể rất có ích trong việc tuỳ biến hay tự làm một theme rất chuyên nghiệp.
....

Mẫu website bán hàng dành cho sản phẩm trang sức

15:23 |
Các bạn đang có một cửa hàng bán đồ trang sức và đang cần thiết kế một website riêng cho cửa hàng của mình? Thư viện webvn của chúng tôi bao gồm một số mẫu website bán hàng rất đẹp mắt và đặc biệt.
Điển hình ta có mẫu website SJ Jare Mẫu thiết kế dành riêng cho cửa hàng bán đô trang sức, mẫu được thiết kế sang trọng, sử dụng đặc biệt cho các sản phẩm cao cấp như nước hoa, đồ trang sức, ...Với thiết kế responsive, mẫu này được tối ưu hóa website cho điện thoại di động và máy tính. Bên cạnh đó sj jare sử dụng thành phần virtuemart quản lý sản phẩm cho hệ thống thương mại điện tử như: website bán hàng, website tin tức...và sự ổn định của nội dung thành phần content. Bạn có thể sử dụng mẫu này cho các cửa hàng và nội dung viết blog về sản phẩm.

Bạn đọc nếu quan tâm hãy sử dụng ngay các mẫu thiết kế của webvn. Chi tiết mời bạn đọc tham khảo tại dịch vụ xây dựng website của Webvn.
....

Nổi bật