Archivo de la etiqueta: loop

Slide de artículos en columnas

En esta ocasión les mostraré cómo implementar un slide de artículos,  tomando como base nuestros tutoriales anteriores. Explicaremos además cómo poner nuestros artículos en dos columnas y obtener el url de la imagen destacada.

El Planeamiento

Siempre antes de realizar un bloque, fragmento, página, sección o implemento a nuestro sitio hay una parte que debemos hacer. Los invito, si aún no lo hacen, a que previo a la realización hagan un planeamiento; en serio, verán que la cantidad de tiempo que uno se ahorra es notable cuando existe un buen planeamiento previo.

En este caso, vamos a hacer que en el homepage de nuestro tema aparezcan un grupo de 12 ítems partido en dos listas de 6 cada una, cada lista tendrá dos filas y dos columnas, para el slide utilizaré 2 librerías con base en jQuery. Cada lista será de 580px, la ubicaré a la izquierda, será visible solamente la mitad de los ítems y por medio de nuestros scripts agregaremos flechas de navegación que mostrará la segunda lista.

Los artículos a mostrar serán parte de una categoría y las imágenes que aparecerán serán las imágenes destacadas. La categoría la determinaremos a través de nuestra página de opciones.

Nuestro Encabezado (header.php)

Personalmente me gusta agregar todos los scripts, librerías y en general todos los archivos externos en nuestro  header.php archivo que llamamos generalmente en todas las partes de nuestro tema.

En este caso voy a utilizar la librería jQuery, el plugin jCarousel y el plugin SudoSlider. Además maquetaré nuestras listas y divs desde mi archivo style.css

Los archivos .js por cuestión de orden los agrego dentro de un directorio en nuestro tema llamado js. Para llamar a los archivos desde nuestro encabezado, descargamos los archivos, los incluimos en el directorio y agregamos el siguiente código entre las etiquetas <head> </head>






Como vemos, además de los archivos de los que les hablé, hay uno extra llamado functions.js, éste archivo nos servirá para agregar código js extra a nuestro tema.

Les recomiendo leer la documentación de los plugins para sacarle el mayor provecho posible.

Agregando el código js (functions.js)

Nuestro slide requiere de una porción extra de código además de los archivos descargados, éste código lo agregaremos al archivo functions.js que se encuentra dentro de nuestra carpeta /js

El código


$('#nav li ul') .append ("<li class="'bottom_bg_list'">this is it</li>");
$('#nav li ul') .append ("<li class="'top_bg_list'">this is it</li>");
});

jQuery(document).ready(function() {
var sudoSlider = $(".scroller").sudoSlider({
continuous:        true,
speed:            500
});

La primera parte corresponde a nuestra navegación, la segunda define la clase que contendrá el slide, en este caso .scroller. Además definimos que el pase sea continuo y la velocidad entre uno y otro bloque.

Un vistazo a nuestro css y html resultante

Vamos a darle un vistazo a nuestro css y les mostraré una idea del html que queremos que se renderize el código php en nuestra homepage.

El html final que queremos que aparezca será similar al siguiente.


<h1>Productos en Oferta</h1>
<div>
<ul>
<li>
<div>

<a href="http://link.de.su.articulo.com"><img src="http://url.a.su.imagen.jpg" alt="" /></a>
<a href="http://link.de.su.articulo.com"><img src="http://url.a.su.imagen.jpg" alt="" /></a>
<a href="http://link.de.su.articulo.com"><img src="http://url.a.su.imagen.jpg" alt="" /></a>
<a href="http://link.de.su.articulo.com"><img src="http://url.a.su.imagen.jpg" alt="" /></a>
<a href="http://link.de.su.articulo.com"><img src="http://url.a.su.imagen.jpg" alt="" /></a>
<a href="http://link.de.su.articulo.com"><img src="http://url.a.su.imagen.jpg" alt="" /></a>
</div>
</li>

<li>
<div>
<a href="http://link.de.su.articulo.com"><img src="http://url.a.su.imagen.jpg" alt="" /></a>
<a href="http://link.de.su.articulo.com"><img src="http://url.a.su.imagen.jpg" alt="" /></a>
<a href="http://link.de.su.articulo.com"><img src="http://url.a.su.imagen.jpg" alt="" /></a>
<a href="http://link.de.su.articulo.com"><img src="http://url.a.su.imagen.jpg" alt="" /></a>
<a href="http://link.de.su.articulo.com"><img src="http://url.a.su.imagen.jpg" alt="" /></a>
<a href="http://link.de.su.articulo.com"><img src="http://url.a.su.imagen.jpg" alt="" /></a>

</div>
</li>
</ul>
</div>

Como vemos tenemos un  div que contiene los bloques de items con la clase que las identificará como parte del slide. En este caso la clase es  “scroller”, recordemos que esta clase también la definimos en nuestro archivo functions.js.

Luego armamos una lista con dos ítems, cada item tendrá un div con la clase row_scroller que a su vez almacenará a un total de 6 imágenes con link a su propio artículo.

En el css definimos un ancho de 580px para la clase row_scroller y para cada ítem un borde y margen que los separarán uno del otro y los forzarán a ordenarse en dos filas. La imagen de cada item deberá medir exactamente 200×200 px.

Hagamos Poesía 😉

Tomemos nuestra pluma, carguemos nuestro ambiente de inspiración e iniciemos a crear poesía…

Abramos nuestro archivo index.php y vayamos a la sección donde agregaremos el código que obtendrá nuestro listado de imágenes de los artículos que se agreguen a una categoría determinada.

Todo el código del Scroller y el título, al final quedará así:


<h1>Productos en Oferta</h1>
<div>
<ul>
<li>
<div>



ID) );

