domingo, 12 de septiembre de 2010

Hoy en AyudaWordPress.com

Hoy en AyudaWordPress.com

Link to Ayuda WordPress

El Super Loop – Estilos distintos por tipo de entrada

Posted: 12 Sep 2010 03:02 PM PDT

guru wordpress

El otro día me preguntaba un amigo que como podía aprovechar los tipos de post personalizados para aplicar distintos estilos según el tipo de entrada, sin tener muy claro qué método usar, si los custom post types recién aparecidos en WordPress, algún plugin o algo de código.

Estuve buscando algo que le sirviera y le di varias opciones - plugins incluidos - pero entre todo lo que encontré me gustó especialmente una serie de trucos que comparto a continuación. Creo que es una pieza de museo de código para WordPress y lo merece, para convertirse en un auténtico gurú de WordPress.

Cuando abres tu archivo index.php, u otro archivo con un loop, normalmente verás algún div con un post-id, pero lo que vamos a hacer es añadir una nueva variable post_class al mismo como se muestra en este ejemplo:

Clic para ver Texto Plano
PHP:
  1. <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

Añadiendo esta función al div cada una de las entradas obtendrá una clase CSS específica que te permitirá modificar el aspecto de tus entradas en WordPress a través de CSS. Las siguientes clases se añaden por defecto:

  • .post-id
  • .post
  • .attachment
  • .sticky
  • .hentry (hAtom microformat pages)
  • .category-ID
  • .category-name
  • .tag-name

Un ejemplo de salida sería algo así:

Así que si abres tu archivo style.css y añades la clase .category-dancing podras conseguir que las entradas de la categoría dancing tengan un aspecto diferente, por ejemplo:

