- Hướng dẫn thiết kế theme wordpress – Khởi động
- Hướng dẫn thiết kế theme wordpress – Upload code lên host
- Hướng dẫn thiết kế theme wordpress – Hiển thị bài viết
- Hướng dẫn thiết kế theme wordpress – File Footer
- Hướng dẫn thiết kế theme wordpress – Page Template
- Hướng dẫn thiết kế theme wordpress – Archive Template
- Hướng dẫn tạo theme WordPress với Bootstrap 3 – Header và Footer
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 và 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.php và style.css lần lượt có nội dung bên dưới đây:
index.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<?php /** * The main template file. * * This is the most generic template file in a WordPress theme and one of the * two required files for a theme (the other being style.css). * It is used to display a page when nothing more specific matches a query. * For example, it puts together the home page when no home.php file exists. * * Learn more: http://codex.wordpress.org/Template_Hierarchy * * @package WordPress * @subpackage Wp_Bootstrap * @since Wp Bootstrap 1.0 */ ?> |
Style.css
Trong file style.css bạn phải bắt buộc có 2 dòng comment sau:
|
1 2 3 4 |
/* Theme Name: Wp Bootstrap Description: WordPress Bootstrap 3.0.0 Custom Theme */ |
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
/* Theme Name: Wp Bootstrap Description: WordPress Bootstrap 3.0.0 Custom Theme Theme URI: http://www.creativewebdesign.ro/ Author: Gabriel Vasile Author URI: http://www.creativewebdesign.ro/ Version: 1.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Tags: bootstrap Text Domain: wpbootstrap This theme, like WordPress, is licensed under the GPL. Use it to make something cool, have fun, and share what you've learned with others. */ |
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.
Đồ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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<?php /** * Enqueues scripts and styles for front end. * * @since Wp Bootstrap 1.0 * * @return void */ function cwd_wp_bootstrap_scripts_styles() { // Loads Bootstrap minified JavaScript file. wp_enqueue_script('bootstrapjs', '//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js', array('jquery'),'3.0.0', true ); // Loads Bootstrap minified CSS file. wp_enqueue_style('bootstrapwp', '//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css', false ,'3.0.0'); // Loads our main stylesheet. wp_enqueue_style('style', get_stylesheet_directory_uri() . '/style.css', array('bootstrapwp') ,'1.0'); } add_action('wp_enqueue_scripts', 'cwd_wp_bootstrap_scripts_styles'); |
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<?php /** * Default Header * * @package WordPress * @subpackage Wp_Bootstrap * @since Wp Bootstrap 1.0 * */?> <!DOCTYPE html> <html <?php language_attributes(); ?>> <head> <meta charset="<?php bloginfo( 'charset' ); ?>"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title><?php wp_title( '|', true, 'right' ); bloginfo('name'); ?></title> <link rel="profile" href="http://gmpg.org/xfn/11"> <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>"> <link rel="shortcut icon" href="<?php echo get_stylesheet_directory_uri(); ?>/favicon.ico" /> <?php wp_head(); ?> </head> <body <?php body_class(); ?>> <div class="container"> |
Ở đâ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.
File footer.php của bạn sẽ chỉ đơn giản hơn nhiều
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<?php /** * Default Footer * * @package WordPress * @subpackage Wp_Bootstrap * @since Wp Bootstrap 1.0 * */ // Gets all the scripts included by wordpress, wordpress plugins or functions.php // using wp_enqueue_script if it has $in_footer set to true ?> </div> <!-- // .container --> <?php wp_footer(); ?> </body> </html> |
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:
|
1 2 3 4 5 |
// Gets header.php get_header(); // Gets footer.php get_footer(); |
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().
|
1 2 3 4 5 |
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries --> <!--[if lt IE 9]> <script src="<?php echo get_template_directory_uri(); ?>/js/html5shiv.js"></script> <script src="<?php echo get_template_directory_uri(); ?>/js/respond.min.js"></script> <![endif]--> |
Trong đó 2 file là html5shiv.js và respond.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:
|
1 2 |
<h2><a href="<?php echo home_url(); ?>"><?php echo get_bloginfo('title'); ?></a></h2> <p><?php echo get_bloginfo('description'); ?></p> |
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 ý.
|
1 2 3 4 5 6 7 8 9 |
if ( ! function_exists( 'cwd_wp_bootstrapwp_theme_setup' ) ): function cwd_wp_bootstrapwp_theme_setup() { // Adds the main menu register_nav_menus( array( 'main-menu' => __( 'Main Menu', 'cwd_wp_bootstrapwp' ), ) ); } endif; add_action( 'after_setup_theme', 'cwd_wp_bootstrapwp_theme_setup' ); |
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<nav class="navbar navbar-default" role="navigation"> <!-- Mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <!-- Collect the nav links for toggling --> <?php // Loading WordPress Custom Menu wp_nav_menu( array( 'container_class' => 'collapse navbar-collapse navbar-ex1-collapse', 'menu_class' => 'nav navbar-nav', 'menu_id' => 'main-menu', //'walker' => new Cwd_wp_bootstrapwp_Walker_Nav_Menu() ) ); ?> </nav> |
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:
|
1 |
require_once 'inc/nav.php'; |
Nội dung file nav.php như sau:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 |
<?php /** * class Cwd_wp_bootstrapwp_Walker_Nav_Menu() * * Extending Walker_Nav_Menu Class * * @author Gabriel Vasile **/ class Cwd_wp_bootstrapwp_Walker_Nav_Menu extends Walker_Nav_Menu { function display_element ($element, &$children_elements, $max_depth, $depth = 0, $args, &$output) { // check, whether there are children for the given ID and append it to the element with a (new) ID $element->hasChildren = isset($children_elements[$element->ID]) && !empty($children_elements[$element->ID]); return parent::display_element($element, $children_elements, $max_depth, $depth, $args, $output); } // CHANGE .sub-menu INTO .dropdown-menu function start_lvl(&$output, $depth) { $indent = str_repeat("\t", $depth); $output .= "\n$indent<ul class=\"dropdown-menu\">\n"; } function start_el(&$output, $item, $depth = 0, $args = array(), $id = 0) { $item_html = ''; parent::start_el($item_html, $item, $depth, $args); if (($item->hasChildren) && ($depth === 0)) { $item_html = str_replace('<a', '<a class="dropdown-toggle" data-toggle="dropdown" data-target="#"', $item_html); $item_html = str_replace('</a>', ' <b class="caret"></b></a>', $item_html); } $output .= $item_html; } } function cwd_wp_bootstrapwp_nav_menu_css_class($classes, $item) { // CHANGE .current-menu-item .current-menu-parent .current-menu-ancestor INTO .active $classes = preg_replace('/(current(-menu-|[-_]page[-_])(item|parent|ancestor))/', 'active', $classes); // Add the .dropdown class to the list items that have children if ($item->hasChildren) { $classes[] = 'dropdown'; } return $classes; } add_filter('nav_menu_css_class', 'cwd_wp_bootstrapwp_nav_menu_css_class', 10, 2); |
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.
|
1 2 3 4 |
<div class="well well-sm"> <a href="#top" class="pull-right">Back to top</a> Copyright © Creative Web Design <?php echo date('Y'); ?> </div> |
Vậy là chúng ta đã hoàn tất bài học rồi đó
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
Bài viết được dịch từ blog creativewebdesign.ro
