Hướng dẫn chèn bài viết liên quan siêu đẹp cho website WordPress

Nhập mã webantamgiam30% được giảm 30% khi đăng ký hosting hay vps tại inet.vn

Mục lục

Hôm nay mình sẽ chia sẽ cho các bạn cách chèn bài viết liên quan siêu đẹp vào website nhé, Đoạn code này có 1 bạn chia sẽ nhưng có một số đoạn không hợp với website của mình và mình đã quyết định viết lại code của một số class, respon lại trên di động và điều chỉnh vị trí hiển thị cho phù hợp với mình hơn

  • Đáng ra mình sẽ nhúng mã Embed từ Github qua để các bạn dễ copy code nhưng tài khoản Github của mình bị khóa nên code chia sẻ trong bài viết các bạn chịu khó copy nhé
  • Mình không muốn cài plugin hiển thị code cho đẹp vì host yếu mà mấy plugin kia phải render code nữa nên khá nặng, nên các bạn thông cảm nhé

Chúng ta cùng tiến hành thôi nào

Xem hình dưới sau khi mình chèn code nhé

Ở đây mình làm ở theme flatsome nên trước tiên mình cần phải copy thư mục Template-part ở theme flatsome sang flatsome child nhé ( để khi mà update lên bản theme mới sẽ không bị mất nhé ). Cách làm xem phía dưới nhé , let go !!!

Sao chép thư mục Template-part ở theme flatsome sang child theme

bước 1: vào file quản trị web trên host hoặc vps rồi tìm đến wp-content/themes/flatsome/template-parts

bước 2: copy toàn bộ thư mục template-parts vào theme Flatsome child ( xem hình dưới )

bước 3: vào mục template-parts ở Flatsome child theo đường dẫn template-parts/posts/content-single.php ( xem ảnh bên dưới )

Chèn code vào file content-single.php

Bạn nhấn vào chỉnh sửa file content-single.php và xóa hết code trong file đó và chèn toàn bộ code dưới đây vào

<?php
/**
 * Posts content single.
 *
 * @package          Flatsome\Templates
 * @flatsome-version 3.16.0
 */
?>
<div class="entry-content single-page">
    <?php the_content(); ?>
    <?php
    wp_link_pages( array(
        'before' => '<div class="page-links">' . __( 'Pages:', 'flatsome' ),
        'after'  => '</div>',
    ) );
    ?>
    <?php if ( get_theme_mod( 'blog_share', 1 ) ) {
        // SHARE ICONS
        echo '<div class="blog-share text-center">';
        echo '<div class="is-divider medium"></div>';
        echo '</div>';
    } ?>
</div><!-- .entry-content2 -->
<?php if ( get_theme_mod( 'blog_single_footer_meta', 1 ) ) : ?>
    <footer class="entry-meta text-<?php echo get_theme_mod( 'blog_posts_title_align', 'center' ); ?>">
        <?php
        /* translators: used between list items, there is a space after the comma */
        $category_list = get_the_category_list( __( ' ', 'flatsome' ) );
        /* translators: used between list items, there is a space after the comma */
        $tag_list = get_the_tag_list( '', __( ' ', 'flatsome' ) );
        // But this blog has loads of categories so we should probably display them here.
        if ( '' != $tag_list ) {
            $meta_text = __( '<div class="danh-muc"><span class="title">Danh mục:</span> %1$s</div><div class="the-tim-kiem"><span class="title">Từ khóa:</span> %2$s</div>', 'flatsome' );
        } else {
            $meta_text = __( '<div class="danh-muc"><span class="title">Danh mục:</span>  %1$s</div>', 'flatsome' );
        }
        printf( $meta_text, $category_list, $tag_list, get_permalink(), the_title_attribute( 'echo=0' ) );
        ?>
    </footer><!-- .entry-meta -->
<?php endif; ?>
<?php
/*
 * Code hiển thị bài viết liên quan trong cùng một danh mục
 */
$categories = get_the_category(get_the_ID());
if ($categories){
    echo '<div class="bai-viet-lien-quan">';
    $category_ids = array();
    foreach($categories as $individual_category) $category_ids[] = $individual_category->term_id;
    $args=array(
        'category__in' => $category_ids,
        'post__not_in' => array(get_the_ID()),
        'posts_per_page' => 12, // So bai viet dc hien thi
    );
    $my_query = new wp_query($args);
    if( $my_query->have_posts() ):
        echo '  <div class="tde">          
                <span class="null">Bài viết cùng chủ đề</span>  
  </div>
        <ul class="list-bai-viet">';
        while ($my_query->have_posts()):$my_query->the_post();
            ?>
            <li>
            <div class="box-image">
                 <a href="<?php the_permalink() ?>"><?php the_post_thumbnail('large'); ?></a>
            </div>
             <a href="<?php the_permalink() ?>"><h4 class="tieu-de-bai-viet"><?php the_title(); ?></h4>
                        </a>
            </li>
            <?php
        endwhile;
        echo '</ul>';
    endif; wp_reset_query();
    echo '</div>';
}
?>
<!--dau vd-->
<div class="xem-them">
    <div class="tde">          
                <span class="null">Bài viết mới nhất</span>
  </div>
   <div class="newpost"> <ul>
