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.
Phụ mục
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é.
Kết quả sau khi cài đặt:
Cài đặt WordPress
Mình cũng khuyên các bạn nên cài đặt ở localhost(sử dụng AppServ để cài đặt) bạn sẽ không phải tốn nhiều công sức trong quá trình làm giao diện cũng như không bị ảnh hưởng bởi tình hình mạng. :)
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é.
Thư mục chứa theme "nhanweb" được tạo
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ả.
2 file imdex.php và style.css của tôi
Để 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 :D
<?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 :D 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 NhanWeb
Ấ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 để xem lại thành quả của chúng ta….
Giao diện WordPress đầu tiên của tôi
Tuy có vẻ hơi xấu xí 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é :)
Hẹn gặp lại bạn ở các phần sau…
P/S: Bài viết đăng tại http://vnwebmaster.com và http://nhanweb.com – Vui lòng không sao chép. Chỉ nên chia sẻ link cho người quan tâm.
khong kheo em lai thiet ke duoc theme nho bac ay chu!
Đó cũng là điều mà người viết mong muốn mà bác. Biết đâu sau này bác là một chuyên gia thiết kế theme wordpress thì sao :D
@Lần sau bác viết tiếng Việt có dấu nhé.
hihi. Thích quá, tự nhiên đọc xong lại thấy thích thiết kế theme
Từ nay chắc chắn em sẽ theo dõi bài viết của bác thường xuyên :)
Bác cho em hỏi tí, khi click vào image của bài viết, ảnh được phóng to ra, bác tự viết jquery plugin hay bác dùng jquery plugin gì cho hiệu ứng này vậy bác
hihi. Em cũng thắc mắc cái này mà chưa hỏi
Nó resize mọi ảnh về 1 kích thước :)
Mình sử dụng FancyBox for WordPress thôi bác ah. Link download của em nó đây: http://wordpress.org/extend/plugins/fancybox-for-wordpress/
Cám ơn bác. Em lụm phát.
Wp không khó để có 1 theme tự design và cắt layout !
nhưng sử dụng hết chức năng của một CMS thực thụ như Wp thì rất khó !
e đã code cho mình dc 1 theme cũng tạm !
mong cho ý kiến !
http://haquy.net/home
Bác Nhân có thể viết 1 bài hướng dẫn sử dụng plugin WP Super Cache
Em muốn dùng mà không biết sử dụng thế nào. Đã đọc hướng dẫn nhưng ko hiểu lắm.
PS: Xin lỗi bác vì em không tìm thấy mục hỏi đáp nên đành comment ở đây
Mình có một trang php muốn đưa kết quả của trang này hiển thị ngay vào trang index thì mình phải làm thế nào? Mình có sửa trong file index của wp cũng như trang index của theme hiện tại nhưng không được .Mong bạn giúp đỡ
Theo như nhận đinh của các chuyên gia WP, 11 Pulgin tốt nhất, trong đó Pulgin tăng tốc là W3 total cache . Bác CAA thử dùng nó xem kết quả có hơn WP Super Cache. Chúc vui :)
Cảm ơn Trung nhé, để CAA thử xem
Cảm ơn bạn nhiều.
Những bài viết của bạn rất có ích cho mình.
Cảm ơn nhiều, bài viết hay lắm!
Bài viết rất hay,mình cũng đang học thiết kế theme cho WP,nhưng cái code tấm hình bạn ghi ở trên quá nhỏ,k thấy được,bạn có thể làm hình to lên tí không?
Bạn có thể click vào ảnh cần xem để phóng lớn ảnh.
cho mình hỏi tí
mình chuyển nhà cho host wordpress, mọi thứ đều ok hết, xong khoảng 3h sau nó nói thiếu file Html.index là sao mình ko hiểu, đại khái là nó nói up fiel html.index len thư mục gốc, nhưng wordpress làm gì có fiel html.index,
Rất mong được sự giúp đỡ của admin nhanweb.com (xin gửi phản hồi về mail [email protected]) xin chân thành cảm ơn.