Cómo crear una paginación de consulta personalizada en WordPress con un ejemplo
Publicado: 2020-02-24
La creación de paginación de consultas personalizadas en WordPress es una de las soluciones de paginación más ordenadas para publicaciones de blog y tipos de publicaciones personalizadas. Si desea crear una paginación de consulta personalizada en su blog de WordPress, esta publicación lo guiará. Idealmente, la paginación de consulta personalizada implica el uso de diferentes parámetros de consulta para crear la paginación de la publicación de WordPress que se basa en esta consulta.
En el tutorial anterior, expliqué en detalle cómo puede agregar paginación numérica en WordPress, así como también cómo crear miniaturas de paginación de publicaciones anteriores y siguientes, y cómo dividir una publicación en varias páginas usando la paginación. También compartí una serie de códigos de paginación de WordPress que puede usar en su blog para agregar su opción de paginación preferida. En esta publicación, expondré cómo crear e implementar una paginación de consulta personalizada en su sitio de WordPress.
Paginación de consulta personalizada
Como mencioné en la introducción, la paginación de consulta personalizada consta de tres partes que incluyen: la consulta personalizada, el código para mostrar la paginación y algunos estilos para que la paginación se vea bien. Desglosaremos este código de paginación de consulta personalizada en estos tres pasos:
Crear una consulta personalizada de publicación o publicaciones personalizadas
El primer paso es crear una consulta que es básicamente una matriz de argumentos que pretendemos usar en la consulta personalizada.
Para mostrar esta paginación de consulta personalizada, comencemos creando una plantilla de página personalizada donde agregaremos el código para la paginación de consulta personalizada.
El siguiente es el ejemplo de la plantilla de página personalizada con el código de consulta personalizado:
<?php
/**
* Nombre de la plantilla: Paginación CQ
*
*/
obtener_encabezado();
// Paso 1: Crear consulta personalizada
$paginado = ( get_query_var( 'paginado' ) ) ? get_query_var('paginado'): 1;
$argumentos = matriz(
'posts_per_page' => 2, // consulta las últimas 5 publicaciones
'paginado' => $paginado
);
$customQuery = new WP_Query($args);Este código simplemente crea una plantilla de página personalizada que puede ver debajo de los atributos de la página como se muestra en la imagen a continuación:
La consulta puede tener varios argumentos, pero en este caso, solo nos hemos limitado a 'publicaciones_por_página', que es la cantidad de publicaciones que queremos mostrar en la página.
También podemos especificar el tipo de publicación usando 'post_type', orderby, autor y mucho más. El siguiente es un ejemplo de otra consulta para el tipo de publicación personalizada llamada 'libro':
//Obtenga el autor actual para usar en la consulta
$autor_actual = ( isset($_GET ) ) ? get_user_by( 'slug', $author_name ) : get_userdata( intval( $author ) );
/* establecer los argumentos para la consulta
$argumentos = matriz(
'post_type' => array( 'objetivo'),
'ordenar por' => 'fecha',
'orden' => 'desc',
'publicaciones_por_página' => 10,
'paginado' => get_query_var('pagina')? get_query_var ('página'): 1,
'autor' => $autor_actual->ID
);
// Instanciar la consulta
$consulta = new WP_Query( $argumentos);Después de crear $args e instanciar la consulta, ahora estamos listos para mostrar las publicaciones en el ciclo y agregar la consulta personalizada en el siguiente paso.
Mostrar publicaciones consultadas en plantilla de página personalizada
Para mostrar las publicaciones consultadas, el código se ha agregado al código de la plantilla personalizada original y el código completo es el siguiente:
<?php
/**
* Nombre de la plantilla: Paginación CQ
*
*/
obtener_encabezado();
// Paso 1: Crear consulta personalizada
$paginado = ( get_query_var( 'paginado' ) ) ? get_query_var('paginado'): 1;
$argumentos = matriz(
'posts_per_page' => 2, // consulta las últimas 5 publicaciones
'paginado' => $paginado
);
$customQuery = new WP_Query($args);
?>
<!-- Paso 2: mostrar las publicaciones que consultamos en el paso 1 -->
<div clase="envolver">
<div id="primaria" clase="área de contenido">
<id principal="principal" clase="sitio-principal" rol="principal">
<?php
if($customQuery->have_posts() ):
while($customQuery->have_posts()) :
$consultapersonalizada->the_post();
publicación global $;
?>
<div class ="envoltura-de-contenido-interno">
<ul class ="cq-posts-list">
<li>
<h3 class ="cq-h3"><a href="<?php the_permalink(); ?>" ><?php the_title(); ?></a></h3>
<div>
<ul>
<div>
<a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('miniatura'); ?></a>
</div>
</ul>
<ul>
<p><?php echo el_contenido(); ?></p>
</ul>
</div>
</li>
</ul>
</div> <!-- finalizar las publicaciones del blog -->
<?php mientras tanto;
terminara si;
wp_reset_query();Crear una función de paginación
En este paso final, debemos crear la función de paginación que usaremos en la plantilla de página personalizada anterior para mostrar la paginación de consulta personalizada. Para crear la función de paginación necesitamos agregar el siguiente código al archivo functions.php:
// Función de paginación personalizada
función cq_pagination($páginas = '', $rango = 4)
{
$mostrarelementos = ($rango * 2)+1;
global $paginado;
if(vacío($paginado)) $paginado = 1;
si ($ páginas == '')
{
global $wp_query;
$páginas = $wp_query->max_num_pages;
si(!$páginas)
{
$páginas = 1;
}
}
if(1 != $páginas)
{
echo "<nav aria-label='Ejemplo de navegación de página'> <ul class='pagination'> <span>Página ".$paged." de ".$pages."</span>";
if($paged > 2 && $paged > $range+1 && $showitems < $pages) echo "<a href='".get_pagenum_link(1)."'>« Primero</a>";
if($paged > 1 && $showitems < $pages) echo "<a href='".get_pagenum_link($paged - 1)."'>‹ Anterior</a>";
para ($i=1; $i <= $páginas; $i++)
{
if (1 != $páginas &&( !($i >= $paginado+$rango+1 || $i <= $paginado-$rango-1) || $páginas <= $mostrarelementos ))
{
echo ($paginado == $i)? "<li class=\"elemento de página activo\"><a class='enlace de página'>".$i."</a></li>":"<li class='elemento de página' > <a href='".get_pagenum_link($i)."' class=\"page-link\">".$i."</a></li>";
}
}
if ($paged < $pages && $showitems < $pages) echo " <li class='page-item'><a class='page-link' href=\"".get_pagenum_link($paged + 1)". \">i class='flaticon flaticon-back'></i></a></li>";
if ($paged < $pages-1 && $paged+$range-1 < $pages && $showitems < $pages) echo " <li class='page-item'><a class='page-link' href=' ".get_pagenum_link($páginas)."'><i class='flaticon flaticon-arrow'></i></a></li>";
echo "</ul></nav>\n";
}
}
Llame a la función de paginación en una plantilla personalizada
El paso final es llamar a la función que agregamos arriba en la plantilla para que se muestre la paginación. Para llamar a esta función debemos usar el siguiente código:
// Paso 3: Llame a la función de paginación aquí
si (función_existe("cq_paginación")) {
cq_pagination($customQuery->max_num_pages);
}El código final que crea una plantilla de página personalizada con esta función de paginación debe ser el siguiente:
<?php
/**
* Nombre de la plantilla: Paginación CQ
*
*/
obtener_encabezado();
// Paso 1: Crear consulta personalizada
$paginado = ( get_query_var( 'paginado' ) ) ? get_query_var('paginado'): 1;
$argumentos = matriz(
'posts_per_page' => 2, // consulta las últimas 5 publicaciones
'paginado' => $paginado
);
$customQuery = new WP_Query($args);
?>
<!-- Paso 2: mostrar las publicaciones que consultamos en el paso 1 -->
<div clase="envolver">
<div id="primaria" clase="área de contenido">
<id principal="principal" clase="sitio-principal" rol="principal">
<?php
if($customQuery->have_posts() ):
while($customQuery->have_posts()) :
$consultapersonalizada->the_post();
publicación global $;
?>
<div class ="envoltura-de-contenido-interno">
<ul class ="cq-posts-list">
<li>
<h3 class ="cq-h3"><a href="<?php the_permalink(); ?>" ><?php the_title(); ?></a></h3>
<div>
<ul>
<div>
<a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('miniatura'); ?></a>
</div>
</ul>
<ul>
<p><?php echo el_contenido(); ?></p>
</ul>
</div>
</li>
</ul>
</div> <!-- finalizar las publicaciones del blog -->
<?php mientras tanto;
terminara si;
wp_reset_query();
// Paso 3: llame a la función de paginación aquí
si (función_existe("cq_paginación")) {
cq_pagination($customQuery->max_num_pages);
}
?>
</principal><!-- #principal -->
</div><!-- #principal -->
</div><!-- .envolver -->
<!----fin de página-------->
<?php obtener_pie de página(); ?>Si siguió cada paso de la manera correcta, debería tener la paginación como se ve en la imagen a continuación:
Estilo de la paginación de consulta personalizada
El último paso es agregar los estilos a la paginación personalizada para que coincida con los estilos y el diseño del tema. Los siguientes son los estilos CSS que debe agregar a la hoja de estilo para diseñar esta paginación personalizada:
/**
* Estilos de paginación CQ
* @autor Joe Njenga
*/
.paginación {
Limpia los dos;
posición: relativa;
tamaño de fuente: 16px;
altura de línea: 13px;
flotar derecho;
tipo-estilo-lista:ninguno;
ancho: 100%;
}
.intervalo de paginación, .paginación a {
bloqueo de pantalla;
flotador izquierdo;
margen: 2px 2px 2px 0;
relleno:6px 9px 5px 9px;
texto-decoración: ninguno;
ancho: automático;
color:#fff;
fondo: #237697;
}
.paginación a: hover{
color:#fff;
fondo: #000;
}
.paginación .actual{
relleno:6px 9px 5px 9px;
fondo: #999;
color:#fff;
}Después de agregar estos estilos de paginación, el aspecto final de la paginación personalizada debe ser como se muestra en la imagen a continuación:
Pensamientos finales
En esta publicación, hemos esbozado la forma paso a paso de agregar una paginación de consulta personalizada a su blog de WordPress. Estos pasos incluyen; creando la consulta, creando una plantilla de página personalizada para mostrar las publicaciones consultadas personalizadas con paginación y agregando una función de paginación al archivo functions.php. Finalmente, no olvide llamar a la función de paginación y agregar los estilos apropiados que coincidan con el diseño de su tema de WordPress.