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.

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.

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

Fuera de todo el debate, puede que quieras insertar este botón en tu blog para que tus lectores “buzzeen?” tus entradas.

Integración

En archivo single.php inserta esta lineas de código donde necesites que el botón se muestre

	<div class="gbuzz">
	 <a class="gbutton"
href="http://www.google.com/reader/link?url=<?php the_permalink() ?>&amp;title=<?php echo urlencode(get_the_title($id)); ?>&amp;srcURL=<?php bloginfo('url'); ?>" target="_blank" rel="nofollow external">Gbuzz</a>
	</div>

Estilo

.gbuzz{
clear:left;
margin:0;
padding:5px;
	}
a.gbutton {
-moz-border-radius:3px 3px 3px 3px;
background:url("img/buzz-icon2.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:47px;
}

Como lo veras le he aplicado un poco de CSS para que la integración sea completa, si lo deseas puedes modificarlo según tus necesidades, para eso edita el estilo

Resultado final

La imagen que se muestra en pantalla corresponde al diseño final, y el icono es tomado de Gmail directamente, te sugiero que lo guardes para futuros usos.

Simple y contundente, otro botón mas abarrotar la red.

Como lo sabrás cada Theme tiene su propia hoja de estilos que es lo que le formato en definitiva. Si necesitáramos personalizar nuestras entradas, tendríamos que editar la hoja de estilos del Theme; cosa que puede ser algo molesto si solo necesitamos personalizar una entrada en concreto.

Con esta pequeña función, estaremos añadiendo un Box para que la hora de crear un Post o Pagina podamos insertar un estilo para cada entrada/pagina en concreto.

Por medio de filtros y acciones esta función insertar en el header de nuestro Theme, el estilo que le hayamos aplicados. Solo tenes que cerciorarte que Theme cuente con wp_head(); dentro del Header.

Uso

En tu archivo functions.php inserta lo siguiente:

 //Custom CSS 
add_action('admin_menu', 'custom_css_hooks');
add_action('save_post', 'save_custom_css');
add_action('wp_head','insert_custom_css');
function custom_css_hooks() {
	add_meta_box('custom_css', 'Custom CSS', 'custom_css_input', 'post', 'normal', 'high');
	add_meta_box('custom_css', 'Custom CSS', 'custom_css_input', 'page', 'normal', 'high');
}
function custom_css_input() {
	global $post;
	echo '<input type="hidden" name="custom_css_noncename" id="custom_css_noncename" value="'.wp_create_nonce('custom-css').'" />';
	echo '<textarea name="custom_css" id="custom_css" rows="5" cols="30" style="width:100%;">'.get_post_meta($post->ID,'_custom_css',true).'</textarea>';
}
function save_custom_css($post_id) {
	if (!wp_verify_nonce($_POST['custom_css_noncename'], 'custom-css')) return $post_id;
	if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) return $post_id;
	$custom_css = $_POST['custom_css'];
	update_post_meta($post_id, '_custom_css', $custom_css);
}
function insert_custom_css() {
	if (is_page() || is_single()){
		if (have_posts()) : while (have_posts()) : the_post();
			echo '<style type="text/css">'.get_post_meta(get_the_ID(), '_custom_css', true).'</style>';
		endwhile; endif;
		rewind_posts();
	}
}
 
//End Custom CSS

Ahora cada vez que escribas una entrada/pagina encontraras este box para insertar tus estilos:

Como lo veras esta función es bastante flexible por lo sera posible adaptarla, para por ejemplo también poder incluir scripts en nuestro Header.

El editor de Wordpress es muy poderoso, y dispone de una serie de shortcuts (atajos) para darle formato al texto.

Estos son los 21 shortcuts necesarios para llevar tu productividad al máximo:

• Negrita: Alt+SHIFT+b

• Cursiva: Alt+SHIFT+i

• Link: Alt+SHIFT+a

• Blockquote: Alt+SHIFT+q

• Codigo: Alt+SHIFT+c

• Leer mas: Alt+SHIFT+t

• Lista desordenada (ul): Alt+SHIFT+u

• Lista ordenada (ol): Alt+SHIFT+o

• Item de lista (li): Alt+SHIFT+l

• Editor avanzado: Alt+SHIFT+v

• Publicar entrada: Alt+SHIFT+p

• ins: Alt+SHIFT+s

• del: Alt+SHIFT+d

• Deshacer cita/sangria: Alt+SHIFT+w

• Deshacer: Alt+SHIFT+u

• Rehacer: Alt+SHIFT+y

• Editar en HTML: Alt+SHIFT+e

• Alinear a la izquierda: Alt+SHIFT+f

• Alinear al centro: Alt+SHIFT+c

• Alinear a la derecha: Alt+SHIFT+r

• Ctrl+[numero] para cambiar entre distinto tamaño de header en el texto seleccionado

Visto en Wpbeginner

Wordpress por defecto no utiliza este atributo, pero varios plugins lo hacen; o quizás fuiste tu mismo el que agrego el nofollow manualmente en tus artículos.

Si por algún motivo ya no deseas que ese atributo este presente en el contenido de tus entradas, con esta simple función no desharemos del atributo nofollow.

Eliminar atributo nofollow dentro de las entradas

Dentro del archivo functions.php inserta estas lineas:

function remove_nofollow($string) {
	$string = str_ireplace(' rel="nofollow"', '', $string);
	return $string;
}
add_filter('the_content', 'remove_nofollow');

