Cómo resaltar la página actual en el menú de navegación de WordPress

Cómo mejorar la paginación de WordPress

Ultima actualización en por Debjit Saha

Extractos de IsItWP

¿Está buscando una forma de mejorar la navegación de WordPress? Si bien probablemente haya un complemento para esto, hemos creado un fragmento de código rápido que puede usar para mejorar la navegación de WordPress.

Instrucciones:

Todo lo que necesita hacer es agregar este código al archivo functions.php de su tema o en un complemento específico del sitio:


/**
 * Pagination - Add the proceeding to your functions.php file
 * You do not need to include the php opening and closing tags if pasting into your functions.php file
*/
function pagination($pages="", $range = 1)
{  
     $showitems = ($range * 2)+1;  
 
     global $paged;
     if(empty($paged)) $paged = 1;
 
     if($pages == '')
     {
         global $wp_query;
         $pages = $wp_query->max_num_pages;
         if(!$pages)
         {
             $pages = 1;
         }
     }   
 
     if(1 != $pages)
     {
         echo "<div class="pagination"><span>Page ".$paged." of ".$pages."</span>";
         if($paged > 2 && $paged > $range+1 && $showitems < $pages) echo "<a href="https://www.isitwp.com/enhanced-wp-pagination/".get_pagenum_link(1)."">«</a>";
         if($paged > 1 && $showitems < $pages) echo "<a href="".get_pagenum_link($paged - 1)."">‹</a>";
 
         for ($i=1; $i <= $pages; $i++)
         {
             if (1 != $pages &&( !($i >= $paged+$range+1 || $i <= $paged-$range-1) || $pages <= $showitems ))
             {
                 echo ($paged == $i)? "<span class="current">".$i."</span>":"<a href="".get_pagenum_link($i)."" class="inactive">".$i."</a>";
             }
         }
 
         if ($paged < $pages && $showitems < $pages) echo "<a href="".get_pagenum_link($paged + 1)."">›</a>";  
         if ($paged < $pages-1 &&  $paged+$range-1 < $pages && $showitems < $pages) echo "<a href="".get_pagenum_link($pages)."">»</a>";
         echo "</div>n";
     }
}

Agregue el siguiente código donde desea mostrar la paginación:


<?php if (function_exists("pagination")) {
    pagination($additional_loop->max_num_pages);
} ?>

Agregue este CSS a su hoja de estilo.


.pagination {
clear:both;
padding:20px 0;
position:relative;
font-size:11px;
line-height:13px;
}
 
.pagination a {
display:block;
float:left;
margin: 3px;
padding: 5px;
width: 25px;
height: 25px;
border-radius: 5px;
text-align: center;
line-height: 24px;
text-decoration:none;
color:#fff;
background: #282828;
}

.pagination span {
display:block;
float:left;
margin: 3px;
padding:5px  10px;
height: 25px;
border-radius: 5px;
text-align: center;
line-height: 24px;
width:auto;
text-decoration:none;
color:#fff;
background: #282828;
}
 
.pagination .current{
margin: 3px;
padding: 5px;
width: 25px;
height: 25px;
border-radius: 5px;
text-align: center;
line-height: 22px;
background: #424242;
color:#fff;
}

.pagination a:link{
color:#fff;
}

.pagination a:visited{
color:#fff;
}

.pagination a:hover{
color:#fff;
background-color: #424242;
}

.pagination a:active{
color:#fff;
}

Notar: Si es la primera vez que agrega fragmentos en WordPress, consulte nuestra guía sobre cómo agregar fragmentos correctamente en WordPress, para que no rompa accidentalmente su sitio.

Si le gustó este fragmento, consulte nuestras otras publicaciones en el sitio, como: Los 9 mejores complementos de eventos de WordPress y Cómo configurar el seguimiento de autores en WordPress con Google Analytics.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Ir arriba