imath

Ça faisait un moment que je n’avais pas consacré un article à WordPress, trop occupé sans doute à explorer les possibilités de BuddyPress… Aujourd’hui je vous propose un petit tutoriel pour créer une page de Live Blogging.

En fait l’idée est de disposer d’un outil simple pour « retransmettre en direct » un évènement, un peu à la manière de « yahoo live », sauf que dans mon cas il s’agit de conférences dans le cadre de mon taf :).

2013-02-13 : Update !!

Voici un child thème pour twentytwelve qui adapte le tuto en profitant notamment des tax query. Il suffit d’ajouter le shortcode expliqué dans la suite du tuto, de définir un post meta du nom de duration avec une valeur en millisecondes pour la page qui accueillera vos live posts. Tested on WP 3.5.1.

---

2012-04-25 : Update !!

Thanks to Roger, i’ve fixed the ajaxurl issue.. To make things easier i’ve packed the scripts into a twentyeleven child theme. Tested on WordPress 3.4 beta 3.

---

Pour arriver à cet objectif voici ma recette :

1. Votre WordPress (version 3.0 minimum)
2. Un custom post type
3. Une custom taxonomy de type tag
4. Un soupçon de shortcode API
5. Une pincée d’ajax
6. Une page « LIve » WP assaisonnée d’un post-meta
7. 0 plugin
8. Garniture optionnelle : un modèle de page 😉

Notre marmitte sera le script functions.php de notre thème actif, un script bien utile et pratique !

Commençons par le custom post type et la custom taxonomy :

Le custom post type a un avantage c’est qu’il n’est pas inclus par défaut dans le loop des posts classiques, du coup pour notre cas, nous ne prenons pas le risque de mélanger les genres ! On peut éventuellement s’en passer en utilisant une catégorie qu’on exclue du loop principal, du search, des archives… mais c’est vraiment se compliquer la vie et écrire en dur des ID de catégorie, j’aime pas trop. Si vous souhaitez en savoir plus, je vous conseille une nouvelle fois le blog de Justin Tadlock qui explique admirablement le concept de ce contenu particulier.

Pour ajouter nos contenus personnalisés, il s’agit d’ajouter un hook à l’évènement d’init de WordPress, voici donc le début de notre tambouille :

<?php
function function imath_live_post() {
    register_post_type( 'live-post', array(
        'label'           => __( 'Live Posts' ),
        'singular_label'  => __( 'Live Post' ),
        'public'          => true,
        'show_ui'         => true,
        'capability_type' => 'post',
        'hierarchical'    => false,
        'rewrite'         => false,
        'query_var'       => true,
        'supports'        => array( 'title', 'editor', 'author' )
    ) );
    
    register_taxonomy_for_object_type( 'live-tags', 'live-post' );
}
add_action( 'init','imath_live_post' );

function imath_live_taxonomies() {
    register_taxonomy( 'live-tags','live-post', array(
        'hierarchical' => false,
        'label'        => 'Live Tags',
        'query_var'    => true,
        'rewrite'      => false
    ) );
}
add_action( 'init', 'imath_live_taxonomies' );

NB : si vous préférez un type catégorie pour la taxo, changer dans le register_taxonomy la valeur de hierarchical pour true. Une fois que vous avez ajouté et enregistré ce code dans votre functions.php, vous allez retrouver un nouveau menu dans votre administration WordPress, comme illustré ci-dessous :

Poursuivons par la shortcode API

Pour que ça soit plus simple au moment de configurer notre page « Live », l’utilisation de cette API est très intéressante puisqu’en fait elle nous permet de directement et simplement déclencher notre loop personnalisé tout en lui passant des paramètres. Dans notre cas nous lui passerons le « slug » du tag, vous l’aurez compris ce tag nous permettra le cas échéant d’organiser plusieurs retransmissions différentes

<?php
function function imath_live_event_handle_shortcode( $atts ) {
    extract( shortcode_atts( array(
        'ref' => '0'
    ), $atts ) );
    
    // didn't manage to make ajax requests with custom taxonomies
    $custom_tag_id = get_term_by( 'slug', $ref, 'live-tags' );
    
    // to check if there's a new post
    $check_latest = 0;
    
    // time to wait till next ajax call
    $duration = get_post_meta( get_the_ID(), 'duration', true );
    
    // it works when no ajax
    query_posts( 'taxonomy=live-tags&term=' .$ref. '&posts_per_page=-1' ); ?>
        <div id="event-countdown" style="border-bottom:solid 1px #CCC;margin-bottom:10px">
            Prochaine mise á jour dans <span><?php echo $duration/1000;?></span> sec(s)
        </div
        <div id="event-container">
        
            <?php if ( have_posts() ) : while ( have_posts() ) : the_post();
                if( $check_latest == 0 ) {
                    $the_latest = get_the_ID() ;
                } ?>
                
                <div class="live-post">
                    <h5><?php the_time("G:i");?> <?php the_title();?></h5>
                    <div class="live-content"><?php the_content();?></div>
                </div>
            
            <?php $check_latest +=1;   endwhile; else:   ?>
                <b>L'évènement n'a pas démarré, merci de revenir plus tard...</b>
            <?php endif; ?>
        </div>

        <?php wp_reset_query(); ?>
        
        <!--Beginning of the auto refresh code-->
        <script type="text/javascript">
            var live_interval = <?php echo $duration;?>/1000;
            var i=1;
            
            function refreshCountDown() {
                next_live = live_interval - i;
                jQuery( '#event-countdown span' ).html( next_live );
                
                if( next_live == 0 ) { 
                    i=0;
                }
                
                i+=1;
            }
            
            jQuery( document ).ready( function( $ ) {
                set_latest( <?php echo $the_latest;?> );
                
                //funtion for the countdown
                countDown = setInterval( function() {
                    refreshCountDown();
                }, 1000 );
                
                // ajax calls each $duration/1000 seconds
                refreshLive = setInterval( function() {
                    live_event_get_latest( the_new, <?php echo $custom_tag_id->term_id;?>);
                }, <?php echo $duration;?> );
            } );

        </script>
        
        <!--End of the auto refresh code-->
    <?php
}
add_shortcode( 'live-event', 'imath_live_event_handle_shortcode' );

