अपने वॉर्डप्रेस वेबसाईट के रिलेटेड आइटम को category के अनुसार जावास्क्रिप्ट की मदद से दिखाएं । यह एक टेस्टिड कीया हुआ कोड है जो आपको बताया जा रहा है ।
प्रथम चरण
जहा पे रिलेटेड आइटम दिखाना है वह इस कोड को पेस्ट करें ।
<div id="related-items" class="related-posts-container" data-post-id="<?php echo get_the_ID(); ?>"> <div id="loading-icon"></div> </div>
द्वितीय चरण
अब जावास्क्रिप्ट कोड को footer या जहा पे आपके जावास्क्रिप्ट कोड्स हैं वह नीचे दिए हुए कोड को पेस्ट कर दें ।
document.addEventListener('DOMContentLoaded', function () {
const relatedContainer = document.getElementById('related-items');
const currentPostId = relatedContainer.getAttribute('data-post-id');
const siteUrl = window.location.origin;
// Add a default heading for instant display
const heading = document.createElement('h2');
heading.classList.add('related-items-heading');
heading.textContent = 'Latest - '; // Default text
relatedContainer.appendChild(heading);
// Add a loading icon below the heading
const loadingIcon = document.createElement('div');
loadingIcon.id = 'loading-icon';
loadingIcon.textContent = '';
relatedContainer.appendChild(loadingIcon);
// Create a parent div for related posts
const relatedPostsList = document.createElement('div');
relatedPostsList.classList.add('related-posts-list');
relatedContainer.appendChild(relatedPostsList);
loadingIcon.style.display = 'block';
const postApiUrl = `${siteUrl}/wp-json/wp/v2/posts/${currentPostId}`;
// Fetch current post and related posts
fetch(postApiUrl)
.then(response => response.json())
.then(post => {
const categoryIds = post.categories;
if (categoryIds.length === 0) {
relatedContainer.innerHTML += '<p>No related items found.</p>';
loadingIcon.style.display = 'none'; // Hide the loading icon
return;
}
// Fetch the details of the first category
const categoryApiUrl = `${siteUrl}/wp-json/wp/v2/categories/${categoryIds[0]}`;
return fetch(categoryApiUrl)
.then(response => response.json())
.then(category => {
// Update the heading with the fetched category name
heading.textContent = `Latest - ${category.name}`;
})
.then(() => categoryIds); // Return the category IDs for the next fetch
})
.then(categoryIds => {
const relatedPostsApiUrl = `${siteUrl}/wp-json/wp/v2/posts?categories=${categoryIds.join(
','
)}&exclude=${currentPostId}&per_page=12`;
return fetch(relatedPostsApiUrl);
})
.then(response => response.json())
.then(posts => {
loadingIcon.style.display = 'none'; // Hide the loading icon
if (posts.length === 0) {
relatedContainer.innerHTML += '<p>No related items found.</p>';
return;
}
posts.forEach(post => {
const postElement = document.createElement('div');
postElement.classList.add('related-posts');
const thumbnail = `<div class="related-music-icon-post" aria-hidden="true"></div>`;
const title = `
<div class="related-title">
<h3><a href="${post.link}">${post.title.rendered}</a></h3>
</div>
`;
postElement.innerHTML = thumbnail + title;
relatedPostsList.appendChild(postElement);
});
})
.catch(error => {
console.error('Error fetching related posts:', error);
loadingIcon.style.display = 'none'; // Hide the loading icon
relatedContainer.innerHTML += '<p>Failed to load related items.</p>';
});
});
तृतीय चरण
अब css की मदद से अपने related items को डिजाइन करें । मै सिर्फ loading icon के लिए css कोड नीचे दे रहा हूँ ।
#loading-icon {
display: none; /* Initially hidden */
text-align: center;
font-size: 1.2em;
color: #666;
margin: 20px 0;
}
/* Optional: Add spinner styles */
#loading-icon:before {
content: '';
display: inline-block;
width: 26px;
height: 26px;
margin-right: 8px;
border: 3px solid #ccc;
border-top-color: #0073aa;
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
इन सभी कोड का इस्तेमाल कर के आप अपने वॉर्डप्रेस की website मे रिलेटेड आइटम को दिखा सकते हैं ।