Clic para ver Texto Plano
CSS:
  1. .category-dancing{background: #97c3e1; border: 1px solid #84aac4;}

Esto hará que las entradas de la categoría dancing tengan fondo azul y un borde azul oscuro. Puedes ir más allá añadiendo una clase diferente para los enlaces de la .category-dancing, lo que quieras. Puedes usar la misma técnica para conseguir que las entradas de una etiqueta (tag) específica tengan un aspecto diferente.

Pero para alguien que quiera personalizar profundamente el aspecto de su sitio puede que necesite controles adicionales a la hora de introducir clases. Bien, si quieres puedes especificar las clases de este modo:

Clic para ver Texto Plano
PHP:
  1. <?php post_class('class-1 class-2'); ?>

Pero ¿como funciona esto en una plataforma dinámica como es WordPress? Veamos algunos ejemplos de como puedes añadir claes y hacer que tus entradas se vean diferentes.

Aplicar estilo a las entradas basándonos en el autor

Seguro que más de una vez ves blogs en los que los comentarios del autor se ven de manera diferente. Pues bien, seguro que en los blogs multi-autor es una buena idea también dar estilos distintos a las entradas según el autor que las cree. Para ello, en este ejemplo, daremos a cada entrada un estilo distinto, basándonos en el nombre del autor. Para ello, en tu fichero index.php (u otros; archive.php, etc) obtendremos el valor del nombre del autor añadiendo este código ANTES del loop:

Clic para ver Texto Plano
PHP:
  1. <?php $author = get_the_author_meta('display_name'); ?>

El código anterior obtiene la variable display_name del perfil de usuario de cada autor, y se le asigna el valor con la variable $author. Una vez hayamos creado una clase dinámica podemos añadirla en nuestro código post_class de este modo:

Clic para ver Texto Plano
PHP:
  1. <?php post_class('class-1 class-2 ' . $author); ?>

Nota: No tienes porque seguir la convención class-1 y class-2. eso es solo si quieres añadir clases estáticas. O sea, que puedes mostrar la salida de este modo:

Clic para ver Texto Plano
PHP:
  1. <div id="post-4564" class="post post-4564 category-48 category-dancing logged-in class-1 class-2 Pedro">

Date cuenta que Pedro se añade en la salida final. El nombre será diferente en cada entrada basada en el display_name de autor. Ahora ya podemos dar estilo a cada clase en tu CSS así:

Clic para ver Texto Plano
CSS:
  1. .Pedro{border: 1px solid #000;}
  2. .Luis{border: 1px solid #d88b3d;}
  3. .Fernando {border: 1px solid #4781a8;}

Una vez hecho esto cada entrada en el loop de estos autores tendrá un estilo diferente. Pudes aplicar la técnica anterior para dar estilo a otros autores de tu sitio.

Aplicar estilo a las entradas basándonos en la popularidad basada en el conteo de comentarios

¿A que también has visto sitios con widgets de entradas populares, la mayoría de las veces basados en el conteo de comentarios. Pues bien, en este ejemplo vamos a ver como aplicar distintos estilos usando el conteo de comentarios. Lo primero que necesitamos es obtener el conteo de comentarios y asociarle una clase. Para obtener el conteo de comentarios tenemos que pegar el siguiente código DENTRO del loop:

Clic para ver Texto Plano
PHP:
  1. <?php
  2.     $postid = get_the_ID();
  3.     $total_comment_count = wp_count_comments($postid);
  4.         $my_comment_count = $total_comment_count->approved;
  5.     if ($my_comment_count <10) {
  6.         $my_comment_count = 'nuevo';
  7.     } elseif ($my_comment_count>= 10 && $my_comment_count <20) {
  8.         $my_comment_count = 'emergente';
  9.     } elseif ($my_comment_count>= 20) {
  10.         $my_comment_count = 'popular';
  11.     }
  12. ?>

En el código anterior hemos añadido clases basándonos en una escala. Si la entrada tiene menos de 10 comentarios se añade la clase "nuevo". Si la entrada tiene entre 10 y 20 comentarios le añadimos la clase "emergente", y si la entrada tiene más de 20 comentarios entonces se le añade la clase "popular". Puedes cambiar esta escala dependiendo del volumen de comentarios de tu sitio.

Así que ahora tu código post_class se parecería a esto:

Clic para ver Texto Plano
PHP:
  1. <?php post_class('class-1 class-2 ' . $my_comment_count); ?>

A continuación creamos las clases siguientes en el fichero style.css:

Clic para ver Texto Plano
CSS:
  1. .nuevo {border: 1px solid #FFFF00;}
  2. .emergente {border: 1px dashed #FF9933;}
  3. .popular {border: 1px dashed #CC0000;}

Fíjate que en este ejemplo solo estamos cambiando el color del borde, pero puedes ir todo lo lejos que quieras, añadiendo imágenes de fondo, cambiando tipografías, lo que quieras.

¿Aún quieres más control sobre las clases CSS? Pues nada, pasemos a un nivel superior aplicando clases CSS mediante campos personalizados.

Aplicar estilo a las entradas basándonos en campos personalizados

Aquí entramos en material de combate de primera calidad, añadiendo clases específicas mediante los campos personalizados. De este modo, por ejemplo, si es el aniversario de tu blog y quieres que la entrada de aniversario sea distinta, puedes crear un campo personalizado y darle el nombre 'post-class' y luego añadirle el valor 'aniversario'. Una vez añadas este campo personalizado y guardes la entrada este valor se almacena en tu base de datos. A partir de este momento podemos reclamarlo desde el loop usando el siguiente código:

Clic para ver Texto Plano
PHP:
  1. <?php $custom_values = get_post_meta($post->ID, 'post-class'); ?>

Asegúrate de pegar el código anterior DENTRO del loop. Ahora añadiremos la variable $custom_values a la función post_class.

Clic para ver Texto Plano
PHP:
  1. <?php post_class('class-1 class-2 ' . $custom_variable); ?>

Una vez hecho esto ya podemos añadir a nuestro archivo style.css una clase como esta:

Clic para ver Texto Plano
CSS:
  1. .aniversario{Tu Estilo va aquí}

Esto es, de lejos, el mayor control que puedes obtener de la función post_class en lo que se refiere a estilos CSS. Pero, a veces, puedes que quieras incluso más control. Las clases CSS te permiten cambiar el fondo y otros elementos de estilo pero no puedes cambiar toda la estructura de este modo. Así que echemos un vistazo a algo un poquito más avanzado, que podríamos llamar EL SUPER LOOP.

Clic para ver Texto Plano
PHP:
  1. <?php if (have_posts()) : ?>
  2. <?php $count = 0; ?>
  3. <?php while (have_posts()) : the_post(); ?>
  4. <?php $count++; ?>
  5. <?php if ($count == 1) : ?>
  6.  Añade aquí tus divs personalizados de entrada para la primera entrada.
  7. <?php elseif ($count == 2) : ?>     
  8. Añade aquí tus divs personalizados de entrada para la segunda entrada
  9. <?php elseif ($count == 3) : ?>
  10.  Añade aquí tus divs personalizados de entrada para la tercera entrada     
  11. <?php elseif ($count == 4) : ?> 
  12.  Añade aquí tus divs personalizados de entrada para la cuarta entrada     
  13. <?php else : ?>
  14.  Añade aquí tus divs personalizados de entrada para el resto de entradas
  15.   <?php endif; ?>
  16. <?php endwhile; ?>
  17. <?php endif; ?>

Lo que hemos hecho en el código anterior es crear un loop que te permite aplicar distintos estilos basándonos en el número de entrada en portada, en su orden, algo que hemos aplicado en otras ocasiones, por ejemplo, para mostrar publicidad solo en ciertas entradas de portada.

Esto también es muy útil cuando quieres que las tres primeras entradas se vean distintas del resto. Por ejemplo, tus tres primeras entradas pueden ser entradas a una columna y el resto serán más pequeñas y a dos columnas. Puedes hacer casi todo con el super loop. Puedes añadir tus propias queries y mucho, mucho más. Si eres desarrollador es un buen punto de partida en el que solo tu pones los límites.

Referencias:

Moderación automática de palabras

Posted: 12 Sep 2010 08:08 AM PDT

¡Vamos a jugar a ser Dios!

Bueno, nos conformamos con ser el editor jefe de nuestro sitio de momento e imaginamos que gestionamos un sitio multiusuario en el que nos gustaría, o hemos decidido, que no se escriban ciertas palabras mal, o simplemente sustituir unas palabras con otras.

¿Os acordáis de lo que hacía el filtro capital_p_dangit al forzarnos a escribir bien WordPress, desde la versión 3.0?, pues algo parecido, pero aquí mandamos nosotros.

Para ello, por ejemplo, nos ponemos en el papel del editor jefe de la BBC y vamos a cabrear a los españoles (si, hoy me siento malo). Para ello abrimos el fichero functions.php del tema activo en nuestro sitio y elaboramos nuestra lista de palabras prohibidas, con sus consiguientes sustitutas:

Clic para ver Texto Plano
PHP:
  1. function palabra_prohibida($content) {
  2.     $str = "terrorista";  //la palabra a reemplazar
  3.     $newstr = "separatista armada";  //la nueva palabra
  4.     $html = str_replace($str, $newstr, $content);
  5.     return $html;
  6. }
  7. add_filter('the_title', 'palabra_prohibida',1); //Reemplaza la palabra en el título
  8. add_filter('the_content', 'palabra_prohibida',1); //Reemplaza la palabra en el contenido
  9. add_filter('comment_text', 'palabra_prohibida',1); //Reemplaza la palabra en los comentarios

Lo que hemos conseguido con este código es que cuando un periodista desconocedor de nuestra "línea editorial" escriba la palabra prohibida, ya sea en el título o en el contenido, esta sea sustituida por la palabra "políticamente correcta". Y no solo eso, sino que también extendemos nuestra línea editorial a los comentarios de los lectores, con la línea número 9.

¡Genial! … ¿o no?

Contenido exclusivo para suscriptores al Feed

¡Gracias por seguirnos a diario!. Premiamos tu fidelidad ofreciéndote habitualmente contenidos exclusivos. Hoy puedes descargar:

Clic aquí para iniciar la descarga Guía Domina tu Blog
Publicado por en

No hay comentarios:

Publicar un comentario

Suscribirse a: Enviar comentarios (Atom)

Seguidores

Archivo del blog