Problemas con diseño CSS al agregar paginación

  • Autor Autor seal
  • Fecha de inicio Fecha de inicio
seal

seal

Gamma
Verificación en dos pasos activada
Verificado por Whatsapp
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Hola, he añadido paginación a mi sitio con código y ha funcionado perfecto, lo único que el css no me funciona y ha quedado un poco feucho el resultado.
Una persona en los comentarios del lugar de donde he sacado los códigos, ha escrito que para funcionar necesita la clase de ".pagination" debe darse a div:
eco ";
Este es el código css:

.pagination {
margin: 20px 0;
}
.pagination ul {
display: inline-block;
margin-left: 0;
margin-bottom: 0;
border-radius: 5px;
}
.pagination ul>li {
display: inline;
}
.pagination ul>li:first-child>a, .pagination ul>li:first-child>span {
border-left-width: 1px;
border-radius: 5px 0 0 5px;
}
.pagination ul>li:last-child>a, .pagination ul>li:last-child>span {
border-rigth-width: 1px;
border-radius: 0 5px 5px 0;
}
.pagination ul>li>a, .pagination ul>li>span {
float: left;
padding: 4px 12px;
line-height: 20px;
text-decoration: none;
background-color: #ffffff;
border: 1px solid #dddddd;
border-left-width: 0;
}

Este es el código para paginar que iba en functions.php

function wp_pagination() {
global $wp_query;
$big = 12345678;
$page_format = paginate_links( array(
'base' => str_replace( $big, '%#%', esc_url( get_pagenum_link( $big ) ) ),
'format' => '?paged=%#%',
'current' => max( 1, get_query_var('paged') ),
'total' => $wp_query->max_num_pages,
'type' => 'array'
) );
if( is_array($page_format) ) {
$paged = ( get_query_var('paged') == 0 ) ? 1 : get_query_var('paged');
echo '<div><ul>';
echo '<li><span>'. $paged . ' of ' . $wp_query->max_num_pages .'</span></li>';
foreach ( $page_format as $page ) {
echo "<li>$page</li>";
}
echo '</ul></div>';
}
}

No tengo ni idea de css, alguien que sepa me puede ayudar a añadir lo que falta en el código para que funcione?? Gracias!!
 
Última edición:
Dar clase a un elemento significa que si el elemento es <div></div>, le pones <div class="pagination"></div> . Para que el css te funcione deberás respetar la jerarquía de elementos padres-hijo, por lo que tendrías que añadirle esa clase a éste div según el css que has enseñado:

function wp_pagination() {
global $wp_query;
$big = 12345678;
$page_format = paginate_links( array(
'base' => str_replace( $big, '%#%', esc_url( get_pagenum_link( $big ) ) ),
'format' => '?paged=%#%',
'current' => max( 1, get_query_var('paged') ),
'total' => $wp_query->max_num_pages,
'type' => 'array'
) );
if( is_array($page_format) ) {
$paged = ( get_query_var('paged') == 0 ) ? 1 : get_query_var('paged');
echo '<div class="pagination"><ul>';
echo '<li><span>'. $paged . ' of ' . $wp_query->max_num_pages .'</span></li>';
foreach ( $page_format as $page ) {
echo "<li>$page</li>";
}
echo '</ul></div>';
}
}
 
DanielDiaz dijo:
Dar clase a un elemento significa que si el elemento es <div></div>, le pones <div class="pagination"></div> . Para que el css te funcione deberás respetar la jerarquía de elementos padres-hijo, por lo que tendrías que añadirle esa clase a éste div según el css que has enseñado:

function wp_pagination() {
global $wp_query;
$big = 12345678;
$page_format = paginate_links( array(
'base' => str_replace( $big, '%#%', esc_url( get_pagenum_link( $big ) ) ),
'format' => '?paged=%#%',
'current' => max( 1, get_query_var('paged') ),
'total' => $wp_query->max_num_pages,
'type' => 'array'
) );
if( is_array($page_format) ) {
$paged = ( get_query_var('paged') == 0 ) ? 1 : get_query_var('paged');
echo '<div class="pagination"><ul>';
echo '<li><span>'. $paged . ' of ' . $wp_query->max_num_pages .'</span></li>';
foreach ( $page_format as $page ) {
echo "<li>$page</li>";
}
echo '</ul></div>';
}
}
Hacer clic para expandir...

Muchas gracias por responder, he hecho el cambio y no ha hecho efecto, también he probado a ponerlo con el punto ".pagination" alguna idea de que puede ser?? Gracias!!
la cosa es que quede así o parecido
default-numeric-navigation.png

