10 trucos para optimizar tus plantillas de WordPress

Lo bueno de WordPress es que es realmente fácil adaptarlo para diferentes tareas. Puedes extenderlo con solo algunas líneas de código. En esta entrada podrás acceder a 10 código cortos para optimizar y potenciar tu plantilla para WordPress. Puedes añadir estos trozos de código en el fichero functions.php de tu plantilla de WordPress.

Limitar el contador de palabras del extracto

Una de las cosas que hace mal WordPress es que cuando los usuarios incluyen demasiadas palabras antes de la etiqueta more. Para esto es mejor definir un extracto (the excerpt) en el campo dedicado a tal fin, pero el problema es que en sitios con cientos de entradas suele se complicado crear los extractos. En este caso, lo mejor es limitar el número de palabras a mostrar sin tener en cuenta el more con este código:

add_filter('excerpt_length', 'ilc_excerpt_length');
function ilc_excerpt_length( $length ){
	return 10;
}

Añadir un Favicon utilizando un Hook en WordPress

Un Hook permite insertar un código personalizados sin tocar la plantilla. Puedes añadir un favicon en tu sitio web sin tocar el fichero header.php, solo con esta función en el wp_head:

add_action( 'wp_head', 'ilc_favicon');
function ilc_favicon(){
	echo "<link rel='shortcut icon' href='" . get_stylesheet_directory_uri() . "/favicon.ico' />" . "\n";
}

El fichero favicon.ico debe estar localizado en el raíz de tu tema.

Detectar Safari en iOS

Podemos mostrar una versión móvil utilizando diferentes técnicas. WordPress ofrece un modo seguro de comprobar si un navegador es Safari y así identificar cuando un visitante utiliza iPhone o iPad.

WordPress configura internamente la variables $is_phone, y puede usarla para embeber un hoja de estilos alternativa, mostrando contenidos alternativos o mostrando un formato de vídeo diferente. Aquí tenéis el ejemplo de código:

add_action('wp_print_styles', 'ilc_enqueue_styles');
function ilc_enqueue_styles(){
	global $is_iphone;
	if( $is_iphone ){
		wp_enqueue_style('iphone-css', get_stylesheet_directory_uri() . '/iphone.css' );
	}
	else{
		wp_enqueue_style('common-css', get_stylesheet_directory_uri() . '/common.css' );
	}
}

En ese caso, nosotros utilizamos la función estándar de WordPress wp_enqueue_style para añadir estilos en los elementos de la cabecera de tu página web.

Eliminar elementos desde la cabecera

WordPress muestra muchas cosas en tu cabecera. En particular información como la etiqueta de versión de WordPress, RSDlink y el wlwmanifest que no suele ser útil para muchos usuarios:

<meta name="generator" content="WordPress 3.4">
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://wpdirecto.com/xmlrpc.php?rsd">
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://wpdirecto.com/wp-includes/wlwmanifest.xml">

Algunos bloggers piensan que es mejor no mostrar la versión de WordPress, así también minimizas posibles ataques por versiones no actualizadas, al no mostrar claramente la versión disponible.

Si no necesitas funciones XML-RPC, podrás remover el RSD link. En este caso, puedes añadir este código:

add_filter('the_generator', create_function('', 'return "";'));
remove_action('wp_head', 'rsd_link');
remove_action('wp_head', 'wlwmanifest_link');

Estas líneas eliminarán los correspondientes elementos de tu cabecera.

Redireccionar Feeds de WordPress a FeedBurner

WordPress ofrece grandes posibilidades con feeds, pero si quieres estadísticas de suscriptores y otras opciones, el mejor servicio suele ser FeedBurner de Google. Puedes redireccionar tu feed hacia este servicio u otro similar con un código como el siguiente. Esto lo que hará es que por ejemplo http://carrero.es/feed/ se redireccione hacia FeedBurner.

add_action('template_redirect', 'ilc_rss_redirect');
function ilc_rss_redirect() {
	if ( is_feed() && !preg_match('/feedburner|feedvalidator/i', $_SERVER['HTTP_USER_AGENT'])){
		header('Location: http://feeds.feedburner.com/smashingmagazine');
		header('HTTP/1.1 302 Temporary Redirect');
	}
}

Reemplaza http://feeds.feedburner.com/carrero con la URL de tu propio FeedBurner.

Mostrar imágenes destacadas en feeds

Los suscriptores de tu sitio web suelen consumir contenidos a través de RSS (feed), y a veces no visualizan tus imágenes. Con este código podemos mostrar las imá´genes destacadas en RSS.

