Skip to content

Coda Slider Youtube Video Slider

Ik ben een hele tijd op zoek geweest naar een goede een relatief eenvoudige wijze om op een WordPress website Youtube video’s te sliden. Ben een hele poos in de weer geweest met SlideDeck Lite, maar dat bleek een grote #fail te zijn. Cross browser werkte het eenvoudigweg niet. Er waren problemen om SlideDeck met andere Videoplugins te laten samenwerken d.m.v. shortcodes en direct embedden van Flash bestanden leek alleen te werken in mijn favoriete browser Firefox. Toen besloot ik terug naar de basis te gaan en Coda Slider’s jQuery oplossing te gebruiken voor mijn Youtube video slideshow.

Er was al wel een WordPress plugin hiervoor aanwezig – WP Coda Slider, maar deze deed niet echt wat ik wilde zonder de nodige aanpassingen. Ik wilde namelijk Youtube video’s vanuit een Custom Post Type laden. Custom Post Types zijn in feite content weergaven op maat. Met een Custom Post Type kun je naast de standaard pagina en postweergave je eigen content type aanmaken en zelfs met custom taxonomies een aparte permalinkstructuur geven. Verder kunnen Custom Post Types mooi als aparte menublokken met titel en eigen posts – onder andere contentnaam – worden weergeven zoals dat ook met een plugin kan.

Coda Slider Code

Eerst downloaden we de Coda Slider Code van Niall Doherty’s website. Wij zetten de volgende bestanden in de map ons-thema/codaslider:

  • coda-slider-2.0.css
  • jquery.coda-slider-2.0.js
  • jquery.easing.1.3
  • reset.css

Coda Slider PHP

In ons-thema/lib/script zetten we codaslider.php met de volgende code om alle zaken te laden:


<?php    $baseURL   = get_bloginfo('stylesheet_directory');    ?>
<link rel="stylesheet" href="<?php echo $baseURL."/codaslider/reset.css"; ?>" type="text/css" media="screen" />
<link rel="stylesheet" href="<?php echo $baseURL."/codaslider/coda-slider-2.0.css"; ?>" type="text/css" media="screen" />

<script type="text/javascript" src="<?php echo $baseURL."/codaslider/jquery.easing.1.3.js"; ?>"></script>
<script type="text/javascript" src="<?php echo $baseURL."/codaslider/jquery.coda-slider-2.0.js"; ?>"></script>

<script type="text/javascript">
jQuery(document).ready(function($) {
 $('#coda-slider-1').codaSlider( {dynamicArrows: false , dynamicTabsAlign:'left' } );
 });
</script>

Al deze script hebben een MIT licentie en zijn te gebruiken voor commerciële doeleinden.

Dan moet het codalider script geladen worden. Daarvoor voegen we de volgende regel toe aan ons thema’s functions.php:

 include(CHILDTEMPLATEPATH . '/lib/scripts/codaslider.php');

NB Het include pad kan in jouw geval anders zijn als je niet met een kindthema werkt en niet

define('CHILDTEMPLATEPATH', dirname(__FILE__ ) );   //.'/child-theme' );

in je functions.php hebt staan om dat pad te definiëren.

Registreren Custom Post Type

Zoals gemeld willen we een Custom post Type gebruiken om onze Youtube video links zo gemakkelijk in een CPT Post te plaatsen en in de slider te laden. Om je nieuwe Custom Post Type toe te voegen aan je Dashboard en de nodige functionaliteit te geven voeg je de volgende code toe aan je functions.php


// Youtube Slider Custom Post Type

register_post_type(
 'youtubeslider',
 array(
 'labels' => array(
 'name' => __( 'Youtube Slider' ),
 'singular_name' => __( 'Youtube Slide' ),
 ),
 'public' => true,
 'supports' => array(
 'title',
 'editor',
 'author',
 'excerpts',
 'custom-fields',
 'revisions',
 'thumbnail')
 )
);

Laden Custom Post Type Posts

Om de slider met de Custom Post Type posts met de Youtube links te laden op een pagina naar keuze moeten we de volgende code laden:

<?php  query_posts( 'post_type=youtubeslider&orderby=date&order=ASC'); ?>
<div id="homeup">
<div>
 <div id="coda-slider-1">
 <?php while (have_posts()) : the_post(); ?>
 <?php $youtubeurl = get_the_content(); ?>
 <div>
 <div>
 <h2><?php the_title(); ?></h2>
 <div style="height:350px;"><!-- Extra div helps us set the correct height when video panel is cross-linked -->
 <object type="application/x-shockwave-flash" style="width:550px; height:350px;" data="<?php echo strip_tags($youtubeurl); ?>">
 <param name="movie" value="<?php echo strip_tags($youtubeurl); ?>" />
 <param name="wmode" value="transparent" />
 </object>
 </div>
 </div>
 </div>
 <?php endwhile; ?>

 </div><!-- .coda-slider -->
</div><!-- .coda-slider-wrapper -->
</div>

Deze code start een aparte query om onze Custom Post Type inhoud te laden.

Weergeven slider op een pagina naar keuze

Deze code kun je toevoegen door deze in een apart phpbestand – sidebar-home-centre-up.php in ons geval – te plaatsen en op een pagina naar keuze te laden als widget / dynamische sidebar:

Deze code op de pagina waar de widget geladen moet worden:


<?php get_sidebar('home-centre-up'); // naam van onze dynamische zijbalk of sidebar ?>
<?php //get_sidebar('home-centre-up'); ?>

De Dynamische sidebar registreren door deze code in je functions.php te plaatsen als je de zaken dynamisch wilt laden:


if ( function_exists('register_sidebar') )
register_sidebar(array(
'name' => 'home-centre-up',
'before_widget' => '',
'after_widget' => '',
'before_title' => '<div>',
'after_title' => '</div>',
));

Als je een andere naam wil dan kan dat, maar zorg ervoor dat je het bestand sidebar-home-centre-up.php en de naam in functions.php aanpast alsmede de de naam in de

 get_sidebar('')

Eindresultaat

Als alles goed is gegaan is het eindresultaat een mooie jQuery gebaseerde slider met Youtube Video’s naar keuze gemaakt met de Coda Slider Code en Custom Post Types die eruit ziet zoals de Featured image aan het begin van dit artikel. Voor een demo zie http://www.ndoherty.biz/demos/coda-slider/2.0/ voorbeeld 7. Mocht je een andere stijl willen dan zul je de CSS moeten aanpassen. Veel plezier!

Gepubliceerd door Doede op dinsdag 23 november 2010

Van → Wordpress

Nog geen reacties

Laat een reactie achter

NB: XHTML is toegstaan. Je email adres wordt niet gepubliceerd.

Abonneer je op de reacties op dit artikel via RSS

*