?>

<a href=""><img src="" alt="" /></a>



</div>
</li>
<li>
<div>

 $podcat,'post__not_in' => $ids)); ?>

ID) );
?>

<a href=""><img src="" alt="" /></a>



</div>
</li>

</ul>
</div>

Mismo loop items distintos

Como bien sabemos, en wordpress podemos condicionar un loop con querys, en este caso utilizaremos un loop con la misma categoría en ambas listas, guardando en un array los items que se agreguen en la primera lista y excluyendo las mismas en el segundo loop.

En el primer loop agregaremos las últimas seis entradas y en el segundo las siguientes sin repetir ninguna.

Abrimos la lista y el div con la clase row_scroller:

<li>
<div class="row_scroller">

Ahora creamos el query que obtendrá el nombre de la categoría que a su vez, contiene las entradas por medio de nuestra página de opciones (de la que hablaremos adelante) y limitamos a 6 posts el loop con showposts=6. Al final tenemos un array que contendrá todos los id’s de los posts que se listen en esta parte.


Seguimos con el fragmento de código y agregamos un while con los posts filtrados por el query_posts que construimos arriba, luego almacenamos cada id de los posts en $ids con la función de wordpress get_the_ID. Adicional a esto, necesitamos el url completo del thumbnail (imagen destacada) para poder crear el enlace. Para obtener el url utilizamos las funciones wp_get_attachment_url y get_post_thumbnail_id.

ID) );
?>

Y para concluir este fragmento, comenzará nuestro loop que creará 6 items con el link al artículo (the_permalink) y la imagen del campo imagen destacada del post. Finalizamos nuestro while y pasamos al siguiente fragmento.

<a href=""><img src="" /></a>

Ahora cerramos el div anterior, la lista y de nuevo, abrimos otra lista y un nuevo div row_scroller para el segundo bloque de ítems.

</div>
</li> <!-- finaliza primer bloque -->

<li>  <!-- inicia segundo bloque -->
<div class="tow_scroller">

Iniciamos un nuevo query con la categoría que resulte de $podcat y excluiremos con post__not_in todas las entradas que se almacenaron en $ids. De esta forma no repetiremos ninguna de las entradas del query anterior.

 $podcat,'post__not_in' => $ids)); ?>

Ahora nuestro segundo while y la línea de código que nos devuelve el url de la imagen.

ID) );
?>

Y para concluir, el link al artículo del loop (the_permalink) y la imágen destacada de nuestro artículo. Además finalizamos el while y listo!!!

<a href=""><img src="" alt="" /></a>

Referencias para: wp_get_attachment_url, get_post_thumbnail_id, post__not_in, the_permalink

 

La página de Opciones (PO)

Como les había comentado en algunos artículos anteriores y en éste en específico, podemos agregar una página de opciones a nuestro tema para poder configurar ciertos aspectos desde el área de administración.

Para poder continuar les recomiendo leer dichos posts y descargar los archivos incluidos en los mismos.

Agregando código

Si ya tenemos nuestros archivos y el directorio /panel listo, procederemos a agregar el código que nos permitirá seleccionar una categoría, ésta será la categoría que contiene los artículos que mostraremos.

Bien, hasta este punto, nuestro control-panel.php tiene un conjunto de arreglos (arrays) que definen las opciones del en nuestra página.

Los arrays actuales

