Tạo theme Bootstrap P5: Chuyển HTML sang giao diện WordPress 1/2

Ở phần trước các bạn đã hiểu qua về cấu trúc của 1 theme wordpress, tiếp tục serie này mình sẽ hướng dẫn các bạn chuyển HTML đã thiết kế xong sang 1 theme WordPress hoàn chỉnh.

Cài WordPress lên Localhost

Tạo thư mục chứa website (ở đây mình tạo thư mục tên là “bootstrap”) trong thư mục của Localhost, đối với Xampp thì bạn tạo ở “C:\xampp\htdocs” còn với Wamp thì là “C:\wamp\www”.

Tải Source từ trang chủ của WordPress về và giải nén ra sau đó copy toàn bộ các file có trong thư mục “wordpress” vừa giải nén ra vào trong thư mục “bootstrap” trên localhost.

Sau đó mở phần mềm Xamp lên và start 2 chức năng là Apache và MySQL lên tiếp đến các bạn tiến hành cài đặt như hướng dẫn ở đây http://xuanthuc.com/wordpress-can-ban-1-cai-dat-wordpress-len-localhost-va-hosting.html

Chuẩn bị

Bước 1: Tạo thư mục chứa giao diện trên website WordPress với đường dẫn sau “C:\xampp\htdocs\bootstrap\wp-content\themes\bootstrap_theme” trong đó bootstrap_theme là thư mục bạn vừa tạo.

Bước 2: Copy các thư mục “css”, “fonts”, “images” và “js” từ thư mục bootstrap mình đã làm ở các phần trước vào thư mục “bootstrap_theme” vừa mới tạo trong localhost.

Bước 3: Thêm thư mục “bootstrap_theme” vào phần mềm Sublime Text 2 để tiến hành tạo file và chỉnh sửa.

them thu muc vao sublime text

Vào Sublime Text chọn menu Project sau đó chọn tiếp Add Folder To Project

Bước 4: Tạo các file như sau trong thư mục “bootstrap_theme”:

  • 404.php
  • functions.php
  • header.php
  • index.php
  • footer.php
  • archive.php
  • single.php
  • page.php
  • sidebar.php

Bước 5: Copy các 2 file style.less và style.css từ thư mục “bootstrap” sang “bootstrap_theme”.

thu muc theme wordpressViết code cho Functions.php

File functions.php là file chức năng, trong theme này của mình cần tạo 2 phần như sau: “Menu”, “Sidebar” và code của file functions.php như sau:

<?php
  register_nav_menu ( 'header-menu', __('Header Menu', 'bootstrap_theme') );
  add_theme_support('post-thumbnails');
  add_image_size('featured-thumb', 250, 250, true);
  // Tạo sidebar
  if ( function_exists('register_sidebar') ) {
      register_sidebar(array(
          'name' => 'Right Sidebar',
          'id' => 'right-sidebar',
          'before_widget' => '<div id="%1$s" class="sidebar-item">',
          'after_widget' => '</div>',
          'before_title' => '<h4 class="widget-title">',
          'after_title' => '</h4>'
      ));
  }

  add_filter('widget_text', 'do_shortcode');
?>