Por ahora se me ve así
hello.webp

Un saludo!!
 
El . no se pone dentro de class="pagination". Prueba actualizando la página haciendo Control + F5, eso actualizas borrando caché local en tu navegador. No vas a conseguir el mismo resultado que eso que muestras con el css que estás usando, pero sí que debería salirte en línea o con un fondo en blanco o al menos cualquier otro resultado que al menos tenga un estilo.

Otro problema que te puede estar pasando es que no tengas bien incluído el css. Prueba:


function wp_pagination() {
global $wp_query;
$big = 12345678;
$page_format = paginate_links( array(
'base' => str_replace( $big, '%#%', esc_url( get_pagenum_link( $big ) ) ),
'format' => '?paged=%#%',
'current' => max( 1, get_query_var('paged') ),
'total' => $wp_query->max_num_pages,
'type' => 'array'
) );
if( is_array($page_format) ) {
echo '<style>
.pagination {
margin: 20px 0;
}
.pagination ul {
display: inline-block;
margin-left: 0;
margin-bottom: 0;
border-radius: 5px;
}
.pagination ul>li {
display: inline;
}
.pagination ul>li:first-child>a, .pagination ul>li:first-child>span {
border-left-width: 1px;
border-radius: 5px 0 0 5px;
}
.pagination ul>li:last-child>a, .pagination ul>li:last-child>span {
border-rigth-width: 1px;
border-radius: 0 5px 5px 0;
}
.pagination ul>li>a, .pagination ul>li>span {
float: left;
padding: 4px 12px;
line-height: 20px;
text-decoration: none;
background-color: #ffffff;
border: 1px solid #dddddd;
border-left-width: 0;
}</style>';

$paged = ( get_query_var('paged') == 0 ) ? 1 : get_query_var('paged');
echo '<div class="pagination"><ul>';
echo '<li><span>'. $paged . ' of ' . $wp_query->max_num_pages .'</span></li>';
foreach ( $page_format as $page ) {
echo "<li>$page</li>";
}
echo '</ul></div>';
}
}

Hacerlo de esta manera es desoptimizado, ya que cada vez que llames a la función que abra la paginación te va a incluir estilos que podrían estar repetidos. La cosa es que no puedo llegar a conocer el problema a priori con lo que has comentado, pero con ésto al menos descartamos que tengas la hoja de css mal incluída en el template y no esté funcionando, o que tengas problemas de caché tanto local como en el servidor. Comenta por aquí cómo te va con estos nuevos cambios, y si tienes plugins para optimizar la velocidad de carga, desactívalos o purga el caché.
 
DanielDiaz dijo:
El . no se pone dentro de class="pagination". Prueba actualizando la página haciendo Control + F5, eso actualizas borrando caché local en tu navegador. No vas a conseguir el mismo resultado que eso que muestras con el css que estás usando, pero sí que debería salirte en línea o con un fondo en blanco o al menos cualquier otro resultado que al menos tenga un estilo.

Otro problema que te puede estar pasando es que no tengas bien incluído el css. Prueba:


function wp_pagination() {
global $wp_query;
$big = 12345678;
$page_format = paginate_links( array(
'base' => str_replace( $big, '%#%', esc_url( get_pagenum_link( $big ) ) ),
'format' => '?paged=%#%',
'current' => max( 1, get_query_var('paged') ),
'total' => $wp_query->max_num_pages,
'type' => 'array'
) );
if( is_array($page_format) ) {
echo '<style>
.pagination {
margin: 20px 0;
}
.pagination ul {
display: inline-block;
margin-left: 0;
margin-bottom: 0;
border-radius: 5px;
}
.pagination ul>li {
display: inline;
}
.pagination ul>li:first-child>a, .pagination ul>li:first-child>span {
border-left-width: 1px;
border-radius: 5px 0 0 5px;
}
.pagination ul>li:last-child>a, .pagination ul>li:last-child>span {
border-rigth-width: 1px;
border-radius: 0 5px 5px 0;
}
.pagination ul>li>a, .pagination ul>li>span {
float: left;
padding: 4px 12px;
line-height: 20px;
text-decoration: none;
background-color: #ffffff;
border: 1px solid #dddddd;
border-left-width: 0;
}</style>';

$paged = ( get_query_var('paged') == 0 ) ? 1 : get_query_var('paged');
echo '<div class="pagination"><ul>';
echo '<li><span>'. $paged . ' of ' . $wp_query->max_num_pages .'</span></li>';
foreach ( $page_format as $page ) {
echo "<li>$page</li>";
}
echo '</ul></div>';
}
}

