Paginación de la página de la lista de artículos
1. Cargue la biblioteca jQuery
Dado que es un AJAX impulsado por jQuery, cargar la biblioteca jQuery es imprescindible.
2. Formato de lista de artículos
En la página de su lista de artículos (Página de inicio Index.php, Archive.php) Debe asegurarse de que haya una estructura similar de la siguiente manera
<
3. Agregar a la navegación predeterminada
Debido a que Ajax Paging cada vez obtiene el contenido de la página siguiente, solo necesita llamar a la navegación predeterminada de WordPress. Agregue el siguiente código a su index.php (u otra página de la lista de artículos) para generar la navegación predeterminada de WordPress.
<div id = "paginación"> <? Php next_posts_link (__ ('cargar más')); ?> </div>4.AJAX Obtenga la página siguiente
Agregue el siguiente código a su archivo JS de tema
// use live () para hacer que JS siga siendo válido para el nuevo contenido obtenido a través de AJAX $ ("#Pagation A"). Live ("Click", function () {$ (this) .addclass ("Loading"). Text ("Loading ..."); $ .JAJAX ({Tipo: "Post", URL: $ (this) .attr ("HREF") + "#Contente #Contente", Scator (Data (DATO (DATOS) $ (Data) .Find ("#content .post"); Undefined) {$ ("#Pagination A"). Attr ("Href", NexthRef);5. Giro de la página de disparadores de desplazamiento
Si desea girar automáticamente la página cuando el mouse se desplaza a la parte inferior de la página, puede cambiar el código al siguiente estilo
// Bind Scroll Event $ (Window) .Bind ("Scroll", function () {// Determine si la barra de desplazamiento de la ventana está cerca de la parte inferior de la página if ($ (documento) .ScrollToP () + $ (Window) .Height ()> $ (documento) .Height () - 10) {$ (this) .addclass ('cargando'). Text ('carging (' carging ... '); Tipo: "Publicar", Url: $ (this) .Attr ("href") + "#content", éxito: function (data) {result = $ (data) .find ("#content .post") $ ("#Content"). Append (resultado.fadein (300)); $ ("#Pagination"). Remove ();6. Agregue la navegación CSS
Agregue una sección CSS a la navegación para embellecerla. También puede preparar un diagrama GIF para indicar que se está cargando. El siguiente es el estilo de la melodía:
#pagination {relleno: 20px 0 0 30px; } #pagination .nextPostslink {ancho: 600px; Color: #333; Decoración de texto: ninguna; Pantalla: bloque; relleno: 9px 0; Text-Align: Center; tamaño de fuente: 14px; } #pagination .nextPostslink: hover {background-color: #cccccc; Decoración de texto: ninguna; Border-Radius: 5px; -Moz-Border-Radius: 5px; -WebKit-Border-Radius: 5px; } #pagination .Loading {fondo: url ("Images/loading.gif") 240px 9px no-repeat; Color: #555; } #pagination .Loading: hover {background-color: transparent; cursor: predeterminado; }Paginación de comentarios
1. Preparar
Cargando la biblioteca jQuery, esto no se explica.
2. Abra la paginación de comentarios de WordPress
Abra WordPress Backend - Configuración - Discusión, verifique la página para mostrar comentarios en "Otros comentarios Configuración", establecer el número de comentarios. El número de comentarios aquí solo se calcula para los comentarios principales, y la respuesta a los comentarios no se calculará. Aquí completé un número más grande (15), porque la paginación de comentarios es demasiado detallada y hará que sea inconveniente que los usuarios lean comentarios anteriores.
Después de abrir el comentario en el fondo, agregue el siguiente código al lugar donde necesita agregar navegación de paginación en comentarios.php (si hay un código similar en el tema, no necesita agregarlo nuevamente. Además, la etiqueta NAV en el código es la etiqueta HTML5. Si el tema no usa HTML5, se usará en su lugar.
<Nav ID = "Comentarios-Navi"> <? Php Paginate_Comments_Links ('prev_text =? & next_text =?');?> </am>3. SEO de coming Paging
Desde la perspectiva del SEO, los comentarios de comentarios causarán contenido duplicado (el contenido de la paginación es el mismo, y las palabras clave y la descripción son las mismas), por lo que es fácil para los blogs con muchos comentarios degradar sus derechos porque son demasiado contenido duplicado. Por lo tanto, se requieren algunos tratamientos en SEO. La forma más conveniente y efectiva es usar metaetiquetas. Agregue el siguiente código en la metaetiqueta original de su encabezado.
<? Php if (is_single () || is_page ()) {if (function_exists ('get_query_var')) {$ cpage = intval (get_query_var ('cpage')); $ commentPage = intval (get_Query_var ('comment-page')); } if (! vacía ($ cpage) || echo "/n"; }}?>4. Comentarios de AJAX
Según lo anterior, hay comentarios en el tema. Para lograr los comentarios en AJAX, solo necesita JavaScript para cooperar. Sin embargo, antes de esto, primero debe agregar un elemento antes de la lista de comentarios para indicar que la lista se está cargando al mostrar una nueva lista de comentarios de la página. Suponga que la estructura del módulo de comentarios de los comentarios de la plantilla del tema.php es el siguiente:
<div> <h3 id = "comentarios-list-title"> comentarios </h3> <!-Mostrar nuevos comentarios Cargando-> <Div ID = "Loadingcomments"> <span> Cargando ... </span> </div> <!-Lista de comentarios-> <ol> <li> ... </li> <li> ... </li> <li> ... </li> </ol> <ol> id = "Comentarios-Navi"> <a href = "#"> 1 </a> ... </navs> </div>
Agregue el siguiente código JS a su archivo JS para implementar la paginación de comentarios
// Comentar Paging $ Body = (Window.opera)? (Document.compatMode == "css1compat"? $ ('Html'): $ ('body')): $ ('html, cuerpo'); // desencadenar la paginación al hacer clic en el enlace de navegación de la página $ (#comentarios-navi a '). Live (' hacer clic ', function (e) {e.preent () () (); $ .AJAX ({type: "get", url: $ (this) .Attr ('href'), befefeforeSend: function () {$ ('#comentarios-navi'). remove (); $ ('. comment_list'). remove (); $ ('#carging-comments'). $ ('#comentarios-list-title'). offset (). Top-65}, 800); $ ('#Carging-Comments'). After (result.fadein (500));CSS para la barra de carga (solo como referencia)
La copia del código es la siguiente:
#COMMENTOS DE CARGA {Display: None; Ancho: 100%; Altura: 45px; Antecedentes: #A0D536; Text-Align: Center; Color: #fff; tamaño de fuente: 22px; Línea de altura: 45px; }