Giải thích: Mình sẽ giải thích lần lượt các hàm trong functions.php để các bạn hình dung:

  1. register_nav_menu ( ‘header-menu’, __(‘Header Menu’, ‘bootstrap_theme’) ); Dòng thứ 2 là hàm tạo vị trí Menu cho trang web, phần này sẽ được xuất hiện trong phần quản lý Menu tại “Theme locations”.
  2. add_theme_support(‘post-thumbnails’); là hàm khai báo cho theme hỗ trợ Featured Image cho bài post và page, đối với các phiên bản WordPress mới thì đã được hỗ trợ sẳn nên không cần khai báo cũng được.
  3. add_image_size(‘featured-thumb’, 250, 250, true); là hàm khai báo kích thước tùy chỉnh của size ảnh khi up lên website, ví dụ trường hợp này thì khi bạn up 1 tấm hình lên website của bạn và hình ảnh ấy sẽ được WordPress tạo ra thêm 1 ảnh với kích thước 250×250, điều này sẽ giúp bạn tạo ra kích thước tùy chọn cho từng giao diện website khác nhau. Ở giao diện này mình không cần phải tạo thêm kích thước nào vì hình ảnh thumbnail mặc định WordPress tạo ra với kích thước 150×150 cũng đủ xài rồi.
  4. Tiếp đến là hàm tạo Sidebar với các thông số như sau:
    1. ‘name’ là tên của Sidebar.
    2. ‘id’ là biến duy nhất của sidebar, khi nào sử dụng ta sẽ gọi thông qua biến này.
    3. ‘before_widget’ dùng để chứa thẻ mở cho từng widget mình theme vào.
    4. ‘after_widget’ là thẻ đóng cho từng widget.
    5. ‘before_title’ dùng để chứa thẻ mở cho tiêu đề của widget thêm vào.
    6. ‘after_title’ là thẻ đóng cho từng tiêu đề widget.
  5. add_filter(‘widget_text’, ‘do_shortcode’); là hàm cho phép theme shortcode vào nội dung của widget.

Viết code cho file index.php

Lưu ý: Vào admin Active giao diện mình đang thiết kế và làm theo các bước sau đây.

Bước 1: Copy toàn bộ code trong file index.html ở thư mục “bootstrap” mình đã tạo ở các bài trước vào file index.php trong theme mới tạo.

Bước 2: Thay thẻ <title> lại thành <title><?php wp_title(); ?></title> để khi ta cài plugin SEO thì sẽ tự động lấy tiêu đề tùy chỉnh trong admin ra cho trang chủ, bài viết cũng như chuyên mục, …

Bước 3:  Thêm <?php bloginfo(‘template_directory’ ); ?>/ vào trước mỗi đường dẫn đến file hoặc hình ảnh trong file index.php như ví dụ dưới đây:

<link href="<?php bloginfo('template_directory' ); ?>/css/bootstrap.min.css" rel="stylesheet">

Bước 4: Vào admin và tạo menu theo hướng dẫn tại đây và chọn Theme locations là “Header Menu” vừa config trong functions.php xong.

Bước 5: Chỉnh sửa div “header-menu” lại như sau:

<div class="header-menu">
  <!-- Menu do Bootstrap cung cấp có hỗ trợ menu trên di động -->
  <nav class="navbar navbar-default">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="<?php bloginfo('url' ); ?>">Trang chủ</a>
    </div>

    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <?php    /**
        * Displays a navigation menu
        * @param array $args Arguments
        */
        $args = array(
          'theme_location' => 'header-menu',
          'container' => false,
          'menu_class' => 'nav navbar-nav'
        );
      
        wp_nav_menu( $args ); ?>
    </div>
  </nav>
  <!-- End Menu Bootstrap -->
</div>

Giải thích:

  1. <?php bloginfo(‘url’ ); ?> là hàm để lấy đường dẫn trang của trang web.
  2. ‘theme_location’ để khai báo vị trí menu ở đây là ‘header-menu’ mình đã tạo trước đó.
  3. ‘container’ là biến để khai báo thẻ chứa menu ở đây để false nghĩa là ko cần thẻ chứa nào.
  4. ‘menu_class’ đây là nội dung class của <ul>, ở đây bootstrap quy định các class này “nav navbar-nav”.

Bước 6: Đăng bài viết demo cho website các bạn có thể dùng plugin Duplicate Post để clone bài viết hàng loạt ra. Xem hướng dẫn cài Plugin mình đã đăng trên blog.

clone bai post trong wordpress

Bước 7: Tạo Loop (vòng lặp) cho các box chuyên mục ngoài trang chủ để show các bài viết trong 1 chuyên mục nào đó ra.

