WordPress de ha dado cuenta que las redes sociales esta cambio la forma de usar el internet en especial facebook y twiiter, por eso los a integrado a su sistema de comentarios.

EL pasado 7 de junio wordpress anuncio en su blog oficial la integración de facebook y twiiter en los comentarios de wordpress.com esto ase que se ha mas cómodo para los lectores a la hora de dejar alguna opinión.

Tus lectores tendrán la opción de dejar su comentario con su cuenta de wordpress, twitter o facebook, ademas te permite escoger un estilo visual claro u oscuro para una mejor aspecto con el theme que estés usando.

Mira la noticia oficial Post Comments Using Twitter and Facebook

Comments

• 9 junio 2011, Bitacoras.com writes: Información Bitacoras.com... Valora en Bitacoras.com: Tweet WordPress de ha dado cuenta que las redes sociales esta cambio la forma de usar el internet en especial facebook y twiiter, por eso los a integrado a su sistema de comentarios. EL pasado 7 de junio wordpress anuncio en .....
• 3 julio 2011, Natania Matienzo writes: Jajaja Genial la imagen del ejemplo! Y muy buena iniciativa de WordPress! de ese modo no debemos colocar siempre los datos cada vez que comentamos. Pero me quedó la duda de si al comentar así, se publica el comentario en nuestro Muro o TL.
• 3 julio 2011, David Chay writes: Ups pues no se jejeje pero probablemente si. Por el momento solo esta disponible en wordpress.com pero muy pronto vendrá incluido el la próxima versión de jetpack para wordpress.org

Related posts:

• Contacto
• Acerca de
• Añadir campos de twitter u otra red social en el panel de perfil de usuario

Tweet

Lubith.com es una nueva herramienta gratuita que te permite diseñar temas de wordpress de manera fácil, cenicilla y sin necesidad de código.

Desde su panel de edición podrás arrastrar y soltar objetos, modificar colores de texto y fondo, subir imágenes y muchas cosas con solo usar el mause. Puedes guardar tus diseños en tu computadora e instalarlo en wordpress y es compatible con los navegadores modernos.

visto en: wwwhats new

Comments

• 11 abril 2011, Bitacoras.com writes: Información Bitacoras.com... Valora en Bitacoras.com: Tweet Lubith.com es una nueva herramienta gratuita que te permite diseñar temas de wordpress de manera fácil, cenicilla y sin necesidad de código. Desde su panel de edición podrás arrastrar y soltar objetos, modificar co......

Related posts:

• Qualithemes Nuevo buscador de temas para WordPress
• Microsoft migrará sus blogs a WordPress
• Como agregar post relacionados en tu theme
• WordPress 3.0 Beta
• Como activar los Thumbnails de wordpress 2.9

Tweet

El ipad ha sido uno de los dispositivos táctiles mas populares en los últimos tiempos, por eso, el equipo de Automattic junto con Onswipe han estado trabajando junto durante meses para ofrecer a los usuarios del ipad su visión de los blogs, reinventada para experiencias táctiles.

La versión optimizada de wordpress para el ipad soporta interacciones táctiles, arrastre, rotación y muchas más funcionalidades del iPad. Esta versión ya está disponible y activada para los más de 18 millones de blogs de WordPress.com.

Algunas de las opciones que puedes configurar para el ipad desde WordPress /Escritorio/Apariencia/Ipad. Son:

• Configurar el uso de la imagen de la última entrada como portada.
• Subir tu logo para promocionar tu marca o personalidad en la portada.
• Subir una imagen de bienvenida de tu sitio para cuando los visitantes lo añadan a su home.
• Seleccionar la tipografía.
• Elegir entre 9 diferentes colores de fondo, para adecuarlos mejor al estilo de tus sitio.
• Activar o desactivarlo todo.

Para los usuarios de WordPress.org ya esta disponible un plugin creado por Onswipe que te permite optimizar tu wordpress para los ipad.

Fuente: es.blog.wordpress.com

Comments

• 25 marzo 2011, Bitacoras.com writes: Información Bitacoras.com... Valora en Bitacoras.com: Tweet El ipad ha sido uno de los dispositivos táctiles mas populares en los últimos tiempos, por eso, el equipo de Automattic junto con Onswipe han estado trabajando junto durante meses para ofrecer a los usuarios del ipad ......

Related posts:

• Como hacer que WordPress cargue rapido
• Plugin wordpress SEO platinum

Tweet

Con WordPress se puede hacer casi cualquier cosa y una de ellas es la creación de galerías de imágenes, el único problema es que las muestra sin ningún efecto, pero gracias a jQuery Lightbox For Native Galleries el problema queda resuelto.

Video Tutorial

Creación de la galería de imágenes.

Lo primero que debemos hacer es crear un nuevo post o pagina y en la que insertaremos la galería. Le damos click en Sibir/Insertar una nueva imagen y subimos todas las fotos/imágenes que usaremos para la galería.

Una vez que ayeamos subido las imágenes, nos vamos a la pestaña de galería y llenamos el formulario de opciones de la galería y la insertamos en la entrada.

