+ Trả lời bài viết
Hiện kết quả từ 1 tới 2 của 2

Chủ đề: Lập trình thiết kế giao diện cho Wordpress - Design Wordpress Theme - Design Wordpress Template

  1. #1
    Administrator Avatar của Mr. Phạm Hùng Thắng
    Tham gia ngày
    Sep 2011
    Bài gửi
    259
    Thanks
    86
    Được cảm ơn 57 trong 43 bài viết
    Hãy giúp chúng tôi bằng cách ấn +1 nếu bạn thấy diễn đàn hữu ích bạn nhé!

    Mặc định Lập trình thiết kế giao diện cho Wordpress - Design Wordpress Theme - Design Wordpress Template

    Đây sẽ là một chủ đề dài hơi! Bởi chúng ta sẽ cùng nhau làm việc trong vấn đề Theme – một thành phần mà mình nghĩ nhiều bạn theo dõi NhanWeb sẽ quan tâm. Câu trả lời cho câu hỏi “tự thiết kế theme cho WordPress ?” bạn sẽ tìm ra sau khi chúng ta kết thúc loạt bài này.

    Để bắt đầu, mình cũng xin chia sẻ với mọi người là mình thích mọi người vừa đọc vừa thực hiện. Do đó, mình sẽ chia bài viết này ra làm nhiều phần và viết dần dần từng phần. Chắc khoảng mất gần 1 tháng đấy ! Nhưng đừng lo, bạn sẽ có thời gian nghiên cứu, tìm hiểu và rút ra những bài học cho mình. Nếu bạn cảm thấy mình có thể tiếp thu nhanh, bạn có thể tự học qua Document về giao diện được WordPress chia sẻ sẵn rồi.



    Thiết kế giao diện WordPress

    Bắt đầu

    Trong phần đầu tiên này, mình sẽ nói về những thứ căn bản nhất trong WordPress. bao gồm:
    1. Qui luật căn bản khi thiết kế theme WordPress
    2. Một số khái niệm được nhắc đến thường xuyên trong WordPress và theme
    3. Cấu trúc cơ bản của theme
    Các phần tiếp theo sẽ đi sâu vào từng thứ một và cả cách để bạn thiết kế.

    Qui luật căn bản

    Qui luật 1: viết HTML cho đúng

    Đây là cái căn bản nhất và cũng là quan trọng nhất mà mình muốn nói đến. Mọi website đều trả về HTML nên việc viết đúng HTML là một điều cần thiết. Hãy so sánh 2 ví dụ dưới đây:

    Ví dụ về HTML trong thiết kế giao diện WordPress

    Trong WP hay bất kì website nào, bạn cần tuân thủ các qui tắc viết HTML: mỗi tag HTML thường có dấu < và dấu >. Kết thúc tag được đánh dấu khác với mở đầu bằng một slash(/). Trong thiết kế giao diện WordPress, tag ul và li là 2 tag được sử dụng nhiều nhất. Căn cứ vào đó đó bạn có thể thiết kế giao diện và viết CSS.

    Qui luật 2: một theme WordPress phải có ít nhất 2 file: index.php và style.css

    Mọi theme wordpress đều chứa ít nhất 2 file này dù bạn có muốn hay không. Bạn viết một theme, theme của bạn sẽ gọi file index.php để lấy dữ liệu và định dạng dữ liệu được bạn thiết kế trong style.css. Ngoài ra, các thành phần khác cần hay không cần là do cách bạn xây dựng theme theo cách của mình. Dưới đây là danh sách các file thường có hoặc theo chuẩn thiết kế theme của WordPress đề nghị:
    • style.css
    • index.php
    • home.php
    • single.php
    • page.php
    • archive.php
    • category.php
    • search.php
    • 404.php
    • comments.php
    • comments-popup.php
    • author.php
    • date.php
    Chi tiết những file này làm công việc gì mình sẽ nói sau ở phần viết nội dung cho từng file hoặc bạn có thể tìm hiểu thêm ở Document về giao diện mà mình đã nói đến ở trên.


    Một số khái niệm


    Bạn là một nhà thiết kế giao diện cho WordPress bạn không thể không biết những khái niệm dưới đây:
    1. Template: một đoạn code được viết dưới dạng một hàm hoặc một file mà bạn có thể sử dụng lại nhiều lần.
    2. Template file: đơn giản là các file tạo nên một theme của giao diện. Những file mà mình liệt kê ở trên có thể được hiểu là các template file.
    3. Theme hoặc WordPress theme: giao diện WordPress được gọi là theme. Bao gồm nhiều file và thư mục chứa hình ảnh, mã lập trình, mã giao diện, mã javascript… giúp hình thành nên giao diện bên ngoài.
    4. Post: hiện tại bạn đang xem một bài viết. Và bài viết này trong wordpress được hiểu là một Post.
    5. Page: khác với post, Page là một trang riêng biệt và không nằm trong một danh mục nào cả. Page mà chúng ta đang nói khác với page (trang – dùng để phân trang). Bạn có thể hiểu Page như một phần nội dung ít thay đổi và được đưa ra nhằm phân biệt với các phần Post mà bạn thường xuyên viết (ví dụ như Page liên hệ, Page giới thiệu tác giả…). Khái niệm này khác với khái niệm phân trang (page) ở chỗ nó được viết hoa chữ P.
    Cấu trúc một theme WordPress

    Khi bạn xây dựng một theme WordPress hoàn tất, file index.php, style.css sẽ làm nhiệm vụ thực thi các mã lệnh tương ứng nhằm trình bày dữ liệu và xuất bản dữ liệu cho người dùng. Để công việc đỡ rối rắm, người ta thường chia ra nhiều template file theo tính năng và công dụng. Mỗi template file sẽ được chèn vào file index.php để làm công việc tương ứng với chức năng của nó.

    Sử dụng template tối giản, chúng ta có những template file như hình dưới đây:



    Cấu trúc theme WordPress

    Theo như hình phía trên, chúng ta có các file template chức năng như sau:
    1. index.php: file thực thi chung và được triệu gọi ở tất cả mọi trang. File này trình bày dữ liệu cơ bản của một giao diện
    2. single.php: trình bày dữ liệu cho một Post
    3. page.php: trình bày dữ liệu cho một Page
    4. archive.php: đây là trang trình bày cho các bài viết được đưa vào dạng lưu trữ.
    5. search.php: trang tìm kiếm hoặc kết quả tìm kiếm.
    6. 404.php: nếu liên kết không tồn tại, trang này sẽ hiện ra.
    Ngoài ra còn rất nhiều nội dung khác như tôi đã mô tả ở phần qui luật 2. Tuy nhiên, bạn có thể chèn những nội dung đó vào index.php luôn nếu muốn.

    Kết thúc phần này ở đây. Giờ các bạn hãy mở các template của WordPress bạn đang có và xem thêm các cấu trúc thường gặp của nó. Bạn cũng nên report lại bài viết này bằng cách liệt kê các cấu trúc thường gặp của bạn hoặc các template file mà bạn chưa rõ tính năng. Mình sẽ cố giải thích cho bạn…

    Các bài viết cùng chuyên mục:



    Chuyên:
    + Đào Tạo Thiết kế Website,
    + Lập trình Website,
    + Quản trị Website,
    + Lập trình PHP&MySQL

    Trong môi trường làm việc thực tế theo nhu cầu tuyển dụng hiện nay...

    Liên hệ:
    Phạm Hùng Thắng - 0982.858506 - YM: hungthangitv
    Để được hỗ trợ, giảng dạy, chăm sóc... tốt nhất!

  2. #2
    Junior Member
    Tham gia ngày
    Aug 2012
    Bài gửi
    1
    Thanks
    0
    Thanked 1 Time in 1 Post
    Hãy giúp chúng tôi bằng cách ấn +1 nếu bạn thấy diễn đàn hữu ích bạn nhé!

    Mặc định

    Cảm ơn bài viết bổ ích của chủ thớt nhé

  3. The Following User Says Thank You to xboysms For This Useful Post:

    Mr. Phạm Hùng Thắng (08-16-2012)

