Hiển thị các bài đăng có nhãn lập trình. Hiển thị tất cả bài đăng
Thiết kế theme Wordpress bài 1: Bắt đầu với tự học thiết kế theme wordpress
Đâ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 tôi 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.
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.
Sử dụng template tối giản, chúng ta có những template file như hình dưới đây:
Theo như hình phía trên, chúng ta có các file template chức năng như sau:
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…
Để 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.
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:- Qui luật căn bản khi thiết kế theme WordPress
- Một số khái niệm được nhắc đến thường xuyên trong WordPress và theme
- Cấu trúc cơ bản của theme
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
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:- 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.
- 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.
- 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.
- 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.
- 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:
- 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
- single.php: trình bày dữ liệu cho một Post
- page.php: trình bày dữ liệu cho một Page
- 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ữ.
- search.php: trang tìm kiếm hoặc kết quả tìm kiếm.
- 404.php: nếu liên kết không tồn tại, trang này sẽ hiện ra.
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…
Thiết kế theme Wordpress bài 2: Template file và Template
Phần này sẽ nói chi tiết hơn về cấu trúc template của WordPress. Bạn sẽ hiểu một giao diện WordPress bao gồm những phần nào và vận hành ra sao. Nếu bạn chưa đọc phần 1, hay quay lại đọc phần này để hiểu rõ những điều cơ bản trong theme WP và cấu trúc của một hệ thống giao diện WP trước khi chúng ta đi sâu vào phần 2 này nhé..
Sau phần đầu tiên, chúng ta đã hiểu về cấu trúc theme, các thuật ngữ và các qui tắc cơ bản để thiết kế giao diện WordPress. Phần này sẽ nói sâu về file index.php và cách nó vận hành qua đó sẽ giải thích về chức năng của một số file mà bạn có thể tìm thấy trong một theme WordPress.
Việc đầu tiên bạn cần biết đó là mỗi Page, mỗi Post… của WordPress được xây dựng bởi nhiều file được gắn lại với nhau. Ví dụ như hình dưới đây:
Header Template file và Footer Template file
Mình muốn điểm sơ qua 2 thành phần này trước vì nó tương đối đơn giản. Thông thường thành phần đầu(header) và cuối(footer) của trang web sẽ ít có sự thay đổi và đó là lý do bạn đưa những thành phần này vào header.php và footer.php
File header.php tùy theo giao diện mà chúng ta chia cắt HTML cho hợp lý nhưng với một template đơn giản chúng ta sẽ không thể thiếu thành phần chính như tiêu đề website, đoạn mô tả website như hình:
Index Template File
Sau phần đầu tiên, chúng ta đã hiểu về cấu trúc theme, các thuật ngữ và các qui tắc cơ bản để thiết kế giao diện WordPress. Phần này sẽ nói sâu về file index.php và cách nó vận hành qua đó sẽ giải thích về chức năng của một số file mà bạn có thể tìm thấy trong một theme WordPress.
Việc đầu tiên bạn cần biết đó là mỗi Page, mỗi Post… của WordPress được xây dựng bởi nhiều file được gắn lại với nhau. Ví dụ như hình dưới đây:
Ví dụ về giao diện của một theme WordPress
Như hình trên, bạn có thể thấy một giao diện WordPress khi hiển thị ra bên ngoài sẽ bao gồm các thành phần được viết trong các file header.php, index.php, footer.php và sidebar.php. Để trực quan hơn xin giới thiệu với các bạn một đoạn code tạo file index.php
Day la content cua website tao boi wpdemo
Hàm get_header(‘name_file’) sẽ gọi tên file file dạng header-name_file.php do bạn chỉ định. Trong trường hợp nội dung đưa vào hàm là rỗng (như trường hợp ở đoạn code trên) hệ thống sẽ gọi file header.php. Tương tự như vậy cho hàm get_footer(). Như vậy, đoạn code ở file index.php này sẽ có nhiệm vụ gọi file header.php và footer.php để include vào file index.php để hiện 1 giao diện đầy đủ có nội dung là
Day la content cua website tao boi wpdemoCòn theo ví dụ ở hình trên, chúng ta sẽ include vào file index.php 3 file là header.php, footer.php và sidebar.php. Bạn thấy cần thêm gì nữa thì thêm – tùy bạn
Header Template file và Footer Template file
Mình muốn điểm sơ qua 2 thành phần này trước vì nó tương đối đơn giản. Thông thường thành phần đầu(header) và cuối(footer) của trang web sẽ ít có sự thay đổi và đó là lý do bạn đưa những thành phần này vào header.php và footer.php
File header.php tùy theo giao diện mà chúng ta chia cắt HTML cho hợp lý nhưng với một template đơn giản chúng ta sẽ không thể thiếu thành phần chính như tiêu đề website, đoạn mô tả website như hình:
Header của một theme WordPress đơn giản
File footer.php thông thường chúng ta đưa vào nội dung là phần copyright hoặc thông tin liên hệ, chủ quyền website như:
Footer của một theme WordPress đơn giản
Đây là phần nội dung sẽ hiển thị trên website bao gồm danh sách bài viết, các bình luận hoặc các plugin có liên quan đến nội dung…tóm lại là bạn muốn người đọc đọc được cái gì thì đây chính là chỗ nó cần xuất hiện.
Ví dụ về một siderbar trong WordPress
Single.php
Phần trên mình đã nói là phần nội dung chi tiết của một bài viết (Post) hay một trang(Page) được thiết kế thông qua một file tên gọi single.php nên chắc bạn cũng đã hiểu single.php để làm gì rồi. Tương tự như file index.php, single.php cũng có cấu trúc khá giống:
Giao diện file index.php
Chúng ta cần lưu ý một chút, file index.php không làm nhiệm vụ hiển thị nội dung chi tiết của bài viết. Phần nội dung chi tiết được thiết kế thông qua một giao diện khác nằm trong file single.php. Bạn có thể hiểu file index.php chứa nội dung trang chủ của website.
Sidebar Template File
Sidebar Template File
Đây là thành phần thiết kế nên cột dữ liệu bên phía tay phải(hoặc tay trái theo giao diện của bạn). Phần này thường được thiết kế để chứa danh sách category, các widget, blogroll…
Single.php
Ví dụ về cấu trúc của một single.php
Nếu bạn có 1 chút vốn liếng tiếng Anh, mình nghĩ bạn sẽ dễ dàng phát hiện ra các template file thường được đặt theo chức năng của nó. Nên nếu bạn không rành code, bạn có thể đọc tên cũng có thể biết được nó dùng làm gì rồi. Hãy thử tìm hiểu trong theme bạn đang dùng người ta đã chia ra làm bao nhiêu thành phần và những thành phần đó làm chức năng gì. Đây là bước đầu tiên để bạn hiểu cách họ viết giao diện WordPress như thế nào.
Thiết kế theme Wordpress bài 3: Bắt đầu viết file index.php
Qua bài viết ở phần 1 và phần 2, chúng ta đã có những khái niệm căn bản về cấu trúc cũng như các thành phần của một theme WordPress. Phần này chúng ta sẽ bắt tay vào việc viết một theme WordPress từ một template đơn giản. Như ở phần đầu mình đã nói, một theme wordpress có ít nhất là 2 file index.php và style.css. Vì vậy, phần 3 này để dễ hiểu và dễ tiếp thu chúng ta sẽ chỉ viết 1 giao diện đơn giản với file index.php và style.css. Các phần nâng cao sẽ được cung cấp dần dần cho các bạn trong các bài viết tiếp theo.
Bước 1: cài đặt WordPress
Phần cài đặt này mình đã có dịp viết trong một bài viết cho câu lạc bộ Webmaster Việt Nam. Nói chung là khá đơn giản nên mình không nói lại nữa. Bạn nào chưa biết hoặc cần tìm hiểu thêm về cách cài đặt WordPress vui lòng đọc thêm bài viết hướng dẫn cài đặt WordPress nhé.
Bước 2: thiết lập thư mục theme, các template file cần thiết
Bạn cần gì để bắt đầu công việc ? Nếu bạn cảm thấy mình đã sẵn sàng, hãy nhìn sang thư viện công cụ cho người dùng WordPress để tìm bộ kit mà mình còn thiếu đã. Ngoài ra bạn cũng cần cài thêm 1 bộ Editor tốt một xíu. Mình yêu thích Macromedia Dreamweaver. Còn các bạn chọn công cụ Editor nào thì tùy nhưng phải đảm bảo bộ công cụ đó hỗ trợ lập trình PHP và HTML.
Lan man nãy giờ, giờ chúng ta đi vào chi tiết công việc thôi
Step 1: Tạo thư mục theme
Việc này đơn giản là bạn tạo một thư mục và đặt tên thư mục là tên theme muốn tạo. Đặt nó vào thư mục chứa theme D:\AppServ\www\wordpress-template-design\wp-content\themes. Thư mục này là đường dẫn trong PC của mình, còn các bạn cứ tìm lấy đường dẫn tương ứng nhé.
Step 2: Tạo file index.php, style.css
Tôi sử dụng Macromedia Dreamweaver để tạo 2 file index.php và style.css trong thư mục vừa mới tạo xong. Nếu bạn không có phần mềm Macromedia Dreamweaver, bạn có thể vào Start > Programs > Accessories > Notepad để mở Notepad lên sử dụng thay cho công cụ kia.
Nội dung của file index.php và style.css tôi chưa soạn thảo chi cả.
Để cho nó trực quan sinh động, mình quyết định viết vài dòng HTML vào file index.php. Mục đích là để nhận dận file index.php của mình có hoạt động. Vì khi để rỗng nội dung, khi wordpress xảy ra lỗi mà show error là false thì khó mà quan sát lắm.
Đây là nội dung mình đưa vào file index.php:
DOCTYPE – đây là định nghĩa loại document của bạn đang dùng. Giúp các trình duyệt dễ dàng xác định và thiết lập các thông số hợp lý cho việc trình bày. DOCTYPE có thể không quan trọng lắm
<html>: đây có thể hiểu là nơi nội dung website của bạn bắt đầu xuất hiện. Còn chi tiết nữa thì lên Google mà tìm tag html là gì
<head > phần mở đầu của 1 document, bao gồm các thông tin cần thiết được thiết lập dùng cho toàn hệ thống. Tóm lại: lên Google mà hỏi nó là cái gì. Hỏi xong mà không biết nữa thì thôi khỏi cần đọc tiếp loạt bài này nha các bạn
<?php bloginfo(‘stylesheet_url’); ?>: đây là một hàm được wordpress định nghĩa sẵn cho chúng ta. Nó dùng gọi file style.css trong thư mục theme của chúng ta và liên kết nó với file hiện tại để thiết lập giao diện. Bạn sẽ thấy thêm <?php và ?>, nếu bạn không phải dân lập trình thì xin giải thích nho nhỏ cho bạn hiểu là nó là 1 dạng tag giúp phân biệt giữa code HTML và code PHP để người dùng có thể sử dụng. Trong PHP, <?php là bắt đầu, còn ?> là kết thúc của một chuỗi lệnh.
Ngoài ra còn 1 số thành phần khác như wp_head() hay get_bloginfo_rss(), wp_title()… đều là các hàm đã được wordpress define sẵn. Bạn có thể quay lại template document mình đã nói ở phần trước để đọc và biết thêm về các hàm này.
Bước 3: chạy thử
Bạn có tin hay không tùy bạn nhưng xin thông báo với bạn là chúng ta đã vừa hoàn tất 1 cái giao diện đơn giản cho WordPress rồi đó. Tất nhiên muốn đẹp hơn, muốn tùy biến mạnh mẽ hơn chúng ta sẽ cần phải làm nhiều việc hơn nữa. Những thứ đó sẽ nói ở bài tiếp theo
Bây giờ, để kiểm tra cái giao diện mới được xây dựng của chúng ta có chạy tốt hay không. Chúng ta phải active nó lên xem thế nào. Bạn hãy đăng nhập tài khoản quản trị wordpress blog của bạn và tìm đến Menu Theme:
Bước 1: cài đặt WordPress
Phần cài đặt này mình đã có dịp viết trong một bài viết cho câu lạc bộ Webmaster Việt Nam. Nói chung là khá đơn giản nên mình không nói lại nữa. Bạn nào chưa biết hoặc cần tìm hiểu thêm về cách cài đặt WordPress vui lòng đọc thêm bài viết hướng dẫn cài đặt WordPress nhé.
Bước 2: thiết lập thư mục theme, các template file cần thiết
Bạn cần gì để bắt đầu công việc ? Nếu bạn cảm thấy mình đã sẵn sàng, hãy nhìn sang thư viện công cụ cho người dùng WordPress để tìm bộ kit mà mình còn thiếu đã. Ngoài ra bạn cũng cần cài thêm 1 bộ Editor tốt một xíu. Mình yêu thích Macromedia Dreamweaver. Còn các bạn chọn công cụ Editor nào thì tùy nhưng phải đảm bảo bộ công cụ đó hỗ trợ lập trình PHP và HTML.
Lan man nãy giờ, giờ chúng ta đi vào chi tiết công việc thôi
Step 1: Tạo thư mục theme
Việc này đơn giản là bạn tạo một thư mục và đặt tên thư mục là tên theme muốn tạo. Đặt nó vào thư mục chứa theme D:\AppServ\www\wordpress-template-design\wp-content\themes. Thư mục này là đường dẫn trong PC của mình, còn các bạn cứ tìm lấy đường dẫn tương ứng nhé.
Step 2: Tạo file index.php, style.css
Tôi sử dụng Macromedia Dreamweaver để tạo 2 file index.php và style.css trong thư mục vừa mới tạo xong. Nếu bạn không có phần mềm Macromedia Dreamweaver, bạn có thể vào Start > Programs > Accessories > Notepad để mở Notepad lên sử dụng thay cho công cụ kia.
Nội dung của file index.php và style.css tôi chưa soạn thảo chi cả.
Để cho nó trực quan sinh động, mình quyết định viết vài dòng HTML vào file index.php. Mục đích là để nhận dận file index.php của mình có hoạt động. Vì khi để rỗng nội dung, khi wordpress xảy ra lỗi mà show error là false thì khó mà quan sát lắm.
Đây là nội dung mình đưa vào file index.php:
Mã nguồn trang index.php
Nhiều bạn sẽ thắc mắc tại sao mình không post code lên để các bạn copy và dán lại cho nhanh ? Vì mình muốn các bạn nhìn và gõ lại để có thể nhớ và hiểu nó. Sau đây mình sẽ giải thích đoạn code này:DOCTYPE – đây là định nghĩa loại document của bạn đang dùng. Giúp các trình duyệt dễ dàng xác định và thiết lập các thông số hợp lý cho việc trình bày. DOCTYPE có thể không quan trọng lắm
<html>: đây có thể hiểu là nơi nội dung website của bạn bắt đầu xuất hiện. Còn chi tiết nữa thì lên Google mà tìm tag html là gì
<head > phần mở đầu của 1 document, bao gồm các thông tin cần thiết được thiết lập dùng cho toàn hệ thống. Tóm lại: lên Google mà hỏi nó là cái gì. Hỏi xong mà không biết nữa thì thôi khỏi cần đọc tiếp loạt bài này nha các bạn
<?php bloginfo(‘stylesheet_url’); ?>: đây là một hàm được wordpress định nghĩa sẵn cho chúng ta. Nó dùng gọi file style.css trong thư mục theme của chúng ta và liên kết nó với file hiện tại để thiết lập giao diện. Bạn sẽ thấy thêm <?php và ?>, nếu bạn không phải dân lập trình thì xin giải thích nho nhỏ cho bạn hiểu là nó là 1 dạng tag giúp phân biệt giữa code HTML và code PHP để người dùng có thể sử dụng. Trong PHP, <?php là bắt đầu, còn ?> là kết thúc của một chuỗi lệnh.
Ngoài ra còn 1 số thành phần khác như wp_head() hay get_bloginfo_rss(), wp_title()… đều là các hàm đã được wordpress define sẵn. Bạn có thể quay lại template document mình đã nói ở phần trước để đọc và biết thêm về các hàm này.
Bước 3: chạy thử
Bạn có tin hay không tùy bạn nhưng xin thông báo với bạn là chúng ta đã vừa hoàn tất 1 cái giao diện đơn giản cho WordPress rồi đó. Tất nhiên muốn đẹp hơn, muốn tùy biến mạnh mẽ hơn chúng ta sẽ cần phải làm nhiều việc hơn nữa. Những thứ đó sẽ nói ở bài tiếp theo
Bây giờ, để kiểm tra cái giao diện mới được xây dựng của chúng ta có chạy tốt hay không. Chúng ta phải active nó lên xem thế nào. Bạn hãy đăng nhập tài khoản quản trị wordpress blog của bạn và tìm đến Menu Theme:
Theme demoweb
Ấy cha ! Có vẻ không đầy đủ thông tin như các theme khác nhỉ ?
Nhưng không sao, chúng ta sẽ bổ sung những thông tin đó ở phần bài viết sau. Giờ là lúc active theme này lên để XemChắc là các bạn sẽ thấy hơi xấu nhưng nó là 1 sản phẩm đầu tay để bạn bắt đầu bước vào một thế giới rộng lớn hơn…. Bạn hãy bắt tay thực hiện ngay bây giờ nhé
Nguồn: Sưu Tầm
