Establecer tamaños de thumbnails sin deformar o recortar imagen

He visto muchas maneras para establecer el tamaño de los thumbnails en WordPress…..y finalmente encontré la que para mi es la más efectiva y práctica, ya que no genera los clásicos problemas de imagen recortada o deformada…..además es un método muy simple y que nos permite definir los tamaños desde la hoja  css.

Tendremos que insertar una llamada php para mostrar los thumbnails ahí donde queramos que se vean, normalmente dentro de the_loop y lo haremos de la siguiente manera:

<?php the_post_thumbnail( 'home-thumb' ); ?> // Para enseñar los thumbnails en la home por ejemplo.....
<?php the_post_thumbnail( 'category-thumb' ); ?> //  Para enseñar los thumbnails en category

En la hoja de estilo definiremos el tamaño para las imágenes, de esta manera

img[class*="attachment-home-thumb"] {
    height: auto;
    width: 120px;

}
img[class*="attachment-category-thumb"] {
    height: auto;
    width: 140px;

}

Dejando el valor height en auto, evitaremos que se nos deforme la imagen, así podremos subir indistintamente imágenes horizontales o verticales. Con este método si la imagen subida es más pequeña del tamaño establecido en la hoja de estilo, esta se ampliará y se reducirá en el caso de que sea más grande. Siempre tendré imágenes con un ancho de 120 px para la home y 140px para la categoría. La altura se ajustará automáticamente respetando las proporciones de la imagen subida.

Problemas con WPflexishop de Themeforest

Recibí un S.O.S para solucionar varios problemas que le surgieron a un webmaster al utilizar el tema WPflexishop de Themeforest. La web en cuestión es un wordpress para wp-ecommerce que podéis ver aquí: Jotoworld
El primer problema, general para toda la página, apareció al instalar el plugin qTranslate. Tal como estaba programada la plantilla resultaba incompatible con este plugin. Vamos a ver porqué.
Los títulos de los posts mostraban los campos de los tres idiomas. Por ejemplo, para la página “Ejemplo” el resultado era “EjemploExampleEsempio”….fatal…..
Entonces encontré lo siguiente en single.php línea 15

$title = get_post_field( 'post_title', $post_id ); ?&gt;
            &lt;h1&gt;&lt;?php echo $title; ?&gt;&lt;/h1&gt;

Esta llamada no funciona….no entiendo porqué se han complicado la vida y no han utilizado la llamada estándard de WordPress

$title = get_the_title($post_id ); ?&gt;
            &lt;h1&gt;&lt;?php echo $title; ?&gt;&lt;/h1&gt;

Esta funciona bien!!!
Pero este no fue el único código que tuve que retocar…por todo lado el tema parecía marciano….no sólo para los títulos, sino también para los enlaces…..el qTranslate seguía sin funcionar.
Por ejemplo, en el listado de “Related Products” no funcionaban los enlaces a los varios idiomas….siempre direccionaban al idioma por defecto….Otra vez los programadores de Themeforset se habían complicado la vida. esto es lo que encontré en el archivo /wpflexishop/core/frontend/wpsc.php, línea 216

		$related_query = new WP_Query($args);
		if ($related_query-&gt;have_posts()) :
			$output .= '&lt;div class=&quot;prima_related_products&quot;&gt;';
			$output .= &quot;&lt;h3&gt;&quot; . __( 'Related Products', PRIMA_DOMAIN ) . &quot;&lt;/h3&gt;&quot;;
			$output .= '&lt;ul class=&quot;product-list clearfix&quot;&gt;';
			while ($related_query-&gt;have_posts()) : $related_query-&gt;the_post();
				$id = get_the_ID();
				$output .= '&lt;li class=&quot;product-listing&quot; style=&quot;width: ' . $width . 'px;&quot;&gt;';
				$output .= '&lt;div class=&quot;padding&quot;&gt;';
				$output .= '&lt;div class=&quot;product-meta&quot; style=&quot;width:'.$width.'px;height:'.$height.'px&quot; &gt;';
				$output .= '&lt;div class=&quot;imagecol&quot; style=&quot;margin:0;padding:0;text-align:center;width:'.$width.'px;height:'.$height.'px;line-height:'.$height.'px;&quot;&gt;';
				$output .= '&lt;a href=&quot;'.get_permalink().'&quot;&gt;';

