• 10 trucos para optimizar tus plantillas de WordPress

    por  • 7 marzo, 2012 • Código fuente, Optimización, wordpress.org • 3 Comentarios

    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

    Acerca de

    Experimentando con un sitio web sobre WordPress, este popular gestor de contenidos, entre otros muchos proyectos.

    http://carrero.es

    3 Responses to 10 trucos para optimizar tus plantillas de WordPress

    1. Pingback: Sin tiempo para escribir.134, Carrero

    2. Adrian
      19 septiembre, 2012 en 16:49

      Hola, muy bueno el post y la web…

      te hago una pregunta en la que espero me puedas ayudar… necesito pasar una animación realizada en flash a html5 ya que necesito que se vea por igual en un navegador como en moviles (iphone android, etc.).. Ese paso lo logré usando swiffy de google, que me genera el codigo correspondiente para la animación… El problema me viene a la hora de incrustarlo en una pagina de wordpress (no lo muestra!!). Ya probé de todo y nada, bajé un pluglin llamado html5 swiffy insert, que usa campos personalizados en donde se pega el codigo y se llama por un shortcode, pero tampoco, me genera el espacio en la pagina pero no muestra la animación..

      Espero me puedas orientar acerca de alguna forma para poder controlar esto, ya sea con codigo html5 o cambiando el contenido si es que se abre con iphone/ipad.. Desde ya, te agradezco cualquier ayuda …

    3. 13 noviembre, 2012 en 17:52

      gracias por la excelente recopilacion, son muy interesantes sobre todo para la optimizacion del sitio.

    Deja un comentario

    Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *