Sinceramente nunca le había prestado demasiada atención a esa barra, por la que me puse a investigar un poco mas sobre su comportamiento y como funciona. Después de mirar un poco pude recrear el efecto sin demasiadas complicaciones con un poco de CSS y jQuery.

Surgieron dos alternativas, la replica exacta (solo me tome el trabajo de explicar el código) de Mashable y otro un poco mas simple.

Si entramos a cualquier post en Mashable, veremos que la barra se acompaña al Scroll sin animaciones. Al usar valores negativos en el margin, esta barra no es visible en resoluciones menores (1024), por lo cual mediante jQuery se transforma en otra barra horizontal para mostrar el contenido; lo mismo sucede si redimencionamos la ventana.

La alternativa mas simple ofrece las mismas funcionalidades y un efecto en el scroll, pero si te excedes en el viewport, los visitantes que tengan una resolución de pantalla menor, no podrán apreciarla. A que me refiero con el exceso en el viewport? Simple, si tu container es de 960px de ancho y posicionamos la barra a unos -80px, nos excedimos en el viewport (960px + 80px = 1040) para resoluciones menores o iguales a 1024×768; ya que el safe area para esta resolución es de 975px de ancho.

Cualquiera de las dos alternativas es válida y funcional, queda en vos utilizar la que creas que mejor se adapte.

Replica de Mashable

Esta opción requiere un poco mas de código dada la complejidad. Al utilizar la posición fixed, esta opción no sera compatible con IE6 ya que este navegador desconoce esta propiedad.

Demo Replica de Mashable

No te olvides de redimensionar la ventana para apreciar el efecto completo

HTML

Como lo podemos apreciar en Mashable tenemos botones para sindicar contenido en Twitter, Google Buzz, Facebook y otras. Cada botón funciona por medio de un script para que les sea mas sencillo de integrar, podes usar e incluir los botones que necesitas por medio de algún plugin o simple código, eso queda en vos.

			<div id="social_bar">
				<div class="botones_grandes">
					<div class="gbuzz s_boton">
						<script type="text/javascript" src="http://button.njuice.com/buzz.js">
</script>
					</div>
					<div class="tweetmeme s_boton">
						<script type="text/javascript">
//<![CDATA[
tweetmeme_source = 'baires'; // Mi usuario en Twitter //
tweetmeme_url = '<?php the_permalink(); ?>'; // URL a socializar en este caso para Wordpress //
//]]>
</script> <script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js">
</script>
					</div>
					<div class="faceboook s_boton">
						<script src="http://widgets.fbshare.me/files/fbshare.js" type="text/javascript">
</script>
					</div>
				</div>
				<div class="botones_chicos">
					<div class="s_boton_small gbuzz_small">
						<script type="text/javascript">
//<![CDATA[
var njuice_buzz_size = 'small';
//]]>
</script> <script type="text/javascript" src="http://button.njuice.com/buzz.js">
</script>
					</div>
					<div class="s_boton_small twwetmeme_small">
						<script type="text/javascript">
//<![CDATA[
tweetmeme_style = 'compact';
//]]>
</script> <script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js">
</script>
					</div>
					<div class="s_boton_small facebook_small">
						<script type="text/javascript">
//<![CDATA[
var fbShare = {
size: 'small',
}
//]]>
</script> <script src="http://widgets.fbshare.me/files/fbshare.js" type="text/javascript">
</script>
					</div>
					<div class="s_boton_small">
						<a target="_blank" href="http://feedburner.google.com/fb/a/mailverify?uri=EliseosNet&amp;loc=es_ES" id="s_email" class="social_sprites" name="s_email">email</a>
					</div>
					<div class="s_boton_small">
						<a class="a2a_dd social_sprites" id="s_share" href="http://www.addtoany.com/share_save?linkname=Eliseos%20Net&amp;linkurl=eliseos.net" name="s_sharethis">Share</a><script type="text/javascript">