y que modifiqué de la siguiente manera

		$related_query = new WP_Query($args);
		if ($related_query-&gt;have_posts()) :
			$output .= '&lt;div class=&quot;prima_related_products&quot;&gt;';
			$output .= &quot;&lt;h3&gt;&quot; . __( 'Related Products', PRIMA_DOMAIN ) . &quot;&lt;/h3&gt;&quot;;
			$output .= '&lt;ul class=&quot;product-list clearfix&quot;&gt;';
			while ($related_query-&gt;have_posts()) : $related_query-&gt;the_post();
				$id = get_the_ID();
$my_custom_permalink =get_post_permalink($id);
$my_custom_permalink=apply_filters('the_permalink', $my_custom_permalink);
				$output .= '&lt;li class=&quot;product-listing&quot; style=&quot;width: ' . $width . 'px;&quot;&gt;';
				$output .= '&lt;div class=&quot;padding&quot;&gt;';
				$output .= '&lt;div class=&quot;product-meta&quot; style=&quot;width:'.$width.'px;height:'.$height.'px&quot; &gt;';
				$output .= '&lt;div class=&quot;imagecol&quot; style=&quot;margin:0;padding:0;text-align:center;width:'.$width.'px;height:'.$height.'px;line-height:'.$height.'px;&quot;&gt;';
				$output .= '&lt;a href=&quot;'.$my_custom_permalink.'&quot;&gt;';

o también en /wpflexishop/core/frontend/sliders.php, línea 24, que estaba así:

			&lt;?php $custom = get_post_custom($postid);
			$link = isset($custom[&quot;link&quot;][0]) ? $custom[&quot;link&quot;][0] : false;
			?&gt;
			&lt;?php 
			if ($link ) {
				if ($custom['pretty_photo'][0] == 'yes') 
					echo '&lt;a href=&quot;'.$link.'&quot; rel=&quot;prettyPhoto&quot; title=&quot;'.esc_attr(get_the_title()).'&quot;&gt;'; 
				else
					echo '&lt;a href=&quot;'.$link.'&quot; title=&quot;'.esc_attr(get_the_title()).'&quot; class=&quot;featured-blog-image&quot;&gt;'; 
			}
			?&gt;

y que dejé así:

			&lt;?php $custom = get_post_custom($postid);
			$link = isset($custom[&quot;link&quot;][0]) ? $custom[&quot;link&quot;][0] : false;
$link=apply_filters('the_permalink', $link);
			?&gt;
			&lt;?php 
			if ($link ) {
				if ($custom['pretty_photo'][0] == 'yes') 
					echo '&lt;a href=&quot;'.$link.'&quot; rel=&quot;prettyPhoto&quot; title=&quot;'.esc_attr(get_the_title()).'&quot;&gt;'; 
				else
					echo '&lt;a href=&quot;'.$link.'&quot; title=&quot;'.esc_attr(get_the_title()).'&quot; class=&quot;featured-blog-image&quot;&gt;'; 
			}
			?&gt;

