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

Chào các bạn, ở phần 5 mình đã hướng dẫn các bạn viết xong phần index.php hôm nay mình sẽ hướng dẫn những phần còn lại để hoàn tất 1 giao diện wordpress hoàn chỉnh.

Viết code cho file header.php

Giờ chúng ta tách phần header từ file index.php ra một file riêng là header.php để dùng lại cho những giao diện trang con sau này.

Bước 1: Cắt nội dung sau từ file index.php ra bỏ vào file header.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="#">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>

Bước 2: Theme hàm sau vào chổ bị cắt của file index.php:

<?php get_header( ); ?>

Phương cách trên chúng ta làm cũng tương tự như việc include 1 file vào 1 file khác nhưng đây là WordPress nên đã được hỗ trợ một số phần như get_header, get_sidebar, get_footer vì vậy ta chỉ cần dùng những hàm tương tự vậy là được.

Viết code cho file footer.php

Tương tự như header.php ta cũng cắt nội dung của phần footer ra khỏi file index.php và bỏ vào file footer.php để sử dụng lại cho các giao diện trang con sau này.

Bước 1: Cắt nội dung sau từ file index.php ra bỏ vào file footer.php:

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

Bước 2: Theme hàm sau vào chổ bị cắt của file index.php:

<?php get_footer( ); ?>

Viết code cho file sidebar.php

Tương tự như footer.php ta cũng cắt nội dung của phần sidebar ra khỏi file index.php và bỏ vào file sidebar.php để sử dụng lại cho các giao diện trang con sau này.

Bước 1: Cắt nội dung sau từ file index.php ra bỏ vào file sidebar.php:

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

Bước 2: Theme hàm sau vào chổ bị cắt của file index.php:

<?php get_sidebar( ); ?>

Và giờ chúng ta có file index như thế này:

<?php get_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">
            <?php get_sidebar( ); ?>
          </div>
        </div>
      </div>
    </div>
<?php get_footer( ); ?>

giao-dien-website-wordpress-bootstrap

Viết code cho file archive.php

Đến đây thì mọi việc đã trở nên rất đan giản rồi, hầu hết các hàm các bạn đã biết hết rồi giờ chỉ làm theo các bước đơn giản sau để có được tranh chuyên mục cho website.

Bước 1: Copy toàn bộ code trong file archive.html trong thư mục “bootstrap” mình đã code html ở các phần trước bỏ vào file archive.php trong theme wordpress.

Bước 2: Cắt phần header, footer, sidebar và thay vào đó là các hàm get_header, get_footer, get_sidebar như ở trên.

Bước 3: Sửa tiêu đề chuyên mục trong thẻ <h1> lại thay bằng hàm như sau:

<h1 class="archive-title"><?php single_cat_title('', true ); ?></h1>

Bước 4: Viết Loop cho phần hiển thị danh sách bài viết, tương tự như bạn làm ở trang chủ nhưng lần này mình không dùng biến $tkweb như trước nữa mà chỉ cần tạo vòng lặp đơn giản như bên dưới vì chúng ta không cần thiết lập chuyên mục nào được hiển thị hay số lượng post trên 1 trang vì phần này được cấu hình trong admin như hình bên dưới.

thiet lap so luong post tren trang

Bước 5: Viết code hiển thị phân trang cho bài viết bằng cách thêm đoạn code sau vào ngay dưới code loop (Để phân trang có tác dụng ta cần phải cài Plugin WP-Pagenavi):

<div class="text-center">
              <?php wp_pagenavi(); ?>
            </div>

Lưu ý: Vì chúng ta sử dụng Bootstrap nên các bạn có thể tùy chỉnh lại hiển thị cho phân trang đẹp hơn bằng hướng dẫn tại đây http://xuanthuc.com/chinh-sua-phan-trang-kieu-bootstrap-cho-wordpress-bang-wp-pagenavi.html

Code toàn bộ file archive.php như sau:

<?php get_header( ); ?>
<div id="wrapper">
  <div class="container">
    <div class="row">
      <div class="content col-md-9 col-sm-9 col-xs-12">
        <h1 class="archive-title"><?php single_cat_title('', true ); ?></h1>
        <?php if(have_posts()): while(have_posts()): the_post(); ?>
        <div class="item-archive">
          <div class="row">
            <div class="thumb col-md-3 col-sm-4 col-xs-12"><a href="<?php the_permalink(); ?>" class="thumbnail"><?php the_post_thumbnail('thumbnail' ); ?></a></div>
            <div class="detail col-md-9 col-sm-8 col-xs-12">
              <h2><a href="<?php the_permalink(); ?>"><?php the_title( ); ?></a></h2>
              <?php the_excerpt(); ?>
              <p class="text-right"><a href="<?php the_permalink(); ?>" class="readmore">Xem thêm...</a></p>
            </div>
          </div>
        </div><!-- end .item -->
        <?php endwhile; endif; ?>
        <div class="text-center">
              <?php wp_pagenavi(); ?>
            </div>
      </div>
      <div class="sidebar col-md-3 col-sm-3 col-xs-12">
        <?php get_sidebar( ); ?>
      </div>
    </div>
  </div>
</div>
<?php get_footer( ); ?>

Viết code cho file single.php

Bây giờ chúng ta sẽ viết code trong file single.php để làm trang hiển thị bài viết theo các bước như sau:

Bước 1: Copy toàn bộ code trong file single.html trong thư mục “bootstrap” mình đã code html ở các phần trước bỏ vào file single.php trong theme wordpress.

Bước 2: Cắt phần header, footer, sidebar và thay vào đó là các hàm get_header, get_footer, get_sidebar như ở trên.

Bước 3: Sửa tiêu đề bài viết trong thẻ <h1> lại thay bằng hàm như sau:

<h1 class="single-title"><?php the_title( ); ?></h1>

Bước 4: Sửa div “single-content” lại như nội dung bên dưới:

<div class="single-content">
  <?php the_post(); the_content( ); ?>
</div>

Giải thích: the_content(); là hàm để lấy nội dung bài viết.

Bước 5: Div “box-index” làm tương tự như ở phần index.php.

Bước 6: Cài Comment Facebook cho Theme theo hướng dẫn tại đây http://xuanthuc.com/huong-dan-cai-dat-facebook-comment-cho-website.html

Code toàn bộ phần single.php:

<?php get_header( ); ?>
    <div id="wrapper">
      <div class="container">
        <div class="row">
          <div class="content col-md-9 col-sm-9 col-xs-12">
            <h1 class="single-title"><?php the_title( ); ?></h1>
            <div class="single-content">
              <?php the_post(); the_content( ); ?>
            </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>
          <div class="sidebar col-md-3 col-sm-3 col-xs-12">
            <?php get_sidebar( ); ?>
          </div>
        </div>
      </div>
    </div>
<?php get_footer( ); ?>

Viết code cho file page.php

Page.php tương tự như single ta sẽ có code như sau:

<?php get_header( ); ?>
    <div id="wrapper">
      <div class="container">
        <div class="row">
          <div class="content col-md-9 col-sm-9 col-xs-12">
            <h1 class="single-title"><?php the_title( ); ?></h1>
            <div class="single-content">
              <?php the_post(); the_content( ); ?>
            </div>
          </div>
          <div class="sidebar col-md-3 col-sm-3 col-xs-12">
            <?php get_sidebar( ); ?>
          </div>
        </div>
      </div>
    </div>
<?php get_footer( ); ?>

Viết Code cho file 404.php

Ở file này chúng ta chỉ cần copy code từ trang page.php sang và chỉnh sửa một chút xíu như sau:

<?php get_header( ); ?>
    <div id="wrapper">
      <div class="container">
        <div class="row">
          <div class="content col-md-9 col-sm-9 col-xs-12">
            <h1 class="single-title"><?php the_title( ); ?></h1>
            <div class="single-content">
              Bài viết không tồn tại, vui lòng quay về trang chủ hoặc xem menu bên trên
            </div>
          </div>
          <div class="sidebar col-md-3 col-sm-3 col-xs-12">
            <?php get_sidebar( ); ?>
          </div>
        </div>
      </div>
    </div>
<?php get_footer( ); ?>

Như thế là chúng ta đã hoàn tất việc thiết kế 1 giao diện website WordPress bằng Bootstrap hoàn chỉnh, ở phầncu ối mình sẽ giới thiệu đến các bạn một số Plugin cần thiết cho 1 website wordpress, ở phần cuối mình sẽ share code hoàn chỉnh luôn nha.

Bài Viết Cùng Series:

GỬI BÌNH LUẬN