//<![CDATA[
a2a_linkname="My Sitio";a2a_linkurl="mi-url.com";
//]]>
</script><script type="text/javascript" src="http://static.addtoany.com/menu/page.js">
</script>
					</div>
				</div>
				<div class="s_boton">
					<a target="_blank" href="http://feedburner.google.com/fb/a/mailverify?uri=EliseosNet&amp;loc=es_ES" id="s_email" class="social_sprites" name="s_email">email</a>
				</div>
				<div class="s_boton">
					<a class="a2a_dd social_sprites" id="s_share" href="http://www.addtoany.com/share_save?linkname=My%20Sitio&amp;linkurl=mi-url.com" name="s_sharethis">Share</a><script type="text/javascript">
//<![CDATA[
a2a_linkname="My Sitio";a2a_linkurl="mi-url.com";
//]]>
</script><script type="text/javascript" src="http://static.addtoany.com/menu/page.js">
</script>
				</div>
			</div>

Nuestro markup es de lo mas sencillo, como se puede hay dos clases de botones: grandes y chicos. Los botones grandes son los que se aprecian a simple vista, los chicos se encuentran escondidos para las resoluciones inferiores o en caso de redimensioanarse la pantalla. Es necesario que edites los datos de cada botón para que coincida con los tuyos, en URL, Nombre del Sitio, etc.

Recomiendo introducir la barra justo después del titulo y antes del contendido para poder desplazarnos sin problemas. Para el caso de Wordpress dentro del archivo single.php

CSS

Esto es parte de la magia, otra vez es algo extremadamente simple de entender. Intente comentar lo mas posible el código para que sea de fácil entendimiento.

 
#social_bar {
background:none repeat scroll 0 0 #FFFFFF;
border:1px solid #DDDDDD;
float:left;
margin-left:-80px; /* // La distacia de la barra que queremos tener en relacion al post */
margin-right:10px;
position:relative;
}
 
/* // Formato de los Botones grandes */
.s_boton {
padding:5px;
clear:left;
margin:0;
}
 
/* // Formato de los Botones chicos */
.s_boton_small{
clear:none;
float:left;
padding:5px;
}
 
/* // Ocultamos los botones chicos de momento */
.botones_chicos{display:none;}
 
/* //Iconos para los links de Share y Email */
#social_bar a#s_email.social_sprites {
background-position:2px -32px;
text-decoration: none;
}
 
#social_bar a:hover#s_email.social_sprites {
background-position:2px -50px;
color:#4c545b;
text-decoration: none;
}
 
#social_bar a#s_share.social_sprites {
background-position:0px 4px;
text-decoration: none;
}
 
#social_bar a:hover#s_share.social_sprites {
background-position:0px -14px;
color:#4c545b;
text-decoration: none;
}
 
#social_bar a.social_sprites {
-moz-border-radius:3px 3px 3px 3px;
background:url(../images/social_sprites.png) no-repeat scroll 0 0 #FFFFFF;
border:1px solid #E8E8E8;
color:#989898;
display:block;
font:9px/1.625 verdana,sans-serif;
margin:0;
padding:2px;
text-align:right;
width:44px;
}

En caso que lo necesites esta es la imagen que utilice en los links de share & e-mail. Los iconos pertenecen al set Glyphish.

jQuery

Y aquí viene la magia que hará que el comportamiento de la barra acompañe al scroll y diferencie las distintas resoluciones de pantalla.

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
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105