En fin….tuve que retocar bastante más archivo, ahora no recuerdo exactamente cuales fueron en total, pero los cambios eran básicamente estos, arreglar títulos y Permalinks.
Luego se presentó otro problema con el plugin PrettyPhoto. Al subir una galería, la primera foto se repetía y se mostraba dos veces.
Vamos a ver como lo solucioné el asunto.
En el archivo wpsc-single_product.php, línea 68 es donde empiezan los problemas. Éste es el código

				echo '&lt;a rel=&quot;prettyPhoto['.wpsc_the_product_id().']&quot; class=&quot;preview_link&quot; href=&quot;'.$full_img.'&quot; title=&quot;'.esc_attr($img_title).'&quot; style=&quot;margin:0;padding:0;text-align:center;width:'.($image_width+10).'px;display:block;&quot;&gt;';
				echo '&lt;img class=&quot;product_image&quot; id=&quot;product_image_'.wpsc_the_product_id().'&quot; alt=&quot;'.esc_attr(wpsc_the_product_title()).'&quot; src=&quot;'.$single_img.'&quot; style=&quot;margin:0 auto;width:auto;vertical-align:middle;&quot; /&gt;';
				echo '&lt;/a&gt;';
			echo '&lt;/div&gt;';
			$thumb_width = get_option('wpsc_gallery_image_width') ? get_option('wpsc_gallery_image_width') : 96;
			$thumb_height = get_option('wpsc_gallery_image_height') ? get_option('wpsc_gallery_image_height') : 96;
			if (count($attachments)&gt;1) {
				echo '&lt;div class=&quot;single_image_thumb clearfix&quot;&gt;';
				if ($main_img_id) {
					$thumb_img = prima_get_image( $main_img_id, $thumb_width, $thumb_height, true );
					$full_img = prima_get_image( $main_img_id, false, false, false );
					$img_title = get_post_meta( $main_img_id, '_wp_attachment_image_alt', true );
					if(!$img_title) $img_title = get_post_field( 'post_title', $main_img_id );
					echo '&lt;a id=&quot;image_thumb_'.$main_img_id.'&quot; class=&quot;image_thumb_clickable&quot; href=&quot;'.$full_img.'&quot; title=&quot;'.esc_attr($img_title).'&quot;&gt;&lt;img src=&quot;'.$thumb_img.'&quot; width=&quot;'.$thumb_width.'&quot; height=&quot;'.$thumb_height.'&quot; alt=&quot;'.esc_attr(wpsc_the_product_title()).'&quot; /&gt;&lt;/a&gt;'; 
				}
				foreach ( $attachments as $id =&gt; $attachment ) {
					if ( $id == $main_img_id )
						continue; 
					$thumb_img = prima_get_image( $id, $thumb_width, $thumb_height, true );
					$full_img = prima_get_image( $id, false, false, false );
					$img_title = get_post_meta( $id, '_wp_attachment_image_alt', true );
					if(!$img_title) $img_title = get_post_field( 'post_title', $id );
					echo '&lt;a id=&quot;image_thumb_'.$id.'&quot; class=&quot;image_thumb_clickable&quot; href=&quot;'.$full_img.'&quot; title=&quot;'.esc_attr($img_title).'&quot;&gt;&lt;img src=&quot;'.$thumb_img.'&quot; width=&quot;'.$thumb_width.'&quot; height=&quot;'.$thumb_height.'&quot; alt=&quot;'.esc_attr(wpsc_the_product_title()).'&quot; /&gt;&lt;/a&gt;'; 
				}
				echo '&lt;/div&gt;';
				echo '&lt;div class=&quot;multi_image_box hide&quot;&gt;';
				foreach ( $attachments as $id =&gt; $attachment ) {
					$multi_img = prima_get_image( $id, $image_width, $image_height, $crop );
					$full_img = prima_get_image( $id, false, false, false );
					$multi_img_title = get_post_meta( $id, '_wp_attachment_image_alt', true );
					if(!$multi_img_title) $multi_img_title = get_post_field( 'post_title', $id );
					echo '&lt;a rel=&quot;prettyPhoto['.wpsc_the_product_id().']&quot; id=&quot;single_image_thumb_'.$id.'&quot; href=&quot;'.$full_img.'&quot; title=&quot;'.esc_attr($multi_img_title).'&quot;&gt;&lt;img src=&quot;'.$multi_img.'&quot; alt=&quot;'.esc_attr(wpsc_the_product_title()).'&quot; /&gt;&lt;/a&gt;'; 
				}
				echo '&lt;/div&gt;';
			}

La primera foto viene insertada dos veces en la galería, una vez como foto de galería y otra como main image. Lo que hice fue modificar el código para que quedara de la siguiente manera