$options = array (

array(  "name" => "Configuración del encabezado",
"type" => "heading",
"desc" => "En esta sección se podrá configurar el área del encabezado de su sitio.",
),

array("name" => "Imagen del Logotipo",
"desc" => "Ingrese la url completa de la imagen.",
"id" => $shortname."_logoimg",
"std" => "URL de la Imagen",
"type" => "text"),

array(     "name" => "Categoría del Slideshow",
"desc" => "Selecciona la categoría que contiene las imágenes del slideshow.",
"id" => $shortname."_sldcat",
"sed" => "Seleccione una Categoría:",
"type" => "select",
"options" => $ed_categories),

array(    "name" => "Número de Slides",
"desc" => "Seleccione la cantidad de imágenes a mostrar .",
"id" => $shortname."_sldct",
"sed" => "Seleccione una cantidad:",
"type" => "select",
"options" => $number_entries),

);

Hasta aquí, tenemos un encabezado, un espacio para agregar un custom logo, dos selectores, uno para las categorías y otro para la cantidad de entradas.

Ahora abajo del último array agregamos dos más.

array(  "name" => "Configuración del Homepage",
"type" => "heading",
"desc" => "En esta sección se podrá configurar Múltiples áreas en el homepage del sitio.",
),

array(     "name" => "Categoría de Productos en Oferta",
"desc" => "Selecciona la categoría que contiene las imágenes del slideshow.",
"id" => $shortname."_podcat",
"sed" => "Seleccione una Categoría:",
"type" => "select",
"options" => $ed_categories),

El Primero es de tipo Heading y agregará un encabezado para definir de alguna forma un grupo de opciones. El segundo array será de tipo Select que muestra un selector según las opciones (options) en este caso, en el selector aparecerán las categorías que tengamos.  Además hemos definido un id en este último array que será el que usaremos para llamar desde nuestro tema, en este caso es: $shortname.”_podcat” el id debe de ser único ya que se utiliza para almacenar las opciones en nuestra base de datos.

Con este par de arrays Prácticamente hemos terminado nuestra PO. La página ya maquetada con css me ha quedado así:

Mi Homepage final :)


Siempre habrán distintas formas de implementar soluciones, algunos podrán usar una u otra librería o plugins o css, lo importante siempre será obtener un resultado satisfactorio. Con wordpress podemos hacer muchas cosas cuando entendemos el funcionamiento de los querys y loops. Yo seguiré tratando de mostrar algunos ejemplos prácticos de cosas que quizá no sean tan común de ver y bueno, ustedes por su parte seguramente podrán mejorar los ejemplos e implementarlos en sus proyectos.

Gracias por leerme, comentarios bienvenidos, éxitos y hasta que el tiempo sea grato…

Construir un slideshow con las imágenes de una categoría

Como les platiqué anteriormente podemos hacer fácilmente un slideshow de imágenes. Ahora vamos a complementar el tutorial sustituyendo las imágenes de nuestra carpeta con las “imágenes destacadas” de los posts incluidos en una categoría en específico.

Tomando nuestro tuto anterior

Vamos a tomar el código de nuestro tutorial anterior como base para nuestro slideshow. No explicaré cómo funciona el slideshow como tal, lo único que va a cambiar es el código en nuestro header.php que es el siguiente.


<?php if (is_home()) {?>
<div id="slider_wrapper">
<div id="slider">
<img src="<?php bloginfo('template_directory'); ?>/images/banner.jpg" alt="" />
<img src="<?php bloginfo('template_directory'); ?>/images/banner1.jpg" alt="" />
<img src="<?php bloginfo('template_directory'); ?>/images/banner3.jpg" alt="" />
<img src="<?php bloginfo('template_directory'); ?>/images/banner4.jpg" alt="" />
</div>
<div id="pager_wrapper">
<span id="prev"></span>
<div id="pager"></div>
<span id="next"></span>
</div>

</div>
<?php } ?>

Agregar soporte para imágenes destacadas

Desde la versión 3 de WordPress en el panel de escritura de nuestros artículos viene incluida la opción para agregar imágenes destacadas que podemos usar para muchas cosas, éste es solo un ejemplo de cómo utilizarlas.

Primero agregaremos a nuestro tema el soporte para poder tener “imágenes destacadas” en nuestros artículos. Para esto, agregamos una pequeña línea de código a nuestro archivo functions.php.


add_theme_support('post-thumbnails');

Si no tienen ningún archivo functions.php deberán crearlo  y agregar el código.