$(function(){	
 
    if( $('#social_bar').length > 0 && !($.browser.msie && parseInt($.browser.version) < 7) ) {
        var descripY = parseInt($('.main').offset().top) - 20;
        var $postShare = $('#social_bar');
        var pullX = $postShare.css('margin-left');
 
        $(window).data('scrollBound', false);
 
        function positionShareScroll() {
            var scrollY = $(window).scrollTop();
            var fixedShare = $postShare.css('position') == 'fixed';
            if ( scrollY > descripY && !fixedShare ) {
                $postShare.stop().css({
                    position: 'fixed',
                    left: '50%',
                    top: 20,
                    marginLeft: -540 // Este valor se debe ajustar ya que depende de cada diseño//
                });
            } else if ( scrollY < descripY && fixedShare ) {
                $postShare.css({
                    position: 'relative',
                    left: 0,
                    top: 0,
                    marginLeft: pullX
                });
            }
        }
 
 
        $(window).resize(function(){
            var windowW = $(window).width();
            var pulledOutside = $postShare.css('margin-left') == pullX;
            if ( windowW >= 1137 ) {
                if ( !$(window).data('scrollBound') ) {
                    if ( !pulledOutside ) {
                        $postShare.animate({ marginLeft: pullX });
						//Crear barra Vertical
						$('.botones_chicos').hide();
						$('.s_boton').show();
						$('.botones_grandes').show();
						$postShare.css('border-width', '1px');
						$postShare.width('auto');
						$postShare.css({
							marginRight: 7,
							marginTop: 0
						});
                    }
                    $(window)
                        .data('scrollBound', true)
                        .bind('scroll.positionShare', function(){
                            positionShareScroll()
                        })
                    ;
                    positionShareScroll();
                }
            } else {
                if ( pulledOutside || $(window).data('scrollBound') ) {
                    $postShare
                        .css({ position: 'relative', left: 0, top: 0 })
                        .animate({marginLeft: 0})
                    ;
					//Crear barra Horizontal
					//$postShare.append(smallButtons);
					//smallButtons = '';
					$('.botones_grandes').hide();
					$('.s_boton').hide();
 
					$('.botones_chicos').show();
					$postShare.css({
						marginTop: 5,
						marginBottom: 5
					});
					$postShare.css('border-width', 0);
 
					var content_width = $('.main').width();
					if (content_width == 'undefined') content_width = 600;
					if ( $postShare.attr('_width') ) {
						$postShare.width($postShare.attr('_width'));
						var block_width = $postShare.attr('_width');
					} else {
						$postShare.attr('_width', $postShare.width() );
						var block_width = $postShare.width();
					}
					$postShare.width(content_width);
					var add_padding = ( (content_width - block_width) / ($postShare.find('.s_boton_small').length * 2) ) + 4;
 
					//var add_padding = (642 - (88 + 120 * (buttons_count - 2) )) / (buttons_count * 2);
					//var add_padding = ( ( 642 - ( 88 * buttons_count ) ) / (buttons_count * 2) ) + 5;
					$postShare.find('.s_boton_small').css({
						paddingLeft: add_padding,
						paddingRight: add_padding
					});
 
 
                    $(window)
                        .data('scrollBound', false)
                        .unbind('scroll.positionShare')
                    ;
                }
            }
        });
        $(window).resize();
    }
});

Solamente dos cosas debemos tener presentes, la primera es definir en la linea 4 cual sera nuestro valor de referencia para el comportamiento de la barra, es decir el ancho; generalmente corresponde al container en el que se encuentra el post. En mi caso he utilizado la clase main, que se vuelve a utilizar en la linea 76 y en la 77 con su ancho.

Luego procederemos a adaptar la distancia a la que se posicionara la barra cuando nos desplacemos, al utilizar la posición fixed, el valor difiere de los 80px originales. Este ejemplo muestra la barra posicionada a unos -540px (linea 18). Este valor tenes que ajustarlo vos ya que depende de tu diseño. Una aproximación a este numero responde a: Ancho del container (en este ejemplo: main) – 80px

Una vez presentadas todas las partes solo tenemos que integrarlas en nuestro Site, dependiendo de la plataforma con lo que estemos trabajando pude variar algún detalle, pero este código sirve tanto para Wordpress como para cualquier otro CMS.

Replica de Mashable Simple

A diferencia de la opción anterior esta barra es compatible con IE6, pero no podrá ser apreciada en resoluciones menores. El scroll para este caso es una animación del padding que produce un simpático efecto final.

Demo Replica de Mashable

HTML

Es casi el mismo markup de la primera opción pero sin incluir los botones pequeños ya que no son necesarios.

	<div id="social_bar_wrapper">
			<div id="social_bar">
				<div class="botones_contenedor">
					<div class="gbuzz s_boton">
						<script type="text/javascript" src="http://button.njuice.com/buzz.js">
</script>
					</div>
					<div class="tweetmeme s_boton">
						<script type="text/javascript">
tweetmeme_source = 'baires';
tweetmeme_url = '<?php the_permalink(); ?>';
 
</script> <script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js">
</script>
					</div>
					<div class="faceboook s_boton">
						<script src="http://widgets.fbshare.me/files/fbshare.js" type="text/javascript">