//pequeño script necesario para que funcione el invento
&lt;script type=&quot;text/javascript&quot;&gt;
/* Custom Scripts */
jQuery(document).ready(function($) {
jQuery(&quot;#startPrettyPhoto&quot;).click(function() {
  jQuery(&quot;a[rel^='prettyPhoto']:first&quot;).click()
});
});
&lt;/script&gt;
// Y ahora quitamos rel=&quot;prettyPhoto['.wpsc_the_product_id().']&quot; de la primera línea para que no cargue dos veces la foto y ponemo href=&quot;#&quot;  para que no vaya a la página de la vista de la imagen y carge el Prettyshop:
				echo '&lt;a id=&quot;startPrettyPhoto&quot; class=&quot;preview_link&quot; href=&quot;#&quot; title=&quot;'.esc_attr(wpsc_the_product_title()).'&quot; style=&quot;margin:0;padding:0;text-align:center;width:'.($image_width+10).'px;display:block;&quot;&gt;';
				echo '&lt;img class=&quot;product_image&quot; id=&quot;product_image_'.wpsc_the_product_id().'&quot; alt=&quot;'.esc_attr($img_title).'&quot; src=&quot;'.$single_img.'&quot; style=&quot;margin:0 auto;width:auto;vertical-align:middle;&quot; /&gt;';
				echo '&lt;/a&gt;';
			echo '&lt;/div&gt;';
			$thumb_width = get_option('wpsc_gallery_image_width') ? get_option('wpsc_gallery_image_width') : 96;
			$thumb_height = get_option('wpsc_gallery_image_height') ? get_option('wpsc_gallery_image_height') : 96;
			if (count($attachments)&gt;1) {
				echo '&lt;div class=&quot;single_image_thumb clearfix&quot;&gt;';
				if ($main_img_id) {
					$thumb_img = prima_get_image( $main_img_id, $thumb_width, $thumb_height, true );
					$full_img = prima_get_image( $main_img_id, false, false, false );
					$img_title = get_post_meta( $main_img_id, '_wp_attachment_image_alt', true );
					if(!$img_title) $img_title = get_post_field( 'post_title', $main_img_id );
					echo '&lt;a id=&quot;image_thumb_'.$main_img_id.'&quot; class=&quot;image_thumb_clickable&quot; href=&quot;'.$full_img.'&quot; title=&quot;'.esc_attr(wpsc_the_product_title()).'&quot;&gt;&lt;img src=&quot;'.$thumb_img.'&quot; width=&quot;'.$thumb_width.'&quot; height=&quot;'.$thumb_height.'&quot; alt=&quot;'.esc_attr($img_title).'&quot; /&gt;&lt;/a&gt;'; 
				}
				foreach ( $attachments as $id =&gt; $attachment ) {
					if ( $id == $main_img_id )
						continue; 
					$thumb_img = prima_get_image( $id, $thumb_width, $thumb_height, true );
					$full_img = prima_get_image( $id, false, false, false );
					$img_title = get_post_meta( $id, '_wp_attachment_image_alt', true );
					if(!$img_title) $img_title = get_post_field( 'post_title', $id );
					echo '&lt;a rel=&quot;prettyPhoto['.wpsc_the_product_id().']&quot; class=&quot;image_thumb_clickable&quot; href=&quot;'.$full_img.'&quot; title=&quot;'.esc_attr(wpsc_the_product_title()).'&quot;&gt;&lt;img src=&quot;'.$thumb_img.'&quot; width=&quot;'.$thumb_width.'&quot; height=&quot;'.$thumb_height.'&quot; alt=&quot;'.esc_attr($img_title).'&quot; /&gt;&lt;/a&gt;'; 
				}
				echo '&lt;/div&gt;';
// Y nos cargamos también todo el código que venía aquí....así se abrirá el Fancybox directamente cada vez que clickamos en un thumbnail.
			}

