hướng dẫn bootstrap với wordpress

Sau đây mình sẽ hướng dẫn Bootstrap với wordpress

Có lẽ hiện nay xu hướng web là phải thích nghi trên hầu hết các thiết bị màn hình.Chính vì vậy là 1 developer bạn sẽ cần tới đáp ứng được nhu cầu thực tế đó , mà bootstrap là 1 lựa chọn tuyệt vời. Sau đây mình sẽ hướng dẫn bạn inlcude bootstrap vào wordpress.

Đơn giản là bạn hãy download booststrap từ đây.http://getbootstrap.com/2.3.2/.Sau khi download bạn có thể copy vào thư mục js trong theme và thêm đoạn code này vào.
[code type=php]
// Load HTML5 Blank scripts (header.php)
function html5blank_header_scripts()
{
if (!is_admin()) {

/* register jquery & css bootstrap */
wp_register_style(‘boostrap_css’,get_bloginfo(‘template_directory’) .’/js/bootstrap/css/bootstrap.min.css’);
wp_enqueue_style(‘boostrap_css’);

wp_register_script(‘boostrap_js’,get_bloginfo(‘template_directory’) .’/js/bootstrap/js/bootstrap.min.js’);
wp_enqueue_script(‘boostrap_js’);

wp_register_style( ‘bootstrap-responsive’, get_template_directory_uri() . ‘/js/bootstrap/css/bootstrap-responsive.min.css’, array(), ‘1.0’, ‘all’ );
wp_enqueue_style( ‘bootstrap-responsive’ );
}
}

?>
[/code]

Đây chỉ là cách để bạn dùng bootstrap với wordpress đúng cách , để không bị xung đột jquery wordpress, Hiện nay boostrap đã update version 3.0.2, bạn có thấy web mình sonweb.net Sử dụng bootstrap 3 responsive rất tốt.
Bạn có thể thấy rõ điều đó khi khi thu nhỏ màn hình hay dùng điện thoại mobile để truy cập website sonweb.net , sẽ thấy tùy theo kích thước màn hình mà web sẽ hiển thị khác nhau.
Đây là giao diện trang sonweb.net khi bạn dùng màn hình nhỏ .

menu ngang sẽ tự động ẩn đi, chuyển thành nút button,bạn click vào mới hiện ra.Tất cả sidebar đều chuyển hàng ngang xuống hết sau content nội dung. Có lẽ tới đây bạn đã thấy thích thú với bootstrap rồi nhỉ.
Mình sẽ hướng dẫn bootstrap với wordpress kĩ hơn với các bài viết sau.
Cảm ơn bạn đã đọc bài viết hướng dẫn bootstrap với wordpress tại website sonweb.net