Code bài viết liên quan kèm ảnh thumbnai cho WordPress

Source: Code bài viết liên quan kèm ảnh thumbnai cho WordPress

Bài đăng liên quan đến plugin còn được biết là Bài viết liên quan, nhiệm vụ của nó là “giữ chân” người dùng khi họ đọc các bài viết trên website của bạn. Đôi khi sử dụng đúng cách, nó còn làm tăng tính thẩm mỹ cho trang web của bạn.

Plugin bài viết liên quan Cách tạo bài viết liên quan

Ưu điểm của việc sử dụng wordpress là thư viện plugin đồ sộ. Dường như tất cả những gì bạn nghĩ, bạn tưởng tượng cho website wordpress của mình, giờ đây tại kho thư viện đã có plugin. Plugin WordPress (chỉ có điều là có cái miễn phí, có cái trả phí: p)

Việc sử dụng nhiều plugin trên website wordpress của bạn không được các chuyên gia khuyến khích vì nó có nguy cơ làm chậm trang web của bạn, chưa kể các plugin có thể xung đột với nhau.

Plugin WordPress phổ biến nhất, được mọi người tìm kiếm nhiều nhất có lẽ là Plugin Bài viết liên quan. Mặc định, wordpress không có tính năng này. Nhưng bạn có thể thêm nó bằng cách sử dụng một plugin hoặc bạn có thể theo dõi bài đăng của tôi dưới đây để thêm các bài viết liên quan theo mã.

Plugin bài viết liên quan cho trang web wordpress

Bạn có thể tìm kiếm trong thư viện wordpress và sử dụng các plugin đó để hiển thị các bài viết liên quan trong trang web wordpress Dưới đây là một số plugin cho phép bạn tạo các bài đăng liên quan. Nhưng tôi vẫn khuyên bạn không nên sử dụng chúng.

Hiển thị các bài viết có liên quan với hình ảnh thu nhỏ bằng cách sử dụng mã.

Đặc tính Bài viết liên quan Điều này có thể được hiển thị ở bất cứ đâu bạn muốn miễn là nó nằm trong vòng lặp của wordpress, nhưng tôi sẽ trình bày chi tiết cách hiển thị các bài viết liên quan chỉ trong trang bài viết (single.php)

Thumbnai trong bài

Thực ra chức năng này đã có trong các phiên bản wordpress gần đây. Nhưng không phải theme nào cũng được kích hoạt, để kích hoạt bạn cần thêm đoạn mã bên dưới vào file functions.php của chủ đề bạn đang sử dụng.

add_theme_support( 'post-thumbnails' );
set_post_thumbnail_size( 100, 50, true );

• Dòng 1: Để bật tính năng thu nhỏ bài viết.
• Dòng 2: Để đặt chiều rộng và chiều cao của hình ảnh thu nhỏ.

Ghi chú: Để hiển thị hình ảnh thu nhỏ, bạn cần sử dụng chức năng Sử dụng làm hình ảnh nổi bật trong khi viết. Nếu không thì bạn có thể sử dụng plugin Hình thu nhỏ tự động đăng để nó làm điều này tự động (Plugin này sẽ tự động lấy hình ảnh đầu tiên trong bài viết làm hình ảnh nổi bật)

Hiển thị các bài viết có liên quan (Related Post) với hình thu nhỏ

Sử dụng mã bên dưới, chèn vào tệp single.php . Bạn muốn bài viết liên quan hiển thị ở đâu thì chèn vào đó.