Una vez insertada la galería en la entrada, nos aparecerá un icono como nos muestra la siguiente imagen.

Ahora solo quedaría publicar la entrada para ver la galería en linea. Si vemos las fotos las muestra sin ningún efecto y cuando le damos click en alguna nos muestra la foto en una pagina sola.

Para que nos muestre la galería con el efecto de Lightbox necesitamos instalar el plugin y listo.

Instalando jQuery Lightbox For Native Galleries

Instalamos y activamos el plugin jQuery Lightbox For Native Galleries, despues de activarlo nos vamos a Ajustes/jQuery Lightbox en donde podremos configurar el tema de la presentación que mas nos guste.

VER DEMO

Fuente: How to Add a Gallery in WordPress with a Lightbox Effect

Comments

• 25 marzo 2011, Bitacoras.com writes: Información Bitacoras.com... Valora en Bitacoras.com: Tweet Con WordPress se puede hacer casi cualquier cosa y una de ellas es la creación de galerías de imágenes, el único problema es que las muestra sin ningún efecto, pero gracias a jQuery Lightbox For Native Galleries e......
• 28 junio 2011, nico writes: no funciona
• 29 junio 2011, David Chay writes: A mi si me funciono, inténtalo de nuevo
• 24 julio 2011, Pablo writes: Hola me muestra la foto en una pagina sola. y sigo los pasos que indica el post. lo desactivo y activo y nada...
• 24 julio 2011, David Chay writes: Debería de funcionar checa si tienes la versión de wordpress como la de plugin actualizada.
• 30 julio 2011, Como hacer una galería de imágenes en wordpress con efecto de Lightbox. WordPress En Acción | www.miredmovil.com writes: [...] Como hacer una galería de imágenes en wordpress con efecto de Lightbox. WordPress En Acción. Categories: wordpress Tags: imagenes, link link | Leave a comment julio 30, 2011 ← Agregar widgets sola a ciertas paginas en wordpress | Paraiso Linux [...]
• 31 julio 2011, uldarico writes: pues yo utilizo el wordpress 3.2.1 y no me aparece esa opcion de galeria, tengo en ingles el wordpress
• 30 agosto 2011, jQuery Lightbox For Native Galleries – Plug-In | Notas MS Creativos writes: [...] Via : | WordPress en acción [...]
• 23 enero 2012, Pedro Alvarez Fotografía writes: Buen articulo...muchas gracias!!!

Related posts:

• WordPress es más que un sistema de gestión de contenido para blogs
• Lubith nueva herramienta en linea para hacer temas de wordpress sin la necesidad de codigo
• Como agregar los Thumbnails a los RSS feeds
• Como hacer que WordPress cargue rapido
• Como agregar post relacionados con thumbnails en wordpress sin usar plugin

Tweet

En un tutorial pasado vimos como agregar post relacionados en tu theme. Ahora traigo pero usando imágenes o thumbnails.

Para poder mostrar los post relacionados debajo de cada entrada necesitaremos de algunas librerías y unas cuantas funciones.

Carpetas y archivos necesarios.

Creación de la carpeta scripts

Para empezar creamos la carpeta /scripts/ dentro de nuestro theme. /mi-theme/scripts/, es aqui en donde añadiremos las librerias necesarias.

jQuery

La primer libreria que necesitaremos es la libreria de jQuery. Existen varias formas de mandar a llamar esta libreria pero la mejor manera es mandar a llamar la que trae wordpress integrada lo unico que debemos de hacer es insertar el siguiente codigo.
<?php wp_enqueue_script("jquery"); ?>
En dentro del archivo header.php justo antes de <?php wp_head(); ?>

TimThumb

Otra librería que usaremos es la de timthumb.php esta libreria redimenciona las imagenes al tamaño que queramos, aunque wordpress ya tiene la opcion de hacer thumbnail o imagenes destacadas, esta libreria nos puede ser util si la imagen o thumbnail la pasamos por medio de campos personalizados o para redimencionar la primer imagen del post como lo veremos mas a delante.

para usar timthumb.php debemos descargarla y copiarla a la carpeta de /mi-theme/scripts/, la libreria de timthumb.php usa una carpeta llamada /cache/ la que debe estar junto al archivo.

NOTA: yo voy a renombrar la libreria timthumb.php a thumb.php para que sea mas facil de usar.

Para este paso debemos de tener dentro de la carpeta scripts los siguientes archivos.

/mi-theme/scripts/thumb.php (libreria thimthumb.php renombrada a thumb.php)
/mi-teme/scripts/cache/ (asegurate que la carpeta cache tenga todos los provilegios 777)

hovertip

La librería hovertip es la que mostrara el titulo de los post relacionados de forma flotante.
Para usar hovertip debemos descargarla de los repositorios de jquery jquery.hovertip-1.0_0.zip. De este archivo solo usaremos los archivos jquery.hovertip.min.js y jquery.hovertip.css.