<?php
    $postquery = new WP_Query(array('posts_per_page' => 6, 'orderby' => 'rand'));
    if ($postquery->have_posts()) {
    while ($postquery->have_posts()) : $postquery->the_post();
    $do_not_duplicate = $post->ID;
?>
<li>
    <a href="<?php the_permalink();?>"><?php the_title();?></a>
</li>
<?php endwhile; }  wp_reset_postdata(); ?>  </ul>
</div>
</div>
<!--cuoi vidu-->
<?php if ( get_theme_mod( 'blog_author_box', 1 ) ) : ?>
    <div class="entry-author author-box">
        <div class="flex-row align-top">
            <div class="flex-col mr circle">
                <div class="blog-author-image">
                    <?php
                    $user = get_the_author_meta( 'ID' );
                    echo get_avatar( $user, 90 );
                    ?>
                </div>
            </div><!-- .flex-col -->
            <div class="flex-col flex-grow">
                <h5 class="author-name uppercase pt-half">
                    <?php echo esc_html( get_the_author_meta( 'display_name' ) ); ?>
                </h5>
                <p class="author-desc small"><?php echo esc_html( get_the_author_meta( 'user_description' ) ); ?></p>
            </div><!-- .flex-col -->
        </div>
    </div>
<?php endif; ?>
<?php if ( get_theme_mod( 'blog_single_next_prev_nav', 1 ) ) :
    flatsome_content_nav( 'nav-below' );
endif; ?>

Chèn code css dưới đây vào mục style.css hoặc css bổ sung đều được

/* css bai viet lien quan webantam.com ten may tinh*/
.xem-them .tieu-de-xem-them {
    font-weight: 700;
    display: block;
    margin-bottom: 10px;
    font-size: 19px;
    color: black;
}
.xem-them ul li {
    margin-bottom: 3px;
}
.xem-them ul li a {
    font-weight: 400;
    font-size: 16px;
    color: #0070c3;
}
.xem-them ul li a:hover {
    text-decoration: underline;
}
.blog-single .entry-meta {
    text-transform: none;
    font-size: 14px;
    letter-spacing: 0;
    color: gray;
    border-top: 1px solid #e2e2e2;
    border-bottom: 1px solid #e2e2e2;
    padding: 10px;
    background: #f9f9f9;
}
.danh-muc {
    margin-bottom: 15px;
}
.danh-muc span.title, .the-tim-kiem span.title {
    border-radius: 4px;
    background: #126e32;
    padding: 4px 10px;
    color: white;
    margin-right: 5px;
}
.danh-muc a, .the-tim-kiem a {line-height:32px;
    border-radius: 4px;
    margin-bottom: 10px;
    padding: 4px 10px;
    background: #dedede;
    color: #464646;
}
.danh-muc a:hover, .the-tim-kiem a:hover {
    background: #6dca19;
    color: white;
}
.bai-viet-lien-quan {
    margin-top: 15px;
}
.bai-viet-lien-quan h3 {
    font-size: 19px;
    color: black;
}
.bai-viet-lien-quan ul {
    margin-bottom: 0;
    display: inline-block;
    width: 100%;
}
.bai-viet-lien-quan ul li {
    list-style: none;
    width: 25%;
    color: graytext;
    float: left;
    padding-left: 4px;
    padding-right: 5px;
}
.bai-viet-lien-quan ul li .box-image img {
    height: 120px;
    border-radius: 4px;
    object-fit: cover;
    object-position: center;
        border: #3498db solid 2px;
}
.bai-viet-lien-quan h4 {
       line-height: 19px;
    padding-top: 7px;
    height: 64px;
    overflow: hidden;
    font-weight: 550;
    font-size: 16px;
    color: #0070c3;
}
span.null {
  background: #3498db;
  padding: 6px 10px 6px 10px;
  color: white;
  position: relative;
  display: inline-block;
        font-weight: 700;
    font-size: 16px;
}
.tde {
    position: relative;
    border-bottom: 3px solid #3498db;
    margin-bottom: 12px;
}
.newpost {
    background: #daefff;
    padding: 10px;
    border: 1px dashed #0092ff;
    border-radius: 3px;
    padding-left: 30px;
}

Chèn code css dưới đây vào css trên di động

.bai-viet-lien-quan ul li {
width: 50% !important;
}
.bai-viet-lien-quan ul li .box-image img {
height: 100px !important;
}

Các bước chèn code css cho điện thoại di động
Các bước chèn code css cho điện thoại di động

Thay đổi các số lượng bài viết cần get ra ngoài nếu bạn muốn

Bạn xem hình dưới đây nhé

Số bài viết cùng danh mục cần get ra ngoài
Số bài viết cùng danh mục cần get ra ngoài
Số bài viết mới nhất cần get ra ngoài
Số bài viết mới nhất cần get ra ngoài

Chúc các bạn thành công, Nếu code chạy bị lỗi vui lòng liên hệ mình để fix nha, hoặc các bạn muốn code theo giao diện khác cũng có thể liên hệ mình code lại nha

Bài viết cùng chủ đề
Bài viết ngẫu nhiên

Nhập mã webantamgiam30% được giảm 30% khi đăng ký hosting hay vps tại inet.vn

Nhà cung cấp host uy tín Việt Nam
Nhà cung cấp host uy tín Việt Nam

2 bình luận về “Hướng dẫn chèn bài viết liên quan siêu đẹp cho website WordPress”

Để lại một bình luận

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *