Viết WordPress theme cho điện thoại sử dụng jQuery Mobile
jQuery Mobile được ra mắt từ tháng trước. Framework này hỗ trợ rất tốt cho việc tạo phiên bản riêng cho trình duyệt di động. Đây là bài hướng dẫn viết theme di động cho WordPress.
Bước 1: Chuẩn bị file
Chúng ta có thể tạo các file bằng tay, nhưng việc này là không cần thiết vì có rất nhiều công cụ giúp chúng ta làm việc này nhanh chóng. Chúng ta sẽ sử dụng "Blank Theme". Đây là một theme của WordPress chưa bao gồm style.
Bạn có thể tải Blank Theme tại đây. Giải nén và chuẩn bị bắt tay vào việc chỉnh sửa.
Bước 2: Header and Footer files
Việc đầu tiên cần làm là thêm các file jQuery và jQuery Mobile. Bạn có thể tải về từng file và gắn vào theme hoặc sử dụng link file từ jQuery’s CDN như sau:
Mở file header.php từ thư mục của "Blank Theme", và thêm vào dòng code sau trong thẻ <head> và </head>:
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" /> <script src="http://code.jquery.com/jquery-1.4.3.min.js"></script> <script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script>
Do jQuery Mobile sử dụng HTML5 nên chúng ta phải sửa doctype (vẫn trong header.php). Thay thế 6 dòng đầu tiên của file như sau:
<!DOCTYPE html> <html> <head>
Sau đó kéo xuống dưới cùng của file và tìm thẻ <body>. Thay thế các phần từ sau thẻ <body> tới cuối cùng file bằng đoạn sau:
<body <?php body_class(); ?>>
<div data-role="page" data-theme="b" id="jqm-home">
<div data-role="header">
<h1><?php bloginfo('name'); ?></h1>
</div>
<div data-role="content">Với các chỉnh sửa trên, chúng ta đã xong phần về jQuery Mobile. Nhưng thậm chí tôi chưa chỉnh sửa chút nào JavaScript cả! Trên thực tế thì jQuery Mobile không yêu cầu bạn phải viết JavaScript. Tất cả những gì bạn gần chỉ là vài thẻ <div> với các thuộc tính data-role theo tiêu chuẩn.
Bạn có thể chú ý tới dòng 3 của đoạn code trên. Phần data-role="header" mô tả thanh header bar. Nếu bạn lưu file và xem phần giao diện, bạn sẽ thấy tiêu đề trên cùng của màn hình đi kèm với tên blog của bạn.
Tiếp theo, mở file footer.php, thay toàn bộ nội dung như sau:
</div><!-- data role content--> <div data-role="footer" class="ui-bar"> <a href="#jqm-home" data-role="button" data-icon="arrow-u">Up</a></div> <?php wp_footer(); ?> </div><!-- data role content--> </body>
Đoạn mã này thêm vào theme thanh footer bao gồm một nút để scroll lên header. Bạn sẽ tiếp tục nhìn thấy thuộc tính data-icon tại đây. Nó cho phép bạn định nghĩa loại biểu tượng, tại đây chúng ta sử dụng biểu tượng mũi tên hướng lên (tất nhiên là còn rất nhiều biểu tượng khác cho bạn lựa chọn).
Bước 3: Trang chủ
Tiếp tục chuẩn bị tới code cho trang chủ với danh sách các bài gần đây (chú ý: chúng ta đang viết theme cho mobile nên sẽ bỏ qua các phần khác như ảnh đại diện, mô tả từng bài...). Mở file index.php tìm đoạn lặp và thay thế với đoạn mã sau:
<ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="b"> <?php if (have_posts()) : while (have_posts()) : the_post(); ?> <li><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></li> <?php endwhile;endif ?> </ul> <?php include (TEMPLATEPATH . '/inc/nav.php' ); ?>
Lưu lại file và xem thử: bạn đã có danh sách các bài viết ở trang chủ với các hiệu ứng chuyển động rất đẹp, không cần viết một dòng mã JavaScript nào nhờ phép thuật của jQuery mobile.
Danh sách được tạo dựa vào thuộc tính data-role="listview" trong unordered list (ul). Bạn sẽ thấy có các thuộc tính khác ở bên trong danh sách. Bạn có thể thử nghiệm bằng cách thay data-theme="c" thành data-theme="b" và xem có chuyện gì xảy ra.
Sau đó bạn cần sửa vòng lặp ở trong file search.php và archive.php thành như đã làm với file index.php.
Bước 4: Post và pages
Mặc định thì file single.php và page.php của Blank Theme đã hiển thị khá đẹp trên phiên bản di động, nên chúng ta không cần chỉnh sửa nhiều, chỉ thay đổi một chút: ẩn bình luận đi và chỉ hiển thị khi người dùng quyết định bình luận. Tất nhiên, nhờ jQuery mobile mà việc này cũng sẽ rất dễ dàng.
Mở comments.php và tìm dòng 15. Thêm vào dòng sau:
<div data-role="collapsible" data-state="collapsed">
Chuyển tới dòng 31 và thêm thẻ đóng </div> ngay trước câu điều kiện else. Lưu file và xem thử web của bạn. Nếu bạn muốn hiển thị luôn bình luận thì chỉ cần bỏ thuộc tính data-state="collapsed". Vì đó là tất cả những gì chúng ta cần làm để tạo một đoạn nội dung có thể đóng/mở.
Bạn có để ý là ở bài viết (posts), thanh header bar hiển thị nút “Back”? Nếu click/tap vào đó sẽ đưa bạn quay trở lại trang chủ.
Bước 5: Bổ sung tìm kiếm
Chúng ta đã có một giao diện chuẩn cho di động, nhưng còn thiếu một thứ quan trọng: công cụ tìm kiếm. Mở file searchform.php và thay toàn bộ nội dung file như sau:
<form action="<?php bloginfo('siteurl'); ?>" id="searchform" method="get">
<div data-role="fieldcontain">
<input type="search" name="s" id="search" value="" />
</div>
</form>Lưu file, mở file index.php và thêm vào giữa hàm get_header() và đoạn mã unordered list (đã chỉnh sửa ở trên) như sau:
<?php include('searchform.php'); ?>Công việc đến đây coi như xong và bạn có thể sử dụng vào website của mình rồi.
Bước 6: Kết thúc
Tất nhiên về chức năng chính đã xong, nhưng vẫn còn nhiều chức năng, định dạng phải làm và sửa chữa để nó thành "của riêng", việc này bạn có thể nghiên cứu thêm và hãy khoe phiên bản của mình tại gallery của Ntuts nhé 
Bài viết được dịch lại từ catswhocode.com bởi Neo
Bạn có thích bài viết này?
Neo
Nhìn mặt trời từ năm 1984 nhưng tới tận 2002 mới được thấy cái máy tính đầu tiên của mình. Đầu năm 2007 thì quyết định theo cái nghề cao quý là thiết kế web 
. Hiện mình đang sống tại Hà Nội. Sở thích: làm website và giúp đỡ mọi người phát triển website theo chiều hướng tốt đẹp hơn.