EL archivo jquery.hovertip.min.js lo copiamos dentro de la carpeta /scripts/ mientras que el archivo jquery.hovertip.css lo copiamos dentro de la carpeta de nuestros css.

/mi-theme/scripts/jquery.hovertip.min.js
/mi-theme/css/jquery.hovertip.css

Hasta aquí debernos tener la siguiente estructura en nuestros archivos.

/mi-theme/thumb.php
/mi-teme/cache/
/mi-theme/scripts/jquery.hovertip.min.js
/mi-theme/css/jquery.hovertip.css

Función thumb_pots

Para poder obtener la primer imagen del post (por si alguna entrada no tiene imagen destacada o alguna imagen que se pase por campo personalizado) necesitaremos la función thumb_pots().

Dentro del archivo functions.php copiamos el siguiente código.

<?php
/*
    optener la primer imagen del post
*/
function thumb_pots(){
    global $wpdb, $post;
    $image = "";
    $first_image = $wpdb->get_results(
    "SELECT guid FROM $wpdb->posts WHERE post_parent = '$post->ID' "
    ."AND post_type = 'attachment' ORDER BY `post_date` ASC LIMIT 0,1"
    );

    if ($first_image) {
        $image = $first_image[0]->guid;
    }
    return $image;
}
?>

Creación del archivo post-relacionados.php

Este archivo es el que hará la lista de post relacionados basándose en las etiquetas, es similar al del articulo como agregar post relacionados en tu theme pero con algunas modificaciones.

Dentro de la carpeta de nuestro theme /mi-theme/ creamos un nuevo archivo con el nombre post-relacionados.php y pegamos el siguiente codigo:

<?php
$tags = wp_get_post_tags($post->ID);
if ($tags) {
	$tag_ids = array();
	foreach($tags as $individual_tag) $tag_ids[] = $individual_tag->term_id;

	$args=array(
		'tag__in' => $tag_ids,
		'post__not_in' => array($post->ID),
		'showposts'=>5, // Number of related posts that will be shown.
		'caller_get_posts'=>1
	);
	$my_query = new wp_query($args);
	echo '<h4>Articulos Relacionados</h4><ul>';
	if( $my_query->have_posts() ) {
		while ($my_query->have_posts()) {
			$my_query->the_post();
		?>
		<li>
			<a class="postRelatedThumb" href="<?php the_permalink() ?>" rel="bookmark nofollow">
				<?php
                                  /* Aquí empieza el código añadido*/
				$imageThumb=thumb_pots(); // Aquí manda a llamar la función que obtiene la primer imagen de la entrada
                                             /* Cambia el valor de custom-field por la del nombre de tu campo personalizado  */
				$imagevalue=get_post_meta($post->ID, "custom-field", $single = true);
				if ((function_exists('has_post_thumbnail')) && (has_post_thumbnail())) {
                                      /* Aqui entra si el post tiene una imagen destacada                                       El thumbnail sera de 100 x 100 px y se le añade un array mas para cambiar el atributo de title */
					the_post_thumbnail(array( 100,100 ), array("title"=>""));
				}elseif($imagevalue){
                                 /* Aqui entra si el post no tiene imagen destacada, pero si tiene una imagen por ca,po personalizado   */
                                ?>
				<img class="wp-post-image" src="<? bloginfo('template_directory');?>/scripts/thumb.php?src=<? echo $imagevalue; ?>&w=100&h=100&zc=1" alt="<? the_title(); ?>" />
				<?php }elseif($imageThumb){
                                    /* Aqui entra si no tiene ninguna imagen por campo personalizado pero si contiene una imagen la entrada */
                                ?>
				<img class="wp-post-image" src="<? bloginfo('template_directory');?>/scripts/thumb.php?src=<? echo $imageThumb; ?>&w=100&h=100&zc=1" alt="<? the_title(); ?>" />
				<?php }else{
                                    /* Si la entrada no tiene ninguna imagen entonces pone una por default que se encuentra en /images/default.jpg */
                                ?>
				<img class="wp-post-image" src="<? bloginfo('template_directory');?>/images/default.jpg" width="100" height="100" alt="<? the_title(); ?>" />
				<?php } ?>
			</a>
			<div class="hovertipContent"><?php the_title();?></div>
		</li>
		<?php
		}
	}else {
		echo '<li>No hay contenidos relacionados</li>';
	}
	echo '</ul>';
}
 wp_reset_query();
?>

Insertando los post relacionados en la entrada.

Para que nos muestre los post relacionados de cada entrada debemos de mandar a llamar el archivo post-relacionados.php desde el archivo single.php.

Justo después de

 <?php the_content(); ?>

Insertamos el siguiente codigo:

<div class="post-relacionados">
<?php include (TEMPLATEPATH . '/post-relacionados.php'); ?>
</div>

Editando style.css

Para que las imágenes de los post relacionados los muestre de una manera un poco ordenada debemos usar estilos que nos ayuden a darle forma a la tira de imágenes.

.post-relacionados ul li a img.wp-post-image{
	float:left;
	margin:10px;
	padding:0;
	border:2px solid #d0d0d0;
}
.post-relacionados ul li a:hover img.wp-post-image{
	border:2px solid #333;
}

