in love with css

Cadius Zaragoza está de aniversario. Mañana jueves 21 de mayo cumple cuatro añitos y para celebrarlo contará con las ponencias de Javier Cañada, fundador de Cadius y Vostok y de Jorge Fuertes de Hispalinux, entre otros eventos.
Más información en el blog de Torres Burriel y el blog de Cadius Zaragoza.

Ya está en producción el nuevo diseño de Mysofa.es con nuevas funcionalidades y mejor experiencia de usuario: recomendador, estados de los usuarios, mayor protagonismo de las novedades literarias, cine o musicales, fichas completas de películas, discos, autores, etc, 

El trabajo ha sido duro (bueno no tanto ;-)  y lo mejor sin duda está por llegar. Estoy contento de haber conocido y trabajado con un gran equipo de profesionales en MySofa, sólo por esto mudarme 5 meses 900km al norte ha merecido la pena.

¿Y tú a que esperas para hacerte usuario de la comunidad de ocio y cultura  lider en internet?

El jueves 16 de abril, en Barcelona, se celebra el Día del W3C en España, por si a alguien le interesa copy pasteo la información:

El Día W3C en España es un evento que desde hace dos años, se viene celebrando con el objetivo de facilitar un entorno en el que poder establecer un debate sobre el uso de los estándares web y poder conocer las experiencias de empresas y organismos a la hora de utilizar los estándares.
Fechas de interés Día Evento
13 de abril Fecha límite inscripciones
16 de abril Día W3C en España

La jornada de este año que lleva por título La nueva generación de estándares Web tratará temas candentes de la actualidad de los estándares, fundamentales en el crecimiento y evolución de la Web. El Día del W3C en España 2009 está estructurado en tres sesiones orientadas a la aplicación de estándares en el mundo de la empresa y de la investigación.

La inscripción es gratuita, y en Barcelona hace una primavera del carajo.

Más información en la web del evento.

Nos vemos por allí.

