The playlist shortcode requires Javascript which loads in the footer of the site for you if the shortcode is used.
As the site has already loaded the initial post and that initial post does not have the shortcode in use, then the Javascript is not loaded.
You would have to load the Javascript required for the playlist shortcode yourself so the shortcode is supported.
You can find the source for the Javascript here: https://core.trac.ww.wp.xz.cn/browser/trunk/src/wp-includes/media.php#L1871
Here is a tutorial that might help you.
https://gomakethings.com/how-to-conditionally-load-stylesheets-and-javascript-in-wordpress-only-if-a-shortcode-is-used/
There is also documentation for Auto Load Next Post. https://github.com/seb86/Auto-Load-Next-Post/wiki
Thank you very much !! Your links were very helpful, i am know able to see a playlist with your amazing plugin 😀
Nice. Could you please share what you did to get the playlist shortcode working so I can add it to the documentation for others?
Sure !
In functions.php inside the function dedicated to include scripts i put:
if( is_single() ) {
wp_enqueue_script('backbone'); // BackboneJS required library
wp_enqueue_style( 'wp-mediaelement' ); // CSS for playlist and medias
}
In functions.php
/**
* If the site has already loaded the initial post and that initial post..
* does not have the playlist shortcode in use, then the Javascript is not loaded.
*
* We have to load the Javascript, CSS and template files manually for playlist shortcode to work..
* with auto_load_next_post
*
* @param -
* @return -
*/
function manage_playlist_shortcode_js() {
// Get the $post object
global $post;
// Only load scripts and styles when the post contains our special shortcodes
if ( !is_a( $post, 'WP_Post' ) || !has_shortcode( $post->post_content, 'playlist' ) ) return;
?>
<script>
;function insertAfter(newNode, referenceNode) {
referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
}
var WpMediaElementCSS = document.getElementById('wp-mediaelement-css');
var utilScript= document.createElement('script');
utilScript.type= 'text/javascript';
utilScript.src= '<?php echo network_site_url() . "/" . WPINC ; ?>/js/wp-util.min.js';
var mediaElementScript= document.createElement('script');
mediaElementScript.type= 'text/javascript';
mediaElementScript.src= '<?php echo network_site_url() . "/" . WPINC ; ?>/js/mediaelement/mediaelement-and-player.min.js';
var playlistScript= document.createElement('script');
playlistScript.type= 'text/javascript';
playlistScript.src= '<?php echo network_site_url() . "/" . WPINC ; ?>/js/mediaelement/wp-playlist.min.js';
insertAfter( utilScript, WpMediaElementCSS );
insertAfter(mediaElementScript, utilScript);
// Avoid Asynchronous issues
setTimeout(function(){ insertAfter( playlistScript, mediaElementScript ); }, 3000);
</script>
<?php
}
/* This code is exactly the same that WordPress uses in media.php */
function load_playlist_templates() {
// Get the $post object
global $post;
// Only load scripts and styles when the post contains our special shortcodes
if ( !is_a( $post, 'WP_Post' ) || !has_shortcode( $post->post_content, 'playlist' ) ) return;
?>
<script type="text/html" id="tmpl-wp-playlist-current-item">
<# if ( data.image ) { #>
<img src="{{ data.thumb.src }}" alt="" />
<# } #>
<div class="wp-playlist-caption">
<span class="wp-playlist-item-meta wp-playlist-item-title"><?php
/* translators: playlist item title */
printf( _x( '“%s”', 'playlist item title' ), '{{ data.title }}' );
?></span>
<# if ( data.meta.album ) { #><span class="wp-playlist-item-meta wp-playlist-item-album">{{ data.meta.album }}</span><# } #>
<# if ( data.meta.artist ) { #><span class="wp-playlist-item-meta wp-playlist-item-artist">{{ data.meta.artist }}</span><# } #>
</div>
</script>
<script type="text/html" id="tmpl-wp-playlist-item">
<div class="wp-playlist-item">
<a class="wp-playlist-caption" href="{{ data.src }}">
{{ data.index ? ( data.index + '. ' ) : '' }}
<# if ( data.caption ) { #>
{{ data.caption }}
<# } else { #>
<span class="wp-playlist-item-title"><?php
/* translators: playlist item title */
printf( _x( '“%s”', 'playlist item title' ), '{{{ data.title }}}' );
?></span>
<# if ( data.artists && data.meta.artist ) { #>
<span class="wp-playlist-item-artist"> — {{ data.meta.artist }}</span>
<# } #>
<# } #>
</a>
<# if ( data.meta.length_formatted ) { #>
<div class="wp-playlist-item-length">{{ data.meta.length_formatted }}</div>
<# } #>
</div>
</script>
<?php
}
add_action('alnp_load_after_content', 'load_playlist_templates');
People who have a custom content-partial.php file (like me) have to add these lines in their {my_theme_folder}\auto-load-next-post\content-partial.php:
<!-- Your Post Content !-->
<?php do_action('alnp_load_after_content'); // Required Hook ?>
<?php if ( is_a( $post, 'WP_Post' ) && has_shortcode( $post->post_content, 'playlist' ) ) : ?>
<?php manage_playlist_shortcode_js(); ?>
<?php endif; ?>
-
This reply was modified 9 years, 2 months ago by
emsiledock.
Fantastic. Can’t wait to try it out. So you required the need of the global $post I see. Would that be better if the action hook passed that through so you can keep the template clean and hook the code instead?
For example:
<?php do_action('alnp_load_content_after_content', $post); ?>
Well my code isn’t really optimized. The new hook can make it work in a more proper way, without using globals, so i think it’s a good idea 🙂
The JavaScript can be upgraded too to avoid repetitions
Sorry it is not a new hook. Typo.
<?php do_action('alnp_load_after_content', $post); ?>
As for your JavaScript it would be great if it was formatted in jQuery.