Chỉnh div “box-index” của chuyên mục “Thiết kế web” như sau:

<div class="box-index">
  <h2>Thiết kế web</h2>
  <div class="row">
    <?php $tkweb = new WP_Query('posts_per_page=8&cat=1');
    if($tkweb->have_posts()): while($tkweb->have_posts()): $tkweb->the_post(); ?>
    <div class="item col-md-3 col-sm-3 col-xs-6">
      <span><a href="<?php the_permalink(); ?>" class="thumbnail"><?php the_post_thumbnail('thumbnail' ); ?></a></span>
      <h3><a href="<?php the_permalink(); ?>"><?php the_title( ); ?></a></h3>
    </div>
    <?php endwhile; endif; ?>
  </div>
</div>

Giải thích:

  1. $tkweb biến con trỏ này dùng để chứa nội dung mình thiết lập trong phần WP_Query.
  2. posts_per_page=8 là thiết lập số lượng bài post được hiển thị.
  3. cat=1 là thiết lập chuyên mục nào sẽ được lấy, các bạn có thể lấy ID của category bằng cách vào quản lý chuyên mục trong admin và rê chuột vào từng category sẽ thấy ID trong thanh trạng thái bên dưới của trình duyệt.
  4. $tkweb->have_posts() là hàm kiểm tra có bài post nào trong biến hay không.
  5. the_permalink(); là hàm dùng để hiển thị url của bài viết.
  6. the_post_thumbnail(‘thumbnail’ ); là hàm dùng để hiển thị Featured Image với kích thước 150×150 bởi tham số truyền vào ở đây là ‘thumbnail’, ngoài ra còn có các tham số như medium, large, full và kích thước tùy chỉnh khai báo trong functions.php như mình đã giới thiệu ở trên.

Đối với chuyên mục “Marketing Online” hay bất kỳ chuyên mục nào khác ta cũng làm tương tự chỉ việc thay tiêu đề trong thẻ <h2> và ID của Category là xong.

Bước 8: Chỉnh code cho div “sidebar” lại như sau:

<div class="sidebar col-md-3 col-sm-3 col-xs-12">
  <div class="sidebar-item">
    <?php
    if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('right-sidebar') ) :
    endif; ?>
  </div><!-- end .sidebar-item -->
</div>

Sau đó vào admin thêm widget vào như hình bên dưới.

Vào admin -> Appearance -> Widgets

Vào admin -> Appearance -> Widgets

Bước 9: Thêm đoạn code sau vào trước thẻ </head>

<?php wp_head(); ?>

Giải thích: Hiểu đơn giản thì hàm này giống như dùng để chiếm 1 vị trí để WordPress thêm các thẻ mặc định cũng như thẻ từ các plugin bạn đã cài vào trước thẻ </head>

Bước 10: Thêm đoạn code sau vào trước thẻ </body>

<?php wp_footer(); ?>

Giải thích: Tương tự như bước 9.

Khi làm xong bước 9 và 10 các bạn sẽ thấy lúc xem trang web sẽ xuất hiện thêm thanh Dashboard bên trên trang web giúp ta tiện dụng hơn trong việc chỉnh sửa.

Bước 11: Cài đặt tìm kiếm cho trang web theo hướng dẫn sau đây http://xuanthuc.com/huong-dan-tich-hop-tim-kiem-google-vao-trang-web-wordpress.html

Code của toàn bộ file index.php:

