WordPress: Thiết Kế Theme (P5: Get Post)

Phần 5: Hướng dẫn lấy bài viết từ WordPress

Chào các bạn, ở phần trước mình đã chỉ cho các bạn về menu wordpess. hôm nay ở phần 5 của Series WordPress Căn Bản Cho Người Mới mình sẽ hướng dẫn các bạn cách lấy bài viết từ WordPress. Giờ chúng ta cùng nhau bắt đầu nhé! Trước hết các bạn cần viết html phù hợp để chứa hàm muốn gọi

<section class="wrapper" id="HomePage">
  <div class="wrapper__contain container">
    <div class="row wrapper__background homepage__background">
      <div class="grid__contain">
        <div class="grid__colums">
          <ul class="grid__item-background">
            <?php getPostWolfActive() ?>
          </ul>
        </div>
      </div>
    </div>
  </div>
</section>

Ở đây mình đã dùng lệnh php trong thẻ ul để gọi hàm getPostWolfActive() và bây giờ mình sẽ bắt đầu xây dựng hàm này trong file functions.php

function getPostWolfActive(){
      $args = array(
         'post_type' => 'post',
         'orderby' => 'DESC',
         'posts_per_page'=> 16,
          );
      $the_query = new WP_Query($args);
      if($the_query->have_posts()){
        while($the_query->have_posts()){
          $the_query->the_post();
          ?>
          <li class="grid__item">
            <div class="wrapper__post-item">
              <div class="post-item-contain">
                <div class="post-item-image">
                    <div class="kenburns-top">
                      <?php echo get_the_post_thumbnail( get_the_ID(), 'medium', null );?>
                    </div>
                </div>
                <div class="wrapper-author--date">
                  <span class="wrapper__date-calendar"><i class="far fa-calendar-alt"></i><span><?php echo get_the_date() ?></span></span>
                </div>
                <div class="post-item-content">
                  <div class="wrapper-post--title">
                    <a href="<?php echo get_permalink(); ?>"><h2 class="post--title"><?php echo get_the_title() ?></h2></a>
                  </div>
                  <div class="read-more">
                    <a href="<?php echo get_permalink(); ?>">Đọc Tiếp</a>
                  </div>
                </div>
              </div>
            </div>
            </li>
            <?php
        }
      }
    }

Bây giờ mình sẽ giải thích một số hàm trên cho các bạn hiểu

• get_permalink(): có nhiệm vụ là lấy link bài viết đang lấy trong vòng lặp.
• get_the_title(): lấy title bài viết trên WordPress
• get_the_date(): lấy ngày tháng năm bài viết được xuất bản
• get_the_ID(): lấy id của bài viết
• get_the_post_thumbnail(): lấy hình ảnh đại diện của bài viết. Có các kích thước sau: thumbnail, medium, large, full.

Giờ mình sẽ giải thích cho các bạn về hàm getPostWolfActive. Ở đây mình đã tạo một mảng để chứa các tham số query vào biến $args. Sau đó mình tiếp túc đưa biến $args vào câu lệnh new WP_Query và gán vào biến $the_query. Kế đến biến $the_query sẽ tương tác với database kiểm tra xem có bài post nào trong lệnh query hay không thông qua hàm WordPress cấp sẵn là have_posts() rồi tiến vào vòng lặp while với điều kiện tương tự như vậy. Nếu có bài viết thì ta sẽ lấy bài viết ra thông qua hàm the_post(). Ngoài ra các bạn có thể xem tham khảo thêm WP_Query tại đây. Cuối cùng thì mình style lại cho đẹp nhé

.grid__item-background{
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(320px,420px));
  grid-template-rows: 3 234.41px;
  grid-gap: 20px;
  grid-auto-flow: dense;
}
.post-item-image{
  height: 234.41px;
}
.kenburns-top{
  height:100%;
  overflow: hidden;
}
.post-item-image .kenburns-top img{
  height:100%;
}
@-webkit-keyframes kenburns-top {
  0% {
    -webkit-transform: scale(1) translateY(0);
            transform: scale(1) translateY(0);
    -webkit-transform-origin: 50% 16%;
            transform-origin: 50% 16%;
  }
  100% {
    -webkit-transform: scale(1.25) translateY(-15px);
            transform: scale(1.25) translateY(-15px);
    -webkit-transform-origin: top;
            transform-origin: top;
  }
}
@keyframes kenburns-top {
  0% {
    -webkit-transform: scale(1) translateY(0);
            transform: scale(1) translateY(0);
    -webkit-transform-origin: 50% 16%;
            transform-origin: 50% 16%;
  }
  100% {
    -webkit-transform: scale(1.25) translateY(-15px);
            transform: scale(1.25) translateY(-15px);
    -webkit-transform-origin: top;
            transform-origin: top;
  }
}
.kenburns-top img:hover {
	-webkit-animation: kenburns-top 5s ease-out both;
	        animation: kenburns-top 5s ease-out both;
}

và cuối cùng là sản phẩm của chúng ta: