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.