Otro plugin tonto para Wordpress.
Está en versión beta, pero por ahora te permite elegir el usuario de twitter (lo lógico es que sea el tuyo), cuántas actualizaciones quieres, por defecto 5, el color de las filas, el tamaño de tu avatar, el mensaje del heading etc.
Ten en cuenta que cuando te lo instales, debes poner tu nombre de usuario, y tus últimas actualizaciones de estatus aparecerán en el sidebar de tu Wordpress. [Nota tu sidebar debe llamarse #sidebar, pero si no es así puedes cambiarlo también desde las variabels de configuración, incluso ponerlo en el footer, header, etc]
El código:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66

<?php
/*
Plugin Name: Last Twitter Statuses
Plugin URI: http://www.albertofortes.com/blog/?p=673
Description: inserta tus últimos estatus de Twitter en tu blog
Author: Alberto Fortes
Version: beta
Author URI: http://www.albertofortes.com
*/
 
function writeTwitter()
{		
	//Configure the plugin:
	$Your_Twitter_Username = 'albertofs';
 
	$Where = '#footer'; // Where put the plugins, by defaul in #sidebar
	$plugin_size = ''; //void to get the size of his parent
	$Howmany_status_display = 5;
	$Size_of_avatar_in_pixels = 23;
	$Heading_n = 'h3'; //h3, h4, h5 or h6 in depends of your code.
	$Heading_Text = 'Últimos Twitters:';
	$zebra_odd_color = '#f0f0f0'; //please, hex with # before or void to none
	$zebra_even_color = '#fff'; //please, hex with # before or void to none
 
 
	$script =	"<script type=\"text/javascript\">\n" .	
				"var MiUrl = '".$Your_Twitter_Username."';\n" .
				"$(document).ready(function(){\n" .
					"$('".$Where."').append('<".$Heading_n.">".$Heading_Text."</".$Heading_n."><div id=\"tweeterWrap\"><ul></ul></div>');\n" .
					"var url = 'http://search.twitter.com/search.json?q=from%3A'+ MiUrl +'&rpp=".$Howmany_status_display."&callback=?';\n" .
					"$.getJSON(url,  function(data){\n" .
						"$.each(data.results, function(i,item){\n" .
							"$('#tweeterWrap ul').append('<li class=\'clearfix\'><img src=\"' + item.profile_image_url +'\" alt=\"' + item.from_user + '\" /><p>'+item.text.replace(/(\w+:\/\/[A-Za-z0-9-_]+\.[A-Za-z0-9-_:%&\?\/.=]+)/gi, '<a href=\"$1\">$1</a>').replace(/[\@]+([A-Za-z0-9-_]+)/gi, '<a href=\"http://twitter.com/$1\">@$1</a>')+' <a class=\'small\' href=\'http://www.twitter.com/'+item.from_user+'/statuses/'+item.id+'\'>'+item.created_at+'</a></p></li>');\n" .
							"$('#tweeterWrap ul li:even').addClass('impar');\n" .
							"$('#tweeterWrap ul li:odd').addClass('par');\n" .
						"});\n" .
						"$('#tweeterWrap ul').after('<p class=\'t-r\'><a href=\"http://twitter.com/' + MiUrl + '\">Visitar mi Twitter &raquo;</a></p>');\n" .
					"});\n" .
				"});\n" .
				"</script>\n";
 
	$style = 	"<style type='text/css' media='screen'>\n" .
				"/*	Plugin para Wordpress para ver tus últimos estatus en el sidebar\n" .
				"	Author: Alberto Fortes\n" .
				"	Author Uri: http://www.albertofortes.com\n" .
				"	Plugin Uri: http//www.albertofortes/blog/\n" .
				"	Version: beta\n" .
				"	Date: 15, march 2009\n" .
				"*/\n" .
				"#tweeterWrap {margin:10px 0; width:".$plugin_size."}\n" .
				"#tweeterWrap ul {margin:0 0 5px 0; padding:5px; border:1px solid #d3d3d3;background: #fff; border-radius:0 5px 5px;-moz-border-radius:0 5px 5px;-ms-border-radius:0 5px 5px;-webkit-border-radius:0 5px 5px;}\n" .
				"#tweeterWrap li {padding: 5px; background: ".$zebra_odd_color.";clear:left;}\n" .
				"#tweeterWrap li a.small {fon-family: verdana; font-size:8px;}\n" .
				"#tweeterWrap li.impar {background: ".$zebra_even_color.";}\n" .
				"#tweeterWrap li.par {background: ".$zebra_odd_color.";border:1px solid #d3d3d3;border-width: 1px 0;}\n" .
				"#tweeterWrap li img {float:left;width:".$Size_of_avatar_in_pixels."px;height:".$Size_of_avatar_in_pixels."px;border:1px solid #ccc; margin: 0 5px 0 0;}\n" .
				"#tweeterWrap li p {line-height:1.2em;font-size: 11px;color:#666;margin:0;}\n" .
				"#tweeterWrap  p.t-r {text-align:right;}\n" .
				"</style>\n";
 
	echo $script . $style;
}
 
add_action('wp_head','writeTwitter');
 
?>

Para configurarlo fácilmente puedes cambiar las variables:

 
function writeTwitter()
{		
	//Configure the plugin:
	$Your_Twitter_Username = 'albertofs';
 
	$Where = '#footer'; // Where put the plugins, by defaul in #sidebar
	$plugin_size = ''; //void to get the size of his parent
	$Howmany_status_display = 5;
	$Size_of_avatar_in_pixels = 23;
	$Heading_n = 'h3'; //h3, h4, h5 or h6 in depends of your code.
	$Heading_Text = 'Últimos Twitters:';
	$zebra_odd_color = '#f0f0f0'; //please, hex with # before or void to none
	$zebra_even_color = '#fff'; //please, hex with # before or void to none

Puedes verlo funcionando en este blog en el sidebar, descargarlo desde aquí, y para instalarlo guardarlo en tu carpeta wp-content/plugins

Requerimientos:
- JQuery, si no lo tienes instalado, puedes bajártelo desde http://jquery.com/

Aquí: preguntas sobre filosofía.
Tratan la filosofía como si fuera quieres ser millonario, presentan un examen de filosofía que se asemeja más al test del examen de conducir que a cualquier intento de reflexión.
Con profesores así no me extraña que:
a) haya gente que piense que la filosofía es dificil, aburrida, obsoleta…
y b) Haya tanto tonto por el mundo.