Con esto debe de ser suficiente para darle forma a la tira de imágenes. Ahora si quieres personalizar el hovertip el archivo a modificar es /css/jquery.hovertip.css

Por ultimo editamos las cabeceras y para activar hovertip

En el archivo header.php justo despues de wp_head(); añadimos el siguiente código.

<?php if(is_single()){?>
		<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/css/jquery.hovertip.css" type="text/css" media="screen" />
		<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/scripts/jquery.hovertip.min.js"></script>
		<script type="text/javascript">
				$(document).ready(function(){
					$('.postRelatedThumb').hovertip();
				});
		</script>
	<?php } ?>

El código esta dentro de una condición que solo permitirá que cargue las librerías de hovertip en el archivo single.php, osea cuando muestre la entrada completa.

Resultado final

El resultado final podría ser algo parecido a:

(únicamente en la tira de imágenes)

Conclusión

Espero que les aya servido de mucho este tutorial lo he tratado de hacer lo mas cencillo posible y si tienen alguna duda o observación no duden en hacérmelo saber.

Comments

• 23 marzo 2011, Bitacoras.com writes: Información Bitacoras.com... Valora en Bitacoras.com: Tweet En un tutorial pasado vimos como agregar post relacionados en tu theme. Ahora traigo pero usando imágenes o thumbnails. Para poder mostrar los post relacionados debajo de cada entrada necesitaremos de algunas librería......
• 29 marzo 2011, Schubert writes: Muy buena explicacion voy a ver si la puedo implementar en mi blog,saludos y gracias por compartir
• 30 marzo 2011, David Chay writes: Si inténtalo es cencillo realmente y si tienes dudas me dices, suerte.
• 9 abril 2011, Franco writes: Cual sería la manera de hacer esto si esque yo uso varios single para cada categoría, no sÉ si me explico. Lo que sucede es que yo en la carpeta /mi-theme/ tengo single1.php , single2.php y en single los llamo según la categoría. Ojala me puedas ayudar esto está muy interesante. Saludos y gracias por compartir esto (Y)
• 9 abril 2011, David Chay writes: No hay problema solo tienes que agregar el archivo post-relacionados.php a cada single y listo. Tienes que hacer lo mismo en cada archivo single y debe de funcionar sin ningún problema. Saludos y gracias por visitar la pagina
• 10 abril 2011, Franco writes: Nuevamente yo molestando XD. Lo he probado pero primero que ha salido un error, tal parece parece que existe 2 cositas que hay que cambiar. 1) En el archivo post-relacionados.php en la linea 43 en lugar de hovertipContent poner solo hovertip asi es el nombre del estilo verificar en /mi-theme/css/jquery.hovertip.css 2)En el codigo que se pone en el single.php en la linea se debe poner un slash "/" justo antes de post-relacionados.php Ahora una vez que ya me ha salido todo tengo un problema, tal parece que el hovertip no se está activando , mira como me sale http://img30.imageshack.us/img30/9743/pruebahv.png ojalá me puedas ayudar , ahí si tendria todo completo, puse el codigo en el header y nada , nose que pasa.
• 10 abril 2011, Franco writes: Disculpa,Este es el enlace a la imagen http://img30.imageshack.us/img30/9743/pruebahv.png
• 10 abril 2011, David Chay writes: ups sorry jejeje el segundo error fue error de dedo jejeje es que estoy usando un nuevo plugin de SyntaxHighlighter pero el primer error que encontraste pues a mi me funciona muy bien como lo tengo de echo lo prove de las dos formas y funcionan las dos pero me quede con class="hovertipContent" http://awesomescreenshot.com/02cb5kc2b
• 10 abril 2011, David Chay writes: me gustaría ver tu web con los post relacionados con thumbnails si puedo ayudarte en algo me gustaría que me lo hicieras saber. Saludos
• 10 abril 2011, David Chay writes: Y gracias por el dato :D
• 11 abril 2011, Franco writes: Lo que sucede es que estoy trabajando en un servidor local, no sé si ese sea el problema pero yo puedo darte los archivos del theme para que lo veas no hay problema, solo tienes que decirme a donde enviártelo si puedes :D. Gracias por ayuda prestada. http://awesomescreenshot.com/0ceb5pr20
• 11 abril 2011, David Chay writes: En local no debe de haber ningún problema ahí fue donde yo lo prove pues si gustas enviarlo mi email es chd2al@gmail.com
• 5 mayo 2011, 3nd3r writes: Hola! Me gustaría combinar lo que comentas en este post con lo que comentas en este otro: http://www.wordpressenaccion.com/como-agregar-campos-personalizados-al-post-y-paginas-automaticamente.html y así usando el siguiente código: add_action('publish_post', 'add_custom_field_automatically'); function add_custom_field_automatically($post_ID) { global $wpdb; if(!wp_is_post_revision($post_ID)) { add_post_meta($post_ID, 'featured', 'image URL', true); } } Pueda añadir automáticamente a todos los posts el campo personalizado "featured" y como su valor ('image URL'), la correspondiente a la URL de la imagen que acompañe al post... Me ayudas? Muchas gracias por tu tiempo...
• 10 agosto 2011, alvaro writes: Hola, Muy buen post, me ha venido muy bien, lo unico es que me gustaría saber como añadir debajo de cada imagen el titulo o una parte del texto. Gracias
• 29 agosto 2011, TukoMaxter writes: hola e instalado todo a la perfección pero me ha surgido un problema, no me salen las letras al pasar el cursor sobre la imagen, solo se ve la imagen, te agradecería tu ayuda
• 30 agosto 2011, David Chay writes: Hola TukoMaxter. Deverias provar si jquery esta activo aveces tenemos problemas con cargar la libreria de jquery
• 30 agosto 2011, TukoMaxter writes: como verifico eso, puedes ayudarme?
• 30 agosto 2011, David Chay writes: no puedo en estos momentos he estado muy ocupado últimamente que ni siquiera he podido actualizar el blog ni hacer alguna entrada. Lo siento.
• 30 agosto 2011, TukoMaxter writes: no hay problema, sera despues, gracias y un saludo
• 18 septiembre 2011, jhon mario writes: Gracias por este script, lo he implementado en mi blog pero no me muestra imágenes, solo el texto, aunque para mi está bien así, me gustaría saber en dónde está la falla para no quedarme con la duda.
• 19 septiembre 2011, David Chay writes: Deberías comprobar que tu theme soporta thumbnails y repasar el tutorial bien detallado, ami me funciona bien y a otros que lo han probado también. Saludos
• 30 septiembre 2011, TukoMaxter writes: Hola, no encuentro la forma para que me muestre el texto al pasar el cursor, por favor échame una mano, Saludos!

