customization - Create a page that dynamically loads data

admin管理员组

文章数量:1426058

I'm wanting to build a page that dynamically loads data into 'sections', very similar to how ebay loads its listings (see below):

As you can see I have highlighted each section in red, is there anyway to achieve this in Wordpress? I currently have Elementor Pro installed and was hoping there would be a widget that could provide this functionality but I'm yet to find anything.

I'm wanting to build a page that dynamically loads data into 'sections', very similar to how ebay loads its listings (see below):

As you can see I have highlighted each section in red, is there anyway to achieve this in Wordpress? I currently have Elementor Pro installed and was hoping there would be a widget that could provide this functionality but I'm yet to find anything.

• customization

Share Improve this question asked May 29, 2019 at 0:59 M0rtyM0rty 10344 bronze badges 4

• where is the data coming from? according to that there would be entirely different solutions to do this, which may already exist or not. – majick Commented May 29, 2019 at 2:43
• @majick Data is coming from an API I have built. I'm fairly new to Wordpress hence my lack of knowledge. Not sure what other tags to use on this post too. – M0rty Commented May 29, 2019 at 3:33
• I guess it depends on whether you want to pull the data from the API each pageload and display it dynamically, or sync the data regularly into custom posts so it is cached... in the first case you could have a shortcode which outputs a template, in the second you could create a custom archive page template that displays the posts. neither are particularly easy options depending on your skill level. – majick Commented May 29, 2019 at 4:41
• @majick I would want to pull the data from the API each pageload. Would you know a tutorial where I could learn how to create a shortcode that outputs a template? – M0rty Commented May 29, 2019 at 4:45

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

You can create a shortcode function to use in your content eg. [data-display] which you would place in your custom plugin, child theme's functions.php, or /wp-content/mu-plugins/ folder:

add_shortcode('data-display', 'custom_api_data_display');
function custom_api_data_display($atts) {

    // for whatever you API call function is
    // you may want check $_REQUEST or shortcode $atts to modify
    $args = array('some_key' => 'some_value', 'some_key2' => 'some_value2');
    $data = custom_api_data_request($args);

    if (count($data) > 0) {
        $html = '<div class="result-container">';
        foreach ($data as $result) {
            $html .= '<div class="single-result">';

                // output whatever data result keys you like here
                // this is just a simple example with image, title and description
                $html .= '<img class="result-image" src="'.$result['image_url'].'">';
                $html .= '<div class="result-title">'.$result['title'].'</div>';
                $html .= '<div class="result-description">'.$result['description'].'</div>';

            $html .= '</div>';
        }
        $html .= '</div>';
    } else {
        $html = '<p>No results found.</p>';
    }

    return $html;
}

Noting that $atts are the shortcode attributes passed in the content, eg. [data-display category="cat1"] will give $atts as array data of array('category' => 'cat1');

Of course you would need to add further layers to enable search filtering functions, and these parameters could be checked via $_REQUEST

本文标签： customizationCreate a page that dynamically loads data