Bootstrap là một trong những framework phổ biến nhất hiện nay dành cho việc thiết kế website theo phong cách hiện đại. Ngoài khả năng hỗ trợ code giao diện theo chuẩn HTML5 và CSS3 thì Bootstrap còn hướng tới người dùng hay sử dụng thiết bị di động, ở đây chúng ta nói đến thiết kế giao diện theo tiêu chí mobile first.
Để tích hợp Bootstrap vào giao diện của WordPress thì bạn cần tải nguyên bộ framework này về từ trên trang chủ của họ. Cụ thể hơn, bạn có thể vào trang thông tin Download Bootstrap để lấy bộ mã nguồn này về.
Đối với giao diện bình thường thì bạn có thể sử dụng Bootstrap CDN, nghĩa là bạn dùng lại link được lấy từ server khác chứ không phải tải và lưu Bootstrap trên hosting của bạn.
<!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> <!-- Optional theme --> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css"> <!-- Latest compiled and minified JavaScript --> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
Để bạn dễ hình dung, một giao diện HTML đơn thuần nếu muốn sử dụng được Bootstrap thì bạn có thể tham khảo đoạn code bên dưới, điều quan trọng ở đây là bạn phải có tập tin css và tập tin javascript chính.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>Hello, world!</h1>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Và bài viết này Sáu đang hướng dẫn bạn cách tích hợp Bootstrap vào giao diện của WordPress, do vậy nếu bạn muốn thiết kế giao diện WordPress theo hướng chuyên nghiệp thì bạn nên sử dụng hàm theo quy định của WordPress. Cụ thể hơn, bạn sẽ sử dụng những hàm kiểm tra xung đột trước khi đính kèm nó vào giao diện. Hãy sử dụng đoạn code bên dưới vào bên trong tập tin functions.php của giao diện.
function stheme_add_boostrap() {
wp_register_style('bootstrap-style', get_template_directory_uri() . '/lib/bootstrap/bootstrap.min.css');
wp_enqueue_style('bootstrap-style');
wp_register_script('bootstrap', get_template_directory_uri() . '/lib/bootstrap/bootstrap.min.js', array(), false, true);
wp_enqueue_script('bootstrap');
}
add_action('wp_enqueue_scripts', 'stheme_add_boostrap');
Trong đoạn code bên trên Sáu đã sử dụng 2 hàm để đăng ký css và javacript với WordPress, nếu có một plugin nào đó cũng tích hợp Bootstrap theo kiểu này thì css và javascript chỉ load có 1 lần duy nhất.
<?php wp_register_style( $handle, $src, $deps, $ver, $media ); ?>
Hàm bên trên có 1 vài thông số đầu vào bạn cần chú ý:
$handle
Đây là tên bạn đặt cho tập tin css, kiểu dữ liệu là string.
$src
Đây là đường dẫn đến tập tin css, nếu tập tin này được nằm trong thư mục của giao diện thì có thể sử dụng hàm như bên trên Sáu đã nêu.
$deps
Biến này là một mảng các tập tin css liên quan, nếu như tập tin hiện tại cần phụ thuộc vào một tập tin css nào khác thì bạn nêu ra ở đây.
$ver
Biến này là một chuỗi hoặc một giá trị đúng hay sai (bool) để chỉ phiên bản của tập tin hiện tại.
$media
Media của tập tin css là gì, nếu bạn không điền thì mặc định media sẽ là all.
<?php wp_register_script( $handle, $src, $deps, $ver, $in_footer ); ?>
Hàm này dùng để đăng ký tập tin javascript, các biến đầu vào tương đối giống với hàm đăng ký tập tin css, chỉ khác có một biến duy nhất đó là $in_footer. Đây là một biến với kiểu dữ liệu là bool, nếu bạn muốn load javascript ở dưới cùng của trang web thì dùng là true.
Kết luận
Như vậy là bạn đã biết được cách tích hợp Bootstrap vào bên trong giao diện của WordPress. Tuy đây là những đoạn code đơn giản nhưng bạn phải để ý tới nó vì tất cả nội dung của bài viết này sẽ giúp ích cho bạn rất nhiều trong khâu lập trình giao diện và plugin cho WordPress.
Tuy nhiên, bạn cần phải tìm hiểu thêm về cách thức hoạt động cũng như là sử dụng các lớp css như thế nào cho phù hợp, những nội dung hướng dẫn đều có trên trang CSS của Bootstrap. Bạn cũng có thể tham khảo những trang web mẫu được đính kèm trên này để biết thêm thông tin. Chúc bạn thành công.
Hơi khó hiểu Sáu ạ, đề nghị viết cụ thể hơn chút đi, từng bước có minh họa, cảm ơn!
Cái này là cách để bạn load thư viện bootstrap vào trong giao diện của bạn, còn cách sử dụng bootstrap thì bạn phải xem hướng dẫn trên trang chủ của họ.
mình đã đọc rồi, nhưng lưu lại để nghiên cứu từ từ, có khi lại cần, cảm ơn bạn