• Alo88.COM! là Blog cá nhân nhằm chia sẻ những kiến thức, kinh nghiệm đã làm trong các dự án về các lĩnh vực: Lập trình website, quản trị mạng, web services, server cloud, Amazon Web Services, thiết kế đồ họa, domain-hosting.
    Hy vọng sẽ hữu ích cho các bạn

Tích hợp Bootstrap vào giao diện WordPress

mediavn

Administrator
Staff member
#1
Nói về bootstrap thì mình sẽ không nói thêm nhiều nữa.
Bài viết này mình sẽ hướng dẫn cách thêm bootstrap vào giao diện cho theme wordpress để theme hiển thị tốt trên mọi thiết bị di động.
Có hai cách nhúng bootstrap cho theme wordpress:
Cách 1: Lấy link bootstrap từ server khác không phải server chứa website wordpress của bạn. Cụ thể sử dụng Bootstrap CDN
Bạn chỉ cần copy đoạn code sau dán vào file html hoặc file nào bạn muốn sd bootstrap như đoạn mã sau:
chú ý: paste vào trong thẻ <head> </head>
HTML:
<!-- 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>

Như đoạn code sau:
HTML:
<!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 Template</title>

<!-- Bootstrap -->
<!-- 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]

  </head>
  <body>
    .......
  </body>
</html>
Cách 2: Các file bootstrap đặt trên server của website wordpress. sau đó viết một hàm kiểm tra xung đột khi đính kèm vào giao diện theo cấu trúc viết hàm của wordpress qui định (lời khuyên nên sử dụng cách này)
Trước tiên hãy download bootstrap tại đây sau đó copy thư mục boostrap vừa tài về vào thư mục theme wordpress mà bạn muốn nhúng.

Sau đó copy hàm bên dưới paste vào file functions.php trong theme:

PHP:
function stheme_add_boostrap() {
    wp_register_style('bootstrap-style', get_template_directory_uri() . '/bootstrap/bootstrap.min.css');
    wp_enqueue_style('bootstrap-style');
   
    wp_register_script('bootstrap', get_template_directory_uri() . '/bootstrap/bootstrap.min.js', array(), false, true);
    wp_enqueue_script('bootstrap');
}
add_action('wp_enqueue_scripts', 'stheme_add_boostrap');
Đoạn code trên mình 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:
<?php wp_register_style( $handle, $src, $deps, $ver, $media ); ?>
Trong đó:
$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:
<?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[/B]. Đâ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.

Như vậy bạn đã có 2 cách để tích hợp bootstrap vào giao diện wordpress. Hy vọng bài viết sẽ giúp bạn thực hiện tốt cho việc xây dựng theme chuyên nghiệp.
 
Last edited:

Bình Luận