Le shortcode à ajouter à notre page se présentera ainsi [live-event ref= »slug-du-tag »]. Ainsi lorsque WordPress rencontre le shortcode live-event, il appelle la fonction imath_live_event_handle_shortcode en lui passant l’attribut ref lequel contiendra le slug de notre tag. $duration récupère le post-meta de la page « Live » permettant ainsi de nous laisser le choix de la durée de l’intervalle en millisecondes. Dans l’exemple de la vidéo, j’ai utilisé 10s (10000 millisecondes). Le query_posts() recherche tous les « live-posts » dont la taxonomy est « live-tags » et le slug la valeur de l’attribut ref.

Ajax pour rafraîchir les « live-posts » sans recharger la page.

Etrangement, je ne sais pour quelle raison, je ne suis pas parvenu à utiliser le query_posts sur une custom taxo en ajax, j’ai donc créé une requête spécifique pour approvisionner la liste des live-posts si toutefois un nouvel id a été publié

<?php
function imath_add_js_live_event() {
    //Your WordPress page must have a this title : Live
    if ( is_page( 'Live' ) ) {
        ?>
        <script type="text/javascript" >
            var the_new;

            function set_latest( val ){
                the_new=val;
            }

            function live_event_get_latest( latest, tag ) {
                if ( ! window.ajaxurl ) {
                    ajaxurl = "<?php bloginfo( 'wpurl' ); ?>/wp-admin/admin-ajax.php";
                }

                var data = {
                    action: 'imath_refresh_event',
                    the_latest: latest,
                    the_tag: tag
                };

                jQuery.post( ajaxurl , data, function( response ) {
                    html = response.split("|");
                    id   = jQuery.trim( html[0] );

                    if( id != 'nonew' ) {
                        jQuery( '#event-container #latest' ).attr( 'id','' );
                        jQuery( '#event-container' ).html( html[1]+jQuery('#event-container"').html() );
                        jQuery( '#latest' ).fadeOut();
                        jQuery( '#latest' ).fadeIn();

                        set_latest( id );
                    }
                } );
            }
        </script>
        <?php
        }
}
add_action( 'wp_head', 'imath_add_js_live_event' );

function imath_refresh_event_stream() {
    global $wpdb;

    $latest = $_POST['the_latest'];
    $tag    = $_POST['the_tag'];

    //didn't manage to make ajax requests with custom taxonomies
    $new_live_posts = $wpdb->get_row( "SELECT ID, post_date, post_title, post_content
        FROM {$wpdb->base_prefix}posts
        LEFT JOIN {$wpdb->base_prefix}term_relationships ON({$wpdb->base_prefix}posts.ID = {$wpdb->base_prefix}term_relationships.object_id)
        LEFT JOIN {$wpdb->base_prefix}term_taxonomy ON({$wpdb->base_prefix}term_relationships.term_taxonomy_id = {$wpdb->base_prefix}term_taxonomy.term_id) WHERE post_type = 'live-post' AND post_status = 'publish' AND term_id='$tag' ORDER BY post_date DESC LIMIT 1");

    if ( $new_live_posts && $new_live_posts->ID > $latest ) {
       echo $new_live_posts->ID."|"; ?>
       <div class="live-post" id="latest">
            <h5><?php echo mysql2date( "G:i", $new_live_posts->post_date, false );
                echo $new_live_posts->post_title;?></h5>
                <div class="live-content"
                    ><?php echo $new_live_posts->post_content;?>
                </div>
            </div>
            <?php
        } else {
            echo "nonew|";
        }

        die();
}
add_action('wp_ajax_imath_refresh_event', 'imath_refresh_event_stream');

Notons que pour éviter de trimballer le code partout dans le blog, il n’est chargé que si c’est la page « Live » qui est affichée. Après avoir ajouter ces deux derniers morceaux de code au functions.php, nous pouvons désormais utiliser notre outil de Live Blogging :).

Ajout de la page « Live »

Il suffit de renseigner le titre « Live » pour cette page, d’insérer le shortcode dans l’éditeur (dans notre exemple, le slug du live-tag est « conference » et d’ajouter un post-meta « duration » dont l’intervalle de temps est exprimé en millisecondes (ici 10s).

Ensuite, pour les questions éventuelles, on peut charger le comment template dans le script page.php et autoriser les commentaires pour cette page. Si vous ne voulez pas toucher au script page.php, il suffit de le copier sous un autre nom, d’en faire un modèle de page et de l’affecter à cette page.

Il ne reste plus qu’à consommer !

Pour cela, il suffit d’ajouter un « live-post » depuis le sous menu « Ajouter » du menu Live posts de l’administration de WordPress, en n’oubliant pas de choisir le tag qui a été inséré dans le shortcode ;).

Voilà, si vous souhaitez télécharger une archive du fichier functions.php ainsi qu’un exemple de modèle de page..