Ajouter un bouton Youtube dans l’éditeur wordpress

2 février 2012 dans Tutoriels Wordpress

Article destiné aux personnes ayant quelques bases sur wordpress pour ajouter sans plugin une icône Youtube dans l’éditeur WordPress et ainsi ajouter facilement des vidéos Youtube dans ses articles ou pages.

L’administrateur du site wordpress à juste besoin de faire un copier/coller de l’url de sa video Youtube pour l’afficher dans son article.

sources disponible en fin d’article

Utilisation des Shortcodes :

Les shortcodes, sous WordPress (version 2.5+) sont des mini codes à placer dans vos articles ou pages, dans le but d’exécuter des fonctions définies ils utilisent pour cela l’API des shortcodes WordPress.

Etape 1 : fichier functions.php du thème.

1)Coller le code php ci-dessous dans votre fichier functions.php par exemple au début du fichier après la balise <?php :

/*Debut Youtube shortcode*/
	function addYouTube($atts, $content = null) {
        extract(shortcode_atts(array( "id" => '' ), $atts));
        // ci-dessous hauteur et largeur generique a definir
		return '<iframe width="700" height="386" src="http://www.youtube.com/embed/'.$id.'" frameborder="0" allowfullscreen></iframe>';
	}
	add_shortcode('youtube', 'addYouTube');
	function add_youtube_button() {
   // Verification des permissions du membre :
   if ( ! current_user_can('edit_posts') && ! current_user_can('edit_pages') )
     return;

   // Ajout du bouton en mode visuel uniquement
   if ( get_user_option('rich_editing') == 'true') {
     add_filter("mce_external_plugins", "add_youtube_tinymce_plugin");
     add_filter('mce_buttons', 'register_youtube_button');
   }
   function register_youtube_button($buttons) {
	   array_push($buttons, "|", "youryoutube");
	   return $buttons;
	}
	// chargement du fichier editor_plugin.js qui doit etre place dans le repertoire js de votre thème
	function add_youtube_tinymce_plugin($plugin_array) {
	   $plugin_array['youryoutube'] = get_bloginfo('template_url').'/js/editor_plugin.js';
	   return $plugin_array;
	}
	}
	function my_refresh_mce($ver) {
		$ver += 3;
		return $ver;
	}
	add_filter( 'tiny_mce_version', 'my_refresh_mce');
	add_action('init', 'add_youtube_button');
/* fin youtube shortcode */

2)Ligne 5 : »<iframe width= »700″ height= »386″ remplacer les valeurs par vos propres tailles en pixels.

Etape 2 : ajout du fichier editor_plugin.js

1)Dans le répertoire » js » de votre thème (il est possible que sur certain thème ce répertoire n’existe pas il suffit  donc de le créer)

2)Créer un nouveau fichier et nommer ce fichier « editor_plugin.js » et coller ce code dans ce dernier :

(function() {
	tinymce.create('tinymce.plugins.YourYouTube', {
		init : function(ed, url) {
			ed.addButton('youryoutube', {
				title : 'Vidéo Youtube',
				image : url+'/youtube.png',
				onclick : function() {
					idPattern = /(?:(?:[^v]+)+v.)?([^&=]{11})(?=&|$)/;
					var vidId = prompt("YouTube Video", "Entrez l'identifiant ou l'url de la vidéo youtube.");
					var m = idPattern.exec(vidId);
					if (m != null && m != 'undefined')
						ed.execCommand('mceInsertContent', false, '[youtube id="'+m[1]+'"]');
				}
			});
		},
		createControl : function(n, cm) {
			return null;
		},
		getInfo : function() {
			return {
				longname : "YouTube Shortcode",
				author : 'Brett Terpstra',
				authorurl : 'http://brettterpstra.com/',
				infourl : 'http://brettterpstra.com/',
				version : "1.0"
			};
		}
	});
	tinymce.PluginManager.add('youryoutube', tinymce.plugins.YourYouTube);
})();

Etape 3 : ajouter l’image du bouton youtube

1)Enregistrer l’ image ci-dessous sur votre ordinateur et copier la dans votre repertoire js de votre thème au même niveau que le fichier editor_plugin.js.

Téléchargement des sources (format Zip) :

Source bouton youtube pour wordpress (471)