El complemento digital conocido como «Grid de Contenidos» es una herramienta de gran utilidad que facilita una solución simple y eficaz para lucir una cuadrícula de contenidos en tu página web creada con WordPress. Conocido por su impresionante versatilidad y fácil manejo, este plugin permite a los propietarios de sitios web y bloggers tener un mayor control sobre cómo presentar su contenido en línea.
Descripción del plugin Grid de Contenidos
El «Grid de Contenidos» funciona a través de la implementación de un shortcode, una especie de código corto o abreviado, que se utiliza para simplificar la tarea de añadir contenido específico a tu sitio web. Mediante el uso de este shortcode, puedes exhibir posts de un tipo determinado. Entre estos tipos se incluyen posts comunes o estándares, páginas, cursos, portafolios, tiendas, y otros formatos personalizables.
Además, esta herramienta permite mostrar contenidos de una categoría específica, lo que aporta un valor adicional para aquellos sitios web que manejan una gran cantidad de contenido bajo diferentes categorías. También ofrece la opción de mostrar posts que posean un valor específico en un campo personalizado de Advanced Custom Fields (ACF), un poderoso plugin de WordPress que brinda a los usuarios la posibilidad de personalizar los campos de datos de su sitio web.
El plugin «Grid de Contenidos» es especialmente ideal para mostrar un conjunto de artículos, páginas, o cualquier otro tipo de post en una cuadrícula organizada y visualmente atractiva. Esta capacidad de organizar y presentar contenido de una manera estéticamente agradable es gracias al uso de CSS grid, una técnica de diseño de página que permite la creación de diseños de página complejos y responsivos. En definitiva, el plugin «Grid de Contenidos» para WordPress es una herramienta esencial para cualquier persona que desee presentar su contenido de una manera organizada y visualmente atractiva.
Características del plugin Grid de Contenidos
- Muestra un grid de posts basado en tipo de post, categoría y/o valor de campo ACF, usando css grid.
- Fácil de usar a través de un shortcode que acepta varios parámetros de forma individual o conjunta.
- Optimizado para un mejor rendimiento en sitios con un gran número de posts.
- Flexible: funciona incluso sin ACF activado, mostrando posts según los otros criterios especificados.
- Compatible con PHP 8.2.
- El CSS solo se carga donde se ejecuta el shortcode.
Instalación del plugin Grid de Contenidos
- Sube los archivos del plugin al directorio
/wp-content/plugins/grid-contenidos, o instala el plugin a través de la pantalla de plugins de WordPress directamente. - Activa el plugin a través de la pantalla ‘Plugins’ en WordPress.
Uso del plugin Grid de Contenidos parametros del shortcode
Para usar el plugin, simplemente inserta el shortcode [jlmr_pages_grid] en tus páginas o entradas. Puedes personalizar el contenido mostrado utilizando diferentes atributos en el shortcode:
type: Define el tipo de post a mostrar (por ejemplo, ‘post’, ‘page’, etc.).number: Establece el número de posts a mostrar.category: Filtra los posts por una categoría específica.jl_tipo_de_contenido: Filtra los posts por un valor específico en el campo ACFjl_tipo_de_contenido.
Ayuda: El plugin tiene un enlace a la documentación de ayuda con ejemplos de usos.
Ejemplos de Shortcode que puedes usar con el plugin Grid de Contenidos
- Mostrar 20 posts del tipo ‘post’:
[jlmr_pages_grid type="post" number="20"] - Mostrar 15 páginas de la categoría ‘minicursos’:
[jlmr_pages_grid type="page" number="15" category="minicursos"] - Mostrar 10 posts que tengan ‘valor1’ en el campo ACF
jl_tipo_de_contenido:[jlmr_pages_grid type="post" number="10" jl_tipo_de_contenido="valor1"] - Combinar categoría y campo ACF:
[jlmr_pages_grid type="post" category="minicursos" jl_tipo_de_contenido="valor2"]
Preguntas Frecuentes
P: ¿Necesito tener ACF instalado para usar este plugin?
R: No es necesario para el funcionamiento básico del plugin, pero sí para filtrar posts basándose en campos ACF, si no lo tienes instalado la versión gratis o la pro de ACF, solo filtra por el tipo de post type y la categoría.
El código del plugin es el siguiente:
<?php
/**
* Plugin Name: Grid de Contenidos
* Plugin URI: https://webyblog.es/
* Description: Shortcode [jlmr_pages_grid] Muestra un grid de un número de posts determinados de un tipo de posttype de una categoría específica y/o un valor de ACF específico usando un shortcode. Los atributos number, category, type y jl_tipo_de_contenido se pueden especificar en el shortcode. Si no se especifican, se usarán valores predeterminados, ejemplo: [jlmr_pages_grid type="post" category="minicursos" jl_tipo_de_contenido="valor"].
* Version: 1.7
* Author: Juan Luis Martel
* Author URI: https://webyblog.es/
* License: GPL2
*/
if (!defined('ABSPATH')) {
exit; // Salir si se accede directamente.
}
// Codigo para añadir enlace de Ayuda en el plugin que muestra el fichero ayuda.html
add_filter('plugin_action_links', 'jlmr_agregar_enlace_ayuda_grid_contenidos', 10, 2);
function jlmr_agregar_enlace_ayuda_grid_contenidos($links, $file) {
// Obtenemos el 'basename' del archivo actual
$plugin_basename = plugin_basename(__FILE__);
// Comprobamos si estamos en el plugin correcto antes de agregar el enlace
if ($file == $plugin_basename) {
// Construimos la URL del archivo de ayuda
$ayuda_url = plugins_url('ayuda.html', __FILE__);
// Añadimos el nuevo enlace de ayuda al array de enlaces
$enlace_ayuda = '<a rel="noopener noreferrer nofollow" href="' . esc_url($ayuda_url) . '" target="_blank">Ayuda</a>';
array_push($links, $enlace_ayuda);
}
return $links;
}
function jlmr_maybe_enqueue_grid_css() {
global $post;
// Verifica si el post actual contiene el shortcode.
if (is_a($post, 'WP_Post') && has_shortcode($post->post_content, 'jlmr_pages_grid')) {
$css_path = plugins_url('grid-style.css', __FILE__);
// Define la versión del archivo CSS. Cambia este número cada vez que actualices el CSS.
$css_version = '1.0.1'; // Por ejemplo, incrementa este número a '1.0.2' en la próxima actualización.
wp_enqueue_style('jlmr_grid_css', $css_path, array(), $css_version);
}
}
add_action('wp_enqueue_scripts', 'jlmr_maybe_enqueue_grid_css');
include_once(ABSPATH . 'wp-admin/includes/plugin.php'); // Incluye la función is_plugin_active.
function jlmr_display_pages_grid($atts) {
// Combina los atributos del usuario con los valores predeterminados.
$atts = shortcode_atts(array(
'number' => 20,
'category' => '',
'type' => 'page',
'jl_tipo_de_contenido' => '', // Atributo para el campo ACF
), $atts, 'jlmr_pages_grid');
// Argumentos para la consulta WP_Query con optimizaciones de rendimiento.
$args = array(
'post_type' => sanitize_text_field($atts['type']),
'post_status' => 'publish',
'posts_per_page' => intval($atts['number']),
'orderby' => 'menu_order',
'order' => 'ASC',
'post_parent' => 0,
'no_found_rows' => true, // Optimización para no contar filas
'update_post_meta_cache' => false, // Evita cargar el cache de meta datos
);
// Filtrar por categoría si está definida.
if (!empty($atts['category'])) {
$args['category_name'] = sanitize_text_field($atts['category']);
}
// Verifica si alguno de los plugins de ACF está activo antes de añadir la meta query.
if (is_plugin_active('advanced-custom-fields-pro/acf.php') || is_plugin_active('advanced-custom-fields/acf.php')) {
if (!empty($atts['jl_tipo_de_contenido'])) {
$args['meta_query'] = array(
array(
'key' => 'jl_tipo_de_contenido',
'value' => '"' . sanitize_text_field($atts['jl_tipo_de_contenido']) . '"',
'compare' => 'LIKE'
)
);
}
}
$pages_query = new WP_Query($args);
// Comienza a generar el contenido del grid.
$content = '<div role="grid" class="jlmr-grid-container">';
if ($pages_query->have_posts()) {
while ($pages_query->have_posts()) {
$pages_query->the_post();
$permalink = get_permalink();
$title = get_the_title();
$excerpt = get_the_excerpt();
$content .= '<article>';
$content .= '<div role="gridcell" class="jlmr-grid-item" onclick="location.href=\''.esc_url($permalink).'\';">';
$content .= get_the_post_thumbnail(get_the_ID(), 'medium');
$content .= '<div class="jlmr-grid-item-meta">';
$content .= '<div class="jlmr-grid-item-meta-info">';
$content .= '<h3 class="jlmr-grid-item-meta-info-h3"><a href="'.esc_url($permalink).'" title="'.esc_attr($title).'">'.esc_html($title).'</a></h3>';
$content .= '<p class="jlmr-grid-item-meta-info-excerpt">'.esc_html($excerpt).'</p>';
$content .= '</div>';
$content .= '</div>';
$content .= '</div>';
$content .= '</article>';
}
wp_reset_postdata();
} else {
$content .= '<p>No se encontraron páginas.</p>';
}
$content .= '</div>';
return $content;
}
add_shortcode('jlmr_pages_grid', 'jlmr_display_pages_grid');
/* CSS del plugin grid-contenidos.php */
/* Estilo para el contenedor del grid usando CSSGRID */
.jlmr-grid-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); /* Ajuste para cambiar el ancho de la foto o de las columnas */
gap: 40px; /* Espacio entre los elementos del grid */
/* padding: 20px; */
}
/* Estilo para cada ítem del grid */
.jlmr-grid-item {
cursor:pointer;
height: 100%;
border-radius: 1.6875rem;
border: 1px solid var(--color-border);
background-color: var(--color-blanco);
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: space-between; /* Esto distribuye el espacio */
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}
.jlmr-grid-item:hover {
box-shadow: 5px 5px 10px 0 rgba(0,0,0,.05);
transform: translate3d(0px,-05px,0);
transition: all 0.2s ease 0.2s;
}
.jlmr-grid-item img {
margin-bottom: 10px;
width: 100%;
height: auto;
overflow: hidden;
}
.jlmr-grid-item-meta {
display: flex;
flex-direction: column;
padding: 12px 16px;
flex-grow: 1;
}
.jlmr-grid-item-meta .jlmr-grid-item-meta-info {
flex-grow: 1;
}
.jlmr-grid-item-meta .jlmr-grid-item-meta-info-h3 {
-webkit-line-clamp: 1;
margin-bottom: 2px;
}
.jlmr-grid-item-meta .jlmr-grid-item-meta-info-excerpt {
-webkit-line-clamp: 2;
margin-bottom: 2px;
}
.jlmr-grid-item h3 {
font-size: 1.2em;
line-height: 1.15em;
letter-spacing: -0.0125em;
font-weight: 700;
text-transform: initial;
text-align: center;
margin: 5px auto 20px;
text-decoration: none;
text-wrap: balance;
}
.jlmr-grid-item p {
/* text-wrap: balance; */
line-height: 1.3em;
letter-spacing: -0.01em;
font-weight: 400;
text-transform: initial;
text-align: justify;
/* margin: auto 20px 20px; */
color: var(--text-100);
flex-grow: 1;
display: flex;
align-items: flex-end;
}
Ya sea que estés buscando una manera de mostrar tu portafolio de trabajos, tus últimos posts de blog, o los cursos de tu academia en línea, el plugin «Grid de Contenidos» te proporcionará las herramientas necesarias para lograrlo con facilidad y eficacia. No solo mejora la apariencia de tu sitio web, sino que también mejora la experiencia del usuario, al proporcionar una navegación intuitiva y una presentación clara del contenido.
Fichero del plugin grid de contenidos
Si lo deseas puedes descargar el plugin desde :
