Share Code Web - Chia sẻ niềm đam mê bất tận > Lập trình > Web Design > Wordpress Tips > Hướng dẫn tạo theme WordPress với Bootstrap 3 – Header và Footer
Hướng dẫn tạo theme WordPress với Bootstrap 3 – Header và Footer
Nguyễn Trung Hiếu
Share Code Web Company 2013

Hướng dẫn tạo theme WordPress với Bootstrap 3 – Header và Footer

This entry is part 7 of 7 in the series Wordpress for Beginner

Twitter Bootstrap là một bộ CSS Framework rất mạnh trong việc thiết kế website, và được sử dụng rất phổ biến để tiết kiệm thời gian thiết kế. Bài viết này sẽ hướng dẫn bạn thiết kế một theme wordpress với Bootstrap 3.

Chúng ta sẽ học được gì sau bài này?

  • Tạo một theme đơn giản dành cho wordpress
  • Hợp nhất Bootstrap 3 với theme của wordpress
  • Cấu hình tùy chỉnh theme wordpress với các thành phần khác nhau của Bootstrap

Nguyên liệu cần thiết cho bài học gồm những gì?

Để hoàn thành bài học, các bạn cần có những “nguyên liệu” sau:

  • Bộ cài WordPress
  • Quyền truy cập vào thư mục Themes trên bộ source
  • Bộ gõ text editor để có thể code thuận tiện nhất

Tạo theme đầu tay

Với một theme wordpress, tất cả việc chúng ta cần để theme đó hoạt động thì chỉ cần 2 file là index.php style.css.
Trong thư mục /wp-content/themes/ bạn tạo một folder có tên gọi wpbootstrap. Bạn cũng có thể đổi thành các tên khác mà bạn muốn. Trong folder đó, bạn tạo 2 file có tên là index.phpstyle.css lần lượt có nội dung bên dưới đây:

index.php

Style.css

Trong file style.css bạn phải bắt buộc có 2 dòng comment sau:

Ngoài ra, để thể hiện tính bản quyền của bạn đối với theme này, bạn cũng có thể thêm bớt một số nội dung sau:

Screenshot.png

Mục đích của file screenshot.png nhằm để hiện thị một cách tổng quan nhất theme của bạn như thế nào trước khi cài đặt thành công trong khu vực quản trị của wordpress. Do đó, sau khi cắt HTML xong, bạn có thể chụp lại một bản design và lưu lại với tên screenshot.png. Đặt cùng thư mục với 2 file bên trên là được.

Sau khi hoàn thành 3 bước trên, bạn vô admin -> Appeararance -> Themes. Bạn sẽ thấy themes của bạn xuất hiện. Lúc đó chỉ việc active nó lên là đã hoàn thành cơ bản rồi.
how to create theme wordpress with bootstrap 3

Đồng bộ hóa với Bootstrap 3

Để đồng bộ hóa, trước tiên bạn cần tạo một file có tên function.php, sau đó sử dụng hàm wp_enqueue_script() để thêm javascript hoặc css với hàm wp_enqueue_style() vào WordPress. Hai hàm này, bạn có thể tìm hiểu trên codex.wordpress.org nhé.

Chúng ta có thể sử dụng Bootstrap’s CDN để lấy file hoặc bạn cũng có thể download về, và upload lên thư mục themes của bạn. Khi đó file function.php của bạn ban đầu sẽ có những nội dung như thế này:

header.php

Các bạn tiếp tục tạo một file có tên là header.php cùng thư mục với index.php có nội dung như sau:

Ở đây, chúng ta sử dụng hàm wp_head() để lấy lại các javascript cũng như css của các plugin khác, cũng như của wordpress mà sau này chúng ta sẽ cài đặt vào theme này. Hàm body_class() sẽ lấy ra class của body nếu như có sự thay đổi về cách đặt class này.

Footer.php

File footer.php của bạn sẽ chỉ đơn giản hơn nhiều

Hàm wp_footer() cũng như hàm wp_header() là lấy ra các file css, javascript của các plugin mà các bạn đã cài.

Liên kết các file

Để liên kết các file index.php, header.php, footer.php vào thành một thể thống nhất thì bạn sử dụng 2 hàm sau:

2 hàm này các bạn viết trong file index.php, và trước thẻ đóng ?> là được

IE8 hỗ trợ HTML5

Để cho IE8 hỗ trợ các phần tử của HTML5 thì chúng ta cần phải thêm đoạn mã sau vào trong file header.php sau hàm wp_head().

Trong đó 2 file là html5shiv.jsrespond.min.js các bạn để trong thư mục /wp-content/themes/wpbootstrap/js/. Như vậy là chúng ta đã thực sử dụng Bootstrap 3 với theme wordpress này rồi đó.

Sử dụng các thành phần của Bootstrap 3

Title and Tagline

Để hiển thị tên website cũng như Tagline của website, chúng ta thêm đoạn code sau vào file header.php:

Sau đó, bạn có thể vào admin -> Settings -> General để thêm phần này. Hàm get_bloginfo() sẽ trả về các thông tin trên website của bạn, tùy thuộc vào đối số bạn truyền vào là gì.

Menu

Để tạo navbar cho theme, chúng ta sử dụng đoạn code sau trong file function.php. Sau đó, bạn vào trong admin -> Appearance -> Menus để tạo cho mình một menu tùy ý.

Hàm function_exists() để kiểm tra một function có tồn tại trong theme hay trong bộ core của wordpress hay không. Hàm register_nav_menus() là để đăng ký với wordperss thông tin của menu mà chúng ta sẽ tạo. Khi đó, bạn viết tiếp vào file header.php nội dung sau:

Phần .navbar-header sẽ để hiển thị trên các thiết bị di động. Class .navbar-header là một helper class giúp việc ẩn hiện các thành phần của menus trên thiết bị di động.
Trong đoạn code bên trên, chúng ta có sử dụng một walker, để walker này có thể hoạt động được, thì bạn cần tạo thêm một file nav.php sau đó vào trong file function.php thêm đoạn code sau:

Nội dung file nav.php như sau:

Phần cuối cùng là tạo một thông điệp copyright dưới cùng phần footer nữa.

Vậy là chúng ta đã hoàn tất bài học rồi đó
create theme wordpress with bootstrap 3
Trong bài học tiếp theo, tôi sẽ hướng dẫn các bạn cách tạo slider sử dụng Custom Post Types và Bootstap’s Carousel.
Toàn bộ mã nguồn bài học trên các bạn có thể download file bên dưới nhé.

Gợi ý - Liên hệ thiết kế web

Nếu bạn có nhu cầu thiết kế web, bạn có thể liên hệ ngay với tôi, tôi sẽ giúp bạn thực hiện những điều bạn muốn trong thời gian ngắn nhất, và giá cả rẻ nhất

Click ngay!!



Bài viết được dịch từ blog creativewebdesign.ro

Series Navigation<< Hướng dẫn thiết kế theme wordpress – Archive Template

Related Posts

Tác giả: Nguyễn Trung Hiếu

Một blogger ... cùi bắp! Đơn giản: tôi muốn ghi lại những gì xảy ra xung quanh, cả công việc lẫn cuộc sống và chia sẻ với các bạn đọc. Nếu bạn cảm thấy bài viết có nhiều điểm không chính xác, hãy comment và chia sẻ để tôi còn được học hỏi từ những góp ý của bạn. Email: hieunt.dcn@gmail.com

Leave a comment

Bạn phải Đăng nhập để tham gia bình luận.

https://sharecodeweb.net/?s={search_term_string}

Blog Stats

  • 4.004 hits
%d bloggers like this: