Complemento para la navegación de páginas de wordpress. Paginación para WordPress usando el complemento WP-PageNavi. Trabajar con la apariencia de la barra de navegación de la página
En este artículo, consideraremos cómo hacer la navegación de la página (paginación) para un sitio de WordPress usando los complementos WP-PageNavi y WP Page Numbers.
No todos los sitios tienen navegación paginada y, para ser precisos, no todos los temas de WordPress tienen paginación incorporada. Sin embargo, se puede organizar fácilmente con un simple complemento.
Complemento de paginación WP-PageNavi
Descarga WP-PageNavi. El complemento está en el directorio oficial de complementos de WordPress y está disponible para su descarga desde la consola.
Inmediatamente después de la activación, puede ver el trabajo del complemento:
El aspecto dependerá mucho del diseño de la plantilla de WordPress, así que no se deje intimidar por el aspecto austero del complemento de paginación que se muestra arriba.
El complemento de paginación tiene una serie de configuraciones que se pueden encontrar en "Configuración" - "Lista de páginas".
La plantilla de la lista general de páginas le permite realizar el diseño inicial:
Como resultado, obtenemos lo siguiente:
No escribiré sobre los elementos de diseño, por regla general, nadie los cambia.
Puede personalizar la paginación para que aparezca como una lista desplegable:
La vista ciertamente no es muy atractiva, pero todo es muy compacto.
También puede personalizar el número de páginas que se mostrarán en el panel de navegación de páginas.
El rango de páginas a mostrar y el factor de rango de páginas lo ayudarán a navegar más fácilmente cuando su sitio o blog tenga muchas páginas.
Complemento de paginación WP Page Numbers
Descargar el complemento. Instalar en pc.
Este plugin me gustó un poco más que el anterior, ya que tiene una serie de ventajas innegables.
Uno de los cuales será apreciado por aquellos que no son buenos en CSS. Es decir, el complemento admite 5 estilos de barra de paginación de WordPress... Por lo tanto, el propietario del sitio podrá elegir el diseño estilístico necesario, combinado con el tono general del sitio.
Ir Configuración: números de página.
Elección del diseño óptimo:
Traducimos los elementos principales:
Configuramos qué elementos de paginación se deben ocultar y cuáles se mostrarán en el sitio:
El toque final es agregar el código de salida del complemento.
¿Cómo hacerlo? En primer lugar, debe encontrar el código responsable de mostrar la navegación estándar:
Este código contiene necesariamente 2 funciones de WordPress: previous_post () y next_post ().
La barra de navegación se muestra en la página principal, en categorías, en etiquetas, archivos, por lo que debe buscar este código en los archivos correspondientes:
wp-content \\ themes \\ your_theme \\ index.php
wp-content \\ themes \\ your_theme \\ category.php
wp-content \\ themes \\ your_theme \\ tag.php
wp-content \\ themes \\ your_theme \\ archives.php
El código encontrado debe reemplazarse con el código especificado en la configuración del complemento:
¿Y si no hubiera tal código allí? En algunos temas de WordPress, estas funciones se pueden colocar en un archivo separado. Para encontrarlos, debe utilizar un editor de texto que admita la búsqueda de archivos, por ejemplo: Notepad ++ o Dreamweaver, también se adapta bien a esta función.
Debe establecer las siguientes condiciones de búsqueda:
Encontré el siguiente código:
Que necesita ser reemplazado por.
Navegación de página Es lo que todo bloguero debería buscar atención especial... Consiste en mostrar las publicaciones de WordPress página por página. Normalmente, los registros se muestran en un orden jerárquico y, aunque tiene opciones como Registros antiguos y Registros nuevos, no tiene la opción de mostrar los registros página por página con páginas numeradas.
Mediante la navegación página por página, el usuario puede saltar directamente a la página 6 u 8 sin pasar de una página a otra secuencialmente. Esta navegación también es útil para SEO, los motores de búsqueda prefieren esta navegación, permite a los bots navegar fácilmente a través de los registros en las páginas del sitio. Con gratis complementos de WordPressproporcionado en este artículo, puede agregar paginación a su sitio web.
1 - Navegación de página WP
WP Page Navi Es un complemento popular que permite a los visitantes de su sitio web navegar fácilmente de una página a otra. Reemplazará la opción Entradas antiguas / Entradas nuevas con una navegación numerada. El complemento no requiere grandes recursos y no afecta la velocidad de carga de la página.
Este complemento es compatible con la mayoría de los temas existentes.
- Requiere pocos recursos.
- Compatible con SEO.
- Muy popular.
Este complemento es una buena manera de agregar paginación a su sitio de WordPress, con él puede agregar paginación numerada que muestre la página de inicio, la página central y los números de página final.
Con él, incluso puede agregar navegación de comentarios a las publicaciones, esto hará que la página sea más fácil de cargar.
Aspectos destacados y características:
- Utiliza una navegación de página simple.
- Compatible con SEO.
- Fácil de usar.
Paginación simple Es un complemento que te permitirá navegar tanto por tus publicaciones como por tus comentarios. Como sugiere el nombre, este complemento es muy fácil de usar. Incluso puede diseñar su navegación para que coincida con el tema de su blog utilizando hojas de estilo.
Hay 6 hojas de estilo para combinar con su sitio y soporte para dos idiomas.
Aspectos destacados y características:
- Utiliza una navegación de página simple.
- Utiliza la navegación de comentarios.
- Hay hojas de estilo para diferentes tipos de visualización.
- Hay 6 tipos de estilos.
Enlaces de página Plus - un complemento que realiza la función de agregar navegación a una publicación. Hay momentos en los que su grabación se vuelve tan grande que necesita dividirla. En tales casos, el complemento Page Links Plus lo ayudará, dividiendo su publicación en páginas, mostrando los enlaces entre ellas, permitiéndole ver la publicación completa.
El complemento tiene muchas configuraciones para obtener los resultados deseados para su publicación.
Aspectos destacados y características:
- Permite la numeración de publicaciones y páginas.
- Existe la opción de ver la grabación completa.
- Hay muchas configuraciones.
- Hay una versión Pro disponible.
Paginación alfabética numerará las publicaciones y páginas de su sitio en orden alfabético. Si está vendiendo productos en su sitio de WordPress, entonces este complemento funcionará de maravilla, enumerará todos sus productos en orden alfabético.
Puede usarse en cualquier lugar de su sitio con un código corto.
Aspectos destacados y características:
- Hay una navegación alfabética.
- El soporte comercial está disponible.
- Se puede colocar en cualquier lugar con un código corto.
- Puede mostrar una lista de usuarios en orden alfabético.
Paginación de galería para el complemento de WordPress le ayuda a navegar por las galerías de imágenes de su sitio de WordPress. Mostrará todas las imágenes de la galería, lo que ayudará al usuario a navegar directamente a cualquier imagen sin tener que desplazarse por las imágenes una por una.
La compatibilidad con CDN le ayuda a hacer que las galerías de imágenes sean compatibles con SEO. También hay almacenamiento en caché para acelerar la carga de la página y Ajax para realizar cambios sin tener que volver a cargar la página.
Aspectos destacados y características:
- Hay una navegación por las galerías de imágenes.
- Hay soporte CDN.
- Compatible con SEO.
- Hay almacenamiento en caché.
Complemento avanzado de paginación de publicaciones navegará a través de sus registros. Si su publicación es demasiado grande, puede usar este complemento para dividirla en varias páginas. Para no confundirse con los botones numéricos habituales, con este complemento puede poner texto e imágenes en los botones. Puedes usar el shortcode para paginar la publicación como quieras.
Ajax le ayuda a navegar a una sección sin tener que volver a cargar toda la página.
Aspectos destacados y características:
- Dividir un solo registro.
- Usar texto e imágenes en botones.
- Usando códigos cortos.
- Usando Ajax.
Paginación inteligente WP Es una forma conveniente de mostrar publicaciones en forma paginada, junto con un campo donde puede ingresar un número de página, lo que le permite aterrizar instantáneamente en la página que desea. Esto es muy útil si tiene muchas publicaciones en su sitio, lo que dificulta que los usuarios naveguen a una página que está muy lejos. En el caso de que tenga 4000 páginas de publicaciones y el usuario quiera ver 2555 páginas, este complemento puede ser de gran utilidad para usted.
Aspectos destacados y características:
- Utiliza una navegación de página simple.
- Hay un campo para el salto directo a la página deseada.
- Temas a juego.
- Modificación de estilos disponible.
eso complemento de jQuery, inspirado en jPages, con el que podrás paginar fácilmente tus galerías de imágenes y comentarios. Es un complemento totalmente receptivo que navegará por el contenido de todo tipo de dispositivos con diferentes tamaños de pantalla. jPages Pagination For WordPress es un pequeño complemento que facilita la integración de la navegación con jQuery.
Todos los navegadores principales admiten este complemento, por lo que los visitantes de su sitio no tendrán problemas para ver el contenido cuando utilicen este complemento para navegar.
Aspectos destacados y características:
- Se utiliza JQuery.
- Complemento receptivo.
- Hay soporte para los principales navegadores.
- Fácil integración.
Este artículo proporciona una lista de los mejores complementos de paginación gratuitos de WordPress que pueden ayudarlo a paginar su sitio al máximo. la mejor manera... Todos los complementos tienen características diferentes, así que elija el que mejor funcione para su sitio.
Saludos a los lectores del sitio de mi blog. Hoy compartiré con ustedes la configuración de navegación de la página sin un complemento en el blog. ¿Por qué necesita la navegación página por página en el sitio y qué tiene de útil? es una usabilidad de un blog, gracias a la cual los visitantes del sitio pueden encontrar fácilmente información útil para ellos.
Por lo tanto, antes de pasar a la configuración de navegación, debe configurar un modo de lectura conveniente para sus publicaciones, que se mostrará en la página del blog. Para hacer esto, vaya al Panel de administración - Configuración - Lectura:
y establezca el número de publicaciones mostradas que se mostrarán en cada página:
En este caso, se establecen 5 entradas. Normalmente, un blog mostrará de 5 a 7 entradas por página. Ahora que hemos descubierto estas configuraciones en la parte inferior de la página, vemos la navegación de página estándar de WordPress, que se parece a esto:
Cuando tiene 10-15 publicaciones en su blog y no ocupan más de 2-3 páginas, entonces dicha navegación es bastante conveniente, pero cuando es importante, el blog se llena regularmente de contenido y el número de artículos es cercano a 100 o 200 y todas estas publicaciones se colocan 5 en cada página. ... Entonces creo que no será difícil calcular cuántas páginas se publicarán en el blog. Al mismo tiempo, para que un visitante de su blog no tenga que desplazarse por todas las páginas de un blog de WordPress para encontrar una publicación, la navegación por la página debe tener una apariencia más conveniente y funcional para el usuario:
Esta navegación ayudará a mantener al lector en su blog para que le resulte más conveniente desplazarse por su sitio en busca de publicaciones relevantes para él. Así, volvemos a mejorar que nos ayuden a promocionar nuestro blog.
Se puede mostrar una barra de navegación similar usando el complemento WP-PageNavi. Al mismo tiempo, creo que el blog debería funcionar con la menor cantidad de complementos para no crear cargas adicionales al mostrar el sitio. Por lo tanto, consideraremos una configuración simple de visualización de paginación de WordPress sin un complemento.
Configuraciones técnicas
Abra el Panel de administración - Configuración - Editor - abra el archivo functions.php y al principio pegue el siguiente código:
// Barra de navegación
función wp_corenavi () (
global $ wp_query, $ wp_rewrite;
$ páginas \u003d ";
$ max \u003d $ wp_query-\u003e max_num_pages;
if (! $ actual \u003d get_query_var ('paginado')) $ actual \u003d 1;
$ a ["base"] \u003d str_replace (999999999, ‘% #%’, get_pagenum_link (999999999));
$ a ["total"] \u003d $ máx;
$ a ["actual"] \u003d $ actual;$ total \u003d 0; // 1 - muestra el texto "Página N de N", 0 - no muestra
$ a ["tamaño_medio"] \u003d 1; // cuántos enlaces mostrar a la izquierda y derecha del actual
$ a ["end_size"] \u003d 1; // cuántos enlaces mostrar al principio y al final
$ a ["prev_text"] \u003d ‘“ ’; // Cita de salto a la izquierda "
$ a ["next_text"] \u003d ‘‘ ’; // Cita de salto a la derecha "si ($ max\u003e 1) echo '
’;’;
if ($ total \u003d\u003d 1 && $ max\u003e 1) $ páginas \u003d " Página ' . $ actual. 'Desde'. $ máx. ""." \\ R \\ n ";
echo $ páginas. paginate_links ($ a);
si ($ max\u003e 1) echo '
}
o esta vista:
y reemplace el código resaltado con lo siguiente:
Después de que verifiquemos la configuración en su sitio, debería aparecer la pantalla estándar de la configuración de navegación:
Barra de navegación
*/
.wp-pagenavi (
altura: 50px;
Limpia los dos;
color: # BB7B00;
}
.wp-pagenavi span.pages (
color: # BB7B00;
}
.wp-pagenavi a, .wp-pagenavi span (
decoración de texto: ninguna;
relleno: 6px 9px;
margen: 2px;
fondo: #ffffff;
fuente: negrita 14px Verdana, sans-serif;
color: # 85B6C5;
radio del borde: 5px;
}
.wp-pagenavi a: hover, .wp-pagenavi span.current (
color del borde: # BB7B00;
fondo: # 85B6C5;
color: #ffffff;
}
.wp-pagenavi span.current (
color: # f5f5f5;
fondo: # 85B6C5;
relleno: 8px 9px;
}
Ahora, cuando hemos incluido estilos para mostrar la barra de navegación en WordPress sin usar un complemento, podemos ver un aspecto similar:
Para deshacernos de las páginas duplicadas adicionales que no les gustan a los motores de búsqueda, debemos cerrar la página de la página de indexación. Para hacer esto, al comienzo del archivo functions.php, necesitamos agregar el siguiente código:
/ *** AÑADIR meta robots noindex, nofollow PARA PÁGINAS *** /
función my_meta_noindex () (si (
is_paged () // Todas las páginas y las de navegación
) (eco "". ' ’." \\ N ";)
}add_action ('wp_head', 'my_meta_noindex', 3); // agrega noindex, nofollow al encabezado
Guardamos y comprobamos nuestra configuración. Para hacer esto, abra cualquiera de las páginas 2, 3-10, etc., presione Ctrl + U y el siguiente código debería aparecer en la codificación de la página:
Es importante disallow: / page no debe cerrar el archivo robots.txt. de la indexación. Esto completa la configuración, espero que hayas descubierto todas estas codificaciones. Si tienes alguna pregunta, escribe en los comentarios, definitivamente te responderé. ¡Te veo pronto!
¡Hola todos!
Sigo escribiendo artículos sobre la navegación del sitio en el motor de WordPress.
Y en este artículo mostraré cómo se realiza la paginación sin complementos y utilizando el conocido WP-PageNavi. Al igual que con, mostraré la implementación de varias maneras para que pueda elegir la que mejor se adapte a sus necesidades. Y hay ocasiones en las que algún método no funciona para alguien. Por lo tanto, habrá algún tipo de red de seguridad.
El material salió muy voluminoso y, quizás, el más completo de la red.
La navegación de página (paginación) es la paginación de información. Si toma muchos sitios en Wordpres, entonces este fenómeno se expresa claramente en el video de la lista de números de página en la parte inferior de cada página con anuncios. En mi blog, esta función se ve así.
El diseño puede ser diferente. Pero su esencia es la misma: paginación de información. Como sabe, de forma predeterminada, la página principal del sitio muestra anuncios de publicaciones, de las cuales puede haber un cierto número (dependiendo de la configuración en el elemento "Escritura").
Si no desglosamos su número, se mostrarán en una página. Y esto no es bueno, ya que será un inconveniente usar el sitio y la página principal tardará mucho en cargarse, porque con el tiempo habrá una gran cantidad de anuncios.
Normalmente, las plantillas modernas de Wodpress ahora tienen la paginación incorporada. Pero hay una opción cuando no lo es. Entonces tienes que implementar. En cambio, puede haber una paginación de anuncios en forma de enlaces a publicaciones anteriores y siguientes. Esto se expresa claramente en las plantillas estándar.
Esta opción también es inconveniente, ya que cuando retrocedamos 3 páginas, no podremos volver a la página original en un solo paso. Deberá hacer clic 3 veces en las entradas anteriores o en la siguiente. La navegación de la página le permite ser más flexible con el momento.
En general, pasemos a su implementación y el primer paso es incrustarlo en una plantilla sin un complemento. Analicé este método en el video tutorial. Recomiendo mirarlo primero y luego estudiar la versión de texto de las instrucciones.
Lo hacemos sin un complemento
Ahora te mostraré una forma, después de la cual tendrás exactamente la misma página navegación de WordPresscomo yo. Todo se hace de forma muy sencilla. Se necesitan 2 piezas de código para colocarlas en los archivos de plantilla y luego diseñarlas para establecer el aspecto. ¡Empecemos!
Aquí está el primer fragmento de código. Debe colocarse en el archivo functions.php de la plantilla de diseño.
function wp_corenavi () (global $ wp_query, $ wp_rewrite; $ pages \u003d ""; $ max \u003d $ wp_query-\u003e max_num_pages; if (! $ current \u003d get_query_var ("paged")) $ current \u003d 1; $ a ["base "] \u003d str_replace (999999999,"% #% ", get_pagenum_link (999999999)); $ a [" total "] \u003d $ max; $ a [" actual "] \u003d $ actual; $ total \u003d 0; // 1 - mostrar el texto "Página N de N", 0 - no mostrar $ a ["mid_size"] \u003d 1; // cuántos enlaces mostrar a la izquierda y derecha del actual $ a ["end_size"] \u003d 1; // cuántos enlaces mostrar al principio y al final $ a ["prev_text"] \u003d ""; // texto del enlace "Página anterior" $ a ["siguiente_texto"] \u003d ""; // texto del enlace "Página siguiente" if ($ max\u003e 1) echo " "; }
función wp_corenavi () ( global $ wp_query, $ wp_rewrite; $ páginas \u003d ""; $ max \u003d $ wp_query -\u003e max_num_pages; if (! $ actual \u003d get_query_var ("paginado")) $ actual \u003d 1; $ a ["base"] \u003d str_replace (999999999, "% #%", get_pagenum_link (999999999)); $ a ["total"] \u003d $ máx; $ a ["actual"] \u003d $ actual; $ total \u003d 0; // 1 - muestra el texto "Página N de N", 0 - no muestra $ a ["tamaño_medio"] \u003d 1; // cuántos enlaces mostrar a la izquierda y derecha del actual $ a ["end_size"] \u003d 1; // cuántos enlaces mostrar al principio y al final $ a ["prev_text"] \u003d ""; // texto del enlace "Página anterior" $ a ["siguiente_texto"] \u003d ""; // texto del enlace "Página siguiente" si ($ max\u003e 1) echo " if ($ total \u003d\u003d 1 && $ max\u003e 1) $ páginas \u003d "Página "... $ actual. "desde". $ máx. ""... "\\ r \\ n"; echo $ páginas. paginate_links ($ a); si ($ max\u003e 1) echo "" ; |
Coloqué el código al principio del archivo después de la etiqueta de apertura
En este código, podemos ajustar algunos parámetros:
- Línea 10: si cambia el valor de 0 a 1, se mostrará una inscripción del formulario junto a los números de página, por ejemplo, "Página 3 de 45". Puede hacer tal opción, pero creo que en este caso no es necesario, ya que está claro en los números de página cuántas páginas hay en el sitio. Y la página activa está resaltada en un color diferente;
- Líneas 11 y 12: a la izquierda y derecha del número de página activa, se debe mostrar un cierto número de números anteriores o siguientes, respectivamente. Aquí mostramos su número. En este código, el valor es 1. Puedes poner 2 o 3. Aquí tendrás que experimentar un poco, ya que cuantos más números, más amplia será la navegación. Todo depende del ancho de la plantilla.
wp_corenavi (); |
Dado que la navegación de la página debe mostrarse donde se muestre la lista de anuncios, este código debe colocarse en todos los archivos donde esto sucede:
- Página de inicio - index.php;
- Páginas de categoría y archivo: category.php y archive.php;
- Página de búsqueda: search.php.
Por cierto, en algunas plantillas, la salida de las páginas de categoría y los archivos se pueden realizar en un solo archivo. Tengo el archivo archive.php responsable de esto.
Si su plantilla no tiene navegación para dividir anuncios en páginas, colocamos el segundo código después de que se muestra el contenido. Si tiene enlaces anteriores y siguientes, lo que es más probable, esta opción es más fácil de implementar, ya que solo necesita reemplazarlos con el código proporcionado anteriormente.
Como regla general, la navegación estándar tiene la forma de anterior y siguiente. los enlaces se muestran utilizando un código similar.
< div class = "nav-previous" > ← Entradas más antiguas ", "veinte diez")); ?\u003e< / div > < div class = "nav-next" > "Las publicaciones más nuevas " , "veinte diez")); ?\u003e< / div > |
Este código puede ser diferente para todos, pero su relleno básico será el mismo. Necesitará encontrar un código que contenga un código llamado next_posts_link y previous_posts_link.
Cuando lo encuentre, puede eliminar de forma segura este contenido del archivo y copiar el código necesario que muestra la navegación de la página en su lugar.
Por lo tanto, debe reemplazar la navegación estándar con paginación en todos los archivos donde hay una salida de anuncios. Di los nombres de los archivos de arriba.
Por cierto, si tiene problemas con este proceso, puede contactarme para obtener ayuda en los comentarios. Trataré de ayudar.
/ * NAVEGACIÓN * / .navigation (float: left; width: auto; margin-left: 216px; margin-top: -2px; font-size: 16px;) .navigation\u003e a (float: left; width: 32px; font -weight: 700; text-align: center; color: # 637b93; text-decoration: none; margin-left: 1px; padding-top: 7px;) .navigation\u003e .current (float: left; font-weight: 700 ; width: 29px; text-align: center; color: # c4c8cc; margin-left: 5px; padding-top: 7px;) .navigation\u003e .prev (float: left; width: 32px; height: 34px; background: url ("images / bow_left.png") no-repeat; margin-left: 0;) .navigation\u003e .next (float: left; width: 34px; height: 34px; background: url ("images / bow_right.png") no-repeat; margin-left: 14px;) .navigation\u003e .dots (float: left; font-size: 14px; font-weight: 700; width: 32px; text-align: center; color: # c4c8cc; padding- arriba: 7px;)
/ * NAVEGACIÓN * / Navegación ( flotador izquierdo; ancho: auto; margen izquierdo: 216px; margen superior: -2px; tamaño de fuente: 16px; Navegación\u003e a ( flotador izquierdo; ancho: 32px; peso de fuente: 700; alineación de texto: centro; color: # 637b93; decoración de texto: ninguna; margen izquierdo: 1px; acolchado superior: 7px; Navegación\u003e .current ( flotador izquierdo; peso de fuente: 700; ancho: 29px; alineación de texto: centro; color: # c4c8cc; margen izquierdo: 5px; acolchado superior: 7px; Navegación\u003e .prev ( flotador izquierdo; ancho: 32px; altura: 34px; background: url ("images / bow_left.png") sin repetición; margen izquierdo: 0; Navegación\u003e .next ( flotador izquierdo; ancho: 34px; altura: 34px; background: url ("images / bow_right.png") sin repetición; margen izquierdo: 14px; Navegación\u003e .dots ( flotador izquierdo; tamaño de fuente: 14px; peso de fuente: 700; ancho: 32px; alineación de texto: centro; color: # c4c8cc; acolchado superior: 7px; |
También es necesario cargar imágenes de las flechas hacia adelante y hacia atrás al alojamiento en la carpeta de imágenes de la plantilla de diseño. ... Para descargar, puede utilizar el administrador de archivos estándar del proveedor de alojamiento. Yo soy.
Cuando hemos colocado los códigos en los archivos functions.php, en todos los archivos que muestran páginas con anuncios y estilos agregados, podemos verificar la funcionalidad de navegación. Todo funciona para mí y en la plantilla estándar se ve así.
Hemos analizado el método sin plugin. Estoy 100% seguro de que si hizo todo como se describe anteriormente, entonces todo debería funcionar para usted con una explosión. También había una segunda opción sin plugin, pero después de mirarla, me di cuenta de que de hecho es la misma opción, solo que ligeramente modificada. Por lo tanto, paso a una forma de implementar la navegación de página utilizando un complemento.
Complemento WP-PageNavi
Primero, descargue el complemento de la página oficial e instálelo en el sitio.
Después de instalar el complemento, también deberá colocar el código que mostrará la navegación en la parte inferior de la página.
Ahora el complemento hará su trabajo y los números de página tendrán la siguiente apariencia.
Por un lado, el diseño no es tan atractivo, pero por el otro, ni siquiera es nada, ya que no hace una monstruosidad. ¡A los usuarios les encanta la simplicidad! Por lo tanto, puede dejar todo así. Si quieres algo más colorido, ahora consideraremos algunas opciones. Mientras tanto, hablaremos sobre cómo configurar wp pagenavi. Los escenarios están ahí y vale la pena hablar de ellos.
Con respecto al primer elemento de la configuración de "Plantillas de lista de páginas", no es necesario cambiar nada en él. Estamos satisfechos. Pasamos a la sección "Configuración de la lista de páginas".
Observo que debe experimentar con todos los parámetros en este punto para encontrar el valor óptimo para usted. Explicaré brevemente de qué es responsable cada parámetro.
- Usar estilo: si establecemos el valor en "No", los estilos del complemento se eliminarán y los números de página no se decorarán;
- Estilo de lista de páginas: además de la lista habitual de números de página, podemos elegir una opción de lista desplegable;
- Mostrar siempre la lista de páginas: la configuración no está habilitada. Desea que la lista aparezca solo donde sea necesario;
- Número de páginas para mostrar: es responsable del número de números de página mostrados al principio de la lista. De forma predeterminada, el valor es 5 y en las capturas de pantalla de arriba puede ver qué páginas se muestran exactamente 5;
- Rango de páginas para mostrar: si su sitio tiene muchas páginas, esta función será extremadamente útil. Mostrará los números de página después de la lista principal con los valores 10, 20, 30, 40, etc. El intervalo entre estos valores está determinado por el siguiente parámetro;
- Factor para rangos de páginas: si establece el valor en 5, el rango de páginas se verá así: 10, 15, 20, 25, etc. Si es 10, entonces 10, 20, 30, 40 y así sucesivamente. Un valor de 10 es suficiente.
Estas son todas las configuraciones que necesita para ajustar según sus necesidades. Aquí, todos se ajustarán por sí mismos.
La opción más sencilla es instalar un complemento adicional, que ya tiene estilos preparados, y también permite configurar cada parámetro individualmente. El complemento se llama.
Después de instalarlo, aparece un nuevo elemento en el panel de administración de WordPress.
Después de cambiar a él, podemos seleccionar inmediatamente los espacios en blanco de diseño ya existentes.
Si queremos personalizar los estilos individualmente, entonces en el primer párrafo de la configuración de "Seleccionar hoja de estilo", seleccione la opción "Personalizar" y configure los parámetros de todos los elementos (bordes y sus colores, colores y tamaños de fuente, colores de enlace al pasar el cursor del mouse, etc.).
Te traduciré todos los parámetros.
- Color de título - color del texto "Página 3 de 45";
- Color de fondo: color de fondo;
- Color de fondo activo / actual: color de fondo del número de página activa;
- Tamaño de fuente: tamaño de fuente;
- Color del enlace: color del enlace;
- Link Mouse Hover / Active Hover: el color del enlace cuando pasa el mouse sobre el número y cuando el número está activo;
- Color del borde del enlace: color del borde;
- Link Border Mouse Hover / Active Color: el color del borde cuando pasa el cursor del mouse y el número está activo
- Alinear navegación: ubicación de navegación (izquierda, derecha, centro).
Puede buscar valores de color en Internet o en Photoshop al elegir el color deseado para el relleno.
La opción de plugin no está mal, pero siempre digo que necesitas deshacerte de plugins innecesarios, y en este caso lo es.
La segunda opción se realiza editando el archivo de hoja de estilo, que se encuentra en la carpeta con el complemento Wp-pagenavi en el alojamiento: pagenavi-css.css.
Este archivo está conectado cuando la configuración "Usar pagenavi-css.css" está activa en la configuración del complemento. Por lo tanto, si lo editamos, luego de actualizar el complemento, todos los estilos serán reemplazados por los estándar. Para reemplazar cada vez este archivo y para no cambiar el estilo de los estilos, recomiendo hacer lo siguiente:
- Edite los estilos en este archivo a los suyos, dando el diseño de navegación de página deseado;
- Desactive la configuración "Usar estilo pagenavi-css.css";
- Coloque estos estilos en la hoja de estilo principal de su plantilla de diseño, style.css.
De esta forma, estos estilos funcionarán independientemente del complemento. Y no se extraviarán cuando se actualicen. Esta es quizás la mejor opción de diseño de navegación en este complemento que yo mismo hubiera hecho. Pero afortunadamente, estoy usando la opción sin complemento, que es lo que sugiero.
Tan amigos. El material resultará muy bueno, como el mío. ¿Qué piensas sobre esto? Espero que hayas hecho todo. Si algo no funciona, en los comentarios intentaré ayudar. ¡Escribe, no tengas miedo! Una vez también sufrí mucho y logré entenderlo.
En esta nota, ya quiero terminar esta publicación lo antes posible, ya que tomó mucha energía. Esto es lo que haré. Me despediré y me iré a descansar, y luego me enterraré escribiendo contenido nuevo.
¡Saludos cordiales, Konstantin Khmelev!
Saludos a ustedes, queridos lectores del sitio del blog. Hoy vamos a hablar sobre el muy popular plugin WP-PageNavi, que te permite llevar la paginación de tu blog de WordPress a un nuevo nivel de calidad.
En principio, la paginación (paginación), que se usa por defecto, es bastante digerible, pero aún así la opción que ofrece esta extensión parece mucho más atractiva.
Por qué utilizar el complemento WP-PageNavi
Juzgue usted mismo, así es como se ve la paginación predeterminada:
Y luego de instalar el complemento:
o así:
depende de las opciones que seleccione en su ventana de configuración.
En mi opinión, la segunda opción es mucho más bonita que la primera, que se usa por defecto. Si también lo cree, debería leer este artículo hasta el final y aprender todo sobre los matices de la instalación y la configuración de esta maravillosa extensión.
Primero deberá descargar el complemento de aquí ... Busque el botón "Descargar" a la derecha y guarde el archivo wp-pagenavi.zip en su computadora. Luego descomprímalo y cargue la carpeta descomprimida resultante en el servidor de alojamiento en el directorio wp-content / plugins / plugins.
Para hacer esto, necesita acceder a los archivos y carpetas de su blog de WP a través de FTP ().
Al descomprimir, sucede que aparece una carpeta externa adicional, así que verifique esto y deshágase de ella si es necesario. Espero que lo hayas explicado claramente. De lo contrario, WordPress no verá el complemento que instaló. Bien, continuemos.
Después de copiar los archivos del complemento al servidor de alojamiento en la carpeta wp-content / plugins /, deberá ir al panel de administración de WordPress (http://vash_sait.ru/wp-admin/) y seleccionar el elemento Complementos del menú de la izquierda del panel de administración. ". En la parte superior de la ventana "Control" que se abre, debe hacer clic en el enlace "Inactivo" (o, si no hay traducción, en "Inactivo").
Se abrirá una ventana con todas las extensiones instaladas pero aún no activadas. Busque "WP-PageNavi" entre ellos y haga clic en el enlace "Activar" debajo de su nombre.
Inserte el código de salida del complemento en las plantillas de WordPress necesarias
El complemento está activado, pero para ver los resultados de su trabajo en su blog, también deberá insertar el código para llamar a la función wp_pagenavi en los archivos de su máscara, que se está utilizando actualmente. ...
Por lo general, la paginación se usa en la página de inicio del blog (el archivo INDEX.PHP de la carpeta de su tema), en las páginas web archivadas (ARCHIVE.PHP) y en los resultados de búsqueda (archivo SEARCH.PHP). En realidad, en estos archivos (plantillas) necesitaremos insertar el código para llamar a la función que necesitamos.
Aquellos. Deberá volver a conectarse a través de FTP e ir a la carpeta con el tema actual:
Wp-content / themes / El nombre de la carpeta con su tema
Busque INDEX.PHP en él y ábralo para editarlo en un editor conveniente para usted (yo uso el Notepad ++ avanzado para este propósito - tengo un artículo sobre cómo trabajar con él). Ahora su tarea es encontrar la sección de código en INDEX.PHP que es responsable de cambiar a la página anterior o siguiente. No es una tarea fácil, ¿no? Aunque, claro, para quién cómo.
INDEX.PHP no es muy grande, estudie detenidamente su contenido para encontrar comentarios relacionados con la paginación, por ejemplo:
Normalmente, los creadores de temas de WordPress incluyen un área de código en dichos comentarios que es responsable de mostrar la navegación de la página. El código muy estándar que puede verse, por ejemplo, así:
Después de identificar el fragmento que desea, deberá reemplazarlo con la línea de llamada de función wp_pagenavi:
Ahora necesita guardar los cambios realizados en INDEX.PHP, vaya a página de inicio tu blog y asegúrate de que todo funcione como debería. Aquellos. en lugar de la paginación estándar utilizada en WordPress, utiliza la belleza de WP-PageNavi.
Por cierto, no tiene que eliminar la paginación estándar del código INDEX.PHP, de modo que cuando desinstale este complemento no tenga ningún problema con él más adelante. Para hacer esto, necesitará escribir en INDEX.PHP, en lugar del código de navegación estándar, una condición que determina cuándo mostrar el panel estándar de WP-PageNavi y cuándo.
La condición dependerá de si el complemento WP-PageNavi está instalado en su blog o no. Puede verse algo como esto:
En este código, la condición:
Si (function_exists ("wp_pagenavi"))
comprueba si el complemento está instalado, y si no está instalado, el script estándar funcionará:
Else (?\u003e
Y si WP-PageNavi está instalado, entonces la barra de navegación estará formada por sus fuerzas:
{ ?>
Aunque, por supuesto, no puede molestarse y simplemente reemplazar uno por otro, pero este es su negocio.
Entonces, ahora tendrá que hacer lo mismo con los archivos ARCHIVE.PHP y SEARCH.PHP de la carpeta con su tema (wp-content / themes / Nombre de la carpeta con su tema).
Configuración del complemento WP-PageNavi para el blog de WordPress
Para acceder a ellos, deberá seleccionar en el panel de administración del menú de la izquierda, en el área "Parámetros", el elemento "Lista de páginas". Se abrirá una ventana con la pestaña activa "Plantillas de lista de páginas":
En el campo "Plantilla de la lista general de páginas", en la figura anterior, se configura la visualización de la página actual y el número total de páginas. Con esta opción para completar este campo, el panel de WP-PageNavi se verá así:
Puede agregar la palabra "Página" a este campo si lo desea:
Página% CURRENT_PAGE% de% TOTAL_PAGES%
Y si quieres, puedes limpiarlo por completo. En las columnas "Elemento" Página actual "y" Elemento "Página" "deje todo como está. Aquí puede configurar la visualización del título para la página web actual y todas las demás páginas web como un número de serie. Se verá algo como esto:
En los campos "Texto para la primera página" y "Texto para la última página" puede configurar el texto de los botones para ir a la primera y la última:
En lugar de texto en la columna "Texto para la primera página", puede escribir una unidad y el campo "Texto para la última página" -% TOTAL_PAGES% (en lugar de esta inscripción, se mostrará el número de todas las páginas web):
En los campos "Texto para publicación siguiente" y "Texto para publicación anterior", se escriben signos de flecha para que se muestren en los botones para pasar al siguiente y al anterior:
Borré los siguientes dos campos, porque de lo contrario, se mostraban dos botones blancos sin texto. Es posible que no los tengas y tú mismo decidas para qué sirven.
Pasemos a otras configuraciones llamadas "Configuraciones de lista":
La casilla de verificación en "Usar pagenavi-css.css" le permite deshabilitar o habilitar el archivo de hojas de estilo en cascada (CSS) que viene con el complemento. En el campo "Estilo de lista", puede elegir uno de los dos estilos CSS de la lista desplegable.
Viste el "normal" en las capturas de pantalla anteriores, y cuando elijas el estilo "Lista desplegable", obtendrás algo como este tipo de panel WP-PageNavi en WordPress:
Si marca la casilla "Mostrar siempre la navegación de la página", incluso para las páginas web que aún no necesitan ingresar numeración (digamos que no hay suficientes publicaciones en la página principal para dividir), la navegación aún se mostrará en algo como esto :
En "Número de páginas para mostrar" puede establecer cuántas páginas se mostrarán como una serie continua (secuencial) de números. La transición al resto será posible utilizando los botones siguiente y anterior, así como los botones para cambiar al primero y al último. Puse una A allí, lo que resulta en:
En Número de números de página más grandes para mostrar, puede establecer cuántos números de páginas web distantes (más grandes que los números de valor numérico que se muestran actualmente) se mostrarán después del botón Ir al siguiente.
Y en el campo “Mostrar números de página más grandes en múltiplos de” puede establecer el paso con el que se mostrarán los números de páginas web distantes. Digamos que puse un tres en el primer campo y dos en el segundo:
Como resultado, el panel de PageNavi se verá así:
Aquellos. los números de solo tres páginas web distantes se muestran con un intervalo (paso) igual a dos (6, 8, 10). Para no utilizar la visualización de números distantes, solo necesita poner un cero en la columna "Número de números de página más grandes para mostrar".
Para aplicar y mostrar los cambios que ha especificado, en la configuración del complemento, deberá hacer clic en el botón "Guardar cambios" que se encuentra a continuación.
Cambiar la apariencia de la barra de navegación de la página
Para cambiar los colores, sangrías, fuentes y otros atributos de la apariencia del panel de paginación que se muestra en su blog, deberá agregar las propiedades CSS necesarias al archivo de hoja de estilo en cascada de este complemento.
Es cierto, para que tome la forma que se muestra en las capturas de pantalla que se muestran en este artículo, agregué propiedades adicionales no al archivo CSS del complemento (/wp-content/plugins/wp-pagenavi/pagenavi-css.css), sino al archivo que uso temas (wp-content / themes / nombre de la carpeta del tema / style.css).
En este archivo, las propiedades CSS que definen la apariencia del panel WP-PageNavi se ven así:
#content .wp-pagenavi a, #content .wp-pagenavi a: link, #content .wp-pagenavi a: active (padding: 3px 8px 3px 8px; margin: 2px; text-decoration: none; color: #fff; border: 0px line-height: 24px; background-color: # 2b99ff;) #content .wp-pagenavi a: hover (color: #fff; background-color: # 154b7d;) #content .wp-pagenavi span.pages ( padding: 3px 8px 3px 8px; margin: 2px 2px 2px 2px;) #content .wp-pagenavi span.current (padding: 3px 8px 3px 8px; margin: 2px; line-height: 25px; font-weight: bold; color: # add352; fondo: # 26343c;)
Tenga en cuenta que los nombres de clase y el ID () que se utilizan aquí se refieren específicamente a mi plantilla. Permítanme explicar el propósito de algunas reglas y propiedades de CSS.
#content .wp-pagenavi a, #content .wp-pagenavi a: link, #content .wp-pagenavi a: active (padding: 3px 8px 3px 8px; margin: 2px; text-decoration: none; color: #fff; border: 0px line-height: 24px; background-color: # 2b99ff;)
establece márgenes externos e internos (ver sobre ellos) para los botones del panel (de hecho, para los enlaces de estos botones, ya que estas propiedades se aplicarán específicamente a los enlaces especificados por la etiqueta A y colocados en el contenedor wp-pagenav).
Esta regla también establece el color del texto del enlace (el color blanco se establece en la propiedad de color: #fff; -).
No habrá ningún borde alrededor de los enlaces (propiedad border: 0px) y el color de fondo de los contenedores con estos enlaces estará determinado por la propiedad background-color: # 2b99ff; ... Es este color el que puede ver en las capturas de pantalla anteriores para los botones inactivos de la barra de navegación de la página.
Regla CSS:
#content .wp-pagenavi a: hover (color: #fff; background-color: # 154b7d;)
establece el color para el texto y el fondo del contenedor (botón) con el enlace al que se encuentra actualmente el cursor del mouse (propiedades CSS del enlace al pasar el mouse - a: hover -).
El color del texto del enlace sigue siendo blanco, pero el color de fondo (en realidad, el color del botón) cambia a uno más oscuro (background-color: # 154b7d;). Aquellos. el visitante, al mover el cursor del mouse sobre los botones de la barra de navegación, verá el cambio de color de este botón, lo que crea una sensación de interactividad.
Regla CSS:
#content .wp-pagenavi span.current (padding: 3px 8px 3px 8px; margin: 2px; line-height: 25px; font-weight: bold; color: # add352; background: # 26343c;)
Establece la apariencia del botón con el número de la página del blog abierta actualmente (el código de este enlace tendrá una etiqueta SPAN con la clase CURRENT). Dicho botón tendrá el mismo aspecto que el botón número uno en la siguiente figura:
Esta regla CSS establece el color de fondo de este botón activo (fondo de la propiedad: # 26343c), el color del texto del enlace en este botón (color de la propiedad: # add352), y además, la fuente del texto del enlace estará en negrita debido a esta propiedad CSS - font-weight : negrita ().
Pero para cambiar la apariencia de la barra de paginación, puede registrar las propiedades CSS necesarias en el archivo de estilo del propio complemento. Puede abrir este archivo de hoja de estilo en cascada para editarlo desde la carpeta:
/wp-content/plugins/wp-pagenavi/pagenavi-css.css
Por ejemplo, para obtener un panel como este:
Deberá descargar este archivo, descomprimirlo y copiar la carpeta IMÁGENES en la carpeta del complemento WP-PageNavi, que puede encontrar en la siguiente ruta:
/ wp-content / plugins / wp-pagenavi
La carpeta IMAGES contiene el archivo gráfico fon.gif que formará el fondo del panel PageNavi. Ahora deberá abrir el archivo /wp-content/plugins/wp-pagenavi/pagenavi-css.css para editar y reemplazar el código existente con las siguientes reglas:
Wp-pagenavi (ancho: 100%; desbordamiento: oculto; relleno: 4px 0px 4px 0px; margen-izquierda: 0px; borde: 1px sólido # 00598F; fondo: url ("images / fon.gif") centro izquierdo repetir-x ;) .wp-pagenavi a, .wp-pagenavi a: enlace, .wp-pagenavi a: visitado (relleno: 4px 5px 4px 5px; margen: 2px 0px 2px 0px; color: #ffffff; peso de fuente: negrita; texto -decoration: none;) .wp-pagenavi a.last (padding: 4px 5px 4px 5px;) .wp-pagenavi a.first (padding: 4px 5px 4px 5px;) .wp-pagenavi a: hover (color de fondo: # 00598F; color: #FFFFFF; font-weight: bold;) .wp-pagenavi span.pages (relleno: 4px 5px 4px 5px; margen: 2px 0px 2px 0px; color: #FFFFFF; fondo: url ("imágenes / fon .gif ") centro izquierdo repetir-x; color de fondo: # 4f4f4f; peso de fuente: negrita;) .wp-pagenavi span.current (relleno: 4px 7px 4px 7px; margen: 2px 0px 2px 0px; peso de fuente: negrita; borde superior: 1px sólido # 00598F; borde inferior: 1px sólido # 00598F; color: #FFFFFF; color de fondo: # 00598F; peso de fuente: negrita;) .wp-pagenavi span.extend (relleno: 4px 0px 4px 0px; margen: 2px 0px 2px 0px; margen derecho: 0px; margen izquierdo: 0px; borde superior: 1px sólido # 00598F; borde inferior: 1px sólido # 00598F; color: #FFFFFF; background: url ("images / fon.gif") centro izquierdo repeat-x; font-weight: negrita; ) .wp-pagenavi span.next-prev (familia de fuentes: Arial; / * corrección de IE * /)
Guarde sus cambios en el archivo pagenavi-css.css y visite su blog para verificar si la navegación ha cambiado. Si no ha cambiado, intente actualizar el contenido de la ventana en el navegador manteniendo presionado el botón SHIFT y, si esto no ayuda, borre la memoria caché del navegador.
¡Buena suerte para ti! Nos vemos pronto en las páginas del sitio del blog
Tú podrías estar interesado
Easy Social Share Buttons: complemento para agregar botones redes sociales en WordPress, incluidos Vkontakte y Odnoklassniki 
Suscribirse a comentarios para WordPress - suscribirse a comentarios sobre artículos en WordPress 
Breadcrumbs en WordPress usando el complemento Breadcrumb NavXT (fortaleciendo el enlace) 
Contadores simples e íconos de categorías y páginas: hermosos contadores de RSS y Twitter, así como íconos para categorías y páginas en WordPress 
Instalación y configuración de complementos para WordPress, solución de posibles problemas 
Todo en uno SEO Pack y optimización del motor de búsqueda interno del blog de WordPress (metaetiquetas canónicas, descripción y título) 
Galería para WordPress basada en el complemento Galería NextGEN: cree y muestre galerías de fotos y presentaciones de diapositivas en artículos 
Mapas del sitio XML de Google: cree un mapa del sitio para WordPress 
Mejor fuente para WordPress: cómo evitar los textos completos de RSS de las publicaciones y protegerse contra el robo de contenido de una fuente de noticias 
Volver a vincular las páginas del sitio utilizando el ejemplo del complemento upPrev (panel extraíble) para WordPress
