ಹೊಸನಗರ

ಹೌದು 👍 ಇದೇ ನಿಮ್ಮ ಸಂಪೂರ್ಣ code. ಈಗ ನನಗೆ exact structure ಸಿಕ್ಕಿದೆ. ನಿಮ್ಮ HTML/CSS ಅನ್ನು ಬದಲಾಯಿಸುವ ಅಗತ್ಯವಿಲ್ಲ.

ನಿಮ್ಮ JavaScript tab ಖಾಲಿ ಇದೆ, ಅದಕ್ಕೇ ಈಗ news static ಆಗಿದೆ.

ಈಗ ಒಂದೇ ಕೆಲಸ ಮಾಡಿ 👇

JavaScript tab → ಕೆಳಗಿನ code ಅನ್ನು ಸಂಪೂರ್ಣವಾಗಿ paste ಮಾಡಿ:

document.addEventListener(“DOMContentLoaded”, function () {

  const API =
    window.location.origin +
    “/wp-json/wp/v2/posts?per_page=5&orderby=date&order=desc&_embed”;

  function cleanText(text) {
    const div = document.createElement(“div”);
    div.innerHTML = text || “”;
    return div.textContent.trim();
  }

  function getCategory(post) {
    try {
      const terms = post._embedded[“wp:term”];
      const cats = terms.find(t => t[0] && t[0].taxonomy === “category”);
      return cats && cats[0] ? cats[0].name : “ಸುದ್ದಿ”;
    } catch (e) {
      return “ಸುದ್ದಿ”;
    }
  }

  function getImage(post) {
    try {
      return post._embedded[“wp:featuredmedia”][0].source_url;
    } catch (e) {
      return “”;
    }
  }

  function getExcerpt(post) {
    return cleanText(post.excerpt.rendered)
      .replace(/\s+/g, ” “)
      .substring(0, 180) + “…”;
  }

  function getDate(post) {
    const date = new Date(post.date);
    return date.toLocaleDateString(“kn-IN”, {
      day: “numeric”,
      month: “short”,
      year: “numeric”
    });
  }

  fetch(API)
    .then(response => {
      if (!response.ok) throw new Error(“News API error”);
      return response.json();
    })
    .then(posts => {

      if (!posts.length) return;

      /* =========================================
         FEATURED NEWS — Latest Post
      ========================================= */

      const featured = document.querySelector(“.mv-featured”);

      if (featured && posts[0]) {

        const post = posts[0];
        const title = cleanText(post.title.rendered);
        const category = getCategory(post);
        const image = getImage(post);
        const excerpt = getExcerpt(post);

        const imageBox =
          featured.querySelector(“.mv-image”);

        const categoryBox =
          featured.querySelector(“.mv-category”);

        const titleBox =
          featured.querySelector(“h3”);

        const descriptionBox =
          featured.querySelector(“.mv-description”);

        const readButton =
          featured.querySelector(“.mv-read”);

        if (imageBox && image) {
          imageBox.style.backgroundImage =
            `url(“${image}”)`;
          imageBox.style.backgroundSize = “cover”;
          imageBox.style.backgroundPosition = “center”;
          imageBox.querySelector(“.mv-image-label”)?.remove();
        }

        if (categoryBox) {
          categoryBox.textContent = category;
        }

        if (titleBox) {
          titleBox.textContent = title;
        }

        if (descriptionBox) {
          descriptionBox.textContent = excerpt;
        }

        if (readButton) {
          readButton.href = post.link;
        }
      }


      /* =========================================
         LATEST NEWS — Next 4 Posts
      ========================================= */

      const cards =
        document.querySelectorAll(“.mv-news-card”);

      cards.forEach((card, index) => {

        const post = posts[index + 1];

        if (!post) {
          card.style.display = “none”;
          return;
        }

        const title = cleanText(post.title.rendered);
        const category = getCategory(post);
        const image = getImage(post);
        const date = getDate(post);

        const imageBox =
          card.querySelector(“.mv-news-image”);

        const categoryBox =
          card.querySelector(“.mv-category”);

        const titleBox =
          card.querySelector(“h3”);

        const metaBox =
          card.querySelector(“.mv-news-meta”);

        if (imageBox && image) {
          imageBox.style.backgroundImage =
            `url(“${image}”)`;
          imageBox.style.backgroundSize = “cover”;
          imageBox.style.backgroundPosition = “center”;

          imageBox.querySelector(“span”)?.remove();
        }

        if (categoryBox) {
          categoryBox.textContent = category;
        }

        if (titleBox) {
          titleBox.textContent = title;
        }

        if (metaBox) {
          metaBox.textContent = date;
        }

        card.style.cursor = “pointer”;

        card.onclick = function () {
          window.location.href = post.link;
        };

      });


      /* =========================================
         BREAKING NEWS — Latest Post Title
      ========================================= */

      const breaking =
        document.querySelector(“.mv-breaking-text”);

      if (breaking && posts[0]) {
        breaking.textContent =
          cleanText(posts[0].title.rendered);
      }

    })

    .catch(error => {
      console.log(“Malenadu Voice News Error:”, error);
    });

});

ಇದು ಮಾಡಿದ ನಂತರ ಏನಾಗುತ್ತದೆ? 🔥

ನೀವು ಮುಂದೆ:

Posts → Add New → News ಬರೆಯಿರಿ → Featured Image ಹಾಕಿ → Category ಆಯ್ಕೆ ಮಾಡಿ → Publish

ಅಷ್ಟೇ. ✅

Homepageನಲ್ಲಿ:

ಹೊಸ Post → Featured thumbnail 🖼️
→ Featured title 📰
→ Category 📂
→ Description 📝
→ Read link 🔗

ಮತ್ತು ಕೆಳಗಿನ Latest News cards ಕೂಡ ಹೊಸ posts ಜೊತೆ ಸ್ವಯಂಚಾಲಿತವಾಗಿ update ಆಗುತ್ತವೆ.

ನಿಮ್ಮ ಈಗಿನ CSS/design ಹಾಗೆಯೇ ಉಳಿಯುತ್ತದೆ.
ನಿಮ್ಮ existing HTMLನ Featured ಮತ್ತು Latest structureಗೆ ಈ script ನೇರವಾಗಿ ಕೆಲಸ ಮಾಡುತ್ತದೆ.

ಈಗ JavaScript tabನಲ್ಲಿ paste ಮಾಡಿ → screenshot ಕಳುಹಿಸಿ.

ಮಲೆನಾಡು ವಾಯ್ಸ್

ಕರ್ನಾಟಕದ ಮಲೆನಾಡು ಭಾಗದ ಸ್ಥಳೀಯ ಸುದ್ದಿ, ಪ್ರಮುಖ ಬೆಳವಣಿಗೆಗಳು, ಸಮಾಜ, ಶಿಕ್ಷಣ, ಸಿನಿಮಾ, ಕ್ರೀಡೆ ಮತ್ತು ಜನಜೀವನದ ಸುದ್ದಿಗಳನ್ನು ಸರಳವಾಗಿ ಹಾಗೂ ವಿಶ್ವಾಸಾರ್ಹವಾಗಿ ತಲುಪಿಸುವ ಡಿಜಿಟಲ್ ಸುದ್ದಿ ವೇದಿಕೆ.