¡Qué verguenza me han dado!

Hoy he descubierto la presentación de Nicole Sullivan-Hass: OO CSS.
La verdad es que nunca se me ocurrió hablar de Objetos cuando hablo de maquetación modular, que igual tampoco es un adjetivo muy acertado, pero muestra algo que llevo mucho tiempo haciendo, y que me ha valido más de una discusión con algún paleto con aires de grandeza.
Los CSS orientados a objetos se basan en dos pincipios básicos:
1. separar la estructura de la presentación,
y 2. separar contenedor de contenido.

A la práctica esto no quiere decir otra cosa que definamos módulos u objetos como contenedores, atendiendo a su forma, no a su presentación (colores, tipo, backgrounds, etc), son los que Nicole llama Legos, las piezas del puzzle que estammos montado (web). A su vez estos módulos deberían ser dependientes de la estructura general del sitio, a la que también definimos por su forma y no por su contenido (A loos que usais clearfix en vez de darle overflow:hidden a la capa flotante, ¿os va sonando la cosa?).

Sullivan habla de 10 buenas prácticas:

1. Crear una librería básica con elementos comunes. Yo por ejemplo, en las reset.css también icluyo clearfix, el grid system y f-l, f-r, t-r, para floats y text aligns.
2. Nombra semánticamente a tus estilos.
3. Diseña módulos transparentes, o lo que es lo mismo, que la presentación (colores, imágenes de background, etc estén definidos en otra clase)
4. Que nuestras capas sean flexibles y puedan usarse en cualquier parte de la web
5. Usa retícula. Los diseñadores que no maquetan, por favor usad retícula.
6. No uses selectores en tus css. NO pongas nunca: span.small {} pon simplemente .small{}
7. Separa estructura de presentación
8. Separa contenedor de contenido
9. No tengas miedo de usar varias clases dentro de un elemento, una para la estructura principal, otra para presentaciones determinadas, para eso están.
10. Usa reset css (ella dice que use las de la YUI).

Veamos un ejemplo:

[...]
<div id="main_content" class="grid6">
   <div class="block roundedCorners patrocinado">
      <p>En este caso definimos un módulo, block, con ciertos elementos estructurales comunes, tales como el margen, relleno, etc.</p>
      <p>Su tamaño va a ser heredado de un módulo padre que funciona como elemento de la estructura, grid6, que define el número de columnas que tiene la capa main_content dentro de la retícula, en este caso 6 columnas.</p>
       <p>De esta forma vemos que block es un elemento puramente modular, ya que se comporta igual esté en el sidebar o en el main_content, ya que su tamaño lo hereda, no lolleva implícito, y además su presentación está completamente separada de su forma, ya que tanto el hecho de que tenga los bordes redondeados (roundedCorners) y tenga un diseño especial más destacado (patrocinado) es dado por objetos diferenciados</p>
</div>
[...]

En este caso definimos un módulo, block, con ciertos elementos estructurales comunes, tales como el margen, relleno, etc.
Su tamaño va a ser heredado de un módulo padre que funciona como elemento de la estructura, grid6, que define el número de columnas que tiene la capa main_content dentro de la retícula, en este caso 6 columnas.
De esta forma vemos que block es un elemento puramente modular, ya que se comporta igual esté en el sidebar o en el main_content, ya que su tamaño lo hereda, no lolleva implícito, y además su presentación está completamente separada de su forma, ya que tanto el hecho de que tenga los bordes redondeados (roundedCorners) y tenga un diseño especial más destacado (patrocinado) es dado por objetos diferenciados.

