Hiển Thị Người Dùng Và Bài Viết Ngẫu Nhiên

Hiển thị người dùng và bài viết ngẫu nhiên khi trang WordPress tải lên mà không cần tải lại hoặc thực hiện thêm hành động nào khác, bạn có thể kết hợp PHP và JavaScript để hiển thị thông báo một cách tự động.

Hiển thị người dùng và bài viết ngẫu nhiên

Dưới đây là cách làm đầy đủ:

Bước 1: Cập nhật code PHP trong file footer.php hoặc template phù hợp

Thêm đoạn code sau để chuẩn bị dữ liệu PHP và nhúng nó vào JavaScript.

<?php
// Hàm random tên người dùng
function get_random_username() {
    $usernames = array(
        'Minh Anh', 'Tuấn Kiệt', 'Ngọc Lan', 'Khánh Linh', 
        'Anh Dũng', 'Quốc Bảo', 'Hồng Nhung', 'Văn Tài', 
        'Mỹ Linh', 'Trần Bình', 'Lan Anh', 'Đức Huy'
    );
    return $usernames[array_rand($usernames)];
}

// Hàm lấy bài viết ngẫu nhiên
function get_random_post() {
    $args = array(
        'post_type'      => 'post',
        'posts_per_page' => 1,
        'orderby'        => 'rand',
    );
    $random_post = get_posts($args);
    if (!empty($random_post)) {
        return array(
            'title' => get_the_title($random_post[0]->ID),
            'link'  => get_permalink($random_post[0]->ID)
        );
    }
    return array('title' => 'Bài viết thú vị', 'link' => '#');
}

// Lấy dữ liệu và chuyển qua JavaScript
$random_username = get_random_username();
$random_post = get_random_post();
?>

<script>
// Gửi dữ liệu từ PHP qua JavaScript
const randomNotification = {
    username: "<?php echo esc_js($random_username); ?>",
    postTitle: "<?php echo esc_js($random_post['title']); ?>",
    postLink: "<?php echo esc_url($random_post['link']); ?>"
};
</script>

<?php

// Hàm random tên người dùng

function get_random_username() {

$usernames = array(

'Minh Anh', 'Tuấn Kiệt', 'Ngọc Lan', 'Khánh Linh',

'Anh Dũng', 'Quốc Bảo', 'Hồng Nhung', 'Văn Tài',

'Mỹ Linh', 'Trần Bình', 'Lan Anh', 'Đức Huy'

);

return $usernames[array_rand($usernames)];

}

// Hàm lấy bài viết ngẫu nhiên

function get_random_post() {

$args = array(

'post_type' => 'post',

'posts_per_page' => 1,

'orderby' => 'rand',

);

$random_post = get_posts($args);

if (!empty($random_post)) {

return array(

'title' => get_the_title($random_post[0]->ID),

'link' => get_permalink($random_post[0]->ID)

);

}

return array('title' => 'Bài viết thú vị', 'link' => '#');

}

// Lấy dữ liệu và chuyển qua JavaScript

$random_username = get_random_username();

$random_post = get_random_post();

// Gửi dữ liệu từ PHP qua JavaScript

const randomNotification = {

username: "<?php echo esc_js($random_username); ?>",

postTitle: "<?php echo esc_js($random_post['title']); ?>",

postLink: "<?php echo esc_url($random_post['link']); ?>"

};

</script>

Bước 2: JavaScript hiển thị thông báo khi trang chạy lên

Thêm đoạn JavaScript này vào footer.php hoặc file JavaScript riêng

<script>
document.addEventListener("DOMContentLoaded", function () {
    // Tạo phần tử thông báo
    const notification = document.createElement('div');
    notification.className = 'fake-notification';
    notification.innerHTML = `
        <span><strong>${randomNotification.username}</strong> vừa xem bài viết: </span>
        <a href="${randomNotification.postLink}" target="_blank">
            ${randomNotification.postTitle}
        </a>
    `;

    // Thêm vào trang
    document.body.appendChild(notification);

    // Tự động ẩn sau 8 giây
    setTimeout(() => {
        notification.style.opacity = '0';
        setTimeout(() => notification.remove(), 1000);
    }, 8000);
});
</script>

document.addEventListener("DOMContentLoaded", function () {

// Tạo phần tử thông báo

const notification = document.createElement('div');

notification.className = 'fake-notification';

notification.innerHTML = `

<span><strong>${randomNotification.username}</strong> vừa xem bài viết: </span>

${randomNotification.postTitle}

</a>

// Thêm vào trang

document.body.appendChild(notification);

// Tự động ẩn sau 8 giây

setTimeout(() => {

notification.style.opacity = '0';

setTimeout(() => notification.remove(), 1000);

}, 8000);

});

</script>

Xem thêm bài viết khác

Bước 3: Thêm CSS tạo giao diện thông báo đẹp mắt

Thêm đoạn CSS vào style.css hoặc Customizer CSS:

.fake-notification {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: #f8f9fa;
    color: #333;
    padding: 15px 20px;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    z-index: 9999;
    font-size: 14px;
    animation: fadeInOut 8s forwards;
    transition: opacity 1s ease-in-out;
}

.fake-notification a {
    color: #0073e6;
    text-decoration: none;
    font-weight: bold;
}

.fake-notification a:hover {
    text-decoration: underline;
}

@keyframes fadeInOut {
    0% { opacity: 0; transform: translateY(20px); }
    10%, 90% { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(-20px); }
}

.fake-notification {

position: fixed;

bottom: 20px;

right: 20px;

background: #f8f9fa;

color: #333;

padding: 15px 20px;

border-radius: 8px;

box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);

z-index: 9999;

font-size: 14px;

animation: fadeInOut 8s forwards;

transition: opacity 1s ease-in-out;

}

.fake-notification a {

color: #0073e6;

text-decoration: none;

font-weight: bold;

}

.fake-notification a:hover {

text-decoration: underline;

}

@keyframes fadeInOut {

0% { opacity: 0; transform: translateY(20px); }

10%, 90% { opacity: 1; transform: translateY(0); }

100% { opacity: 0; transform: translateY(-20px); }

}

Cách hoạt động

PHP:
- Lấy tên người dùng ngẫu nhiên từ danh sách.
- Lấy bài viết ngẫu nhiên từ cơ sở dữ liệu WordPress.
- Chuyển dữ liệu từ PHP sang JavaScript.
JavaScript:
- Tạo phần tử HTML để hiển thị thông báo.
- Tự động hiển thị thông báo khi trang tải lên và xóa sau 8 giây.
CSS:
- Tạo hiệu ứng fade-in và fade-out cho thông báo để tăng tính mượt mà và hấp dẫn.

Kết quả

Khi trang WordPress tải lên, một thông báo sẽ xuất hiện ở góc dưới bên phải:
“Minh Anh vừa xem bài viết: [Tiêu đề bài viết]”
Tên người dùng và bài viết sẽ được chọn ngẫu nhiên mỗi lần tải trang.
Thông báo sẽ tự động biến mất sau vài giây.

Xem thêm: Kho Plugin WP Mail SMTP Pro

Theo dỗi tên trên Fanpage và Youtube của mình nhé.

Chúc bạn thành công! Nếu cần thêm tùy chỉnh nào, cứ yêu cầu nhé!