Esta pequeña función revisara tus entradas y se deshará del atributo automáticamente.

Eliminar atributo nofollow dentro de las entradas y comentarios

Si también deseas deshacerte del nofollow en tu contenido y en tus comentarios, solo necesitas añadir estas lineas en tu functions.php

function remove_nofollow($string) {
	$string = str_ireplace(' rel="nofollow"', '', $string);
	return $string;
}
add_filter('the_content', 'remove_nofollow');
add_filter('comment_text', 'remove_nofollow');

Visto en Digging into Wordpesss

Con esta receta mejorada ahora podremos ajustar el tamaño del gravatar, mostrar y controlar los caracteres del comentario y mostrar solo comentarios, excluyendo Pingbacks y Trackbacks.

Donde necesites que se muestren los últimos comentarios solo introduce esta porción de código.

<?php
$comments = get_comments('status=approve&number=5');//solo ultimos 5 comentarios aprobados , exlcluir Pingbacks & Trackbacks
$img_w = '80'; //tamaño de mi gravatar
$comment_lenth = '150'; //cantidad de caracteres a mostrar antes de cortar el comentario
 
if ($comments) {
    echo '<ul>';
    foreach ($comments as $comment) {
        $comment_content = strip_tags($comment->comment_content);
        $comment_excerpt = mb_substr($comment_content, 0, $comment_lenth) . " [...]";
        $permalink = get_permalink($comment->ID) . "#comment-" . $comment->comment_ID;
        $url = '<a href="' . $permalink . '" title="' . $comment->comment_author . ' | ' .
            get_the_title($comment->comment_post_ID) . '">';
        echo '<li>';
        echo '<div class="gravatar">';
        echo $url;
        echo get_avatar($comment->comment_author_email, $img_w);
        echo '</a></div>';
 
        echo '<p class="comment_author">Autor: ';
        echo $url;
        echo $comment->comment_author;
        echo '</a></p>';
        echo '<span class="comment_text">';
        echo " <a href=\"" . $permalink . "\" title=\"Ver todo el comentario\">";
        echo $comment_excerpt;
        echo "</a>";
        echo '</span>';
        echo '</li>';
 
    }
    echo '</ul>';
}
 
?>

Lo que nos devolverá un Output como el siguiente:

         <ul>
                <li>
                    <div class="gravatar">
                        <img alt='' src='http://www.gravatar.com/avatar/9b3068f17206b81cdde75e85d50885cb?s=80&amp;d=http%3A%2F%2Feliseos.net%2Fwp-content%2Fthemes%2FEliseosV2%2Fimages%2Favatar.png%3Fs%3D80&amp;r=G' class='avatar avatar-80 photo' height='80' width='80' />
                    </div>
 
                    <p class="comment_author">Autor: Alexis</p> <span class="comment_text">Estas usando los campos personalizados o custom fields ? [...]</span>
                </li>
         </ul>

Ahora solo te resta darle estilo a través de CSS.

Por cada comenario que un lector deja en el blog se almacenan datos en las cookies, se guardan en sus computadoras y luego a través de Wordpress podemos acceder a ellos. Los valores mas importantes y a los que luego haremos referencia son:

1. $comment_author

2. $comment_author_email

3. $comment_author_url

Nuestro objetivo sera modificar nuestro archivo comments.php para que luego de cada comentario dejado, Wordpress recuerde automáticamente estos datos y se lo muestre al usuario, así este no tiene la necesidad de volver a introducirlos.

Como lo mencione mas arriba Wordpress almacena esta información por nosotros, solo resta hacer el llamado y mostrar nuestro output:

<?php echo esc_attr($comment_author); ?>
<?php echo esc_attr($comment_author_email); ?>
<?php echo esc_attr($comment_author_url); ?>

Editando nuestro archivo comments.php

Solo necesitamos modificar los 3 campos donde se introduce el Nombre, el Sitio Web y el E-mail. Para eso solo modificamos los 3 valores antes mencionados en nuestros input:

<div>
  <label for="author">Nombre*</label>
  <input type="text" name="author" id="author" value="<?php echo esc_attr($comment_author); ?>" tabindex="1" />			
</div>	
 
<div>
  <label for="email">E-mail*</label>
  <input type="text" name="email" id="email" value="<?php echo esc_attr($comment_author_email); ?>" tabindex="2" />
</div>
 
<div>
  <label for="url">Sitio Web</label>
  <input type="text" name="url" id="url" value="<?php echo esc_attr($comment_author_url); ?>" tabindex="3" />
</div>

Cada ves que un usuario vuelva a comentar, Wordpress le recordara sus datos. Fantástico!

Mostrar el Gravatar

Como un extra si se quiere, también somos capaces de devolver el Gravatar del usuario para mostrarlo donde necesitemos. La URL de Gavatar esta compuesta por el siguiente formato:

http://www.gravatar.com/avatar/MD5-HASH-OF-EMAIL

Así que solo necesitamos devolverla dentro de img y estaremos listos

<?php if ($comment_author_email != "") { 
 
    $gravatar_link = 'http://www.gravatar.com/avatar/' . md5($comment_author_email) . '?s=32';
    echo '<img src="' . $gravatar_link . '" alt="" />';
 
} ?>

Estos pequeños trucos nos ayudan a interactuar cada ves mas con el usuario y hacerlo sentir mas a gusto.

Articulo visto en Digging into Wordpress