Clicky

10 fragmentos de código para utilizar en WordPress las imágenes con mayor eficacia

code snippet para imágenes en WordPress

Es vital asegurarse de que nuestras imágenes son tan pequeñas (y por tanto rápidas para cargar) como sea posible

Tu sabes lo importantes que son las imágenes en el mundo del marketing online.

No necesito decirte que el 65% de las personas que visitan tu sitio son aprendices visuales, o que la infografía es un medio de producción probado como contenido viral. Y no estás en lo más mínimo sorprendido de que las entradas del blog con imágenes reciben un 94% más de visitas que las que no.

Así que en lugar de ir por ese camino, vamos a explorar en su lugar las maneras que en puedes aprovechar WordPress para sacar el máximo partido de tus imágenes. A continuación encontrarás 10 fragmentos de código (code snippets) que te permitirán utilizar las imágenes con mayor eficacia en WordPress. Y no necesito decirte que eso es una buena cosa, ¿verdad?

(A menos que se indique lo contrario, todos los fragmentos de código se deben insertar en el archivo functions.php).

1. Retira la compresión automática JPEG

Es vital asegurarse de que nuestras imágenes son tan pequeñas (y por tanto rápidas para cargar) como sea posible, que es por lo que recomiendo de todo corazón los plugins para WordPress WP Smush.it y TinyPNG, que comprimen archivos JPEG y PNG con tanta eficacia que es muy poco probable que se note la diferencia.

Si has instalado estos plugins y están comprimiendo las imágenes como mejor te parezca a ti mismo, es casi seguro que no necesitas las capacidades de compresión JPEG de WordPress, que por defecto comprimen el tipo de archivo de imagen favorito de la web al 90% de su calidad original. Puedes desactivar efectivamente esta función utilizando el siguiente código:

add_filter( 'jpeg_quality', 'smashing_jpeg_quality' );
function smashing_jpeg_quality() {
   return 100;
}

Fuente: Powerful WordPress Tips And Tricks (Smashing Magazine)

2. Añadir un favicon

Nunca deja de sorprenderme cómo muchos sitios web no tienen un favicon personalizado. No es el trabajo más grande del mundo, pero al mismo tiempo es una tarea tan fácil de cumplimentar que todos los sitios web que se precien deben tener uno.

Puedes crear un favicon desde cero o crearlo desde tu logotipo usando una aplicación web como favicon.cc . Una vez que hayas hecho esto, carga tu nuevo y brillante favicon a la carpeta raíz del tema (es decir, /wp-content/nombre-tu-tema/ ) y permitir su visualización mediante el siguiente código:

add_action( 'wp_head', 'ilc_favicon');
function ilc_favicon(){
  echo "<link rel='shortcut icon' href='" . get_stylesheet_directory_uri() . "http://media.mediatemple.netdna-cdn.com/favicon.ico' />" . "n";
}

Fuente: 10 Tips To Optimize Your WordPress Theme (Smashing Magazine)

3. Visualiza tu favicon como Gravatar

Si no tienes el tiempo o la inclinación para crear un favicon personalizado, una alternativa rápida y fácil es utilizar tu Gravatar preexistente (pista: querrás conseguirte uno de estos si no lo has hecho ya).

El Gravatar adjunto a la dirección de correo electrónico que aparece en tu perfil de WordPress se utilizará como tu favicon. Introduce el siguiente código en functions.php y ¡WordPress hará el resto!

function gravatar_favicon() {
    $GetTheHash = md5(strtolower(trim(get_bloginfo('admin_email'))));
    return 'http://www.gravatar.com/avatar/' . $GetTheHash . '?s=16';
}
function favicon() {
    echo '<link rel="Shortcut Icon" type="image/x-icon" href="'.gravatar_favicon().'" />';
}
add_action('wp_head', 'favicon');

Fuente: Display Gravatar Image as the Favicon (WPSnipp)

4. Añadir soporte para temas de imágenes

Antes de hacer cualquier otra cosa, querrás asegurarte de que su tema es compatible con imágenes destacadas (anteriormente conocidas como miniaturas de post - post thumbnails).

Es casi seguro que, si lo quiers hacer, sólo tienes que añadir el siguiente código a functions.php :

add_theme_support( 'post-thumbnails' );

Fuente: Function Reference/add theme support (WordPress Codex)

5. Exigir una foto principal para poder publicar un post

Como regla general, cada una de las entradas del blog debe ofrecer una imagen.

Con esto en mente, puede ser especialmente útil hacer cumplir la inclusión de una imagen destacada; o bien si se ejecuta un blog multi-autor y quieres asegurarte de que tus autores se adhieren a sus necesidades, o ejecutas tu propio blog y a veces tiendes a ser un poco olvidadizo.

Si agregas el siguiente código a tu archivo functions.php y tratas de publicar un post que no tenga una imagen ofrecida, recibirás el siguiente mensaje: "Debe seleccionar una Foto principal antes de que el post puede ser publicado".

add_action('save_post', 'wpds_check_thumbnail');
add_action('admin_notices', 'wpds_thumbnail_error');