<!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">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title><?php wp_title(); ?></title>

    <!-- Bootstrap -->
    <link href="<?php bloginfo('template_directory' ); ?>/css/bootstrap.min.css" rel="stylesheet">
    <link href="<?php bloginfo('template_directory' ); ?>/style.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--&#91;if lt IE 9&#93;>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <!&#91;endif&#93;-->
    <?php wp_head(); ?>
  </head>
  <body>
    <header>
      <div class="container">
        <div class="row">
          <div class="logo col-md-6 col-sm-6 col-xs-12"><h1><a href="<?php bloginfo('url' ); ?>">Xuân Thức Theme</a></h1></div>
          <div class="search col-md-6 col-sm-6 col-xs-12 text-right">
            <form method="get" action="#">
              <input type="text" placeholder="Nhập từ khóa tìm kiếm" id="q" name="q" value="">
              <input type="submit" value="Tìm Kiếm">
            </form>
          </div>
          <div class="clearfix"></div>
        </div>
        <div class="header-menu">
          <!-- Menu do Bootstrap cung cấp có hỗ trợ menu trên di động -->
          <nav class="navbar navbar-default">
            <div class="navbar-header">
              <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
              <a class="navbar-brand" href="<?php bloginfo('url' ); ?>">Trang chủ</a>
            </div>

            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
              <?php    /**
                * Displays a navigation menu
                * @param array $args Arguments
                */
                $args = array(
                  'theme_location' => 'header-menu',
                  'menu' => '',
                  'container' => false,
                  'menu_class' => 'nav navbar-nav'
                );
              
                wp_nav_menu( $args ); ?>
            </div>
          </nav>
          <!-- End Menu Bootstrap -->
        </div>
      </div>
    </header>

    <div id="wrapper">
      <div class="container">
        <div class="row">
          <div class="content col-md-9 col-sm-9 col-xs-12">
            <div class="slider"><img src="<?php bloginfo('template_directory' ); ?>/images/slider.jpg"></div>
            <div class="box-index">
              <h2>Thiết kế web</h2>
              <div class="row">
                <?php $tkweb = new WP_Query('posts_per_page=8&cat=1');
                if($tkweb->have_posts()): while($tkweb->have_posts()): $tkweb->the_post(); ?>
                <div class="item col-md-3 col-sm-3 col-xs-6">
                  <span><a href="<?php the_permalink(); ?>" class="thumbnail"><?php the_post_thumbnail('thumbnail' ); ?></a></span>
                  <h3><a href="<?php the_permalink(); ?>"><?php the_title( ); ?></a></h3>
                </div>
                <?php endwhile; endif; ?>
              </div>
            </div>
            <div class="box-index">
              <h2>Marketing Online</h2>
              <div class="row">
                <?php $tkweb = new WP_Query('posts_per_page=8&cat=2');
                if($tkweb->have_posts()): while($tkweb->have_posts()): $tkweb->the_post(); ?>
                <div class="item col-md-3 col-sm-3 col-xs-6">
                  <span><a href="<?php the_permalink(); ?>" class="thumbnail"><?php the_post_thumbnail('thumbnail' ); ?></a></span>
                  <h3><a href="<?php the_permalink(); ?>"><?php the_title( ); ?></a></h3>
                </div>
                <?php endwhile; endif; ?>
              </div>
            </div>
          </div>
          <div class="sidebar col-md-3 col-sm-3 col-xs-12">
            <div class="sidebar-item">
              <?php
              if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('right-sidebar') ) :
              endif; ?>
            </div><!-- end .sidebar-item -->
          </div>
        </div>
      </div>
    </div>

    <footer>
      <div class="container">
        <div class="footer-info text-center">
          XuanThuc Blog Copyright© 2013 - Chuyên trang chia sẻ kiến thức về Thiết Kế Web và Lập Trình Ứng Dụng<br>
          (Nếu copy bất kỳ bài viết nào trên XuanThuc Blog vui lòng để lại nguồn để tôn trọng tác giả)
        </div>
      </div>
    </footer>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="<?php bloginfo('template_directory' ); ?>/js/bootstrap.min.js"></script>
    <?php wp_footer(); ?>
  </body>
</html>

Do bài viết dài quá nên mình sẽ viết các phần còn lại ở phần sau các bạn theo dõi nha.

Bài Viết Cùng Series:

GỬI BÌNH LUẬN