Hướng dẫn tạo theme Wordpress với Bootstrap 3

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

wp-content/uploads/2013/12/creating-wordpress-theme-from-static-html-screengrab-300x286.jpg

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

Loạt bài viết về Thiết kế theme wordpress với Bootstrap 3

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

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

<?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
 */
?>

<?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:

/*
Theme Name: Wp Bootstrap
Description: WordPress Bootstrap 3.0.0 Custom Theme
*/

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:

/*
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.
*/

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:

<?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');

<?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:

<?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">

<?php

/**

* Default Header

* @package WordPress

* @subpackage Wp_Bootstrap

* @since Wp Bootstrap 1.0

*/?>

<!DOCTYPE html>

<head>

<?php wp_head(); ?>

</head>

Ở đâ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

<?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>

<?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>

<?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:

// Gets header.php
get_header();
 
// Gets footer.php
get_footer();

// 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().

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

<!--[if lt IE 9]>

<![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:

<h2><a href="<?php echo home_url(); ?>"><?php echo get_bloginfo('title'); ?></a></h2>
<p><?php echo get_bloginfo('description'); ?></p>

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ì.

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' );

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:

<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>

<span class="sr-only">Toggle navigation</span>

</button>

</div>

<?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:

require_once 'inc/nav.php';

1	require_once 'inc/nav.php';

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

<?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);

<?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.

<div class="well well-sm">
  <a href="#top" class="pull-right">Back to top</a>
  Copyright © Creative Web Design <?php echo date('Y'); ?>
</div>

</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

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

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

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

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

Tạo theme đầu tay

index.php

Style.css

Screenshot.png

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

header.php

Footer.php

Liên kết các file

IE8 hỗ trợ HTML5

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

Title and Tagline

Menu

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

Like this:

Có liên quan

Nguyễn Trung Hiếu

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

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

Tạo theme đầu tay

index.php

Style.css

Screenshot.png

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

header.php

Footer.php

Liên kết các file

IE8 hỗ trợ HTML5

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

Title and Tagline

Menu

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

Share this:

Like this:

Có liên quan

Nguyễn Trung Hiếu