</script>
					</div>
				</div>
				<div class="s_boton">
					<a target="_blank" href="http://feedburner.google.com/fb/a/mailverify?uri=EliseosNet&amp;loc=es_ES" id="s_email" class="social_sprites" name="s_email">email</a>
				</div>
				<div class="s_boton">
					<a class="a2a_dd social_sprites" id="s_share" href="http://www.addtoany.com/share_save?linkname=My%20Sitio&amp;linkurl=mi-url.com" name="s_sharethis">Share</a><script type="text/javascript">
a2a_linkname="My Sitio";a2a_linkurl="mi-url.com";
</script><script type="text/javascript" src="http://static.addtoany.com/menu/page.js">
</script>
				</div>
			</div>
		</div>

También se ha añadido un wrappera la barra para poder controlar el margin.

CSS

Es exactamente el mismo de la primera opción, con el adicional de wrapper y sin los botones pequeños.

#social_bar_wrapper{
	position: absolute;
	margin-top:20px;
}
 
#social_bar {
background:none repeat scroll 0 0 #FFFFFF;
border:1px solid #DDDDDD;
float:left;
margin-left:-80px; /* // La distacia de la barra que queremos tener en relacion al post */
margin-right:10px;
position:relative;
 
}
 
/* // Formato de los Botones grandes */
.s_boton {
padding:5px;
clear:left;
margin:0;
}
 
/* //Iconos para los links de Share y Email */
#social_bar a#s_email.social_sprites {
background-position:2px -32px;
text-decoration: none;
}
#social_bar a:hover#s_email.social_sprites {
background-position:2px -50px;
color:#4c545b;
text-decoration: none;
}
 
#social_bar a#s_share.social_sprites {
background-position:0px 4px;
text-decoration: none;
}
 
#social_bar a:hover#s_share.social_sprites {
background-position:0px -14px;
color:#4c545b;
text-decoration: none;
}
 
#social_bar a.social_sprites {
-moz-border-radius:3px 3px 3px 3px;
background:url(../images/social_sprites.png) no-repeat scroll 0 0 #FFFFFF;
border:1px solid #E8E8E8;
color:#989898;
display:block;
font:9px/1.625 verdana,sans-serif;
margin:0;
padding:2px;
text-align:right;
width:44px;
}