Con esto, en el pánel de escritura de las entradas nos aparece un campo personalizado desde donde de la manera más amigable agregamos una imagen subida previamente o bien para subir y posteriormente seleccionarla como “imagen destacada”.

Categoría y el query para el loop

Ahora crearemos una categoría llamada “Featured”, que nos servirá para definir las imágenes de los artículos que incluiremos en el slideshow.

Teniendo nuestra categoría creada vamos a crear un Query (query_posts) que obtenga el listado de imágenes de los posts. Con este query podemos crear nuestro Loop con el listado de imágenes además definiremos la cantidad máxima de items (posts).


<div id="slider">

<?php query_posts('showposts=4&amp;amp;amp;amp;amp;amp;amp;cat=3'); ?>

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

<?php the_post_thumbnail();?>

<?php endwhile; else: ?>
<p>Uuuups!!! no encontramos ninguna imágen en los artículos de la categoría.</p>
<?php endif; ?>

</div>

Usando Query_posts definimos los parámetros para que liste 4 artículos de la categoría con el id 3.  Luego la línea con el inicio del loop. A continuación la imagen destacada del artículo, terminamos esta parte y agregamos un else para un mensaje si los criterios no se cumplen.

 

{Como saber el id de una categoría}

Quizá alguien se pregunte cómo hice para saber el id de la categoría. En el panel de administración cuando vamos al sub-menú categorías del menú entradas y nos posicionamos sobre el nombre de la categoría, abajo aparecerá el id (ver imagen) o si no, damos editar a la categoría y en la barra de direcciones aparecerá una parte que dice como ID=3 pues eso… el ID de esta categoría es el 3.

Si todo sale bien, ahora cada que agregamos una imagen destacada en los artículos de la categoría especificada automáticamente agregaremos un item al slideshow de nuestro theme.

Bienvenidos los comentarios, les deseo éxitos y hasta que el tiempo sea grato.

Selección de Categorías en Página de Opciones

En un tuto anterior les mostré como crear una página de opciones para nuestro tema, esta vez vamos a complementar dicha página agregando un selector de categorías en donde listamos las categorías que tengamos creadas, además también agregaremos un seleccionador para la cantidad de items que necesitemos en determinado momento.

Para comprender mejor vamos a hacer un ejemplo práctico utilizando dos tutoriales anteriores. Complementaremos nuestro Slideshow No tan simple y la página de opciones. Así, agregaremos una área que permita seleccionar la categoría y la cantidad de entradas. Con esto podremos, desde el pánel de administración modificar el Query que condiciona el loop de nuestro slideshow.

Antes de continuar por favor revisa estas guias anteriores, son indispensables para que entiendas este tutorial. Página de Opciones para Tema, Slideshow Simple, Slideshow no tan simple.

Agregar opciones a la Página de Opciones (PO)

Funciones para categorías y cantidades

Tomamos nuestra archivo control-panel.php y abajo de nuestras primeras variables $themename y $shortname agregamos el código sigueinte:

$ed_categories_obj = get_categories('hide_empty=0');

$ed_categories = array();
foreach ($ed_categ
ories_obj as $ed_cat) {
$ed_categories[$ed_cat->cat_ID] = $ed_cat->category_nicename;
}

$categories_tmp = array_unshift($ed_categories, "Escoja una Categoría:");

$number_entries = array("Seleccione una cantidad:","1","2","3","4","5","6","7","8","9","10", "12","14", "16", "18", "20" );

Con estas funciones obtenemos el id de las categorías y mostramos el Nombre para hacerlo lo más amigable posible. Luego definimos un mensaje como predeterminado en el listado de categorías que en este caso será “Escoja una Categoría”.

Luego, de una vez definimos una función para definir la cantidad de categorías que queremos mostrar en determinado query. Como predeterminado colocamos “Seleccione una cantidad”.

Agregar Querys a las Opciones

Ahora, dentro de nuestra función $options agregaremos dos arrays que corresponderán a las opciones de la cantidad de slides y la categoría. El código que debemos incluir dentro de nuestra función es el siguiente:

array(     "name" => "Categoría del Slideshow",
"desc" => "Selecciona la categoría que contiene las imágenes del slideshow.",
"id" => $shortname."_sldcat",
"sed" => "Seleccione una Categoría:",
"type" => "select",
"options" => $ed_categories),

array(    "name" => "Número de Slides",
"desc" => "Seleccione la cantidad de imágenes a mostrar .",
"id" => $shortname."_sldct",
"sed" => "Seleccione una cantidad:",
"type" => "select",
"options" => $number_entries),

