Archivo de la categoría: Soluciones

WordPress: Listar autores con posts y thumbnails

Estaba buscando un plugin para un proyecto que necesita listar autores y su post y no encontré un plugin que lo hiciera.
Scott Bressler escribió un script para mostrar a los autores y luego poner la info de los post de cada autor. Muy útil.

Aquí el codigo.

Via: http://www.scottbressler.com/blog/2011/03/wordpress-archive-page-with-all-authors-and-all-posts/

<?php
	// http://www.scottbressler.com/blog/2011/03/wordpress-archive-page-with-all-authors-and-all-posts/
	
	// Argumentos para pasar para el get_users
	$args = array( 'orderby' => 'display_name', 'order' => 'ASC', 'who' => 'autores' );
	// Query for the users
	$autores = get_users( $args );
?> 
 
<?php
	// Bucle por todos los usuarios, imprimiendo los nombres con vinculos a su sección de archivos
	for ( $i = 0; $i < count( $autores ); ++$i ) {
		$autor = $autores[$i];
			echo "<a href='#{$autor->user_nicename}'>$autor->display_name</a>";
		if ( $i < count( $autores ) - 1 ) {
			echo ' | ';
		}
	}
?>
	 
<?php
	// Bucle por todos usuarios, imprimiendo todos los posts mientras corre
	foreach ( $autores as $autor ) { ?>
		<a name="<?php echo $autor->user_nicename; ?>"></a>
		<div class="autor-posts-wrapper" id="autor-<?php echo $autor->ID; ?>-posts-wrapper">
			<div class="autor-avatar" id="autor-<?php echo $autor->ID; ?>-avatar">
				<?php echo get_avatar( $autor->ID, 96 ); ?>
			</div>
			<div class="autor-posts" id="autor-<?php echo $autor->ID; ?>-posts">
				<h2><a href="<?php echo get_author_posts_url( $autor->ID ); ?>"><?php echo $autor->display_name; ?></a></h2>
			
			<?php
			// Crea un loop, almacenando todos los post del usuario
			// 'posts_per_page' => -1 busca todos los articulos o puedes de
			$args = array( 'author' => $autor->ID, 'posts_per_page' => -1 );
			$posts = query_posts($args);
			
			// if we already have the output in another template, like:
			// get_template_part( 'loop', 'all-authors' ); // Pulls in loop-all-authors.php from theme
			
			// Ahora que tenemos los posts simula un loop o usa get_template_part
			// si ya tenemos la salida en otra plantilla, como:
			// get_template_part( 'loop', 'all-authors' ); // Saca loop-all-authors.php del tema
			
			
			if ( have_posts() ) : ?>
				<ul class="autor-post-list" id="autor-<?php echo $autor->ID; ?>-post-list">
					<?php while ( have_posts() ) : the_post(); // Imprime lo que queramos para cada post - por ahora solo titulo y fecha ?>
						<li>
							<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a> &mdash; <?php echo get_the_date(); ?>
						</li>
					<?php endwhile; ?>
				</ul><!-- #autor-post-list -->
			<?php else: ?>
				<p>Este autor no ha publicado nada aún.</p>
			<?php endif; ?>
			</div><!-- #autor-posts -->
		</div><!-- #autor-posts-wrapper -->
<?php } // Fin de bucle por todos los usuarios ?>

Bug del z-index en Chrome 19.x

La versión de Chrome 19.x hizo que uno de nuestros proyectos tuviera un error mostrando un menú desplegable.
Solo en Chrome se mostraba detras del contenido y gracias a http://mobile-web-development.tumblr.com/ que encontró el bug en el css del boilerplate es una línea para webkit.

html { … -webkit-overflow-scrolling: touch; … }

La quitas y el apilado (stacking) vuelve a su orden normal.

Cómo crear una función en WordPress

Las funciones dentro de WordPress son herramientas eficientes para acciones recurrentes dentro de tu sitio. Aunque son parte de los lenguajes de programación orientada a objetos, WordPress te permite mayor flexibilidad usando esta herramienta.

¿Qué es una función de WordPress?

Las funciones son un componente básico del núcleo de PHP (lenguaje de código en el que se basa WordPress). Sin embargo, esta vez solo vamos a hablar de las funciones dentro de WP.

Una función de WordPress es un modo sencillo y eficaz para acortar código. Te permite agregar una línea de código a tus marcadores en vez de muchas veces las líneas de tu función.
Viene a ser como un acceso directo a un bloque de código largo. Esto es muy conveniente cuando escribes un bloque de código muy largo que vas a usar en varias partes de tu sitio.

Normalmente las funciones se escriben dentro de functions.php de tu tema, que es donde están todas las funciones exclusivas del tema.

4 partes de una función

Podemos dividir la estructura de una función en cuatro partes para que sea fácil de digerir.
Aquí vamos:

1. Nombre de la función

En este caso la primera parte de la función es el mas fácil. Tienes que elegir un nombre para la función que, preferiblemente, describa la acción de lo que hace. Si quisiera hacer una firma para Corchoweb.com pudiera escribir una función que se llame “firma_corchoweb”, por ejemplo.

2. La estructura de la función

Todas las funciones requieren la misma estructura básica. Tienen la palabra “function” que aparece al principio, el nombre de la función, y el contenido entre llaves. Y va así:

firma_corchoweb function () {
/ / Ejemplo de contenido
}

Ya sé que eres detallista y te fijaste en los parentesis. Estos son parte de la estructura y permite que las funciones hagan magia con el código, pero su uso lo hablaremos en otro artículo. Así que pasemos al tercer tema.

3. El contenido es el rey.

Ahora tenemos un nombre la estructura de nuestra función. Pero eso sin contenido no sirve de nada. Así que vamos a agregarle un poco de contenido a nuestra firma.

firma_corchoweb function () {
     Gracias por leernos. Por favor deja tu comentario abajo!
}

Aquí puedes escribir lo que quieras. Desde una firma del autor hasta las fotos de tu perrito lo puedes usar siempre que quieras ahorrar código repetido.

4. Interrumpir el PHP con HTML

HTML y PHP son como agua y aceite, trabajan bien separados, y por eso tenemos que decirle a WordPress cuando estamos hablando de PHP y cuando de HTML. Por supuesto que eso es sumamente fácil. Lo que tenemos que hacer es cerrar el PHP escribiendo ?> para cambiar de PHP a HTML, y <?php para abrir PHP de nuevo y así cambiar de HTML a PHP. Como aquí.

<?php firma_corchoweb function () { ?>
     <p>Gracias por leernos. Por favor deja tu comentario abajo! </p>
<php }; ?>

Ahí está. Eso es una función completa de WordPress. Bastante fácil, ¿no?

Usando la Función

Ahora viene la parte fácil. Usar tu función en el tema de WordPress. Sólo tiene que escribir

<?php firma_corchoweb(); ?>

donde quieras que aparezca la firma dentro del tema.
Incluso puedes repetir la función cuantas veces lo necesites.

Eso es todo!

Redireccionar un dominio con apache para mejorar el SEO

Google recomienda hacer las redirecciones de dominios por el servidor por que esta función le corresponde al servidor (con apache) y no a las aplicaciones tipo php o html.

El objetivo de este tutorial es que al escribir http://dominioviejo.com vaya automaticamente a http://www.dominionuevo.com manteniendo todos los nombres de las páginas y los enlaces.

Los pasos:

1. Asegurate de que tienes 2 sitios web - el sitio antiguo y el nuevo sitio, y que se encuentran en diferentes cuentas (no tiene que estar en IP diferente o diferentes máquinas). Sobre todo que el archivo .htaccess no sea el mismo por que ese es el que vamos a modificar.

2. Tu sitio principal (propio o canónico) debe apuntar hacia el nuevo sitio usando DNS. Todos los viejos dominios deben apuntar hacia el antiguo sitio mediante DNS.
Es decir que Los DNS de http://www.dominionuevo.com apuntan al nuevo servidor con el contenido del sitio nuevo y los viejos dominios hacia el sitio antiguo por DNS.

3. Encuentra el archivo .htaccess en la raíz de tu antigua cuenta. Sí, comienza con un “.” Vamos a trabajar con este archivo. El nuevo sitio no necesita usar esto por que la redirección viene del dominio viejo.

4. Descarga el archivo .htaccess y ábrelo en un editor de texto solamente.

5a. Si tienes el mod_rewrite instalado en el apache, agrega este código:

Options + FollowSymLinks
RewriteEngine on
RewriteCond% {} HTTP_HOST! ^ NEWDOMAIN \ com.
RewriteRule ^ (. *) $ Http://www.newdomain.com/ $ 1 [R = 301, L]

5b. Si no tienes instalado el mod_rewrite, que realmente deberías, yno se puede instalar, entonces puedes utilizar este código en su lugar:

RedirectMatch 301 ^ (. *) $ Http://www.newdomain.com

6. Luego, sube el archivo a la carpeta raíz y prueba tu nueva redirección.

Opcional: Puedes asegurarte que hace la redirección 301 correcta con un HTTP Header viewer.

Puedes leer mas técnicas de redirección aquí: http://www.mcanerin.com/en/articles/301-redirect-apache.asp

flashyoutube

Arreglo: z-index de youtube y flash encima de todo

Trabajando hace unos días con un menú desplegable con jQuery noté que en ves de desplegarse por encima del video de youtube el menú se esconde detrás del video.

Primero pensé que era un problema de z-index, pero luego de pelear un rato con los posicionamientos y distintos valores de z-index pensé que sería un problema distinto.

El problema está en el browser pone los objetos flash (no solo los videos de youtube) encima de todos los objetos. http://kb2.adobe.com/cps/155/tn_15523.html y por eso hay que asignarle wmode=opaque o wmode=transparent al embed o código que va a producir el SWF.

En el caso de youtube esto se resuelve simplemente colocando ?wmode=opaque al final del código de embed de crea youtube para iframes.

El código original

<iframe width="560" height="315"
src="http://www.youtube.com/embed/xxxxxxx"
frameborder="0" allowfullscreen></iframe>

El código con el wmode aplicado

<iframe width="560" height="315"
src="http://www.youtube.com/embed/xxxxxxx?wmode=opaque"
frameborder="0" allowfullscreen></iframe>

Esta explicación la hace detalladamente Max Morgan en su artículo Fix youtube iframe overlay and z-index issues y donde incluso propone una solucion para automatizarlo vía jQuery.

Luego hizo una adaptación para cuando el codigo ya tiene variables escritas en donde escribes el código al final de toda la dirección

Código con varibles

http://www.youtube.com/watch?v=1YmPooYpyQw?rel=0

Código con varibles y wmode

http://www.youtube.com/watch?v=1YmPooYpyQw?rel=0&wmode=opaque

Teniendo cuidado que es probable que luego de una variable es probable que el ?wmode tenga que ser con un “&” &wmode

Te sirvió? Soy todo ojos.

Actualización: Jair nos escribió una forma de cambiar el atributo wmode via jQuery

$(document).ready(function() {
	$(“iframe”).each(function(){
		var ifr_source = $(this).attr(‘src’);
		var wmode = “wmode=opaque”;
		if(ifr_source.indexOf(‘?’) != -1) {
			var getQString = ifr_source.split(‘?’);
			var oldString = getQString[1];
			var newString = getQString[0];
			$(this).attr(‘src’,newString+’?'+wmode+’&’+oldString);
		} else {
			$(this).attr(‘src’,ifr_source+’?'+wmode);
		};
	});
});
wp-follow

El “Follow Button”de wordpress para usuarios no-wordpress.com

En 2011 WordPress.com implementó una nueva herramienta para seguir/ser-seguido llamada “Follow Button”. Hace unos días (mas de lo que ella quisiera) una amiga me escribió que quería el botón de “Seguir” de wordpress en su blog, y claro, que no quería migrar todo a WordPress.com, y no encontré un plugin que hiciera exactamente esto.

Entonces encontré el artículo de Frederick Giasson llamado WordPress’s Follow Button for Non-WordPress.com Users y lo apliqué en mi blog antes de pasar la información a mi amiga.

El post de Frederick hace dos “mejoras” en el concepto que yo he omitido:

  1. Cambió el icono de “+” por un asterisco naranja.
  2. Añadió un enlace a sus feed RSS.

Para Frederick, “Follow” no se trata sólo de correos electrónicos, también se trata de medios de otros médios de sindicación.

Por último, no quería cortar cualquier parte de código en WordPress ni en ningún otro plugin de WordPress. Lo único que vamos a modificar es el tema, agregando un poco de código para ello. La implementación actual se podría mejorar mediante la actualización Subscriber2 por ejemplo, pero yo no quería que la gente tuviese que hacer esto para crear el botón “Seguir” en su blog.

Paso # 1: Instalación de Subscribe2

Lo primero es lo primero.

La primera cosa que tienes que hacer es instalar el plugin de WordPress que permitirá a los usuarios suscribirse y gestionar sus suscripciones a tu blog a través de mensajes de correo electrónico. Utilizaremos el plugin Subscribe2 para WordPress que ofrece estas características a la instancia de WordPress.

Para instalar este plugin WordPress utilizando el modo automático “del sistema de instalación del complemento, siga estas instrucciones. Lea las instrucciones de instalación del plugin si desea hacerlo de esta manera el manual:

  1. Accede a tu blog de WordPress y visita Plugins-> Agregar nuevo.
  2. Busca Subscribe2, haga clic en “Instalar Ahora” y luego activa el plugin
  3. Haga click en el enlace “Configuración” del menú de administración, y selecciona “Subscribe2″
  4. Configura las opciones al gusto, incluida la plantilla de correo electrónico y cualquier categorías que deben ser excluidos de la notificación
  5. Has click en “Herramientas” en el menú de administración, y selecciona “Suscriptores”
  6. Puedes suscribir manualmente a gente que ya tengas o como mejor te parezca
  7. Crea una página de WordPress nueva para mostrar el formulario de suscripción.
  8. Al crear la página, puedes hacer click en la “S2″ en la barra encima del editor de textos para insertar automáticamente la señal subscribe2. O, si lo prefieres, puedes introducir manualmente el shortcode subscribe2 o ficha: [ subscribe2 ] o el HTML invisible
  9. Asegúrese de que el formulario está en una línea por sí mismo y que tiene una línea en blanco arriba y otra abajo. Este código será automáticamente reemplazado por la información de suscripción dinámica y mostrará todos los formularios y mensajes como sean necesarios
  10. En el área “Configuración” de Subscribe2 selecciona el nombre de página que acabamos de crear en el paso anterior en “apariencia”

Seguimiento.

Una vez que hayas terminado de instalar el plugin, puedes comprobar que todo está funcionando visitando la página que creamos en el paso 7 escribiendo tu propio correo electrónico (uno que no esté conectado a cualquier usuario de esa cuenta preferiblemente) y luego verificando en tu bandeja de entrada si usted recibe una notificación de suscripción.

Para probar esta página tienes que estar deslogueado. Sino veras una confirmación de que ya estás registrado.

Paso # 2:

Personaliza tu página

El siguiente paso es opcional. Como el formulario generado por el plugin Subscribe2 es realmente minimalista, es posible que desee personalizarlo un poco, para cambiar su diseño y añadir un poco de explicación en la página, para ayudar a los lectores a entender lo que está pasando. Puedes ver mi página de registro como ejemplo.

Paso # 3:

Agregue el código del botón Seguir en que el tema

El tercer paso es realmente lo que transformará el plugin Subscribe2 en el botón Seguir. Lo que estamos haciendo aquí, es sólo para agregar el código, en el tema, para mostrar el botón Seguir.
Lo primero que tienes que hacer, es localizar en el pie de página de las páginas se generan en el tema.
Abre la carpeta del tema de tu blog:

  • Via FTP: /../wordpress/wp-content/themes/mitema/footer.php.
  • Via Tema: Apariencia > Editor > footer.php

Verifica que esta etiqueta está al final del código. Sino entonces búscala por los archivos del tema por que el código del botón viene justo antes de esto.
Una vez que hayas encontrado la etiqueta podemos pasar a los siguientes pasos.

Nota importante: Si el tema de tu blog no incluye automáticamente jQuery entonces tienes que incluir este código:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>

justo antes de la etiqueta < /head> que en la mayoría de los casos está en header.php.

Si no tienes jQuery cargado, un error de JavaScript será devuelto, y el panel “congelación” de la página web.

Lo único que tienes que hacer es copiar/pegar el código encima de la etiqueta < /​​body> del footer.php y hacer un par de ajustes para que funcione con tu blog.

  1. En la línea #3, sustituir [[ruta-al-icono]] con la ruta del icono wordpress-plus.png. Puedes descargar el icono y el código wordpress-follow.zip para usarlo en tu blog.
  2. En la línea #9, sustituir [[ruta-a-su-SEGUIMIENTO DE PÁGINA DE WORDPRESS]] por la URL de la página de Seguimiento (la que creaste cuando instalaste Subscribe2)
<?php $useragent= $_SERVER['HTTP_USER_AGENT'];if(!preg_match('/android.+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i',$useragent)||preg_match('/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|e\-|e\/|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(di|rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|xda(\-|2|g)|yas\-|your|zeto|zte\-/i',substr($useragent,0,4))){?><style>
#bit, #bit *{*zoom:1;} #bit { bottom: -300px; font: 13px "Helvetica Neue",sans-serif; position: fixed; right: 10px; z-index: 999999; } .loggedout-follow-shelf{position:fixed;right:40%;z-index:999999;bottom:-300px;}.loggedout-follow-normal{position:fixed;z-index:999999;bottom:-300px;right:10px;}.loggedout-follow-typekit{margin-right:4.5em;position:fixed;z-index:999999;bottom:-300px;right:10px;}#bit a.bsub{display:block;overflow:hidden;padding:0 10px 0 8px;float:right;text-decoration:none !important;line-height:28px;font:normal 13px/28px "Helvetica Neue", sans-serif;color:#CCC;text-shadow:#444 0px -1px 0px;letter-spacing:normal;border:0;background-color:#464646;background-image:-ms-linear-gradient(bottom, #464646, #3f3f3f 5px);background-image:-moz-linear-gradient(bottom, #3f3f3f, #464646 5px);background-image:-o-linear-gradient(bottom, #464646, #3f3f3f 5px);background-image:-webkit-gradient(linear, left bottom, left top, from(#464646), to(#3f3f3f));background-image:-webkit-linear-gradient(bottom, #3f3f3f, #464646 5px);background-image:linear-gradient(bottom, #464646, #3f3f3f 5px);-webkit-box-shadow:0 -1px 5px rgba(0,0,0,0.20);-moz-box-shadow:0 -1px 5px rgba(0,0,0,0.20);-o-box-shadow:0 -1px 5px rgba(0,0,0,0.20);-ms-box-shadow:0 -1px 5px rgba(0,0,0,0.20);box-shadow:0 -1px 5px rgba(0,0,0,0.20);outline-style:none;outline-width:0;}#bit a.bsub{-moz-border-radius:2px 2px 0 0;-webkit-border-radius:2px 2px 0 0;-o-border-radius:2px 2px 0 0;-ms-border-radius:2px 2px 0 0;border-radius:2px 2px0 0 0;} #bit a:hover span, #bit a.bsub.open span{color:#ffffff !important;}#bit a.bsub.open{background:#333;}#bitsubscribe{background:#464646;color:#fff;padding:15px;width:200px;margin-top:27px;-moz-border-radius:2px 0 0 0;-webkit-border-radius:2px 0 0 0;-o-border-radius:2px 0 0 0;-ms-border-radius:2px 0 0 0;border-radius:2px 0 0 0;*float:right;*margin-right:-68px;}div#bitsubscribe.open{-webkit-box-shadow:0 0 8px rgba(0,0,0,0.5);-moz-box-shadow:0 0 8px rgba(0,0,0,0.5);-o-box-shadow:0 0 8px rgba(0,0,0,0.5);-ms-box-shadow:0 0 8px rgba(0,0,0,0.5);box-shadow:0 0 8px rgba(0,0,0,0.5);}#bitsubscribe div{overflow:hidden;}#bit h3, #bit #bitsubscribe h3, #bitsubscribe h3 label{margin:0 0 .5em 0 !important;font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;font-weight:300;text-shadow:0 1px 0 #333;font-size:28px;color:#fff;text-align:left;}#bit #bitsubscribe p{margin:0 0 1em 0;*margin:0;font:15px/1.3em "Helvetica Neue", Helvetica, Arial, sans-serif;font-weight:300;text-shadow:0 1px 0 #333;color:#fff;}#bitsubscribe p a{margin:20px 0 0;color:#fff;text-decoration:underline;}#bit #bitsubscribe p.bit-follow-count{font-size:13px;} #bit #bitsubscribe p#bsub-subscribe-button, form#loggedout-follow {margin: 0;}#bitsubscribe input[type=submit]{padding:2px 20px;background:#333;background:-moz-linear-gradient(top, #333 0%, #111 100%);background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#333), color-stop(100%,#111));background:-webkit-linear-gradient(top, #333 0%,#111 100%);background:-o-linear-gradient(top, #333 0%,#111 100%);background:-ms-linear-gradient(top, #333 0%,#111 100%);background:linear-gradient(top, #333 0%,#111 100%);color:#ccc;text-shadow:0 1px 0 #000;border:1px solid #282828;-moz-border-radius:11px;-webkit-border-radius:11px;border-radius:11px;-moz-box-shadow:inset 0 1px 0 #444;-webkit-box-shadow:inset 0 1px 0 #444;box-shadow:inset 0 1px 0 #444;text-decoration:none;-webkit-transition:all 0.25s ease-in-out;-moz-transition:all 0.25s ease-in-out;-o-transition:all 0.25s ease-in-out;transition:all 0.25s ease-in-out;*margin:1em 0 1em 0;} #bitsubscribe input[type=submit]:hover{background:#222;background:-moz-linear-gradient(top, #333 0%, #222 100%);background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#333), color-stop(100%,#222));background:-webkit-linear-gradient(top, #333 0%,#222 100%);background:-o-linear-gradient(top, #333 0%,#222 100%);background:-ms-linear-gradient(top, #333 0%,#222 100%);background:linear-gradient(top, #333 0%,#222 100%);color:#fff;-moz-box-shadow:inset 0 1px 0 #4f4f4f;-webkit-box-shadow:inset 0 1px 0 #4f4f4f;box-shadow:inset 0 1px 0 #4f4f4f;text-decoration:none;}#bitsubscribe input[type=submit]:active{background:#111;background:-moz-linear-gradient(top, #111 0%, #222 100%);background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#111), color-stop(100%,#222));background:-webkit-linear-gradient(top, #111 0%,#222 100%);background:-o-linear-gradient(top, #111 0%,#222 100%);background:-ms-linear-gradient(top, #111 0%,#222 100%);background:linear-gradient(top, #111 0%,#222 100%);color:#aaa;-moz-box-shadow:inset 0 -1px 0 #333;-webkit-box-shadow:inset 0 -1px 0 #333;box-shadow:inset 0 -1px 0 #333;text-decoration:none;}#bitsubscribe input[type=text]{-moz-border-radius:3px;-webkit-border-radius:3px;-o-border-radius:3px;-ms-border-radius:3px;border-radius:3px;font:15px "Helvetica Neue", Helvetica, Arial, sans-serif;font-weight:300;}#bitsubscribe input[type=text]:focus{border:1px solid #000;}#bitsubscribe.open{display:block;}#bsub-subscribe-button{text-align:center;margin:0 auto;} #bsub-subscribe-button input {margin: 0; } #bitsubscribe #lof-readerpromo p{color:#ccc;}#bitsubscribe #lof-followpublicize{border-top:1px solid #3c3c3c;margin-bottom:.5em;}#bitsubscribe #lof-followpublicize h3{font-size:13px;padding-top:1em;margin-bottom:1em !important;}#bitsubscribe #lof-followpublicize p.lof-followpublicize-twitter, #bitsubscribe #lof-followpublicize p.lof-followpublicize-facebook{background:#555;-moz-border-radius:3px;-webkit-border-radius:3px;-o-border-radius:3px;-ms-border-radius:3px;border-radius:3px;-moz-box-shadow:inset 0 1px 1px #333;-webkit-box-shadow:inset 0 1px 1px #333;-o-box-shadow:inset 0 1px 1px #333;-ms-box-shadow:inset 0 1px 1px #333;box-shadow:inset 0 1px 1px #333;margin-bottom:.5em;overflow:hidden;}#bitsubscribe #lof-followpublicize p.lof-followpublicize-twitter{padding:10px 10px 5px;}#bitsubscribe #bsub-credit{text-align:center;font:normal 11px "Helvetica Neue", sans-serif;padding:7px 0;margin:0 0 -15px;border-top:1px solid #3c3c3c;}#bitsubscribe #bsub-credit a{color:#aaa;text-shadow:0 1px 0 #262626;background:none;text-decoration:none;}#bitsubscribe #bsub-credit a:hover{color:#fff;background:none;}
#bit a.bsub span{background:url('wordpress-plus.png') 0 1px no-repeat;padding-left:18px;}
</style>
<script type="text/javascript" charset="utf-8">jQuery.extend(jQuery.easing,{easeOutCubic:function(x, t, b, c, d){return c * ((t = t / d - 1) * t * t + 1) + b;}});jQuery(document).ready(function(){var isopen = false,bitHeight=jQuery('#bitsubscribe').height(); setTimeout(function(){jQuery('#bit').animate({bottom: '-' + bitHeight - 30 + 'px' }, 200); }, 300); jQuery('#bit a.bsub').click(function(){if(!isopen){isopen = true; jQuery('#bit a.bsub').addClass('open');jQuery('#bit #bitsubscribe').addClass('open'); jQuery('#bit').stop(); jQuery('#bit').animate({ bottom:'0px'},{duration: 400,easing:"easeOutCubic"});}else{isopen=false;jQuery('#bit').stop(); jQuery('#bit').animate({bottom: '-' + bitHeight - 30 + 'px'}, 200,function(){jQuery('#bit a.bsub').removeClass('open');jQuery('#bit #bitsubscribe').removeClass('open');});}});});</script>
<div id="bit" class=""><a class="bsub" href="javascript:void(0)">
<span id='bsub-text'>Sigueme</span></a>
<div id="bitsubscribe"><h3><label for="loggedout-follow-field">Siguenos!</label></h3>
<form action="[[A-TU-PAGINA-DE-WORDPRESS]]" method="post" accept-charset="utf-8" id="loggedout-follow">
<p>Recibe cada artículo nuevo de este blog en tu correo.</p>
<p class="bit-follow-count">Únete a otros <?php echo $wpdb->get_var("SELECT COUNT(id) FROM wp_subscribe2 WHERE active='1'"); ?> seguidores:</p><p><input type="text" name="email" id="s2email" style="width: 95%; padding: 1px 2px" value="Escribe tu email" onfocus='this.value=(this.value=="Escribe tu email") ? "" : this.value;' onblur='this.value=(this.value=="") ? "Escribe tu email" : this.value;' id="loggedout-follow-field"/></p><input type="hidden" name="ip" value="<?php echo $_SERVER['REMOTE_ADDR']; ?>">
<p id='bsub-subscribe-button'> <input type="submit" name="subscribe" value="Anotame!" /></p></form></div></div>
<?php } ?>

Desactivar para dispositivos móviles

Las primeras y la última línea del código detectan si el usuario está viendo la página desde un dispositivo móvil.
Algunos dispositivos móviles pueden tener problemas de mostrar esta ventana flotante. A veces, la ventana puede ser flotante en el centro de la pantalla del dispositivo sin devolverse a la parte inferior de la página. Por esta razón, es posible que quieras desactivar (o eliminar) esta opción si el usuario está utilizando un dispositivo móvil para leer tu blog. Puedes desactivarlo si el servidor web detecta que un móvil está solicitando la página web mediante con estos dos bloques de código.

Paso # 5:

Pruebalo!

Si estas leyendo este paso significa que ya terminaste tu propio botón Seguir!

¡Felicitaciones!

Pero lo último que queda por hacer, es probarlo. Una vez que hayas guardado el archivo con el código anterior, sólo actualiza cualquier página de tu blog. Deberías ver que aparece el botón Seguir en la esquina inferior derecha de tu blog. Si haces click en él, deberías ver el formulario de suscripción para tus lectores al sistema. Si agregas uno de tus correos electrónicos, y haces click en el botón de suscripción, debes redirigirte a la página de seguimiento. Por último, deberías recibir un email de confirmación que te pedirá que confirmes tu suscripción haciendo click en un enlace.
Si todos estos pasos funcionan correctamente significa que has terminado y estas listo para proporcionarle esta nueva funcionalidad a los lectores de tu blog!

Conclusión

Si tienes alguna pregunta acerca de este hack, no dudes en preguntar aquí, en la sección de comentarios de este post. Estaré encantado de responder a todas ellas.
Feliz Hackeo!

Recursos

Puedes descargar el wordpress-follow.zip para tener el icono de “+” y un ejemplo del footer.php.

Abajo esta el detalle de cada uno de los pedazos de código para los que quieran modificar mas a fondo esta funcionalidad.

<?php $useragent= $_SERVER['HTTP_USER_AGENT'];if(!preg_match('/android.+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i',$useragent)||preg_match('/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|e\-|e\/|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(di|rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|xda(\-|2|g)|yas\-|your|zeto|zte\-/i',substr($useragent,0,4))){?>
 #bit, #bit *{*zoom:1;} #bit { bottom: -300px; font: 13px "Helvetica Neue",sans-serif; position: fixed; right: 10px; z-index: 999999; } .loggedout-follow-shelf{position:fixed;right:40%;z-index:999999;bottom:-300px;}.loggedout-follow-normal{position:fixed;z-index:999999;bottom:-300px;right:10px;}.loggedout-follow-typekit{margin-right:4.5em;position:fixed;z-index:999999;bottom:-300px;right:10px;}#bit a.bsub{display:block;overflow:hidden;padding:0 10px 0 8px;float:right;text-decoration:none !important;line-height:28px;font:normal 13px/28px "Helvetica Neue", sans-serif;color:#CCC;text-shadow:#444 0px -1px 0px;letter-spacing:normal;border:0;background-color:#464646;background-image:-ms-linear-gradient(bottom, #464646, #3f3f3f 5px);background-image:-moz-linear-gradient(bottom, #3f3f3f, #464646 5px);background-image:-o-linear-gradient(bottom, #464646, #3f3f3f 5px);background-image:-webkit-gradient(linear, left bottom, left top, from(#464646), to(#3f3f3f));background-image:-webkit-linear-gradient(bottom, #3f3f3f, #464646 5px);background-image:linear-gradient(bottom, #464646, #3f3f3f 5px);-webkit-box-shadow:0 -1px 5px rgba(0,0,0,0.20);-moz-box-shadow:0 -1px 5px rgba(0,0,0,0.20);-o-box-shadow:0 -1px 5px rgba(0,0,0,0.20);-ms-box-shadow:0 -1px 5px rgba(0,0,0,0.20);box-shadow:0 -1px 5px rgba(0,0,0,0.20);outline-style:none;outline-width:0;}#bit a.bsub{-moz-border-radius:2px 2px 0 0;-webkit-border-radius:2px 2px 0 0;-o-border-radius:2px 2px 0 0;-ms-border-radius:2px 2px 0 0;border-radius:2px 2px0 0 0;} #bit a:hover span, #bit a.bsub.open span{color:#ffffff !important;}#bit a.bsub.open{background:#333;}#bitsubscribe{background:#464646;color:#fff;padding:15px;width:200px;margin-top:27px;-moz-border-radius:2px 0 0 0;-webkit-border-radius:2px 0 0 0;-o-border-radius:2px 0 0 0;-ms-border-radius:2px 0 0 0;border-radius:2px 0 0 0;*float:right;*margin-right:-68px;}div#bitsubscribe.open{-webkit-box-shadow:0 0 8px rgba(0,0,0,0.5);-moz-box-shadow:0 0 8px rgba(0,0,0,0.5);-o-box-shadow:0 0 8px rgba(0,0,0,0.5);-ms-box-shadow:0 0 8px rgba(0,0,0,0.5);box-shadow:0 0 8px rgba(0,0,0,0.5);}#bitsubscribe div{overflow:hidden;}#bit h3, #bit #bitsubscribe h3, #bitsubscribe h3 label{margin:0 0 .5em 0 !important;font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;font-weight:300;text-shadow:0 1px 0 #333;font-size:28px;color:#fff;text-align:left;}#bit #bitsubscribe p{margin:0 0 1em 0;*margin:0;font:15px/1.3em "Helvetica Neue", Helvetica, Arial, sans-serif;font-weight:300;text-shadow:0 1px 0 #333;color:#fff;}#bitsubscribe p a{margin:20px 0 0;color:#fff;text-decoration:underline;}#bit #bitsubscribe p.bit-follow-count{font-size:13px;} #bit #bitsubscribe p#bsub-subscribe-button, form#loggedout-follow {margin: 0;}#bitsubscribe input[type=submit]{padding:2px 20px;background:#333;background:-moz-linear-gradient(top, #333 0%, #111 100%);background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#333), color-stop(100%,#111));background:-webkit-linear-gradient(top, #333 0%,#111 100%);background:-o-linear-gradient(top, #333 0%,#111 100%);background:-ms-linear-gradient(top, #333 0%,#111 100%);background:linear-gradient(top, #333 0%,#111 100%);color:#ccc;text-shadow:0 1px 0 #000;border:1px solid #282828;-moz-border-radius:11px;-webkit-border-radius:11px;border-radius:11px;-moz-box-shadow:inset 0 1px 0 #444;-webkit-box-shadow:inset 0 1px 0 #444;box-shadow:inset 0 1px 0 #444;text-decoration:none;-webkit-transition:all 0.25s ease-in-out;-moz-transition:all 0.25s ease-in-out;-o-transition:all 0.25s ease-in-out;transition:all 0.25s ease-in-out;*margin:1em 0 1em 0;} #bitsubscribe input[type=submit]:hover{background:#222;background:-moz-linear-gradient(top, #333 0%, #222 100%);background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#333), color-stop(100%,#222));background:-webkit-linear-gradient(top, #333 0%,#222 100%);background:-o-linear-gradient(top, #333 0%,#222 100%);background:-ms-linear-gradient(top, #333 0%,#222 100%);background:linear-gradient(top, #333 0%,#222 100%);color:#fff;-moz-box-shadow:inset 0 1px 0 #4f4f4f;-webkit-box-shadow:inset 0 1px 0 #4f4f4f;box-shadow:inset 0 1px 0 #4f4f4f;text-decoration:none;}#bitsubscribe input[type=submit]:active{background:#111;background:-moz-linear-gradient(top, #111 0%, #222 100%);background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#111), color-stop(100%,#222));background:-webkit-linear-gradient(top, #111 0%,#222 100%);background:-o-linear-gradient(top, #111 0%,#222 100%);background:-ms-linear-gradient(top, #111 0%,#222 100%);background:linear-gradient(top, #111 0%,#222 100%);color:#aaa;-moz-box-shadow:inset 0 -1px 0 #333;-webkit-box-shadow:inset 0 -1px 0 #333;box-shadow:inset 0 -1px 0 #333;text-decoration:none;}#bitsubscribe input[type=text]{-moz-border-radius:3px;-webkit-border-radius:3px;-o-border-radius:3px;-ms-border-radius:3px;border-radius:3px;font:15px "Helvetica Neue", Helvetica, Arial, sans-serif;font-weight:300;}#bitsubscribe input[type=text]:focus{border:1px solid #000;}#bitsubscribe.open{display:block;}#bsub-subscribe-button{text-align:center;margin:0 auto;} #bsub-subscribe-button input {margin: 0; } #bitsubscribe #lof-readerpromo p{color:#ccc;}#bitsubscribe #lof-followpublicize{border-top:1px solid #3c3c3c;margin-bottom:.5em;}#bitsubscribe #lof-followpublicize h3{font-size:13px;padding-top:1em;margin-bottom:1em !important;}#bitsubscribe #lof-followpublicize p.lof-followpublicize-twitter, #bitsubscribe #lof-followpublicize p.lof-followpublicize-facebook{background:#555;-moz-border-radius:3px;-webkit-border-radius:3px;-o-border-radius:3px;-ms-border-radius:3px;border-radius:3px;-moz-box-shadow:inset 0 1px 1px #333;-webkit-box-shadow:inset 0 1px 1px #333;-o-box-shadow:inset 0 1px 1px #333;-ms-box-shadow:inset 0 1px 1px #333;box-shadow:inset 0 1px 1px #333;margin-bottom:.5em;overflow:hidden;}#bitsubscribe #lof-followpublicize p.lof-followpublicize-twitter{padding:10px 10px 5px;}#bitsubscribe #bsub-credit{text-align:center;font:normal 11px "Helvetica Neue", sans-serif;padding:7px 0;margin:0 0 -15px;border-top:1px solid #3c3c3c;}#bitsubscribe #bsub-credit a{color:#aaa;text-shadow:0 1px 0 #262626;background:none;text-decoration:none;}#bitsubscribe #bsub-credit a:hover{color:#fff;background:none;}
#bit a.bsub span{background:url('wordpress-plus.png') 0 1px no-repeat;padding-left:18px;}
<script>
jQuery.extend(jQuery.easing, { easeOutCubic: function (x, t, b, c, d) { return c * ((t = t / d - 1) * t * t + 1) + b; } });
		jQuery(function () {
		 	var isopen = false, bitHeight = $('#bitsubscribe').height();
		 	setTimeout(function () { $('#bit').animate({bottom: '-' + bitHeight - 30 + 'px'}, 200);}, 300);
		$('#bit a.bsub').click(function () {
		 	if (!isopen) {
		 		isopen = true;
		 		$('#bit a.bsub').addClass('open');
		 		$('#bit #bitsubscribe').addClass('open')
		 		$('#bit').stop();
		 		$('#bit').animate({ bottom: '0px' }, { duration: 400, easing: "easeOutCubic" });
		 	} else {
		 		isopen = false;
		 		$('#bit').stop();
		 		$('#bit').animate({ bottom: '-' + bitHeight - 30 + 'px'}, 200, function () {
					$('#bit a.bsub').removeClass('open');
		 			$('#bit #bitsubscribe').removeClass('open'); });
		 		}
		 	});
		});
</script>
<div id="bit" class="">
		<a class="bsub" href="javascript:void(0)"><span id='bsub-text'>Sigueme</span></a>
		
		<div id="bitsubscribe">
			<h3><label for="loggedout-follow-field">Siguenos!</label></h3>
			<form action="[[A-TU-PAGINA-DE-WORDPRESS]]" method="post" accept-charset="utf-8" id="loggedout-follow">
				<p>Recibe cada artículo nuevo de este blog en tu correo.</p>
				<p class="bit-follow-count">Únete a otros <?php echo $wpdb->get_var("SELECT COUNT(id) FROM wp_subscribe2 WHERE active='1'"); ?> seguidores:</p>
				<p><input type="text" name="email" id="s2email" style="width: 95%; padding: 1px 2px" value="Escribe tu email" onfocus='this.value=(this.value=="Escribe tu email") ? "" : this.value;' onblur='this.value=(this.value=="") ? "Escribe tu email" : this.value;' id="loggedout-follow-field"/></p>
				<input type="hidden" name="ip" value="<?php echo $_SERVER['REMOTE_ADDR']; ?>">
				<p id='bsub-subscribe-button'> <input type="submit" name="subscribe" value="Anotame!" /></p>
			</form>	
		</div>
		
	</div>
<?php } ?>

Creditos

Este artículo fue traducido y parafraseado de este:
http://fgiasson.com/blog/index.php/2011/10/02/wordpresss-follow-button-for-non-wordpress-com-users/

Resolviendo conflictos con una instalación local apache/php/mysql en mac OS X Lion

Resolviendo problemas con la migración del mac OSX Snow Leopard al mac OSX Lion.

module php5_module is already loaded skipping

Este mensaje quiere decir que estas cargando dos veces el modulo de php.
Para quitar uno y seguir con el trabajo debes:
1. Buscar  /usr/local/php5/entropy-php.conf y comentar la primera línea que dice
  # LoadModule php5_module        /usr/local/php5/libphp5.so 

Y en el httpd.conf (/private/etc/apache2/httpd.conf)

#LoadModule php5_module        libexec/apache2/libphp5.so