Related posts:

• Como agregar post relacionados en tu theme
• Como agregar el Tweet Button a WordPress
• Como agregar los Thumbnails a los RSS feeds
• Plugin wordpress SEO platinum
• Como activar los Thumbnails de wordpress 2.9

Tweet

QualiThemes. Es un nuevo buscador de themes para WordPress. Ahí encontraras plantillas tanto de pago como gratuitas ademas es muy fácil de navegar usando palabras claves para encontrar el theme que mas se acomode a tus necesidades, puedes ordenar la búsqueda por rating, precio o fecha, el único inconveniente es que la mayoría de las plantillas están en ingles, pero aun así es una buena herramienta para ahorrar tiempo en buscar un theme. QualiThemes.com

Comments

• 23 febrero 2011, Bitacoras.com writes: Información Bitacoras.com... Valora en Bitacoras.com: No hay resumen disponible para esta anotación...

Related posts:

• Buscador de themes
• WordPress snippets
• Lubith nueva herramienta en linea para hacer temas de wordpress sin la necesidad de codigo
• WordPress 3.0 Beta
• Anatomia de un tema de WordPress

Tweet

Una imagen previa o thumbnail es de mucha importancia para su blog ya que una buena imagen puede ayudar a sus visitantes a explorar el sitio.

En este articulo les voy a mostrar como trabajar en diseño y como obtener de manera facil la imagen prediseñada del post usando algunas funciones que nos facilitaran dicha tarea.

Diseño y maquetas

De ancho total (fijo)

Utilizando el ancho de columna completa le da mucho espacio a utilizar, y hay un buen equilibrio entre el contenido y la imagen.

Al lado del título

Las imágenes tienden a ser menores en estos lugares, pero la posición es grande y se hace la exploración a través de los blogs es muy fácil.

Junto a la derecha del título

Otra solución excepcional, creo que éste se ve muy bien y mantiene el título de acuerdo con su texto.

Miniatura dentro de Contenido

Para mantener la mirada en el título se puede mover la imagen en miniatura a un lugar más obvio. En esta posición, la imagen es parte del contenido, y el texto puede envolver alrededor de ella o ir junto a él. Una buena solución.

Miniatura dentro de Contenido (lado derecho)

Las mismas ventajas y desventajas como se mencionó anteriormente. Aunque éste no se rompe hasta la disposición en el texto como mucho y para mí a veces es una solución mejor que la anterior.

Imagen completa con pequeño párrafo

Si el contenido es visual y tiene un montón de buenas fotos o imágenes que podría utilizar una imagen completa podría ser un gran éxito.

Diferentes formas de obtener el thumnail

Una de las formas de obtener nuestros thumnail es con la función de the_post_thumnail de wordpress para poder usar esta función debemos activarla en nuestro tema.

Activando los thumbnails

Para activar los thumbnail solo debes de agregar el siguiente codigo al archivo functions.php

<?php
if ( function_exists('add_theme_support') ) {
	add_theme_support('post-thumbnails');
  }
?>

Ya activados podemos configurar el ancho y alto de la imagen en miniatura o thumnail desde “ajustes/multimedia”



