Những điều căn bản về wordpress ít ai biết

WordPress Căn Bản Cho Người Mới (Phần 6)

Page Template

Chào các bạn hôm nay, mình sẽ hướng dẫn các bạn về Page Template trong WordPress. Như các bạn đã biết, mục đích chúng ta tạo ra file page.php là nhằm hiển thị các page mà chúng ta đã tạo trong 1 template page. Trước hết như những file single, categories,… chúng ta cần tạo 1 file tên là page.php kèm với gọi hai hàm là get_header và get_footer như template page:

<?php
  get_header();
  while(have_posts()) {
    the_post(); 
?>
    <div class="page-banner">
    <div class="page-banner__bg-image style="background:url(<?php echo get_theme_file_uri('/images/Background_header.jpg'); ?>)">
      <div class="page-banner__content container container--narrow">
        <h1 class="page-banner__title"><?php the_title(); ?></h1>
        <div class="page-banner__intro">
          <p>DONT FORGET TO REPLACE ME LATER</p>
        </div>
        <div class="metabox metabox--position-up metabox--with-home-link">
          <p><a class="metabox__blog-home-link" href="#"><i class="fa fa-home" aria-hidden="true"></i> Back to About Us</a> <span class="metabox__main">Our History</span></p>
        </div>
      </div>
    </div>
  </div>
  <div class="container container--narrow page-section">
    <!--
    <div class="page-links">
      <h2 class="page-links__title"><a href="#">About Us</a></h2>
      <ul class="min-list">
        <li class="current_page_item"><a href="#">Our History</a></li>
        <li><a href="#">Our Goals</a></li>
      </ul>
    </div>
    -->
    <div class="generic-content">
      <?php the_content(); ?>
    </div>
  </div>
  <?php }
  get_footer();
?>

Vòng lặp While có tác dụng kiểm tra xem “nếu page có tồn tại thì sẽ lấy dữ liệu page ra”, the_title() dùng để lấy tiêu đề của Page, the_content() dùng để lấy nội dung bên trong page. Function get_theme_file_uri() cho phép đi vào đường dẫn từ themes của bạn đến file bạn cần muốn lấy. Ví dụ:  Trong ảnh trên mình có tạo một folder tên images và có chứa file background. Vậy khi mình gọi đến hàm get_theme_file_uri() thì nó sẽ đi theo đường dẫn cụ thể sau news-wolfactive.local/wp-content/themes/newswolfactive/images/Background_header.jpg. Các bạn có thể xem trên f12 giao diện browser của bạn. 

Style lại một chút cho đẹp nhé:

.metabox {
  background-color: #FAF0CA;
  border-radius: 3px;
  padding: 10px 15px;
  display: inline-block;
  margin-bottom: 30px;
  box-shadow: 2px 2px 1px rgba(0, 0, 0, .07);
}
.metabox--with-home-link {
  padding: 0;
  margin:0;
  position: absolute;
}
.metabox__main {
  padding: 10px 15px 10px 11px;
}
.metabox p {
  margin: 0;
  font-size: .9rem;
  color: rgb(168, 146, 56);
}
.metabox a {
  color: rgb(168, 146, 56);
  text-decoration: none;
  font-weight: bold;
}
.metabox a:hover {
  text-decoration: underline;
}
.metabox .metabox__blog-home-link {
  background-color: #0D3B66;
  color: #FFF;
  display: inline-block;
  padding: 10px 15px;
  border-radius: 3px 0 0 3px;
  font-weight: normal;
}
.metabox .metabox__blog-home-link:hover {
  text-decoration: none;
  background-color: rgb(11, 47, 81);
}
.page-banner__bg-image{
  padding: 20px 0;
}
.generic-content{
  margin-top:50px;
}
.page-banner__title{
  margin-top:0;
}