add_filter('the_content_feed', 'rss_post_thumbnail');
function rss_post_thumbnail($content) {
	global $post;
	if( has_post_thumbnail($post->ID) )
		$content = '<p>' . get_the_post_thumbnail($post->ID, 'thumbnail') . '</p>' . $content;
	return $content;
}

Mostrar contenidos solo a suscriptores de RSS

Incrementa el número de suscriptores de tu RSS feed, de una forma sencilla, ofrece contenidos exclusivos solo para ellos. Con este nuevo código corto con el que puedes ordenar que determinado contenido este oculto a visitantes regulares y solo sea visible para suscriptores RSS.

add_shortcode( 'feedonly', 'ilc_feedonly' );
function ilc_feedonly( $atts, $content = null ) {
	if( is_feed() ) return '<p>' . $content . '</p>';
	else return;
}

Mostrar contenidos solos para usuarios autentificados

Al igual que el truco anterior este te permite mostrar contenidos exclusivos solo para usuarios registrados.

add_shortcode( 'loggedin', 'ilc_loggedin' );
function ilc_loggedin( $atts, $content = null ) {
	if( is_user_logged_in() ) return '<p>' . $content . '</p>';
	else return;
}

Visualizar enlaces para compartir entradas en redes sociales

Si, por alguna razón, no quieres usar el estándar de Facebook, Twitter u otra red social para compartir entradas, puedes utilizar los códigos que aquí te mostramos, incluso haciendo uso de iconos recomendados como Flavours.

A través de la función the_content podemos filtrar y añadir los iconos de las redes sociales.

add_filter( 'the_content', 'ilc_share' );
function ilc_share( $content ) {
	global $post;
	$postlink  = get_permalink($post->ID);
	$posttitle = get_the_title($post->ID);
	$html = '<ul class="share-entry">';
	// Twitter
	$html .= '<li><a class="share-twitter" title="Share on Twitter" rel="external" href="http://twitter.com/share?text='.$posttitle.'&url='.$postlink.'">Share on Twitter</a></li>';
	// Facebook
	$html .= '<li><a class="share-facebook" title="Share on Facebook" rel="external" href="http://www.facebook.com/share.php?u=' . $postlink . '">Share on Facebook</a></li>';
	// LinkedIn
	$html .= '<li><a class="share-linkedin" title="Share on LinkedIn" rel="external" href="http://www.linkedin.com/shareArticle?mini=true&url=' . $postlink . '&title=' . $posttitle . '">Share on LinkedIn</a></li>';
	// Pinterest
	$html .= '<li><a href="http://pinterest.com/pin/create/button/?url=%s&media=%s" class="pin-it-button" count-layout="horizontal">Pin It</a><script type="text/javascript" src="http://assets.pinterest.com/js/pinit.js"></script></div>', urlencode( get_permalink() ), urlencode( genesis_get_image( array( 'format' => 'url' ) ) ) ); </li>';
	// StumbleUpon
	$html .= '<li><a class="share-stumbleupon" title="Share on StumbleUpon" rel="external" href="http://www.stumbleupon.com/submit?url=' . $postlink . '&title=' . $posttitle . '">Share on StumbleUpon</a></li>';
	// Google+
	$html .= '<li><a class="share-googleplus" title="Share on Google+" rel="external" href="https://plusone.google.com/_/+1/confirm?url=' . $postlink . '">Share on Google+</a></li>';
	$html .= '</ul>';
	return $content . $html;
}

Este código modificado para quitar Digg y añadir Pinterest permite añadir en tus entradas y páginas de archivo (también categorías y páginas de etiquetas).

Añadir logo en la página de autentificación

Añadir tu logotipo en la página de login para administradores, utiliza la acción login_head.

add_action( 'login_head', 'ilc_custom_login');
function ilc_custom_login() {
	echo '<style type="text/css">
	h1 a { background-image:url('. get_stylesheet_directory_uri() . '/images/login-logo.png' . ') !important; margin-bottom: 10px; }
	padding: 20px;}
	</style>
	<script type="text/javascript">window.onload = function(){document.getElementById("login").getElementsByTagName("a")[0].href = "'. home_url() . '";document.getElementById("login").getElementsByTagName("a")[0].title = "Go to site";}</script>';
}

El código CSS para reemplazar el logo de WordPress por uno propio. Puedes ajustar la ruta de la imagen en el código. De forma adicional también puedes cambiar hacia donde enlaza el logotipo, para que sea tu propia página.

Algunas conclusiones

Hay muchas más opciones para personalizar nuestro WordPress, aquí tienes una importante muestra de la potencia y opciones de este popular gestor de contenidos.

Fuente: WordPress Smashing magazine