Por ultimo insertamos la imagen destacada. Cuando estés añadiendo una nueva entrada te darás cuenta que en la parte de la columna de la derecha parece una nueva opción “Imagen destacada” ó desde el menú de subidas de imágenes haciendo clic en “Set Thumbnail”.

Campos personalizados

Otra forma de obtener nuestro thumnail es por los campos personalizados.

Subimos la imagen que queremos mostrar en el post pero no la insertamos en el contenido, solo copiamos la url de la imagen.



Ahora creamos un campo personalizado y pegamos la url de la imagen en su valor, yo la nombre como miniatura.

Mostrar la primer imagen de la entrada

Otra forma mas ingeniosa es obteniendo la primer imagen del contenido, es decir si en el post insertas una o mas imagenes y obtenemos la primer imagen insertada.

para poder obtenerla necesitamos la una función la cual debes de agregarla al archivo functions.php

<?php
/*
	optener la primer imagen del post
*/
function thumb_pots(){
	global $wpdb, $post;
	$image = "";
	$first_image = $wpdb->get_results(
	"SELECT guid FROM $wpdb->posts WHERE post_parent = '$post->ID' "
	."AND post_type = 'attachment' ORDER BY `post_date` ASC LIMIT 0,1"
	);

	if ($first_image) {
		$image = $first_image[0]->guid;
	}
	return $image;
}
?>

Este código fue creado por Dan Harper yo solo la hice funcion para usarla mas cómodamente.

Insertando el código

Ahora que ya sabemos las diferentes formas de trabajar con las imagenes en miniatura es hora de introducir el código a los archivos corespondientes.

Una librería que usaremos es la librería de timthumb.php yo la renombre a thumb.php, y la añadí en el directorio /inc/ que para mi es la abreviación de “include” tu puedes añadirla a cualquier directorio que desees solo ten en cuenta que cuando la uses tenga la ruta correcta y antes de usarla lee los requerimientos para que no tengas ningún problema.

Nota el directorio que contenga la librería debe estar dentro de la carpeta del theme.
.../tu-theme/inc/thumb.php

El siguiente código tendrás que ponerlo en los archivos que deseas que muestre las miniaturas.

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
	<div class="post-item">
		<div class="date">

			<span class="dia"><?php the_time('j'); ?></span>
			<span class="mes"><?php the_time('M'); ?></span>
			<span class="year"><?php the_time('Y'); ?></span>
			<div class="comment"><?php comments_popup_link('0', '1', '%'); ?></div>
		</div><!-- end date -->
		<?php
				/*Aqui enpiesa el codigo para insertar la imagen miniatura  */

				/*Con esta funcion optenemos la priemer imagen del post
				 * y la insertamos en una variable */
				$imageThumb=thumb_pots();

				/* En este if comprobamos si se paso algun valor por los campos personalizados
				 * y si es asi guardamos su valor en una variable*/
				if(get_post_meta($post->ID, "miniatura", $single = true) != ""):
					$miniatura=get_post_meta($post->ID, "miniarura", $single = true);

				/*En este if comprovamos si existe una imagen añadida en los thumnail de wordpress
				 * comko iamgen destacada */
				if ((function_exists('has_post_thumbnail')) && (has_post_thumbnail())) {
					/*Aqui insertamos la imagen. Si definistes la imagen en ajustes de medios
					 * no sera necesario pasarle el valor de array(200 , 200)
					 * la funcion quedaria. the_post_thumbnail();*/
					the_post_thumbnail(array( 200,200));
				}/* Si no se inserto niguna imagen destaca entonces comprueva
					si hay una imagen en el contenido del post*/
				elseif(!empty($imageThumb)){
					/*Aqui insertamos la imagen y le ponemos la dimencion que queramos por medio de
					 * la libreria timthum.php */?>
					<img class="wp-post-image" src="<?php bloginfo('template_directory');?>/inc/thumb.php?src=<?php echo $imageThumb; ?>&w=200&h=200&zc=1" alt="<?php the_title(); ?>" />
				<?php }
				/*Si no encuentra niguna imagen dentro del post entoces comprueva
				 * si existe un valor pasado por los campos personalizados */
				elseif(!empty($miniatura)){
				/* Si exite algun valor insertara la imagen. */ ?>
						<img class="wp-post-image" src="<?php bloginfo('template_directory');?>/inc/thumb.php?src=<?php echo $miniatura; ?>&w=200&h=200&zc=1" alt="<?php the_title(); ?>" />
				<?php }
				/*Por ultimo si no existe ninguna iamgen para miniatura podemos
				 * poner una por defecto. La imagen acontinuacion se encuentra en la carpeta de
				 * images dentro del theme */
				else{ ?>
				<img class="wp-post-image" src="<?php bloginfo('template_url');?>/images/default.jpg" width="200px" height="200px" alt="<?php the_title(); ?>"/>
				<?php }

				/*Aqui Termina el codigo para insertar la imagen miniatura  */
				?>

		<h2 id="post-<?php the_ID(); ?>" class="<?php post_class(); ?>">
			<a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent link to
			<?php the_title_attribute(); ?>"><?php the_title(); ?></a>
		</h2>
		<span class="author">Escrito por <?php the_author_posts_link(); ?>, en <?php the_category(', '); ?>.</span>
		<div class="clear"></div>

              <?php the_content('Seguir Leyendo »'); ?>
              <?php wp_link_pages(); ?>
           </div><!-- end Post-item -->
              <?php endwhile; ?>

