15Oct 2011 5 Comments */?>

Añadir imagenes a categorías o taxonomias en WordPress

Categorías: Tutoriales, Wordpress - Tags: ,

Aunque el título de este post indica que podemos añadir una imagen a una categoría o taxonomía o tag o etc en realidad podemos agregar cualquier campo extra que necesitemos.

Lo que hacemos es modificar el formulario para editar una categoría y agregarle cualquier campo que necesitemos. En la siguiente imagen pueden ver como a una categoría de una taxonomía le agregue un campo para que mi cliente pudiera elegir la foto que quiera para describir dicha categoría.

Primero les voy a explicar como agregar dicho campo a una categoría ya que me parece un poco más facil. Lo primero que necesitamos es la función encargada de agregar dicho campo:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<?php
//hook para agregar campos extras a nuestra categoría
add_action ( 'edit_category_form_fields', 'campos_extras');
//función encargada de agregar dichos campos
function campos_extras( $tag ) {    //le pasamos la variable tag que contiene el id de nuestra categoría
    $t_id = $tag->term_id;
    $cat_meta = get_option( "category_$t_id");
?>
<tr class="form-field">
<th scope="row" valign="top"><label for="cat_Image_url"><?php _e('Url de la Imagen'); ?></label></th>
<td>
<input type="text" name="Cat_meta[img]" id="Cat_meta[img]" size="3" style="width:60%;" value="<?php echo $cat_meta['img'] ? $cat_meta['img'] : ''; ?>"><br />
            <span class="description"><?php _e('Imagen para la categoría, usar http://'); ?></span>
        </td>
</tr>
<tr class="form-field">
<th scope="row" valign="top"><label for="extra1"><?php _e('Campo extra'); ?></label></th>
<td>
<input type="text" name="Cat_meta[extra1]" id="Cat_meta[extra1]" size="25" style="width:60%;" value="<?php echo $cat_meta['extra1'] ? $cat_meta['extra1'] : ''; ?>"><br />
            <span class="description"><?php _e('extra field'); ?></span>
        </td>
</tr>
 
<?php
}

Al igual que en mi otro post “como crear una página de opciones para un themeusaremos un array para guardar todos los valores dentro de la tabla de opciones de nuestro WordPress así solo ocupamos una fila (cuestión de gustos).
Ahora necesitamos guardar los cambios de este array y para ello usaremos la siguiente función:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<?php
// hook para guardar los datos
add_action ( 'edited_category', 'guardar_campos_extras');
   // función que guarda los campos extras
function guardar_campos_extras( $term_id ) {
    if ( isset( $_POST['Cat_meta'] ) ) {
        $t_id = $term_id;
        $cat_meta = get_option( "category_$t_id");
        $cat_keys = array_keys($_POST['Cat_meta']);
            foreach ($cat_keys as $key){
            if (isset($_POST['Cat_meta'][$key])){
                $cat_meta[$key] = $_POST['Cat_meta'][$key];
            }
        }
        //Guardamos las opciones
        update_option( "category_$t_id", $cat_meta );
    }
}

Como pueden ver en una opción llamada category_$t_id donde $t_id es el id de dicha categoría tendremos un array con todos los datos.

Ahora para recuperar los valores tan solo necesitaremos saber el id de la categoría actual y voila!

1
2
3
4
5
6
7
8
9
<?php
//Obtenemos el id de la categoría dentro de $wp_query->query_vars
$cat_id = get_query_var('cat');
//Obtenemos el array desde la base de datos
$cat_data = get_option("category_$cat_id");
//y por último mostramos lo que necesitemos
if (isset($cat_data['img']) && $cat_data['img']!=''){
echo '<div class="cat_img"><img src="'.$cat_data['img'].'"></div>';
}

Fácil y super útil!!! Ahora que pasa si en realidad queremos agregar un campo a una taxonomía creada en custom post type ? El mecanismo es prácticamente lo mismo, lo único que cambia son algunos hooks y la forma de obtener el id.

Suponiendo que nuestra taxonomie es galleries tal y como me paso a mi los hooks que debemos usar son:

1
2
add_action ( 'galleries_edit_form_fields', 'campos_extras', 10, 2);
add_action( 'edited_galleries', 'guardar_campos_extras', 10, 2);

Tan solo tienen que cambiar galleries por el nombre de su taxonomía.

Para recuperar los datos tenemos que hacer lo siguiente:

1
$cat_id = get_query_var('term_id');

O también pueden probar con

1
$cat_id = $wp_query->queried_object->term_id;

O si es una tag

1
$cat_id = get_query_var('tag_id');

Espero que les haya servido!! Me costo mucho juntar toda esta info!!

Damián Logghe

Programador freelancer y emprendedor en sueños. Contento de ser mi jefe y poder hacer lo que me gusta. WordPress es mi principal fuente de ingreso y me escribo tanto para ayudar como para tener una guia de memoria. Quieres contratarme? Déjame un mensaje.

More Posts - Website

Follow Me:
TwitterFacebookLinkedInGoogle Plus

  • Pingback: Bitacoras.com()

  • Jose Sinisterra

     Hola buen aporte !!!

    Para los que quieran utilizar esta informacion con tags o etiquetas deben cambiar lo siguiente:

    add_action ( ‘edited_category’, ‘guardar_campos_extras’); por
    add_action ( ‘edited_term’, ‘guardar_campos_extras’);

    para que guarde los campos extras, ala hora de dar “Actualiza” o  “Update”

  • Emanuel Canova

    Pero aca no explica nada.. Donde poner los codigos? Donde colocar todo eso.. esta bueno.. pero no se en que archivo meter todo eso.. es justo lo que necesito pero aun esta incompleto.. 

  • Emanuel Canova

    Pero aca no explica nada.. Donde poner los codigos? Donde colocar todo eso.. esta bueno.. pero no se en que archivo meter todo eso.. es justo lo que necesito pero aun esta incompleto.. 

  • Asarda

    Hola muy buen post! Pero como sería si lo que queremos es añadir una imagen!! Es decir poner una que tenemos en nuestros ordenador con un

    Gracias!