+ Trả lời bài viết

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

     

Members who have read this thread : 7

You do not have permission to view the list of names.

Tags for this Thread

Đánh dấu

Quyền viết bài

  • Bạn không thể gửi chủ đề mới
  • Bạn không thể gửi trả lời
  • Bạn không thể gửi file đính kèm
  • Bạn không thể sửa bài viết của mình

Hoc PHP o dau,   Hoc PHP,   Hoc lap trinh web o dau,   Hoc lap trinh web o dau tot,   hoc lap trinh web o dau tot nhat,   Hoc lap trinh website o dau,   Hoc PHP MySQL,   Hoc PHP o dau tot,   Hoc PHP o dau tot nhat,   hoc thiet ke web o dau,   Hoc thiet ke web o dau tot,   hoc thiet ke web o dau tot nhat,   hoc thiet ke web o dau tot nhat ha noi,   Hoc thiet ke website o dauHoc thiet ke website o dau nhanh nhathoc thiet ke web tot nhat ha noi,   Hoc thiết kế website nhanh nhất,   Học làm web,   Học làm website,   Học làm web trọn gói,   Học làm web trọn vẹn,   Học lập trình PHP nhanh nhất Hà Nội - Hải Phòng - TP Hồ Chí Minh,   Học lập trình php tốt nhất hà nội,   Học lập trình php tốt nhất hải phòng,   Học lập trình php tốt nhất thành phố hcm,   Học lập trình php tốt nhất việt nam,   Học lập trình php tốt nhất đà nẵng,   Học lập trình website ở hà nội,   Học lập trình website ở đâu hà nội,   Học lập trình web tốt nhất hà nội,   Học lập trình web tốt nhất việt nam,   Học lập trình web ở hà nội,   Học lập trình web ở đâu hà nội,   Học lập trình web ở đâu tốt nhất hà nội,   Học lập trình web ở đâu tốt nhất việt nam,   Học PHP,   Học PHP Hải Phòng,   Học quản trị website cấp tốc,   Học thiết kế website,   Học thiết kế website rao vặt ở đâu,   Học thiết kế website trọn gói,   Học thiết kế website tuyệt vời nhất,   Học thiết kế website xem phim ở đâu,   Học thiết kế website được thực hành nhiều nhất,   Học thiết kế website được đánh giá tuyệt vời nhất,   Học thiết kế website ở Hà Nội,   học thiết kế web tại htvsite.com tốt nhất hà nội