El codigo tendras que añadirlo en los archivos index.php, sigle.php, page.php, search.php, archive.php o cualquier otro archivo que desees.

Conclusión

Estas son las diferentes maneras en las cuales se puede obtener la imagen en miniatura y sin necesidad de plugins, tal vez no sea lógico usar todas las formas eso dependerá de tu diseño.

Espero que te aya sido util este tutorial y te invito a seguir visitando este sitio y por favor deja un comentario.

Referencias

• Beautiful Post Thumbnails: Top Examples & Best Practices
• image resizing with wordpress

Comments

• 7 febrero 2011, Bitacoras.com writes: Información Bitacoras.com... Valora en Bitacoras.com: No hay resumen disponible para esta anotación...
• 8 marzo 2011, BitterSwt writes: Hola,he estado buscando información sobre thumbnails,he llegado aquí y al leer vuestro post os escribo para a ver si me podríais responder una duda que me surge: en mi web en lugar de usar este tipo de thumbs lo que hago es usar el excerpt (añado ahí el thumb y en el índice en lugar del post muestra solo el excerpt). El problema es que me gustaría poder mostrar tambien el título del post utilizando un efecto que he visto en algunas webs como esta www.signik.com, como veis aparece el titulo del post por encima del thumb. Le he dado mil vueltas, he mirado librerias y tal y no encuentro la forma de hacerlo en los excerpts. Con que saliera un recuadro por encima me basta, no hace falta que aparezca el slide ni nada de eso.Os estaría muy agradecida si me podeis dar alguna indicación de como hacerlo, si es que se puede hacer. Gracias de antemano,os sigo leyendo.
• 8 marzo 2011, David Chay writes: Hola BitterSwt Hay una manera muy sencilla sin usar jquery o ningún plugin, simplemente se usa los campos personalizados y css. Te recomiendo el siguiente tutorial esta en ingles pero te lo explica muy bien http://5thirtyone.com/tutorial/wordpress-custom-fields-laying-text-over-your-lead-graphic/ Espero que te sea útil, Saludos.
• 10 marzo 2011, BitterSwt writes: Muchísimas gracias. A ver si lo consigo! ;)

Related posts:

• Como activar los Thumbnails de wordpress 2.9
• Como agregar los Thumbnails a los RSS feeds
• Theme WPAction
• Como hacer un widget en wordpress
• Como agregar post relacionados con thumbnails en wordpress sin usar plugin

Tweet

Quiero compartir unn pequeño snipet que puede facilitarnos el trabajo a la hora de poner un campo personalizado.

La siguiente función debes a agregarla al archivo functions.php de los archivos de tu tema. Esta funcion te facilita la tarea de estar editando los archivos single.php y page.php

add_action('publish_page', 'add_custom_field_automatically');
add_action('publish_post', 'add_custom_field_automatically');

function add_custom_field_automatically($post_ID) {
    global $wpdb;
    if(!wp_is_post_revision($post_ID)) {
        add_post_meta($post_ID, 'field-name', 'custom value', true);
    }
}

lo único que debes de hacer es cambiar ‘flied-name‘ por el nombre de tu campo personalizado.

Fuente: wpbegginer.com

Comments

• 31 enero 2011, Bitacoras.com writes: Información Bitacoras.com... Valora en Bitacoras.com: No hay resumen disponible para esta anotación...
• 31 enero 2011, Tweets that mention Como agregar campos personalizados al post y paginas automáticamente. WordPress En Acción -- Topsy.com writes: [...] This post was mentioned on Twitter by David Chay, WordPress En Acción. WordPress En Acción said: Como agregar campos personalizados al post y paginas automáticamente: <img src="http://www… http://goo.gl/fb/m9uLn [...]
• 28 septiembre 2011, Diego writes: Hola, tengo una duda hice un plugin para diccionario con los campos en la BD id, termin, definicion. El plugin agrego a uan pagina y si agrego comments_template( 'comments.php', true ); se adjunata el campo para comentar pero para tod el plugin. yo quiero que sea indidual para cada termino, Algun concejo???
• 29 septiembre 2011, David Chay writes: No muy entiendo para que sirve el plugin que creaste? me podrías explicar un poco mas
• 29 septiembre 2011, Diego writes: El plugin que e creado es para un diccionario de terminos de la Web. Es decir que en la parte de administracion agrego una palabra con su definicion. Ejemplo Auto.- El auto es xxxxxxxxx xxxxxxxx. Este plugin indrodusco en una pagina asi {diccionario}. y quiero que se comente cada termino. Ayuda por fa, te lo agradeceria mucho.
• 29 septiembre 2011, David Chay writes: Pues no se realmente cuales sean tus necesidades pero si solo es para una pagina de diccionario similar a wordreference.com lo haría con custom post types y si es una entrada normal para el blog y solo quieres poner abajo algunas palabras y su definición lo haría con los meta box o campos personalizados (sin necesidad de instalar algún plugin)

