Question

我正在 Wordpress 中创建一个项目，并且正在使用 api 将信息获取到站点中。我创建了一个 JavaScript 文件来获取 api 信息。这个 api 在每个结果中都有图像。我想要做的是单击一个图像，将我定向到一个（创建的）详细信息页面，该页面包含有关该特定结果的更多信息（这是我想自己创建的页面）。我对 Wordpress 比较陌生，所以我希望到目前为止我做得对。

这是我在 JS 中的代码

const siteID = window.gamerRevData.siteID; // gamerRevData from functions.php

for(let i=2; i < 7; i++) {

    let gameUrls = fetch("https://api.rawg.io/api/games?page=" + i).then(res => res.json());

    const retrieveAll = async function() {
        let results = await Promise.all([gameUrls]);
        let gameResults = results[0].results;
 
        for(let j=0; j < gameResults.length; j++) {

            console.log(gameResults[j]);

            const gamePlatforms = gameResults[j].platforms;
            const gameName = gameResults[j].name;
            const gameSlug = gameResults[j].slug;
            const gameImg = gameResults[j].background_image;
            const gameRating = gameResults[j].rating;
            const gameRelease = gameResults[j].released;
            const gameID = gameResults[j].id;

            function htmlOutput () {
                
                gameList.innerHTML += `
                <a href=' **LINK TO A DETAILS PAGE ABOUT THE GAME** >'
                 <img width='480' src='${gameImg}' alt=${gameSlug}>
                 <li>${gameName}</li>
                 <li>${gameRating}</li>
                 <li>${gameRelease}</li>
                </a>
                `
            }

           for(let k=0; k < gamePlatforms.length; k++) {
                let platformID = gamePlatforms[k].platform.id;

                // Playstation 5
                if(platformID == 187 && siteID == "5") {
                    htmlOutput();
                }

                // Playstation 4
                if(platformID == 18 && siteID == "8") {
                    htmlOutput();
                }

                // Xbox S/X
                if(platformID == 186 && siteID == "10") {
                    htmlOutput();
                }

                // Xbox One
                if(platformID == 1 && siteID == "12") {
                    htmlOutput();
                }

                // Nintendo Switch
                if(platformID == 7 && siteID == "14") {
                    htmlOutput();
                }

                // PC
                if(platformID == 4 && siteID == "16") {
                    htmlOutput();
                }
            } // end loop
        } // end loop
    }(); // end async function
} // end loop

和 page.php

<?php 
    get_header();
    
    while(have_posts()) {
        the_post(); ?>

        <h1><?php the_title(); ?></h1>

        <ul id="gameList">
            
        </ul>

        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. 
        Sapiente necessitatibus minima blanditiis dicta harum dolore quisquam, 
        voluptatem ducimus expedita corporis voluptas at autem fuga repellat perspiciatis!
         Dolore eum nulla corrupti?</p>

    <?php }

    get_footer(); 
 
?>

和functions.php

<?php

function gamerRevolutionFiles () {
    wp_enqueue_script("gamer_revolution_script", get_theme_file_uri("/js/script.js"), NULL, 1.0, true); // JavaScript
    wp_enqueue_style("bootstrap", "//stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"); // Bootstrap
    wp_enqueue_style("gamer_revolution_styles", get_stylesheet_uri()); // CSS
    wp_localize_script("gamer_revolution_script", "gamerRevData", array(
        "siteID" => get_the_ID()
    ));
}

add_action("wp_enqueue_scripts", "gamerRevolutionFiles");

function gamerRevolutionTitle() {
    add_theme_support("title-tag");
}

add_action("after_setup_theme", "gamerRevolutionTitle");

不确定您是否还需要其他任何东西。提前致谢。

在 Wordperss 中从 API 创建详细信息页面

0 个答案: