/** * Execute the [wl_navigator] shortcode. * * @return string HTML of the navigator. */ function wordlift_shortcode_navigator() { // avoid building the widget when there is a list of posts. if (!is_single()) { return; } // include slick on page wp_enqueue_script('slick-js', plugins_url('js-client/slick/slick.min.js', __FILE__)); wp_enqueue_style('slick-css', plugins_url('js-client/slick/slick.css', __FILE__)); wp_enqueue_style('slick-theme-css', plugins_url('js-client/slick/slick-theme.css', __FILE__)); wp_enqueue_style('wordlift-slick-css', plugins_url('js-client/slick/wordliftslick.css', __FILE__)); // get posts that will populate the navigator (criteria may vary, see function *wordlift_shortcode_navigator_populate*) // The result array will contains tuples (post_object, entity_object) $related_posts_and_entities = wordlift_shortcode_navigator_populate(get_the_ID()); // build the HTML $counter = 0; $content = '<div id="wl-navigator-widget">'; foreach ($related_posts_and_entities as $related_post_entity) { $related_post = $related_post_entity[0]; $related_entity = $related_post_entity[1]; $thumb = wl_get_the_post_thumbnail_src(get_the_post_thumbnail($related_post->ID, 'medium')); if (empty($thumb)) { $thumb = WL_DEFAULT_THUMBNAIL_PATH; } $context_link = get_permalink($related_entity->ID); $context_name = $related_entity->post_title; $counter += 1; // build card HTML $content .= '<div class="wl-navigator-card"> <div class="wl-navigator-lens" style="background-image:url(' . $thumb . ')"> <span class="wl-navigator-trigger"> <a href="' . get_permalink($related_post->ID) . '">' . $related_post->post_title . '</a> </span> </div> <div class="wl-navigator-context"> <a href="' . $context_link . '">' . $context_name . '</a> </div> </div>'; } $content .= '</div>'; // how many cards $num_cards_on_front = count($related_posts_and_entities); if ($num_cards_on_front > 3) { $num_cards_on_front = 3; } // add js $content .= '<script> $=jQuery; $(document).ready(function(){ // Launch navigator $("#wl-navigator-widget").slick({ dots: false, arrows: true, infinite: true, slidesToShow: ' . $num_cards_on_front . ', slidesToScroll: 1 }); }); </script>'; return $content; }
/** * Execute the [wl_navigator] shortcode. * * @return string HTML of the navigator. */ function wordlift_shortcode_navigator() { // avoid building the widget when there is a list of posts. if (!is_single()) { return ''; } // include slick on page wp_enqueue_script('slick', dirname(plugin_dir_url(__FILE__)) . '/public/js/slick.min.js'); wp_enqueue_style('slick', dirname(plugin_dir_url(__FILE__)) . '/public/css/slick.css'); wp_enqueue_style('slick-theme', dirname(plugin_dir_url(__FILE__)) . '/public/css/slick-theme.css'); wp_enqueue_style('slick-theme-wordlift', dirname(plugin_dir_url(__FILE__)) . '/public/css/slick-theme-wordlift.css'); // get posts that will populate the navigator (criteria may vary, see function *wordlift_shortcode_navigator_populate*) // The result array will contains tuples (post_object, entity_object) $related_posts_and_entities = wordlift_shortcode_navigator_populate(get_the_ID()); // build the HTML $navigator_css_id = uniqid('wl-navigator-widget-'); $content = "<div class='wl-navigator-widget' id='{$navigator_css_id}'>"; foreach ($related_posts_and_entities as $related_post_entity) { $related_post = $related_post_entity[0]; $related_entity = $related_post_entity[1]; $thumb = wl_get_the_post_thumbnail_src(get_the_post_thumbnail($related_post->ID, 'medium')); if (empty($thumb)) { $thumb = WL_DEFAULT_THUMBNAIL_PATH; } $context_link = get_permalink($related_entity->ID); $context_name = $related_entity->post_title; // build card HTML $permalink = get_permalink($related_post->ID); $content .= <<<EOF <div class="wl-navigator-card"> <div class="wl-navigator-lens" style="background-image:url( {$thumb} )"> <span class="wl-navigator-trigger"> <a href="{$permalink}">{$related_post->post_title}</a> </span> </div> <div class="wl-navigator-context"> <a href="{$context_link}">{$context_name}</a> </div> </div> EOF; } $content .= '</div>'; // how many cards $num_cards_on_front = count($related_posts_and_entities); if ($num_cards_on_front > 3) { $num_cards_on_front = 3; } // add js $content .= <<<EOF <script> ( jQuery( function(\$){ \$(document).ready(function(){ // Launch navigator \$('#{$navigator_css_id}').slick({ dots: false, arrows: true, infinite: true, slidesToShow: {$num_cards_on_front}, slidesToScroll: 1 }); }); } ) ); </script> EOF; return $content; }