Archivo de la etiqueta: wordpress 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…