<div>
<h3>Related posts</h3>
<?php
$orig_post = $post;
global $post;
$tags = wp_get_post_tags($post->ID);
if ($tags) {
$tag_ids = array();
foreach($tags as $individual_tag) $tag_ids[] = $individual_tag->term_id;
$args=array(
'tag__in' => $tag_ids,
'post__not_in' => array($post->ID),
'posts_per_page'=>4, // Số bài viết liên quan muốn hiển thị.
'caller_get_posts'=>1
);

$my_query = new wp_query( $args );

while( $my_query->have_posts() ) {
$my_query->the_post();
?>
<div>
<a rel="external" href="https://thanhthai.org/<? the_permalink()?>"><?php the_post_thumbnail(array(150,100)); ?><br />
<?php the_title(); ?>
</a>
</div>
<? }
}
$post = $orig_post;
wp_reset_query();
?>
</div>

Trong đoạn mã trên có dòng the_post_thumbnail (mảng (150,100)) Nó có nhiệm vụ hiển thị kích thước hình ảnh thumbnail. Bạn có thể thay đổi kích thước hình thu nhỏ ở đó.

Kết quả

Sau khi thực hiện các bước trên, bạn sẽ có kết quả như hình bên dưới

Kết quả sau khi thực hiện các bước trên

Thêm css để làm đẹp các bài viết liên quan.

Bạn có thể tùy chỉnh css cũng như các lớp và id trong đoạn mã trên. Nếu bạn sử dụng các lớp, id ở trên thì bạn có thể sử dụng lại css của tôi bên dưới.

Giả sử tôi đặt chiều rộng thành 640px, bạn có thể thay đổi nó để phù hợp với trang web của mình.

.relatedposts {width: 640px; margin: 0 0 20px 0; float: left; font-size: 12px;}
.relatedposts h3 {font-size: 20px; margin: 0 0 5px 0; }
.relatedthumb {margin: 0 1px 0 1px; float: left; }
.relatedthumb img {margin: 0 0 3px 0; padding: 0;}
.relatedthumb a {color :#333; text-decoration: none; display:block; padding: 4px; width: 150px;}
.relatedthumb a:hover {background-color: #ddd; color: #000;}

CSS trên sẽ làm cho thumbnail của bài viết liên quan có chiều rộng 150px, nghĩa là kết hợp mã php và css ở trên sẽ có 4 ảnh thumbnail hiển thị với chiều rộng 640px (bao gồm cả khoảng cách lề và đệm). Bạn có thể điều chỉnh chiều rộng đó theo ý muốn, ví dụ bạn muốn hiển thị 5 hình thu nhỏ thì bạn cần chiều rộng . Relatedthumb là 125px

Hiển thị các bài viết liên quan theo Danh mục

Đoạn mã dưới đây sẽ hiển thị các bài viết cùng thể loại với bài viết hiện tại.

<?php $orig_post = $post;
global $post;
$categories = get_the_category($post->ID);
if ($categories) {
$category_ids = array();
foreach($categories as $individual_category) $category_ids[] = $individual_category->term_id;
$args=array(
'category__in' => $category_ids,
'post__not_in' => array($post->ID),
'posts_per_page'=> 2, // Số bài viết bạn muốn hiển thị ra ngoài.
'caller_get_posts'=>1
);
$my_query = new wp_query( $args );
if( $my_query->have_posts() ) {
echo '<div id="related_posts"><h3>Related Posts</h3><ul>';
while( $my_query->have_posts() ) {
$my_query->the_post();?>
<li><div><a href="https://thanhthai.org/<? the_permalink()?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_post_thumbnail(); ?></a></div>
<div>
<h3><a href="https://thanhthai.org/<? the_permalink()?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a></h3>
<?php the_time('M j, Y') ?>
</div>
</li>
<?
}
echo '</ul></div>';
}
}
$post = $orig_post;
wp_reset_query(); ?>

Trên đây là Thủ thuật WordPress cơ bản để giúp bạn Hiển thị các bài viết liên quan cho trang web wordpress mà không cần sử dụng plugin. Có lẽ còn nhiều cách khác, nhưng đây là cách tôi sử dụng nhiều nhất với trang web wordpress của mình.

Chúc may mắn.

Via: sieucoder.com

from sieucoder.com https://ift.tt/3lopx6J
via Sieucoder.com