vooclaptrinh.com

Rack đi code

Tổng hợp code hữu ích trong function.php không cần plugins (P1)

Như bạn đã biết, những plugin trong WordPress rất tiện dụng cho người không rành về code. Tuy nhiên, khi cài đặt quá nhiều plugin vào website sẽ khiến site của bạn trở nên nặng nề, giảm tốc độ tải. Đều này được xem là tối kị vì SEO sẽ giảm xuống, tỉ lệ thoát trang và trải nghiệm người dùng ảnh hướng rất lớn đến website. Trong khi đó, những chức năng này sẽ trở nên khá đơn giản khi chỉ cần thêm một vài dòng code vào functions.php. Nếu bạn để ý một tí sẽ làm được. Do vậy, trong bài này mình sẽ tổng hợp những đoạn code hay functions.php để custom trang blog mà không cần cài đặt plugins.

Quảng cáo

1. Lượt xem trang blog

Tính năng thống kê lượt xem này khá đơn giản. Lượt xem này được tính khi có người load bài viết của bạn. Ví dụ khi bạn tự load nó cũng đếm lượt view luôn. Nhưng chắc chúng ta cũng không rảnh để ngồi load 1 bài viết để nó đếm view cho xem đâu nhỉ =)). Do vậy bên cạnh chức năng này nếu muốn biết chính xác và chi tiết lượt xem thì cách tốt nhất bạn nên cài thêm Google Analytics nhé.

Để thực hiện chúng ta làm như sau:

1.1 Chèn vào funtions.php

Đầu tiên dùng FTP client kết nối đến host hoặc server của bạn. Sau đó vào /home/site-name/public_html/wp-content/themes/your-themes. Tiếp đó kéo xuống tìm file functions.php, kích phải chọn view/edit.

Trường hợp dễ hơn là vào Dashboard admin phần Giao diện/ Sửa giao diện và tìm đến file functions.php. Copy và past đoạn code sau vào cuối file. Nếu có thẻ đóng ?> thì past vào trước thẻ đó nhé.

//code lấy lượt view
function getPostViews($postID){
    $count_key = 'post_views_count';
    $count = get_post_meta($postID, $count_key, true);
    if($count==''){
        delete_post_meta($postID, $count_key);
        add_post_meta($postID, $count_key, '0');
        return "01 lượt xem";
    }
    return $count.' lượt xem';
}
 
// code đếm lượt xem
function setPostViews($postID) {
    $count_key = 'post_views_count';
    $count = get_post_meta($postID, $count_key, true);
    if($count==''){
        $count = 0;
        delete_post_meta($postID, $count_key);
        add_post_meta($postID, $count_key, '0');
    }else{
        $count++;
        update_post_meta($postID, $count_key, $count);
    }
}
  
//Code hiển thị lượt xem bài viết trong dashboard admin
add_filter('manage_posts_columns', 'posts_column_views');
add_action('manage_posts_custom_column', 'posts_custom_column_views',5,2);
function posts_column_views($defaults){
    $defaults['post_views'] = __('Views');
    return $defaults;
}
function posts_custom_column_views($column_name, $id){
    if($column_name === 'post_views'){
        echo getPostViews(get_the_ID());
    }
}

1.2 Chèn code vào single.php

Trong cùng thư mục với file functions.php bạn sẽ thấy có file single.php.

Chèn đoạn code sau vào bất kỳ đâu ở đầu file. Ví dụ như dòng SetPostViews(get_the_ID()) bên dưới.

code demo
Chèn code vào file single.php

1.3 Chèn code hiển thị lượt xem

Phần code hiển thị này sẽ phụ thuộc vào themes bạn đang dùng nên sẽ lưu trữ tại những chỗ khác nhau.

Ví dụ ảnh bên trên bạn có thể thấy sau vòng lặp while sẽ có hàm get_template_part(‘template-parts/content, get_post_type()) như vậy ta chỉ cần truy cập vào folder template-part sau đó tìm file content.php. Past dòng code sau vào chỗ cần hiển thị lượt xem. Sau thẻ </header> là đẹp.

<div class="luot-xem">
<?php echo getPostViews(get_the_ID()); ?> 
</div>

1.4 Custom icon cho lượt xem

Nếu bạn muốn chỉ hiển thị icon cùng lượt xem thì thêm 1 tí css vào file styles.css như sau:

.luot-xem:before {
    content: '\f403';
	margin-right: 3px;
}
span.luot-xem {
    color: #0000ac;
}

Như vậy là đã hoàn tất chức năng lượt xem cho bài viết.

Quảng cáo

Để tránh bị spam liên kết trong phản hồi, bạn chỉ cần vô hiệu hóa chức năng autolink của WordPress, hãy thêm đoạn code dưới đây vào trong tập tin function.php của WordPress Theme mà bạn đang sử dụng:

remove_filter(‘comment_text’, ‘make_clickable’, 9);

3. Code hiển thị bài viết liên quan

  • Thêm đoạn code sau vào file hiển thị blog của bạn. Thường là file single.php, hoặc vào trực tiếp Themes/your-theme/content-page.php.
<!-- Bat dau bai viet lien quan -->

<div class="bai-viet-lien-quan">
    <p style="text-align: left;"><span style="color: #993366;"><strong><span style="font-family: arial, helvetica, sans-serif; font-size: 14pt;">Bài viết liên quan:</span></strong></span></p>
    <?php
    $tags = wp_get_post_tags(get_the_ID());
    if ($tags) {
        echo '<div id="relatedpost">';
        $tag_ids = array();
        foreach ($tags as $individual_tag) $tag_ids[] = $individual_tag->term_id;

        $args = array(
            'tag__in' => $tag_ids,
            'post__not_in' => array(get_the_ID()),
            'posts_per_page' => 3,
        );
        $my_query = new wp_query($args);
        if ($my_query->have_posts()) :
            echo '<ul>';
            while ($my_query->have_posts()) : $my_query->the_post();
    ?>
                <li><a href="<?php the_permalink() ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></li>
    <?php
            endwhile;
            echo '</ul>';
        endif;
        wp_reset_query();
        echo '</div>';
    }
    ?>
</div>

<!-- ket thuc hien thi -->

Với themes hiện tại mình tìm đến file content-page.php và add bên dưới dòng:

</div><!-- .entry-content -->
  • Cuối cùng để đẹp hơn bạn thêm 1 vài dòng Css vào file styles.css nhé.
.bai-viet-lien-quan {
border-bottom: dashed #efefef 1px;
margin-bottom: 1.5em;
margin-top: -0.8em;
}
div#relatedpost li a {
color: #0024e9;
line-height: 1.5;
}
Quảng cáo
Quảng cáo
0 0 đánh giá
Đánh giá bài viết
Theo dõi
Thông báo của
guest
0 Góp ý
Phản hồi nội tuyến
Xem tất cả bình luận
0
Để lại bình luận ngay nhé!x