Hướng dẫn tạo website bằng Theme Wordpress từ Bootstrap 4 [2019] - Phần 5
Ở phần 5 này mình sẽ hướng dẫn về single.php, các hàm cần thiết trong một bài viết và viết hàm liệt kê những bài viết liên quan.
Tạo file single.php.
- wp-content/themes/logicviet/single.php
Copy toàn bộ nội dung trong file index.php vào single.php xóa bỏ hàm phân trang logic_viet_pagination.
Thay template-parts/content thành template-parts/content-single, mục đích sẽ gọi file content-singe.php trong template-parts.
Tạo file content-single.php
- wp-content/themes/logicviet/template-parts/content-single.php
và nó sẽ có nội dung sau:
<!-- Title -->
<h1 class="mt-4"><?php the_title() ?></h1>
<!-- Author -->
<p class="lead">
by
<?php the_author_posts_link() ?>
in
<?php the_category(' / ') ?>
</p>
<hr>
<!-- Date/Time -->
<p>Posted on <?php echo get_the_date() ?></p>
<hr>
<!-- Preview Image -->
<?php the_post_thumbnail('post-large',['class'=> 'img-fluid rounded']) ?>
<hr>
<!-- Post Content -->
<?php the_content() ?>
Đây là phần sẽ show nội dung chi tiết của một bài viết:
the_author_posts_link() // Thông tin tác giả
the_category() // Các danh mục cách nhau " / "
the_post_thumbnail('post-large',['class'=> 'img-fluid rounded']) // lấy ảnh đại diện của lớn nhất của bài viết
the_content() // Lấy nội dung bài viết
Mở file functions.php
thêm 2 dạng hình ảnh:
1 là hình ảnh lớn nhất của bài viết: post-large
2 là hình ảnh cho bài viết liên quan: post-small
Mở plugin regeneration thumbnails tiến hành resize ảnh:
Mở file style.css thêm class sau:
.fuild-img{
width: 100% !important;
height: auto !important;
}
.post-small{
width: 120px;
height: auto;
}
Kết quả ở trang bài viết
Mà đã là bài viết thì không chỉ có riêng một bài mà phải có những bài liên quan cùng chủ đề với nó.
Vậy nên ta sẽ viết hàm show những bài viết liên quan,
Mở file content-single.php chèn hàm sau:
<?php echo logic_viet_related_post('Bài viết liên quan', 4) ?>
Mở file functions.php ta sẽ tiến hành viết hàm logic_viet_related_post
function logic_viet_related_post($title = 'Bài viết liên quan', $count = 5) {
global $post;
$tag_ids = array();
$current_cat = get_the_category($post->ID);
$current_cat = $current_cat[0]->cat_ID;
$this_cat = '';
$tags = get_the_tags($post->ID);
if ( $tags ) {
foreach($tags as $tag) {
$tag_ids[] = $tag->term_id;
}
} else {
$this_cat = $current_cat;
}
$args = array(
'post_type' => get_post_type(),
'numberposts' => $count,
'orderby' => 'rand',
'tag__in' => $tag_ids,
'cat' => $this_cat,
'exclude' => $post->ID
);
$related_posts = get_posts($args);
if ( empty($related_posts) ) {
$args['tag__in'] = '';
$args['cat'] = $current_cat;
$related_posts = get_posts($args);
}
if ( empty($related_posts) ) {
return;
}
$post_list = '';
foreach($related_posts as $related) {
$post_list .= '<div class="media mb-4 ">';
$post_list .= '<img class="mr-3 img-thumbnail" style="width: 150px" src="'.get_the_post_thumbnail_url($related->ID, 'post-small').'" alt="Generic placeholder image">';
$post_list .= '<div class="media-body align-self-center">';
$post_list .= '<h5 class="mt-0"><a href="'.get_permalink($related->ID).'">'.$related->post_title.'</a></h5>';
$post_list .= get_the_category( $related->ID )[0]->cat_name;
$post_list .= '</div>';
$post_list .= '</div>';
}
return sprintf('
<div class="card my-4">
<h4 class="card-header">%s</h4>
<div class="card-body">%s</div>
</div>
', $title, $post_list );
}
Kết quả:
Chúc các bạn thành công. Hẹn các bạn ở phần 6
0 Comments
no comments!
Bài viết liên quan
![Hướng dẫn tạo website bằng Theme Wordpress từ Bootstrap 4 [2019] - Phần 7](https://logicviet.com/images/posts/18774476.PNG)
![Hướng dẫn tạo website bằng Theme Wordpress từ Bootstrap 4 [2019] - Phần 10](https://logicviet.com/images/posts/59413897.PNG)
![Hướng dẫn tạo website bằng Theme Wordpress từ Bootstrap 4 [2019] - Phần 1](https://logicviet.com/images/posts/50286915.PNG)
Theo Dõi Trang
- Bài Viết Mới
- Tags
Các cách xóa và giảm dung lượng ổ C win 10 hiệu quả nhất
2 năm trước
Ổ cứng của máy tính, laptop bị đầy sau một thời gian dài sử dụng là vấn đề thường gặp của nhiều người. Nếu dung lượng ổ cứng quá lớn có thể ảnh hưởng đến tốc độ xử lý của nhiều ứng dụng và hoạt động của bạn. Vì vậy, việc quản lý, dọn dẹp ổ cứng nói chung và ổ đĩa C nói riêng nên thực hiện thường xuyên
Các website chuyển văn bản thành giọng nói online tốt nhất
2 năm trước
Bạn đang tìm kiếm các trang web giúp bạn chuyển văn bản thành giọng nói online trên máy tính một cách chính xác và nhanh chóng nhất. Bài viết dưới đây sẽ tổng hợp cho các bạn TOP 8 trang web chuyển văn bản thành giọng nói online tốt nhất.
UTM Tracking là gì? Hướng dẫn tạo UTM vào quản lý hiệu quả Marketing
2 năm trước
UTM (viết tắt cho Urchin tracking module), hay UTM code là một đoạn mã đơn giản được gắn vào các đường dẫn URL tùy chỉnh của bạn, giúp theo dõi các nguồn, phương tiện trung gian, hoặc tên các chiến dịch của bạn.
Cách sử dụng hàm Query trong Google Sheet
2 năm trước
Bạn làm việc với lượng lớn dữ liệu trên Google Sheet, việc lọc và tìm kiếm dữ liệu theo cách thủ công sẽ tốn rất nhiều thời gian. Hàm QUERY trong Google Sheet giúp bạn có thể tra cứu và lọc dữ liệu theo bất kỳ định dạng nào bạn muốn. Cùng tìm hiểu cách dùng hàm QUERY nhé!
Cách tính lãi suất vay mua nhà và số tiền phải trả hàng tháng
2 năm trước
Hiện nay, hầu hết những người có thu nhập thấp hoặc trung bình sẽ lựa chọn phương án vay vốn ngân hàng để mua nhà. Tuy nhiên, bạn có biết để có thể làm thủ tục vay vốn người mua cần đáp ứng được những điều kiện gì? Các mức lãi suất? Số tiền trả hàng tháng?
Hướng dẫn cách sử dụng và cài đặt Google Tag Manager
2 năm trước
Trình quản lý thẻ của Google – Google Tag Manager là một công cụ được thiết lập để giải quyết các vấn đề của doanh nghiệp giữa các phòng ban, theo dõi chiến dịch marketing, quản lý thẻ JavaScript và HTML, chủ động cập nhật website,…