shortcode – wtyczka wstawia treść przed treścią strony
Mam wtyczkę, która pobiera dane komiksów z API Marvela. Przypisałem mu krótki kod. Kiedy umieszczam krótki kod na stronie, wykonuje on następujące czynności:
Zanim:
Po wstawieniu krótkiego kodu wygląda to tak:
add_shortcode( 'comic_data', 'get_comics_api' );
W ten sposób zdefiniowałem krótki kod^
Wyciąganie API działa poprawnie, oto pełny kod prowadzący do wywołania API:
defined( 'ABSPATH' ) or die;
//give us a menu item with a preview page
add_action( 'admin_menu','marvel_add_menu_page' );
//make available for shortcode use
add_shortcode( 'comic_data', 'get_comics_api' );
//setup the simple menu
function marvel_add_menu_page(){
add_menu_page(
'Marvel Comics/Movie API',
'Marvel Comics/Movie API',
'manage_options',
'comics-api',
'get_comics_api',
'dashicons-book',
16
);
}
function get_comics_api(){
//set all the url params needed
//hid this because it has private key
//build the url
$url = $urlbase.$timestamp.$apikeystring.$hashholder.$hashme.$daterange;
//prep the response
$args = array(
'headers' => array(
'Content-Type' => 'application/json'
),
'body' => array(),
);
//get the response
$response = wp_remote_get( $url, $args );
//decode the json
$results = json_decode(wp_remote_retrieve_body( $response ));
echo "<div class="comic-container" style="width:1200px; height:auto; max-width: 1200px;">"; //container-div
//pull in the items
foreach($results as $thing){
foreach ($thing->results as $comic ) {
echo "<div class="comic-content" style="width:200px; height:312px; display:inline-flex;">"; //content div
//Create the div with the pic and title, assign ID+push for modal toggle
echo "<div id='".$comic->id."push'><img src=" .$comic->thumbnail->path . ".jpg" style="max-width: 200px; cursor: pointer;"/><br />" . $comic->title . "</div>";
//Create the modal div with the character informationand with ID to match the comic
echo "<div id='" . $comic->id . "modal' style="display: none; position: fixed; z-index: 1; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgb(0,0,0); background-color: rgba(0,0,0,0.4);">
<div id='".$comic->id."content' style="background-color: #fefefe; margin: 20% auto; padding: 20px; border: 1px solid #888; width: 50%;">
<p id='".$comic->id."close' style="color: #aaa; float: right; font-size: 28px; font-weight: bold; cursor: pointer;">X</p><p>Additional Characters in this Comic:</p>";
//Grab each character
foreach($comic->characters->items as $characters){
echo "<div>" . $characters->name . "</div>";
}
//Modal JS
echo " <script type="text/javascript">
jQuery('#".$comic->id."push').click(function(){
jQuery('#" . $comic->id . "modal').toggle();
});
jQuery('#".$comic->id."close').click(function(){
jQuery('#" . $comic->id . "modal').toggle();
});
</script>
</div></div>";
//end modal & content divs
}
}
echo "</div>"; //close .comic-content div
echo "</div>"; //close .comic-container div
}
Wszelkie wskazówki będą bardzo mile widziane — to moja pierwsza wtyczka.