function wpds_check_thumbnail($post_id) {

    // change to any custom post type
    if(get_post_type($post_id) != 'post')
        return;
    
    if ( !has_post_thumbnail( $post_id ) ) {
        // set a transient to show the users an admin message
        set_transient( "has_post_thumbnail", "no" );
        // unhook this function so it doesn't loop infinitely
        remove_action('save_post', 'wpds_check_thumbnail');
        // update the post set it to draft
        wp_update_post(array('ID' => $post_id, 'post_status' => 'draft'));

        add_action('save_post', 'wpds_check_thumbnail');
    } else {
        delete_transient( "has_post_thumbnail" );
    }
}

function wpds_thumbnail_error()
{
    // check if the transient is set, and display the error message
    if ( get_transient( "has_post_thumbnail" ) == "no" ) {
        echo "<div id='message' class='error'><p><strong>You must select Featured Image. Your Post is saved but it can not be published.</strong></p></div>";
        delete_transient( "has_post_thumbnail" );
    }

}

Fuente: Require a Featured Image Before You Can Publish Post (WPSnipp)

6. Mostrar imágenes destacadas en tu RSS Feed del Blog de WordPress

Por defecto, las imágenes no se muestran en el feed RSS de tu blog. Esto no es bueno en absoluto, y está muy arriba en mi lista de tareas que hay que cambiar a la hora de diseñar un nuevo sitio.

Afortunadamente, la solución es bastante simple. Sólo tienes que utilizar el siguiente fragmento de código:

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;
}

Fuente: 10 Tips To Optimize Your WordPress Theme (Smashing Magazine)

7. Retira en WordPress etiquetas de párrafo en imágenes

Uno de las mayores irritaciones que tengo con WordPress es su insistencia en que envuelva las imágenes en un párrafo (es decir etiquetas, <p> </p> ). Esto realmente puede causar estragos con el estilo, especialmente cuando estás diseñando un tema.

Afortunadamente es lo suficiente fácil detener que WordPress haga esto. Introduce el código de abajo y WordPress eliminará las etiquetas de párrafo que rodean imágenes dentro de the_content .

function filter_ptags_on_images($content){
    return preg_replace('/
\s*(<a>)?\s*(<img alt="" />)\s*(<\/a>)?\s*<\/p>/iU', '\1\2\3', $content);
}
add_filter('the_content', 'filter_ptags_on_images');</a>

Fuente: Remove P Tag From Around Images in the_content (WPSnipp)

8. Retira ancho y alto de las imágenes insertadas

Por defecto WordPress añade atributos de anchura y altura (en HTML) para cada imagen que se inserta en una entrada de blog o página.

Bajo la mayoría de circunstancias esto es deseable ya que garantiza que el tamaño adecuado con respecto a la imagen dentro de tu diseño, incluso si la imagen en sí todavía se está cargando. Sin embargo, hay ocasiones en que estas dimensiones 'codificadas' se oponen directamente a algo que estás tratando de lograr con CSS.

Si alguna vez te encuentras en ese dilema, sólo tienes que utilizar el código siguiente para quitar los atributos de anchura y altura:

add_filter( 'post_thumbnail_html', 'remove_width_attribute', 10 );
add_filter( 'image_send_to_editor', 'remove_width_attribute', 10 );

function remove_width_attribute( $html ) {
   $html = preg_replace( '/(width|height)="\d*"\s/', "", $html );
   return $html;
}

Fuente: Remove Width and Height Attributes From Inserted Images (CSS Tricks)

9. Añade tu logotipo a la página de entrada

Vamos a terminar esta evaluación con un par de fragmentos de código en el backend.

En primer lugar vamos a añadir nuestro logotipo a la página de inicio de sesión de WordPress (http://tusitio.com/wp-login.php). Si estás funcionando como autor de varios blog o creando un sitio web para un cliente, esto añadirá un poco de brillo extra al backend.

Sólo tienes que añadir el siguiente código y cargar tu logotipo (no dudes en cambiar la ubicación del archivo para adaptarlo):

function my_custom_login_logo() {
    echo '
        h1 a { background-image:url('.get_bloginfo('template_directory').'/images/custom-login-logo.gif) !important; }
    ';
}

add_action('login_head', 'my_custom_login_logo');

Fuente: Customize WordPress Login Logo Without a Plugin (WPRecipes)

10. Añade tu logotipo a la página de administración

Si vas a añadir tu logotipo a la página de inicio de sesión, es posible que así remates las cosas añadiéndolo también a la página de administración, ¿verdad?

Sólo tienes que añadir el siguiente código y cargar tu logotipo (de nuevo, no dudes en cambiar la ubicación del archivo para adaptarlo):

function custom_admin_logo() {
  echo '<style type="text/css">
          #header-logo { background-image: url('.get_bloginfo('template_directory').'/images/admin_logo.png) !important; }
        </style>';
}
add_action('admin_head', 'custom_admin_logo');

Fuente: Change Admin Logo (WP-Snippets)

¿Y ahora qué?

Por encima están los mejores fragmentos de código WordPress relacionados con la imagen que pude encontrar, pero ciertamente no están todos. La personalización de WordPress es prácticamente ilimitada, y se puede hacer mucho más de lo que he enumerado anteriormente.

Jesus_Caceres