Snippet JavaScript untuk menampilkan thumbnail konten-konten sebuah website berbasis WordPress

Kode snippet JavaScript ini jika kamu jalankan akan menampilkan thumbnail-thumbnail postingan terakhir sebuah web berbasis wordpress. Thumbnail-thumbnail itu akan muncul sebagai floating content yang menempel di bagian bawah halaman web kamu. Ini scriptnya:

<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Function untuk menambahkan style inline
        function addInlineStyle(element, styles) {
            for (const property in styles) {
                element.style[property] = styles[property];
            }
        }

        const wordpressSiteUrl = 'https://demo.wp-api.org'; // Ganti dengan URL situs WordPress Anda
        const numberOfPosts = 14;

        // Buat div untuk overlay
        const overlay = document.createElement('div');
        overlay.id = 'latest-posts-overlay';
        addInlineStyle(overlay, {
            position: 'fixed',
            bottom: '0',
            left: '0',
            width: '100%',
            backgroundColor: 'rgba(255, 255, 255, 0.95)',
            borderTop: '1px solid #eee',
            boxShadow: '0 -2px 5px rgba(0,0,0,0.1)',
            padding: '10px 0',
            display: 'flex',
            overflowX: 'auto',
            whiteSpace: 'nowrap',
            zIndex: '1000',
            WebkitOverflowScrolling: 'touch' // Untuk smoother scrolling di iOS
        });
        document.body.appendChild(overlay);

        // Tambahkan margin-bottom ke body agar konten tidak tertutup overlay
        document.body.style.marginBottom = '80px'; // Sesuaikan berdasarkan tinggi overlay

        // Buat tombol close
        const closeButton = document.createElement('button');
        closeButton.id = 'close-overlay';
        closeButton.textContent = 'X';
        addInlineStyle(closeButton, {
            position: 'absolute',
            top: '-25px', // Posisi di atas overlay
            right: '10px',
            backgroundColor: '#eee',
            border: 'none',
            padding: '2px 8px',
            cursor: 'pointer',
            fontSize: '14px',
            borderRadius: '3px 3px 0 0',
            zIndex: '1001' // Pastikan tombol close di atas overlay
        });
        overlay.appendChild(closeButton);

        // Fetch posts from WordPress API
        fetch(`${wordpressSiteUrl}/wp-json/wp/v2/posts?_embed&per_page=${numberOfPosts}`)
            .then(response => response.json())
            .then(posts => {
                posts.forEach(post => {
                    const postLink = post.link;
                    let thumbnailUrl = '';

                    // Check for featured media (thumbnail)
                    if (post._embedded && post._embedded['wp:featuredmedia'] && post._embedded['wp:featuredmedia'][0] && post._embedded['wp:featuredmedia'][0].media_details && post._embedded['wp:featuredmedia'][0].media_details.sizes) {
                        // Prioritize 'thumbnail' size, fallback to 'medium', then 'full'
                        if (post._embedded['wp:featuredmedia'][0].media_details.sizes.thumbnail) {
                            thumbnailUrl = post._embedded['wp:featuredmedia'][0].media_details.sizes.thumbnail.source_url;
                        } else if (post._embedded['wp:featuredmedia'][0].media_details.sizes.medium) {
                            thumbnailUrl = post._embedded['wp:featuredmedia'][0].media_details.sizes.medium.source_url;
                        } else {
                            thumbnailUrl = post._embedded['wp:featuredmedia'][0].source_url;
                        }
                    } else {
                        // Fallback to a placeholder if no featured image
                        thumbnailUrl = 'https://via.placeholder.com/60?text=No+Image';
                    }

                    const thumbnailDiv = document.createElement('div');
                    addInlineStyle(thumbnailDiv, {
                        flex: '0 0 auto', // Mencegah peregangan
                        width: '60px', // Ukuran thumbnail kotak
                        height: '60px',
                        margin: '0 5px',
                        cursor: 'pointer',
                        overflow: 'hidden',
                        display: 'flex',
                        alignItems: 'center',
                        justifyContent: 'center'
                    });
                    
                    const thumbnailImg = document.createElement('img');
                    thumbnailImg.src = thumbnailUrl;
                    thumbnailImg.alt = post.title.rendered;
                    addInlineStyle(thumbnailImg, {
                        width: '100%',
                        height: '100%',
                        objectFit: 'cover', // Memastikan gambar menutupi area kotak
                        display: 'block'
                    });

                    thumbnailDiv.appendChild(thumbnailImg);
                    thumbnailDiv.onclick = () => window.open(postLink, '_blank');
                    
                    // Tambahkan event hover (opsional, karena inline style terbatas untuk pseudo-classes)
                    thumbnailDiv.onmouseover = function() { this.style.opacity = '0.8'; };
                    thumbnailDiv.onmouseout = function() { this.style.opacity = '1'; };

                    overlay.appendChild(thumbnailDiv);
                });
            })
            .catch(error => console.error('Error fetching WordPress posts:', error));

        // Close button functionality
        closeButton.addEventListener('click', () => {
            overlay.style.display = 'none';
            document.body.style.marginBottom = '0'; // Kembalikan margin body
        });
    });
</script>