Los de Themeforest habían dejado esta galería funcionando sólo para una imagen para cada producto, cuando la gracia de PrettyPhoto es justamente poder crear galerías con múltiples imágenes.
Estuve intentando conseguir respuestas a los varios fallos de su tema, pero nada…ni para qtranslate ni para PrettyPhoto….Nunca llegué a preguntar directamente porque vi lo que contestaron a otros: contacta con los desarrolladores de estos plugins. Además era complicado entrar en sus foros (cerrados) y pensé que me las apañaría más rápidamente yo solita. En fin…no compré yo esta plantilla…me encontré con este panorama ya montado…..y ahora se que no compraré nunca una plantilla a los de Themeforest, ya que

Crear multiples menus para WordPress

Podemos añadir cuantos menús queramos en un WordPress. Un ejemplo en el que tuve que utilizar esta opción se encuentra en la web Inn-Progress | Fcforum que hace de contenedor para tres proyectos diferentes. El tamaño de las webs para cada proyecto era bastante reducido, así que opté por no instalar un WordPress para cada uno, evitando así saturar el servidor y disminuir el trabajo para futuras actualizaciones etc. Pero necesitaba tener un menú diferente para cada proyecto. Ahí vamos.
En este caso tuve que crear 4 menús: Uno para la Home (el contenedor) y uno para cada proyecto.
En esta imagen se puede ver el resultado final tal como aparece en el panel de admin Apariencia => Menus

Lo primero que tendremos que hacer es editar nuestro archivo functions.php, que está en la carpeta raíz de nuestro tema activo (o crear otro si estamos usando un child theme) y añadiremos lo siguiente

//Add custom menu location function
function register_my_menus() {
  register_nav_menus(
    array(
'menu-home' => __( 'Menu Home' ),
'menu-uoc' => __( 'Menu Uoc' ), 
'menu-beca' => __( 'Menu Beca' ), 
'menu-macba' => __( 'Menu Macba' ) 
)  );
}
add_action( 'init', 'register_my_menus' );

A este punto tendremos en nuestra pantalla de menús lo siguiente

Tenemos que crear los menús desde este panel, clickando en el icono “+” y asignando un nombre para cada menu (no olvides “Save Menu”)

Ahora en la columna izquierda “Theme Locations” nos aparecerán en el desplegable, las opciones de los menus que acabamos de crear. Asignaremos una a cada menú soportado y le damos a guardar.

Ahora sólo nos queda hacer la llamada desde los archivos .php, para poder mostrar en cada página el menú que deseamos.
La sintaxis para activar estos menús es la siguiente, donde ‘menu-home’ , ‘menu-uoc’ etc tiene que coincidir con el nombre que hemos asignado al menú en el archivo functions.php

<?php wp_nav_menu( array( 'theme_location' => 'menu-home' ) ); ?>
<?php wp_nav_menu( array( 'theme_location' => 'menu-uoc' ) ); ?>
<?php wp_nav_menu( array( 'theme_location' => 'menu-beca' ) ); ?>
<?php wp_nav_menu( array( 'theme_location' => 'menu-macba' ) ); ?>

En mi caso cree un header.php diferente para cada proyecto, pero se podría programar lo mismo con if statement.

<?php if(is_home()) 
wp_nav_menu( array( 'theme_location' => 'menu-home' ) ); 
else		
 wp_nav_menu( array( 'theme_location' => 'menu-uoc' ) ); 
?>

Custom Post Type y qTranslate. Hacer funcionar Permalinks

Cuando creamos Custom Post Type para un wordpress que utilice qTranslate, tenemos que asegurarnos de que este plugin nos direccione bien a los posts en cada idioma. Por ejemplo, si queremos que el qTranslate reconozca el Permalink del Custom Post Type que hemos creado, tendremos que editar el archivo /wp-content/plugins/qtranslate/qtranslate_hooks.php y simplemente añadir add_filter(‘post_type_link’, ‘qtrans_convertURL’);
después de post_link. Así quedaría:

add_filter('page_link',						'qtrans_convertURL');
add_filter('post_link',						'qtrans_convertURL');
add_filter('post_type_link',					'qtrans_convertURL');

Y ahora el wordpress sabrá redireccionarnos al contenido del post en el idioma en el que nos encontremos.