Hacerlo de esta manera es desoptimizado, ya que cada vez que llames a la función que abra la paginación te va a incluir estilos que podrían estar repetidos. La cosa es que no puedo llegar a conocer el problema a priori con lo que has comentado, pero con ésto al menos descartamos que tengas la hoja de css mal incluída en el template y no esté funcionando, o que tengas problemas de caché tanto local como en el servidor. Comenta por aquí cómo te va con estos nuevos cambios, y si tienes plugins para optimizar la velocidad de carga, desactívalos o purga el caché.
Hacer clic para expandir...
DanielDiaz dijo:
El . no se pone dentro de class="pagination". Prueba actualizando la página haciendo Control + F5, eso actualizas borrando caché local en tu navegador. No vas a conseguir el mismo resultado que eso que muestras con el css que estás usando, pero sí que debería salirte en línea o con un fondo en blanco o al menos cualquier otro resultado que al menos tenga un estilo.

Otro problema que te puede estar pasando es que no tengas bien incluído el css. Prueba:


function wp_pagination() {
global $wp_query;
$big = 12345678;
$page_format = paginate_links( array(
'base' => str_replace( $big, '%#%', esc_url( get_pagenum_link( $big ) ) ),
'format' => '?paged=%#%',
'current' => max( 1, get_query_var('paged') ),
'total' => $wp_query->max_num_pages,
'type' => 'array'
) );
if( is_array($page_format) ) {
echo '<style>
.pagination {
margin: 20px 0;
}
.pagination ul {
display: inline-block;
margin-left: 0;
margin-bottom: 0;
border-radius: 5px;
}
.pagination ul>li {
display: inline;
}
.pagination ul>li:first-child>a, .pagination ul>li:first-child>span {
border-left-width: 1px;
border-radius: 5px 0 0 5px;
}
.pagination ul>li:last-child>a, .pagination ul>li:last-child>span {
border-rigth-width: 1px;
border-radius: 0 5px 5px 0;
}
.pagination ul>li>a, .pagination ul>li>span {
float: left;
padding: 4px 12px;
line-height: 20px;
text-decoration: none;
background-color: #ffffff;
border: 1px solid #dddddd;
border-left-width: 0;
}</style>';

$paged = ( get_query_var('paged') == 0 ) ? 1 : get_query_var('paged');
echo '<div class="pagination"><ul>';
echo '<li><span>'. $paged . ' of ' . $wp_query->max_num_pages .'</span></li>';
foreach ( $page_format as $page ) {
echo "<li>$page</li>";
}
echo '</ul></div>';
}
}

Hacerlo de esta manera es desoptimizado, ya que cada vez que llames a la función que abra la paginación te va a incluir estilos que podrían estar repetidos. La cosa es que no puedo llegar a conocer el problema a priori con lo que has comentado, pero con ésto al menos descartamos que tengas la hoja de css mal incluída en el template y no esté funcionando, o que tengas problemas de caché tanto local como en el servidor. Comenta por aquí cómo te va con estos nuevos cambios, y si tienes plugins para optimizar la velocidad de carga, desactívalos o purga el caché.
Hacer clic para expandir...

Hola!! muchas gracias después de añadir este último código a functions.php se ve perfectamente. No tengo ni idea de porque no se veía colocandolo en css adicional , de hecho he puesto anteriormente otros códigos de estilo como el de leer más y si funciona, por eso no entendía porque este no y si purgué cloudflare y todo y no se veía ningún cambio hasta ahora que se ve perfecto.
hello.png

La cuestión es que no es la forma más optimizada de hacerlo como dices pero ya miraré de arreglarlo o buscar otros códigos por el momento hace el apaño 🙂
Muchas gracias!!

P.D: No se ni como lo he hecho pero ya lo he arreglado toqueteando el código en wordpress css adicional, al borrar la linea border-rigth-width: 1px; y dejar border: 1px ya me funciona sin tener que poner las lineas de estilo en el archivo functions XD.
 
Última edición:
Hay que estar conectado o registrado para responder aquí.

Temas similares

ultracobra
Cómo ajustar nav con CSS para botones más estrechos
Respuestas
4
Visitas
400
ultracobra
ultracobra
WWWW
Agregar paginación personalizada a mi diseño CSS
Respuestas
1
Visitas
213
BotBeta
BotBeta
N
Ayuda, ¿algún entendido en CSS?
Respuestas
2
Visitas
1K
Tarihta
T
Atrás
Arriba