Quizás lo único que tengas que modificar es la distancia a la que se encuentra la barra con respecto del contenido, para este ejemplo es -80px (dentro de #social_bar). No te excedas en mas de -100px o no sera visible en varias resoluciones.

jQuery

Como te lo adelante anteriormente solamente animamos el padding (gracias CSS Tricks), no es necesario modificar este código a no ser que sepas lo que estas haciendo.

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

	$(function() {
 
    var $sidebar   = $("#social_bar"),
        $window    = $(window),
        offset     = $sidebar.offset(),
        topPadding = 15;
 
    $window.scroll(function() {
        if ($window.scrollTop() > offset.top) {
            $sidebar.stop().animate({
                marginTop: $window.scrollTop() - offset.top + topPadding
            });
        } else {
            $sidebar.stop().animate({
                marginTop: 0
            });
        }
    });
 
});

Por ultimo solo resta presentar todo en nuestro diseño y tendremos otra alternativa a a barra de Mashable.

Cualquier duda que tengas, hacémelo saber.

Para reazlizar esta tarea, solo vamos a necesitar un pequeño archivo HTC, que en definitiva es un archivo que guarda un conjunto de scripts exclusivamente para Internet Explorer. La forma correcta de lograr esquinas redondeadas en todos los navegadores sera:

Cross Browser border-radius

.mi_selector { 
  -moz-border-radius:10px;  /* Firefox */
  -webkit-border-radius:10px; /* Safari y Crhome */
  -khtml-border-radius:10px; /* Browser en Linux */
  border-radius:10px; /* CSS3  Standard */
  behavior:url(border-radius.htc standards /* Internet explorer */ );
}

Solo necesitas una copia del archivo border-radius.htc que se puede obtener aquí, y colocarlo en tu carpeta donde guardas la hoja de estilo. Con una simple linea extra en tu CSS ahora tendrás esquinas redondeadas en todos los navegadores.

El HTML del que les hablaba es muy simple, solamente podemos escribir <div>Content</div> o <p>Content</p> y la magia de CSS se hará cargo de ahí en mas.

La mención honorifica se la llevan los pseudo-elements :before y/o :after que crearan nuestras formas (Speech bubbles) y las propiedades border-radius y transform son los condimentos.

Si nos ponemos a trabajar con los pseudo-elements y las propiedades arriba mencionadas podemos lograr resultado muy interesantes.

Un ejemplo de esto, puede ser este CSS donde se creara un Speech Bubble con un triangulo isoceles en la parte inferior

/* Bubble con triangulo isósceles
------------------------------------------ */
 
.triangle-isosceles {
   position:relative;
   padding:15px;
   margin:1em 0 3em;
   color:#000;
   background:#f3961c;
 
   /* css3 */
   -moz-border-radius:10px;
   -webkit-border-radius:10px;
   border-radius:10px;
   background:-moz-linear-gradient(top, #f9d835, #f3961c);
   background:linear-gradient(top, #f9d835, #f3961c);
}
 
/* crear triangulo */
.triangle-isosceles:after {
   content:"\00a0";
   display:block; /* reduce the damage in FF3.0 */
   position:absolute;
   z-index:-1;
   bottom:-30px;
   left:50px;
   width:0;
   height:0;
   border-width:15px 15px;
   border-style:solid;
   border-color:#f3961c transparent transparent;
}

Dentro del demo podras observar el comportamiento y acceder a todo el CSS necesario para que puedas ver en detalle como funciona cada shape y así poder implementarlas o crear shapes propias.

HiFi (Head Injection, Foot Injection)

Nos permite insertar (injection) porciones de código en el Footer y en Header de nuestro Theme, pero solamente cuando es necesario. Si estas escribiendo un tutorial y necesitas mostrar dentro de la entrada o pagina que trabaja como un demo online, muchas veces es necesario insertar hojas de estilo o algunas lineas de javascript.

Este plugin crea un nuevo panel en nuestra entrada o pagina donde insertaremos esas porciones de código solo para el post pagina en cuestión.

Hikari Titled Comments

Como el titulo lo indica, nos ofrece la opción de permitirle a la persona que comenta en la entrada la chance de insertar un titulo a su comentario. Es una función que la podemos encontrar en Drupal, pero la extrañamos en Wordpress.

Facebook Photo Fetcher

Una forma simple de insertar y crear galerías de imágenes en Wordpress usando un álbum de Facebook. Una vez activado solo necesitamos darle los permisos adecuados al plugin para conectarse a Facebook y seleccionaremos el Album que queremos mostrar en Wordpress. Este plugin trabaja con shortcodes a la hora de crear las galerías, por lo que su uso es de lo más simple.

RSS Just Better

Ya he hablado aquí en Eliseos de como insertar cualquier RSS Feed en Wordpress, pero este plugin lo hace todavía mucho mas simple. Nos permite controlar cuantos items se mostraran, incluir la fecha de publicacion y la introducción. Funciona a modo de widget para incluir en el Sidebar o como shortcode, para incluirlo en las entradas o paginas.

Facebook Share Statistics

Nos muestra en nuestro CP estadísticas y gráficos relativas a como se socializa nuestro Sitio en Facebook. Podemos ver, por ejemplo, la cantidad de usuarios que compartieron la entrada, la cantidad de “likes” que recibió un post, y muchos mas.

Su funcionamiento es de lo mas simple, solo debemos crear un container con algunas imágenes dentro:

<div id='slideshowHolder'>
<img src='img1.jpg' alt='img1' />
<img src='img2.jpg' alt='img2' />
<img src='img3.jpg' alt='img3' />
</div>

Y luego iniciar el plugin:

$('#slideshowHolder').jqFancyTransitions({ width: 400, height: 300 });

Esta es la configuración por defecto, donde solo indicamos el ancho y el alto del Slider, si lo necesitáramos (seguramente) podemos indicar que efecto necesitamos, delay en las transiciones, etc.

jqFancyTransitions cuenta con un demo online, donde podrás observar todos los efecto que comente anteriormente junto con la documentación necesaria.Y por ultimo, este plugin prueba ser compatible con Safari 2+, Internet Explorer 6+, Firefox 2+, Google Chrome 3+, Opera 9+.

Un ejemplo claro de uso se puede ver en WPvote, donde cada articulo esta acompañado de su respectiva screenshot.

A modo de ejemplo del funcionamiento del API, esta es una imagen generada para que aprecien el resultado final.

http://s.wordpress.com/mshots/v1/http%3A%2F%2Feliseos.net%2F?w=550

Uso

Su utilización es muy sencilla. y depende de los planes que tengas en mente, básicamente podes mostrar las capturas por medio de shortcodeso por medio de una función, directamente en nuestro Theme.

Shortcode

Esta puede ser la opción fácil mas simple de implementar ya que no es necesario editar nuestro Theme. Solo sigue este formato:

[browsershot url="http://eliseos.net" width="550"]

El valor de la URL representa el sitio en el que vamos a realizar la captura y width el ancho deseado. Casi no tenemos restricciones en nuestro ancho de la captura, por lo que podrás integrar la imagen a tu diseño sin problemas.

PHP Function

Dentro de nuestro Theme, llamaremos a la función bm_mshot:

<?php
$url = 'http://eliseos.net/';
$width = 550;
echo bm_mshot ($url, $width);
?>

Los valores son los mismos que para el shortcode, por lo que no encontraras mayores dificultades.

Por ultimo el autor nos señala que es las imágenes no se generan instantáneamente, sino que tardan unos segundos. En algunos sitios ese tiempo es mayor y en otros menor.

Si el visitante utiliza un navegador no soportado para el tag <video>, el plugin reemplazara el tag por el reproductor Flowplayer, logrando así una consistencia en todos los navegadores.

Este plugin soporta los formatos MP4, utilizando el codec h.264 y el OGV a través del codec Theora. Como si fuera poco, en html5media disponemos una serie de controles para tomar control sobre el video; como ser:

• Control: Posibilidad de mostrar los botones (controles) del reproductor
• Autobuffer: Comenzar a cargar el video automáticamente
• Autoplay: Reproducir el video automáticamente
• Loop: Reproducir el video constantemente
• Splash image: añadir una imagen a modo de introducción el nuestro reproductor.

Para utilizar este maravilloso plugin, solo debemos realizar el llamado dentro de nuestro header:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="http://html5media.googlecode.com/svn/trunk/src/jquery.html5media.min.js"></script>

Y seguir la siguiente sintaxis:

<video src="video.mp4" width="320" height="240" controls autobuffer></video>

Y si necesitáramos servir dos versiones del mismo video (Theora y h.254)

<video class="video" poster="cat.jpg" width="352" height="264" controls autobuffer>
    <source src="cat.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
    <source src="cat.ogv" type='video/ogg; codecs="theora, vorbis"'>
</video>

Por ultimo no te olvides que puedes visualizar un demo del funcionamiento de este plugin.

Hoy leyendo en Milienzo encontré un hack que me pareció correcto de reproducir ya que podemos lograr una personalización del tag the_excerpt() casi perfecta.

Problemas con the_excerpt()

Solo se muestran las primeras 55 palabras, no dándonos la posibilidad de acomodar ese numero. En cuanto el al formato, el tag limpia todos los tags HTML, por lo que no se muestran imágenes ni formato en los párrafos. Y por ultimo, en cuanto hablamos de javascript tenemos un gran problema ya que the_excerpt() no lo filtra, lo que trae como aparejado posibles problemas en el formato y vulnerabilidades.

Lo que en milienzo nos plantean, es crear una nueva función para solucionar los problemas mencionados mas arriba.

Comencemos

En tu archivo functions.php introduciremos esta nueva función

function improved_trim_excerpt($text) {
	global $post;
	if ( '' == $text ) {
		$text = get_the_content('');
		$text = apply_filters('the_content', $text);
		$text = str_replace(']]>', ']]>', $text);
		$text = preg_replace('@<script[^>]*?>.*?</script>@si', '', $text);
		$text = strip_tags($text, '<p>');
		$excerpt_length = 80;
		$words = explode(' ', $text, $excerpt_length + 1);
		if (count($words)> $excerpt_length) {
			array_pop($words);
			ray_push($words, '[...]');
			$text = implode(' ', $words);
		}
	}
		return $text;
}

Al no estar “tocando” no los archivos del core de Wordpress podremos reproducir esta función en todos los Themes que necesitemos.

Controlar el tamaño en the_excerpt()

En lugar de mostrar solo las primeras 55 palabras, digamos que solo mostraremos las primeras 80.

$excerpt_length = 80;

Para aumentar o disminuir las palabras, solo resta reemplazar el 80 por el numero deseado.

Incluir tags HTML

Como lo mencione antes, al no poder contar con la posibilidad de mostrar dichos tags podemos encontrar problemas a la hora de dar formato

$text = strip_tags($text, '<p>');

En este caso estamos incluyendo siempre el tag <p> Si lo necesitáramos podríamos también incluir el tag <img> o los que deseemos. Solo tenemos que mencionar los tags uno al lado de otro.

Remover todo el código javascript que no necesitamos

$text = preg_replace('@<script[^>]*?>.*?</script>@si', '', $text);

Esta simple linea, nos ahorrara futuros dolores de cabeza.

Ahora solo resta indicar nuestro nuevo filtro, otra vez dentro de functions.php insertamos:

remove_filter('get_the_excerpt', 'wp_trim_excerpt');
add_filter('get_the_excerpt', 'improved_trim_excerpt');

Implementación

Solo nos queda integrar este nuevo the_excerpt() mejorado dentro de nuestro Theme reemplazando el the_excerpt() original por nuestro el nuevo y flamante tag:

function improved_trim_excerpt($text) {

Como lo notaras el hack es bastante flexible y podemos lograr buenos resultado con pocas lineas de código.

A la hora de editar dicha pagina, no tenemos muchas mas opciones que “meter mano” al código directamente, pero que tal si pudiéramos editar cada segmento de la pagina como editamos las entradas, es decir con el editor WYSIWYG TinyMCE?

Aquí es donde entra a jugar el Plugin MultiEdit, el cual creara regiones editables dentro de nuestra pagina, para poder trabajar con TinyMCE como si estuviéramos trabajando con una entrada normal.

MultiEdit creara 4 pestañas donde podremos crear y editar el contenido que necesitemos en 4 regiones de la pagina: El contenido normal, al pie, a la izquierda y a la derecha.

Cada región almacena el contenido creado como si se tratara de un custom field, por ende si borramos o desactivamos el plugin nuestro contenido no se perdería.

Instrucciones

Necesitas una copia de Plugin MultiEdit, instala el plugin y activalo.

Debemos crear una nueva Plantilla personalizada (page template) con el siguiente formato:

<?php
/*
Template Name: MiNombre
MultiEdit: Right, Bottom, Left
*/
?>

Right, bottom, y left son las zonas o bloques que se añadirían a la pagina.

Dentro de la nueva plantilla solo necesitamos definir las zonas, para este ejemplo el contenido al pie.

<div id="pie_de_la_pagina">
	<?php multieditDisplay('Bottom'); ?>
</div

Por ultimo a la hora de crear o editar una pagina utilizaremos la plantilla que se creo anteriormente y podremos ver nuestro nuevo panel de administración para la pagina.

Consideraciones finales

Pareciera ser un proceso un tanto engorroso, pero, como lo mencione al principio de esta forma podremos ahorrarnos un tiempo considerable a la hora de trabajar con una pagina que editamos constantemente.

Este plugin solo trabaja correctamente dentro del editor visual, y no hace magia; por lo que el estilo via CSS es requerido para lograr una buena presentación

A diferencia de otros clones este lightbox cuanta con algunas opciones que lo hacen una alternativa mas que interesante:

• Las imágenes son se “auto-acomodan” a la resolución de pantalla
• Se puede hacer un pre-cache de las imágenes, para mejorar la experiencia del usuario
• Múltiples instancias de la misma imagen
• Multilenguaje, el plugin cuenta con los packs de lenguajes para su traducción
• Slideshow automático
• Control de las transiciones a través del teclado
• SEO amigable, los spiders almacenaran tanto los links de las thumbnails como los links de la imagen original