¿Qué conseguimos con esto? crear una maquetación perfectamente escalable para sitios vivos, como pueden ser las web 2.0 o comunidades web. Este es el principio que se sigue en la maquetación del próximo diseño de MySofa.es, con ello lograremos que nuevas secciones no definidas en un principio y que todavía puede que ni imaginemos (es un sitio vivo), crezcan de manera natural, no reduplicando estilos, ya que con unas piezas mínimas o legos debe construirse todo el sitio, y como mucho, se extenderán capas que definan la presentación, por las nuevos artes que puedan surgir.
Otra consecuencia importantísima de esta forma de maquetar es la de facilitar a los desarrolladores de lado de servidor (o back end) la creación de nuevas funcionalidades sin la necesidad de crear ellos html o css, sin la necesidad de pedir maquetas previas (ya luego entran los front end para darle la capa de chapa y pintura) y sobre todo sin romper la estructura y tener que pegar sus famosos gritos de auxilio al maquetador cuando todo se descoloca y el footer se pone en la cabecera y otros gajes del oficio.

Otra cosa importantísima, es en cuanto al diseño.
Para mi existen dos tipos de diseñadores web: los que saben (aunque sea poco) de html/css y los que no. Y son estos últimos los que más retrasan y más trabas ponen a una buena maquetación escalable. En principio todo buen diseñador web debería pensar en el contenido y tratar de adaptar las imágenes, la longitud de los textos, etc, a la realidad. además deberían tratar de no multiplicar los entes y aplicar la navaja de Ockham, aplicar una retícula, etc

Ya sin más enrolle os dejo la presentación de Nicole (en inglés):

Quizá alguna vez has necesitado escribir y ejecutar PHP directamente en tu post y te has dado cuenta de que Wordpress lo escapaba. Se acabó el problema: Exec-PHP te permite escribir (en la pestaña HTML claro, no en la visual) y ejecutar PHP directamente desde tu post.
Por ejemplo:

Puedes bajártelo desde aquí e instalarlo en wp-content > plugins. En su web hay bastante documentación.

[Jquery nivel principiante: toggle() y toggleClass()]
Imaginad que queremos usar un efecto toggle en una capa (que cuando hacemos click en un enlace se abra una caja y cuando volvamos a hacer click en el mismo enlace se cierre) pero además queremos que dicho enlace muestre una flechita de abierto cuando la caja está abierta y de cerrado cuando esté cerrada. Es decir esto:

Además queremos que no sea intrusivo, que no halla etiquetas onclick en nuestro html, que si navegamos sin javascript habilitado se muestren todas las capas abiertas, y que además sea fácilmente escalable y extensible. Con Jquery tan sólo necesitamos 7 líneas de código:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

