Với bài hướng dẫn thiết kế website mobile với wordpress bạn sẽ nắm được cơ bạn để làm một website cho mobile.Chỉ với thư viện jquery mobile bạn có thể tạo được 1 website mobile thật ấn tượng cho cho các thiết bị di động khác nhau, chỉ với vài bước thật đơn giản.
Đây là 1 website mobile demo bạn dùng điện thoại để test nhé.
Bước 1: Bạn sẽ bắt đầu bằng 1 blank theme dành cho wordpress.gồm có các file cơ bản :
- style.css
- index.php
- page.php
- header.php
- footer.php
Chỉ đơn giản là thế để tạo 1 theme cho wordpress, nếu bạn chưa có các file cần thiết bạn có thể tải 1 blank theme mình đã up lên mediafire . bạn có thể tải vể ở đây download .Với thư viện jquery mobile sẽ giúp website tải nhanh và tự động add css , ajax khi load trang.
Bước 2: Định nghĩa cho theme ,mô tả các thông tin cơ bản về thông tin của theme:
Mỗi lần theme wordpress được tạo ra chúng ta cần phải khai báo stylesheet chó nó để wordpress có thể nhận dạng được theme của bạn cũng như thông tin về theme.Các khai báo được đặt trong file style.css. Đây là 1 ví dụ.
/* Theme Name: wp-bootstrap lua hong Theme URI: http://luahong.net Description: A simple responsive theme based on the Bootstrap framework. Includes multiple page templates, two different sidebars and a theme options panel. Version: 2 Author: Le Thanh Son Author URI: http://luahong.net */
Tiếp theo chúng ta sẽ dùng 1 vài thẻ meta mở rộng cho css3 để trình duyệt nhận biết .
<!DOCTYPE html> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="/favicon.ico" rel="apple-touch-icon-precomposed">
Dòng đầu tiên để khai báo là dùng html5 , dòng 2 để trình duyệt nhận biết độ rong các loại màn hình, dòng 2 để tao icon cho android và ios.
Tới đây xong bước 2 bài thiết kế website mobile với wordpress.
Bước 3 : Tích hợp jquery mobile vào wordpress
jquery mobile sẽ giúp bạn trở nên mạnh mẽ có thể sử dụng sức mạnh của html5 và các hiệu ứng mạnh mẽ dành cho các thiết bị di động.
Để include jquery mobile vào wordpress đúng cách bạn mở file functions.php thêm hàm này .
if ( !is_admin()){
//enqueue js
if ( !function_exists('theme_js') ){
function theme_js(){
wp_register_script('jquery-mobile',"http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js",array('jquery'),'1.3.2');
wp_enqueue_script('jquery-mobile');
wp_register_script( 'custom-script' , get_template_directory_uri() . '/js/custom.js' , array('jquery'),'1.3.2');
wp_enqueue_script('custom-script');
}
}
add_action('wp_enqueue_scripts','theme_js');
if ( !function_exists('theme_style')){
wp_register_style('css-mobile',"http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css",'','1.3.2');
wp_enqueue_style('css-mobile');
}
add_action('wp_enqueue_styles','theme_style');
}
Việc dùng jquery mobile có thể dẫn đến xung đột khi bạn link tới trang nào đó admin, bạn có thể thảm khảo cách fix lỗi này tại bài này mà mình đã viết Hướng dẫn jquery mobile với web và wordpress.
Ở 4 file index,single,page,category đây là cấu trúc 1 page của jquery mobile.
<div data-role="page"> <div data-role="header">...</div> <div data-role="content">...</div> <div data-role="footer">...</div> </div> <h3>
Bước 4: Hiển thị nội dung web mobile với wordpress.
Đây là bước cuối trong bài viết thiết kế website mobile với wordpress, xong bước này hi vọng bạn có thể làm được web mobile đơn giản.
Ở file single , hay category nơi bạn lấy nội dung của post bạn sẽ dùng cấu trúc này .
<div data-role="post" data-inset="true"> <!--?php if (have_posts()) : while (have_posts()) : the_post(); ?--> <h2 class="standalone-title"></h2> <span id="the-content"><? php the_content(); ?></span> <!--?php endwhile ?--> </div>
với những dòng trong jquery mobile sẽ tự động add css,html để tương thích vói thiết bị mobile , di động.
Tiếp theo với danh sách post , bài viết bạn viết theo cấu trúc này :
Và cuối cùng ở file footer bạn có thể dùng các dòng code này
<div><code><div data-role=</code><code>"page-footer"</code> <code>class</code><code>=</code><code>"top"</code> <code>id=</code><code>"top"</code><code>></code></div> <div></div> <div><code><a href=</code><code>"#index"</code> <code>data-role=</code><code>"button"</code><code>>Top of Page</a><br /></code></div> <div><code><div id=</code><code>"rights"</code><code>>This Website is Copyright 2010 - 2012, All Rights Reserved. Please Don't Steal My Code!</div></code></div> <div><code></div></code></div>
Tới đây mình xin kết thúc bài hướng dẫn cơ bản thiết kế website mobile với wordpress , mình sẽ hướng dẫn chi tiết hơn nữa trong các bài viết sau. Cảm ơn bạn đã đọc bài thiết kế website mobile với wordpress
