
Hướng dẫn cách tạo Theme WordPress Bootstrap?
1. Theme WordPress Bootstrap là gì?
Theme WordPress Bootstrap là một mẫu giao diện được xây dựng dựa trên nền tảng Bootstrap, một framework CSS phổ biến. Những theme này kết hợp sức mạnh của WordPress, hệ quản trị nội dung mạnh mẽ, với khả năng thiết kế đáp ứng (responsive design) và các thành phần giao diện đẹp mắt từ Bootstrap.
Các đặc điểm nổi bật của Theme WordPress Bootstrap:
- Thiết kế đáp ứng: Các theme này tự động điều chỉnh kích thước và bố cục để phù hợp với nhiều loại thiết bị khác nhau, từ máy tính để bàn đến điện thoại di động.
- Tùy biến dễ dàng: Nhờ vào các thành phần và mẫu có sẵn trong Bootstrap, người dùng có thể tùy chỉnh giao diện một cách nhanh chóng mà không cần nhiều kiến thức về lập trình.
- Hiệu suất tốt: Bootstrap giúp tối ưu hóa mã nguồn, dẫn đến tốc độ tải trang nhanh hơn.
- Hỗ trợ đa dạng: Các theme này thường tương thích với nhiều plugin và công cụ phổ biến trong WordPress, giúp mở rộng chức năng của trang web.
- Tài liệu phong phú: Bootstrap có cộng đồng lớn và tài liệu hướng dẫn chi tiết, giúp người dùng dễ dàng tìm kiếm thông tin và hỗ trợ khi cần thiết.
2. Cách tạo Theme WordPress Bootstrap?
Bước 1: Giải nén Bootstrap
Đầu tiên Hãy chọn một Hosting đáng tin cậy và cài đặt WordPress trên tên miền của bạn.
Tiếp theo chúng ta tải xuống và giải nén Bootstrap.
Khi hoàn tất, hãy kết nối bằng ứng dụng FTP như FileZilla.
Điều hướng đến wp-content > chủ đề .
Tạo một thư mục mới trong thư mục Themes và đặt tên là BootSTheme . Tải nội dung của Bootstrap đã giải nén vào thư mục này.
Hầu như mọi cài đặt WordPress đều chứa các tệp sau:
- footer.php
- header.php
- index.php
- style.css
Bây giờ, tạo bốn tệp trống có tên như trên trong thư mục BootSTheme.
Bước 2: Cấu hình Bootstrap
Trong thư mục BootSTheme, mở style.css và dán đoạn mã sau.
/* Theme Name: MyTheme Theme URI: https://freehosting.vn/ Description: Mytheme Built on bootstrap Version:1.1 Author: Ahsan Parwez Author URI: https://freehosting.vn/ */
Về cơ bản, đây là những bình luận cung cấp mô tả và thông tin chi tiết về chủ đề.
Bước 3: Sao chép mã
Đối với hướng dẫn này, chúng ta sẽ không sử dụng tất cả các tệp CSS và JS được cung cấp trong gói Bootstrap. Để bắt đầu quá trình phát triển, hãy sao chép mã trong tệp bootstrap.min.css và dán vào tệp style.css . Tại thời điểm này, tệp style.css sẽ trông như thế này.
Bước 4: Thiết lập mẫu HTML
WordPress có các hàm tích hợp get_header() và get_footer() theo mặc định sẽ gọi các tệp header.php và footer.php tương ứng.
Bắt đầu bằng cách cắt mã HTML từ đầu đến div container đầu tiên và dán vào tệp header.php . Tệp sẽ trông như thế này:
Tệp footer.php sẽ chứa phần còn lại của mã:Tệp footer.php sẽ chứa phần còn lại của mã:
Tại thời điểm này, nếu bạn tải lên chủ đề Bootstrap WordPress và kích hoạt nó, bạn sẽ không thấy gì cả vì file index.php không chứa bất cứ thứ gì. Để tải header và footer, tôi sẽ sử dụng hàm tích hợp của WordPress để gọi các phần tử này. Để thực hiện, hãy dán đoạn mã sau vào index.php :
<?php get_header ( ) ; ?>
<?php get_footer ( ) ; ?>
Bây giờ các phần tử đầu trang và chân trang sẽ được tải trên trang web của chúng ta, nhưng chúng ta sẽ có được một trang cơ bản không có bất kỳ kiểu dáng nào.
Bước 5: Thiết lập Header và Footer
Trong tệp header.php , tôi sẽ nhập bảng định kiểu Bootstrap bằng cách sử dụng hàm echo get_stylesheet_uri() của WordPress. Sau đó, tôi sẽ nhập style.css vào trang web và bây giờ bạn sẽ thấy thanh menu trên cùng.
Bạn cũng có thể thêm style.css bằng cách thêm đoạn mã sau vào đầu tệp header.php.
<link rel= “stylesheet” type= “text/css” href= “<?php echo get_stylesheet_directory_uri(). ‘/style.css’ ?>” >
Các tính năng JavaScript trên trang của chúng ta vẫn sẽ không hoạt động và chúng ta sẽ không thấy bất kỳ menu thả xuống nào. Để bật tính năng này, chúng ta sẽ nhập các tệp js của mình bằng cách nhập trực tiếp tệp theo URL trong footer.php . Dán mã sau trước thẻ đóng body.
<script src= “../wp-content/themes/MyBSTheme/js/bootstrap.min.js” ></script>
WordPress được biết đến với khả năng tùy chỉnh và Plugin của nó. Để cho WordPress biết nơi đặt các móc plugin, chúng ta sẽ dán <?php wp_head(); ?> và <?php wp_footer(); ?> vào các file header.php và footer.php . Ngoài ra, để đặt tiêu đề động của trang web, chúng ta sẽ sử dụng hàm wp_title(); trong tệp header.php giữa các thẻ <title> .
<title><?php wp_title(‘ | ‘,true,‘right’); ></title>
Bước 6: Hiển thị các bài viết nổi bật:
Viết đoạn mã sau vào index.php của bạn:
<?php
query_posts(‘posts_per_page=1’)
while(have_posts()) : the_post(); ?>
<div>
<h2><a href=“<?php the_permalink(); ?>”><?php the_title(); ?></a></h2>
<p><?php the_excerpt(); ?></p>
</div>
<?php endwhile; wp_reset_query(); ?>
Lớp jumbotron được định nghĩa trong file bootstrap.min.css . Tôi sẽ sử dụng nó để định dạng các bài đăng nổi bật bằng cách sử dụng thẻ <h2> và hàm the_permalink() ;. liên kết được tạo trên tiêu đề bài đăng và hàm the_permalink(); liên kết đến URL của toàn bộ bài đăng. Để hiển thị một đoạn trích của bài đăng, tôi đã sử dụng một hàm WordPress tích hợp khác, the_excerpt();.
Bước 7: Liệt kê các danh mục của bạn Bây giờ tôi sẽ liệt kê các danh mục ở bên trái trang chủ. Tôi sẽ tạo một số phiên bản của div được tạo kiểu bằng các lớp Bootstrap và hàm WordPress wp_list_categories(); . Dán đoạn mã sau vào index.php:
<div class= “bảng điều khiển panel-default panel-body” >
<div>
<div>
<ul>
<?php wp_list_categories ( ‘orderby=tên&title_li=’ ) ; ?>
</ul>
</div>
</div>
</div>
Bước 8: Hiển thị các bài đăng và tác giả mới nhất
Cuối cùng, chúng ta sẽ hiển thị các bài đăng blog mới nhất trên trang chủ. Chúng ta sẽ bắt đầu một thẻ div khác và bên dưới div này , chúng ta sẽ sử dụng kỹ thuật vòng lặp while tương tự như chúng ta đã sử dụng trong bài đăng nổi bật, nhưng chúng ta sẽ không giới hạn nó bằng query_posts() ;.
<div> <?php while(have_posts()) : the_post(); ?> <h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3> <p><?php the_excerpt(); ?></p> <p> posted by <?php the_author(); ?> <?php endwhile; wp_reset_query(); ?> </div>
WordPress sử dụng hàm the_author() ; và lấy tên người dùng của tác giả bài đăng. Chúng ta có thể sử dụng hàm này để hiển thị động tên tác giả với mọi bài đăng.
Bước 9: Thêm Bootstrap bằng cách sử dụng CDN
– Thêm Bootstrap bằng cách sử dụng CDN:
<!– Latest compiled and minified CSS –>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"> <!-- Latest compiled and minified JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
Thêm Bootstrap vào bên trong functions.php:
Các bạn thêm đoạn mã sau vào tệp functions.php của bạn..\
function reg_scripts() { wp_enqueue_style( 'bootstrapstyle', get_template_directory_uri() . '/css/bootstrap.min.css' ); wp_enqueue_style( 'bootstrapthemestyle', get_template_directory_uri() . '/css/bootstrap-theme.min.css' ); wp_enqueue_script( 'bootstrap-script', get_template_directory_uri() . '/js/bootstrap.min.js', array(), true ); } add_action('wp_enqueue_scripts', 'reg_scripts');
Bạn cũng có thể bỏ qua phần tải lên và trực tiếp đưa CDN bootstrap vào hàng đợi như sau.
function my_scripts_enqueue() { wp_register_script( 'bootstrap-js', '://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js', array('jquery'), NULL, true ); wp_register_style( 'bootstrap-css', '://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css', false, NULL, 'all' ); wp_enqueue_script( 'bootstrap-js' ); wp_enqueue_style( 'bootstrap-css' ); } add_action( 'wp_enqueue_scripts', 'my_scripts_enqueue' );
Sau đó các bạn lưu lại là xong.
3. Cuối cùng:
Trên đây là bài viết của mình về: Hướng dẫn cách tạo Theme WordPress Bootstrap? – chúc các bạn thành công.