<div class="menu">
	<ul>
		<li><a class="l close" href="#" rev="caja1">Sobre mí</a>
			<div class="ext caja1">
				<p>Hola soy Alberto, diseñador y desarrollador web. Apasionado por los estándares web, la semántica, microformatos, jquery, la web 2.0 y Mac.</p>
				<p>Cada vez que saco un rato estoy cacharreando con el ordenador, estudiando lenguajes de programación de lado de cliente y de servidor, y aún así tengo vida social. Ahora vivo en Barcelona, trabajando en Salir.com y MySofa.es, y aunque estoy muy contento en esta empresa, tarde o temprano volveré a Andalucía, mi tierra.</p>
			</div>
		</li>
		<li><a class="l close" href="#" rev="caja2">¿Dónde estoy?</a>
			<ul class="ext caja2">
				<li><strong>Mi página web:</strong> <a href="http://www.albertofortes.com">www.albertofortes.com</a></li>
				<li><strong>Mi blog:</strong> <a href="http://www.albertofortes.com/blog">www.albertofortes.com/blog</a></li>
				<li><strong>Mis recomendaciones musicales:</strong> <a href="http://www.lastfm.es/user/albertofs">www.lastfm.es/user/albertofs</a></li>
				<li><strong>Mis restaurantes favoritos:</strong> <a href="http://www.salir.com/albertofs">www.salir.com/albertofs</a></li>
				<li><strong>Mi guía de ocio en casa:</strong> <a href="http://www.mysofa.es/albertofs/">www.mysofa.es/albertofs</a></li>
				<li><strong>Mis videos favoritos:</strong> <a href="http://unvlog.com/albertofs/">www.unvlog.com/albertofs/</a></li>
			</ul>
		</li>
		<li><a class="l close" href="#" rev="caja3">Algunos de mis trabajos onine</a>
			<ul class="ext caja3 clearfix">
				<li><a href="http://www.delady.es"><img src="http://www.albertofortes.com/uploads/images/thumb_delady.jpg" alt="thumbnail" /></a></li>
				<li><a href="http://unidiversitat.com/"><img src="http://www.albertofortes.com/uploads/images/thumb_unidiversitat.png" alt="thumbnail" /></a></li>
				<li><a href="http://www.manitasporhoras.com/"><img src="http://www.albertofortes.com/uploads/images/thumb_manitasporhoras.jpg" alt="thumbnail" /></a></li>
				<li><a href="http://www.igente.com/"><img src="http://www.albertofortes.com/uploads/images/thumb_i-gente.jpg" alt="thumbnail" /></a></li>
				<li><a href="http://www.empleomarsans.com/"><img src="http://www.albertofortes.com/uploads/images/thumb_empleomarsans.jpg" alt="thumbnail" /></a></li>
				<li><a href="http://www.unsoloprestamo.com/"><img src="http://www.albertofortes.com/uploads/images/thumb_imagen%203.png" alt="thumbnail" /></a></li>
			</ul>
		</li>
	</ul>
</div>

Y el javascript (recuerda que necesitas llamar a Jquery y meter este código en $(document).ready):

1
2
3
4
5
6
7
8

$('.menu ul li .ext').css('display', 'none'); //ocultamos las capas por js, de esta manera, si el usuario navega con el javascript desactivado, verá las capas
$('a.l').click(function(){
	var R = $(this).attr('rev');
	var D = $('.'+R);
	D.toggle('fast');
	$(this).toggleClass('close');
	return false;
});

Soy un gran aficionado al vino, aunque para nada un experto, me gustan o no, y cómo cualquiera con criterio y paladar, me gustan los buenos.
Las Bodegas de Pago de Almaraes, Benalúa, Granada, tienen unos caldos exquisitos que se los recomiendo a todos los vineros. Desde que me mudé a Barcelona he intentado comprar unas cuantas botellas para dárselas a probar a mis amigos. Llevo bastante tiempo intentando comprar unas botellitas y me ha sido imposible, en ninguna de las cientos de las tiendas especializadas en Barcelona lo tienen, y es una pena, porque no son Ribera ni Rioja, no, están mejor y a un precio muy competitivo.
Hoy estoy de enhorabuena, he descubierto que tienen web, y ya he hecho mi pedido, así que si te gusta el vino y quieres porbar algo bueno y poco conocido entra y compra tus cajas.
Eso si, la web es un poco primigenia, desde aquí les animo a hacerla un poco más profesional y aumentar sus ventas (hasta yo se la haría a cambio de un buen surtido de sus deliciosos caldos ;-)
Recomiendo Memento Syrah y Almaraes Ensamblaje (en la foto), deliciosos.

