Crear un grid de custom post types sin plugin

En este artículo vemos una forma fácil de mostrar las últimas entradas de un custom post type en formato grid en cualquier lugar de nuestra web mediante un shortcode.


por

Si sueles utilizar custom post types para organizar y mostrar diferente tipo de contenido en tu web, es posible que en algún momento necesites mostrar un grid o rejilla de entradas en un lugar concreto de tu web, como en la página de inicio, en la página 404, páginas de contenidos, etc…

Aunque hay plugins y maquetadores visuales que nos permiten hacerlo, si te gusta la simplicidad y quieres poder hacerlo de una forma ligera y sencilla, tenemos la opción de hacerlo mediante código y mostrarlo mediante un shortcode en cualquier sitio de nuestra web.

Lo que hacemos en este código es, por una parte filtrar los posts del tipo que nos interesa (en el ejemplo, ‘post_type’ => ‘podcasts’), y la cantidad, y por otra, recorrer los resultados para mostrarlos con el código HTML que deseemos:

  • En la variable $feat_image guardamos la url del thumbnail del post.
  • get_permalink() es el enlace a la entrada mostrada.
  • get_the_title() es el título del post o entrada.
  • get_the_excerpt() muestra el extracto del post.

En este caso aprovechamos los estilos que el theme ya llevaba para este tipo de contenido, y por eso utilizamos las etiquetas article, header, y las clases entry, entry-title , pero podríamos utilizar las etiquetas HTML y CSS que más nos convenga.

Una vez creado el shortcode, podemos añadirlo en cualquier sitio de nuestra web con el nombre que le hayamos indicado, en el caso del ejemplo [view-podcast]

Comentarios

10 respuestas a «Crear un grid de custom post types sin plugin»

  1. Avatar de Halley

    |

    Hola, estoy intentando crear un shortcode donde le pueda pasar ciertos parámetros para poder filtrar pero no encuentro como hacer que funcione. Basado en el ejemplo que tienes imagina que tienes dos taxonomias (categoría del podcast y año de publicación), cómo puedes hacer para filtrar los post? (ej.: [view-podcast categoria=»uno» publicacion=»2017″]

    1. Avatar de esther

      |

      Hola!
      Mírate el artículo de shortcode con parámetros: Shortcodes con parámetros
      Podrías pasar la categoría y el año y añadir los valores como parámetros en la query:
      (..)
      ‘cat’ => $variablecategoria,
      ‘date_query’ => array(
      array(
      ‘year’ => $variableaño
      ),
      ),
      (..)

      Si tienes cualquier duda me dices,
      Saludos!

      1. Avatar de Halley

        |

        Hola Esther, leí el artículo que me recomiendas pero estoy algo más adelantado. Me gustaría mostrarte lo que tengo a ver si me ayudas a identificar mi error, me he partido la cabeza y aún no lo consigo. Déjame saber si es posible, te lo agradeceré un montón.

  2. Avatar de Joacodesign

    |

    Hola que tal como podría hacer esto pero, de 2 instalaciones diferentes de wordpress, osea mostrar las entradas de una instalación en el home de otra, están el el mismo hospedaje

    1. Avatar de esther

      |

      Hola!
      Depende de dónde quieras ponerlo, podrías utilizar el widget RSS que viene con WordPress. Sólo tienes que indicar la url del feed que quieres mostrar y escoger algunas opciones adicionales.
      Si quieres algo más completo puedes mirar algún plugin de RSS como: https://wordpress.org/plugins/wp-rss-aggregator/

      Saludos!

  3. Avatar de Daniel

    |

    Esté código iría en function.php? o creamos un .php con el nombre de postcast siguiendo este ejemplo?

    1. Avatar de esther

      |

      Hola Daniel!
      Puedes añadirlo en el archivo functions.php o en un mu-plugin personalizado, como cualquier otra función.

      Saludos!

  4. Avatar de Angel Alvarez

    |

    hola , gracias por tu codigo, actualmente estoy implementando mostrar post de un Custom Posttype .
    Lo he logrado pero se muestra uno debajo de otros y necesito mostrarlos 3 en columnas de 4 .

    Este es mi codigo:
    function create_shortcode_provincia_post_type(){

    $args = array(
    ‘post_type’ => ‘provincia’,
    ‘posts_per_page’ => ‘2’,
    ‘publish_status’ => ‘published’,
    );
    $query = new WP_Query($args);
    $result .= »;
    $result .= »;
    if($query->have_posts()) :
    while($query->have_posts()) :
    $query->the_post() ;
    $result .= »;
    $result .= » . get_the_post_thumbnail() . »;
    $result .= » . get_the_title() . »;
    $result .= » . get_the_content() . »;
    $result .= »;
    $result .= »;
    $result .= »;
    endwhile;
    wp_reset_postdata();
    endif;
    return $result;
    }
    add_shortcode( ‘provincia-post’, ‘create_shortcode_provincia_post_type’ );

    1. Avatar de esther

      |

      Hola Angel,
      Para mostrarlos en columnas necesitas añadir el CSS necesario, lo más práctico es crear un div que contenga los elementos y utlizar las propiedades grid o flex para crear la rejilla.

      Saludos!
      esther.

      1. Avatar de Angel

        |

        Hola esther, Muchas gracias.
        Si las tenia pero al momento de copiar el código no se que paso.
        Si debo aprovechar las propiedades grid, lo que me sucede ahora es que tengo elementor como maquetador y al colocar la clases de bootstrap como «Row» no me las ejecutaba.
        Luego probé colocando las clases que elementor implementa como «elementor-row»y me funciono la grid .
        No se por que no identifica algunas clases de bootstrap