Related posts:

• Como agregar los Thumbnails a los RSS feeds
• Como agregar post relacionados en tu theme
• Como agregar el atributo nofollow en el enlace leer mas.
• Un buen uso de custom field
• Plugin wordpress SEO platinum

Tweet

El uso de los Post thumbnail sea hecho muy popular en las entradas de blogs, y a pesar de nos permita mostrar una imagen en miniatura no la integra dentro del contenido, y eso afecta a la hora de que nuestros lectores del feed lean el articulo ya que ellos no pueden ver esa imagen, lo que tenemos que hacer es añadir una pequeña función que nos permita añadir los post thumbnails dentro del contenido del feed.

Dentro del archivo functions.php añadimos la siguiente función

<?php
/**********************************************
Funcion para agregar los thumnail en el rss
***********************************************/
function do_post_thumbnail_feeds($content) {
    global $post;
    if(has_post_thumbnail($post->ID)) {
        $content = '<div>' . get_the_post_thumbnail($post->ID) . '</div>' . $content;
    }
    return $content;
}
add_filter('the_excerpt_rss', 'do_post_thumbnail_feeds');
add_filter('the_content_feed', 'do_post_thumbnail_feeds');
?>

Y si usas imágenes en miniatura (thumbnail) mediante los campos personalizados (custom field) agrega esta otra función.

<?php
/***********************************************
Funcion agrega una imagen de custom field a feed RSS
************************************************/
add_filter('the_content', 'custom_fields_for_feeds');
function custom_fields_for_feeds( $content ) {
global $post, $id;
$blog_key = substr( md5( get_bloginfo('url') ), 0, 16 );
if ( ! is_feed() ) return $content;
// Place your own four custom fields by replacing the capital text
    $image = get_post_meta($post->ID, 'image_value', $single = true);

// If there's an image, display the image with the content
// Feel free to change the styling of the image border
    if($image !== '') {
    $content = '<div">
    <img src="'.$image.'" alt="<?php echo get_the_title($post->ID) ?>" width="615" height="230" />
    </div>' . $content;
    return $content;
    } // End if image

// If there's not an image, just display the content
    else {
    $content = $content;
    return $content;
    }
} // End function
?>

En la linea

$image = get_post_meta($post->ID, 'image_value', $single = true);

Tienes que cambiar 'image_value' por el nombre de tu campo personalizado.

Con estas dos funciones, tus lectores podrán ver sin problema las imágenes en miniaturas desde su feed rss.

Fuente
• wptricks.net
• webprocafe.com

Comments

• 17 enero 2011, Bitacoras.com writes: Información Bitacoras.com... Valora en Bitacoras.com: Tweet El uso de los Post thumbnail sea hecho muy popular en las entradas de blogs, y a pesar de nos permita mostrar una imagen en miniatura no la integra dentro del contenido, y eso afecta a la hora de que nuestros lectores......
• 17 enero 2011, Tweets that mention Como agregar los Thumbnails a los RSS feeds. WordPress En Acción -- Topsy.com writes: [...] This post was mentioned on Twitter by WordPress En Acción and David Chay. David Chay said: Como agregar los Thumbnails a los RSS feeds: TweetEl uso de los Post thumbnail sea hecho muy popular en las entr... http://bit.ly/dLNdg1 [...]

Related posts:

• Plugin wordpress SEO platinum
• Como activar los Thumbnails de wordpress 2.9
• El archivo robots.txt en WordPress
• Como agregar el Tweet Button a WordPress
• Theme WPAction

Tweet

Un tema de wordpress esta formado de varios archivos php, algunos temas tienen mas archivos que otros. Pero en realidad ¿sabes cuales la verdadera anatomía de un tema?  ó si te has preguntado ¿para que rayos sirve tal archivo? ó si de plano no tienes la menor idea de como se compone un tema. Esta infografia es para ti.

Yoast a creado una infografia acerca de la anatomía de un tema de wordpress en ella explica para que sirve los archivos principales y en donde se encuentra cada archivo.

Comments

• 13 enero 2011, Bitacoras.com writes: Información Bitacoras.com... Valora en Bitacoras.com: No hay resumen disponible para esta anotación...
• 14 enero 2011, Tweets that mention Anatomía de un tema de WordPress (Infografia). WordPress En Acción -- Topsy.com writes: [...] This post was mentioned on Twitter by WordPress En Acción and David Chay. David Chay said: Anatomía de un tema de WordPress (Infografia): TweetUn tema de wordpress esta formado de varios archivos ph... http://bit.ly/fjDsAj [...]

Related posts:

• Anatomia de un tema de WordPress
• Infografia: El poder de wordpress
• La historia de WordPress contada en una infografia
• Academica un Tema para WordPress Libre
• Conociendo más afondo un tema