Crear un plugin de Wordpress es muy sencillo. Crear un plugin de la hostia ya depende de tu imaginación y tus conocimientos técnicos.
Te vendrá bien tener presentes la documentación para el desarrollo de plugin de WP, la de PHP y la API de Youtube.
Vamos a crear un plugin bastante tonto y sin mucha utilidad, salvo la de insertar un video de youtube en nuestros post sin necesidad de insertar el reproductor de flash, con lo que ahorramos espacio en la base de datos, y ejecutamos la acción en el lado de cliente. Quizá la otra gracia sea que así editamos nuestro post de una manera más limpia, sin poner ese engorroso código que no valida ;-)
La idea entonces es crear un plugin de wordpress que nos cree un reproductor de youtube a partir de la dirección (uri) de ese video.
Para que funcione vamos a poner en el editor de wordpress la url de ese video entre [v] y [/v], esto es:

[v]http://blablablabla[/v]

Ahora creamos un archivo PHP en el que debemos poner la meta información de nuestro plugin y lo guardamos en wp-content/plugins:

1
2
3
4
5
6
7
8
9
10

<?php
/*
Plugin Name: Player de YouTube a partir de un link
Plugin URI: http://www.albertofortes.com/blog/?p=666
Description: insertar video de Youtube simplemente cortando y pegando la url del video y poniéndolo entre [v] y [/v]
Author: Alberto Fortes
Version: beta
Author URI: http://www.albertofortes.com
*/
?>

Wordpress necesita estos datos para presentarnos la información del plugin. Si lo guardas en wp-content/plugins y vas al panel de administración > plugins verás que WP ya reconoce nuestro plugin, aunque este no haga nada todavía.

Vamos a crear nuestro plugin. Para captar la url tenemos que echar mano a las expresiones regulares y jugar con las funciones de php:

• preg_match_all: Para buscar en el post los enlaces de youtube que queremos covertir en reproductiores de video
• strtr: para cortar la uri del video y quedarnos con la key
• ereg_replace: Para reemplazar nuestra [v]http://blablablabla[/v] por el video.

Vamos a crear la función y programarla para que recorra el post buscando todo enlace de youtube que esté entre [v] y [/v].
Una aclaración previa, los enlaces a páginas de video de you tube empiezan todas por http://www.youtube.com/watch?v=
seguido de la identificación del video, mientras que los reproductores empiezan por:
http://www.youtube.com/v/ seguido de la id del video.
Por lo que tenemos que buscar http://www.youtube.com/v/VIDEO_ID y quedarnos sólo con VIDEO_ID.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<?php
/*
Plugin Name: Player de YouTube a partir de un link
Plugin URI: URL
Description: insertar video de Youtube simplemente cortando y pegando la url del video y poniéndolo entre [v] y [/v]
Author: Alberto Fortes
Version: beta
Author URI: http://www.albertofortes.com
*/
 
function insertVideo($content)
{
   $buscar = '\[v\](.*?)\[\/v\]';
   preg_match_all("/$buscar/i", $content, $matches);
}
?>

Nuestra función todavía no está terminada, pero ya nos busca dento del post ($content) toda cadena que empiece por [v]http://www.youtube.com/watch?v= y termine por [/v] y gracias a preg_match_all nos mete los resultados en un array.
Ahora tenemos que recorrer dicho array, coger la videoID y meterla dentro de un reproductor de flash:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<?php
/*
Plugin Name: Player de YouTube a partir de un link
Plugin URI: URL
Description: insertar video de Youtube simplemente cortando y pegando la url del video y poniéndolo entre [v] y [/v]
Author: Alberto Fortes
Version: beta
Author URI: http://www.albertofortes.com
*/
 
function insertVideo($content)
{	
   $buscar = '\[v\](.*?)\[\/v\]';
   preg_match_all("/$buscar/i", $content, $matches);
   foreach($matches[0] as $l) {
      $eliminaIni = "[v]http://www.youtube.com/watch?v=";
      $eliminaFin = "[/v]";
      $elimina = array($eliminaIni =>'', $eliminaFin=>'');
      $videoID = strtr($l, $elimina);
      $videoPlayer = "<div style='margin-bottom:20px;'><object width='425' height='355'><param name='movie' value='http://www.youtube.com/v/".strip_tags($videoID)."'></param><param name='wmode' value='transparent'></param><embed src='http://www.youtube.com/v/".strip_tags($videoID)."' type='application/x-shockwave-flash' wmode='transparent' width='425' height='355'></embed></object></div>";
	}
}
?>

