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.