Creamos Marcas... Desarrollamos Webs... Hacemos Logotipos... Posicionamos tu Marca... Anunciamos en Google... Hacemos Social Media... Te hacemos descuentos... Creamos Efectos... Retocamos Fotos... Asesoramos Empresas... Facebook para Empresas... Hacemos Concursos... No gastas, Inviertes... Damos Resultados... Tiendas Virtuales... Trabajamos en equipo... Te ayudamos a crecer... Te escuchamos... Tu web en celulares... Ganamos Premios... Hacemos SEO y SEM... Facebook ADS... Te llamamos... Volamos Cometa...
Home   »  Noticias » Programacion » Añadir imagen a categoría wordpress

Añadir imagen a categoría wordpress

Algunas veces por cuestiones de diseño web o usabilidad tenemos que insertar imágenes en nuestras categorías, esto lo hacemos a través de campos personalizados (metaboxes) y para gestionarlos en mi opinión no hay nada mejor que el fabuloso plugin https://www.advancedcustomfields.com/

entonces para añadir nuestras imagenes a las categorias en wordpress vamos a hacer lo siguiente:
1. instalamos AFC https://www.advancedcustomfields.com/
2. configuramos el campo personalizado a las categorias

3. con esa configuración obtendremos el siguiente botón en nuestras categorías

4. Ahora viene la magia del código como usar eso en nuestras plantillas, este ejemplo te sirve para mostrar la imagen de una categoría.


  <?php 
     $category = get_category( get_query_var( 'cat' ) );
     $cat_id = $category->cat_ID;
  ?>

      <div class="">
        <img src="<?php echo the_field('imagen_cat', 'category_'. $cat_id .''); ?>" alt="imagen de la categoría">
      </div>

5. Pero que pasa si quieres mostrar la imagen de todas las categorías?, bueno yo estoy usando esto para mostrar todas las categorías como una tarjeta, pero ustedes modifican el código a su gusto

<div class="row" id="container-thumbs">
                  
                  <?php 
                  // Listado de categorias
                  
                      $categories = get_categories( array(
                          'orderby' => 'name',
                          'order'   => 'ASC',
                      ) );

                      foreach( $categories as $category ) {
                  ?>
                      <div class="col-md-4 items photos" >
                        <a href="<?php echo get_category_link( $category->term_id ); ?>">
                            <div class="picture animated" data-animation="flipInY" data-animation-delay="100"> 
                                <img class="img-responsive" src="<?php echo the_field('imagen_cat', $category); ?>" alt="<?php echo $category->name; ?>" > 
                            </div>
                            <div class="details animated" data-animation="flipInX" data-animation-delay="800">
                                <div class="caption"><?php echo $category->name; ?></div>
                                <div class="category"> Cursos <?php   echo $category->count;  ?></div>
                            </div>
                        </a>
                      </div>

                    <?php } ?>
                </div>

Espero que les sirva, y Si te gusto compártelo! y si no también compártelo!!

  • 17 septiembre, 2017
  • admin