Esto recorre el array y recorta las urls de los video de youtube quedándose sólamente con la videoID, e introduce estas en los repoductores de video con la ruta http://www.youtube.com/v/ que es la que equivale a los swf de youtube.

Ahora sólo nos queda sustituir con ereg_replace las [v]rutadelvideoenyoutube[/v] por $videoPlayer y dibujar el contenido. Además como $eliminaIni y $eliminaFin son constantes, las sacaremos del bucle:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<?php
 
function insertVideo($content)
{	
	$eliminaIni = "[v]http://www.youtube.com/watch?v=";
	$eliminaFin = "[/v]";
        $buscar = '\[v\](.*?)\[\/v\]';
	preg_match_all("/$buscar/i", $content, $matches);
        foreach($matches[0] as $l) {
		$elimina = array($eliminaIni =>'', $eliminaFin=>'');
		$videoID = strtr($l, $elimina);
		$videoPlayer = "<div style='margin-bottom:20px;'><object width='425' height='355'><param name='movie' value='http://www.youtube.com/v/".strip_tags($videoID)."'></param><param name='wmode' value='transparent'></param><embed src='http://www.youtube.com/v/".strip_tags($videoID)."' type='application/x-shockwave-flash' wmode='transparent' width='425' height='355'></embed></object></div>";
                $quita = "\[v\]http://www.youtube.com/watch\?v=".$videoID."\[\/v\]";
		$content =  ereg_replace("$quita", "$videoPlayer", $content);
	}
       print $content;
}
?>

Ya tenemos hecho el plugin. Pero si lo probamos no funciona. Nos falta darle la acción, los llamados filter hooks.
Existe una amplia variedad de filtros disponibles para cada acción posible: guardar el post, guardar un adjunto, previsualizar el contenido, cargar las cabeceras, etc, o como nos interesa, dibujar el contenido del post. Le diremos que al escribir el campo content del post nos ejecute la función que acabamos de crear, o lo que es lo mismo:
add_action(’the_content’, ‘insertVideo’);
Con esto tenemos ya creado el plugin, que quedará así:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

<?php
/*
Plugin Name: YouTube1click
Plugin URI: URL
Description: insertar video de Youtube simplemente cortando y pegando la url del video y poniéndolo entre [v] y [/v]
Author: Alberto Fortes
version: beta
Author URI: http://www.albertofortes.com
*/
 
function insertVideo($content)
{	
    $eliminaIni = "[v]http://www.youtube.com/watch?v=";
    $eliminaFin = "[/v]";
    $buscar = '\[v\](.*?)\[\/v\]';
    preg_match_all("/$buscar/i", $content, $matches);
    foreach($matches[0] as $l) {
        $elimina = array($eliminaIni =>'', $eliminaFin=>'');
        $videoID = strtr($l, $elimina);
	$videoPlayer = "<div style='margin-bottom:20px;'><object width='425' height='355'><param name='movie' value='http://www.youtube.com/v/".strip_tags($videoID)."'></param><param name='wmode' value='transparent'></param><embed src='http://www.youtube.com/v/".strip_tags($videoID)."' type='application/x-shockwave-flash' wmode='transparent' width='425' height='355'></embed></object></div>";
	$quita = "\[v\]http://www.youtube.com/watch\?v=".$videoID."\[\/v\]";
	$content =  ereg_replace("$quita", "$videoPlayer", $content);
}
   print $content;
}
 
add_action('the_content', 'insertVideo');
 
?>

Y ya hemos creado nuestro primer plugin para Wordpress.