Algo que debo de comentar es que en estos arrays el Type es “select” y en options agregamos la función correspondiente (ed_categories y number_entries), estas son las funciones que definimos al inicio de nuestro archivo.

Mostrar Opciones y Estilizarlas

Ya que tenemos las opciones agregadas ahora tenemos que mostrarlas en nuestra PO, buscamos la última línea de las condicionales de nuestros valores.

Debería de ser algo así:

<?php } elseif ($value['type'] == "heading") { ?>

<div>

<h2><?php echo $value['name']; ?></h2>

Abajo de esta condicional o exactamente antes agregamos el código.

Obviamos los divs ya que corresponden a un archivo css que personalmente he agregado. Ustedes pueden configurar sus propios estilos en el archivo controlpanel.css y en base a este darle ese look personalizado a su PO.

<?php } elseif ($value['type'] == "select") { ?>
<div>
<label><?php echo $value['name']; ?>:</label>

<select name="<?php echo $value['id']; ?>" id="<?php echo $value['id']; ?>">
<?php foreach ($value['options'] as $option) { ?>
<option<?php if ( get_settings( $value['id'] ) == $option) { echo ' selected="selected"'; }?>><?php echo $option; ?></option>
<?php } ?>
</select>
<p><?php echo $value['desc']; ?> </p>
</div>

Con esto prácticamente tendremos terminada nuestra PO, así ha quedado el mio:

Crear Query con opciones del PA

Revisando el Código actual

A continuación les mostraré la porción de código actual de nuestro slide.

Antes de continuar por favor revisen este tutorial que es donde creamos un query y el loop del slideshow.

<?php if (is_home()) {?>
<div id="slider_wrapper">
<div id="slider">
<?php query_posts('showposts=5&amp;amp;amp;amp;cat=3'); ?>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

<?php the_post_thumbnail();?>

<?php endwhile; else: ?>
<p>Uuuups!!! no encontramos ninguna imagen en los artículos de la categoría.</p>
<?php endif; ?>

Primero decimos que solo muestre el slideshow si estamos en el Home del sitio (is_home), luego construimos un query con las opciones showposts y cat que nos dicen cuantos artículos mostraremos y la categoría donde se encuentran los slides. Luego con el query creamos un loop donde mostraremos un listado de las imágenes destacadas de los posts, al final agregamos una línea de texto que se mostrará si ninguna condición se cumple.

Sobreescribiendo el Query

Actualmente tenemos un Query simple para los posts, lo que haremos será crear uno un poco más complejo en donde además incluiremos el inicio de nuestro loop, veamos como queda.

<?php
$slidecat = get_option('ed_sldcat');
$slidecount = get_option('ed_sldct');

$my_query = new WP_Query('category_name= '. $slidecat .'&amp;amp;amp;amp;showposts= '. $slidecount . '');
if ( have_posts() ) : while ($my_query->have_posts()) : $my_query->the_post();$do_not_duplicate = $post->ID;
?>

Primero creamos una variable llamada $slidecat que será igual a l ‘ed_sldcat’ y luego la variable $slidecount que será igual a la opción ‘ed_sldct’.  Estas varibles corresponden a las que definimos en nuestro PO, la primera corresponde a las categorías y la segunda a la cantidad de entradas.

Ahora creamos nuestro Query como una variable más llamada $my_query ésta es igual a una wp_query (un query de wordpress) en donde el nombre de la categoría ‘category_name= ‘ será lo que resulte de . $slidecat. así mismo la cantidad de posts a mostrar ‘&showposts= ‘ que será el resultado de . $slidecount .

Ahora agregamos el inicio de nuestro loop y terminamos el fragmento que debemos editar.

Todo lo demás queda exactamente como antes y así es como debería de quedar el código ahora.

<?php
$slidecat = get_option('ed_sldcat');
$slidecount = get_option('ed_sldct');

$my_query = new WP_Query('category_name= '. $slidecat .'&amp;amp;amp;amp;showposts= '. $slidecount . '');
if ( have_posts() ) : while ($my_query->have_posts()) : $my_query->the_post();$do_not_duplicate = $post->ID;
?>

&lt;?php the_post_thumbnail();?&gt;

&lt;?php endwhile; else: ?&gt;
&lt;p&gt;Uuuups!!! no encontramos ninguna imagen en los artículos de la categoría.&lt;/p&gt;
&lt;?php endif; ?&gt;

De esta forma agregamos vitaminas, una mejor funcionalidad y practicidad a nuestro tema. Adjunto mi archivo control-panel.php

Comentarios Bienvenidos, éxitos y hasta que el tiempo sea grato.