Tecnología Ajax para WordPress: complementos y su finalidad. Mostrar publicaciones de WordPress en una lista interminable Las publicaciones se cargan sin cesar al desplazarse por la página

Ajax Cargar más es el último Complemento de desplazamiento infinito de WordPress para publicaciones de carga diferida, publicaciones individuales, páginas, comentarios y más con consultas impulsadas por Ajax.

Cree consultas complejas personalizadas de WordPress con el generador de códigos cortos Ajax Load More y luego agregue el código corto generado a su página a través del editor de contenido o directamente en sus archivos de plantilla.

Ajax Load More es compatible para un desplazamiento sin fin con complementos de comercio electrónico populares como WooCommerce y Easy Digital Downloads.

Peculiaridades
  • Generador de códigos cortos: cree su propio código corto personalizado de Ajax Load More ajustando los diversos parámetros de consulta de WordPress en nuestro generador de códigos cortos fácil de usar (consulte Parámetros de códigos cortos).
  • Parámetros de consulta: Ajax Load More le permite consultar WordPress por muchos tipos de contenido diferentes. Consulta por tipo de publicación, formato de publicación, fecha, categoría, etiquetas, taxonomías personalizadas, término de búsqueda, autores y más.
  • Plantillas de repetidor: edite y amplíe la funcionalidad de Ajax Load More creando su propia plantilla de repetidor para que coincida con la apariencia de su sitio web (ver capturas de pantalla).
  • Varias instancias: puede incluir varias instancias de Ajax Load More en una sola página, publicación o plantilla.
  • Filtrado Ajax: el método de filtrado personalizado Ajax Load More le permitirá filtrar y actualizar los resultados de su consulta Ajax.
  • Compatibilidad con múltiples sitios: administre plantillas de repetidores en todos los sitios de su red.
  • Panel de configuración: personalice su versión de Ajax Load More actualizando varias configuraciones de complementos.
  • repetidor: elija una plantilla de repetidor (complemento disponible). Predeterminado = 'predeterminado'
  • post_type: lista separada por comas de tipos de publicaciones. Predeterminado = 'publicar'
  • sticky_posts: conserva el orden de las publicaciones fijas en el listado de Ajax. Predeterminado = falso
  • post_format — Consulta por formato de publicación. Predeterminado = nulo
  • categoría: una lista de categorías separadas por comas para incluir mediante slug. Predeterminado = nulo
  • categoría__y: una lista separada por comas de categorías para incluir por ID. Predeterminado = nulo
  • categoría__not_in: una lista de categorías separadas por comas para excluir por ID. Predeterminado = nulo
  • etiqueta: una lista separada por comas de etiquetas para incluir mediante slug. Predeterminado = nulo
  • tag__and: una lista de etiquetas separadas por comas para incluir por ID. Predeterminado = nulo
  • tag__not_in: una lista de etiquetas separadas por comas para excluir por ID. Predeterminado = nulo
  • taxonomía: consulta por nombre de taxonomía personalizada. Predeterminado = nulo
  • taxonomy_terms: lista separada por comas de términos de taxonomía personalizados (slug). Predeterminado = nulo
  • operador_taxonomía
  • taxonomy_relation: la relación lógica entre cada taxonomía cuando hay más de una. (Y/O). Predeterminado = 'Y'
  • día - Día de la semana. Predeterminado = nulo
  • mes - Mes del año. Predeterminado = nulo
  • año - Año de publicación. Predeterminado = nulo
  • taxonomy_operator: operador con el que comparar términos de taxonomía (IN/NOT IN). Predeterminado = 'EN'
  • meta_key: clave de campo personalizado (nombre). Predeterminado = nulo
  • meta_value: valor de campo personalizado. Predeterminado = nulo
  • meta_compare: operador con el que comparar meta_key y meta_value. Predeterminado = 'EN'
  • meta_type: tipo de campo personalizado. Predeterminado = 'CAR'
  • meta_relation: se utiliza con múltiples entradas de campos personalizados (Y/O). Predeterminado = 'Y'
  • autor: lista de autores separados por comas por id. Predeterminado = nulo
  • post__in: lista separada por comas de ID de publicaciones para incluir en la consulta. Predeterminado = nulo
  • post__not_in: lista separada por comas de ID de publicaciones para excluir de la consulta. Predeterminado = nulo
  • búsqueda: término de búsqueda de consulta ('s'). Predeterminado = nulo
  • custom_args: una lista de argumentos valor:par separados por punto y coma. p.ej. tag_slug__and:diseño,desarrollo; event_display:próximo. Predeterminado = nulo
  • post_status: selecciona el estado de la publicación. Predeterminado = 'publicar'
  • orden: muestra las publicaciones en orden ASC (ascendente) o DESC (descendente). Predeterminado = 'DESC'
  • orderby: ordena las publicaciones por fecha, título, nombre, orden del menú, autor, ID de la publicación o recuento de comentarios. Predeterminado = 'fecha'
  • offset: compensa la consulta inicial (número). Predeterminado = '0'
  • posts_per_page: número de publicaciones para cargar con cada solicitud de Ajax. Predeterminado = '5'
  • scroll: carga más publicaciones a medida que el usuario se desplaza por la página (verdadero/falso). Predeterminado = 'verdadero'
  • scroll_distance: la distancia desde la parte inferior de la pantalla para activar la carga de publicaciones mientras se desplaza. Predeterminado = '150'
  • scroll_container: restringe la carga de Ajax. Más desplazamiento infinito a un contenedor principal. Predeterminado = nulo
  • max_pages: número máximo de páginas para cargar mientras el usuario se desplaza (se activa cuando scroll = true). Predeterminado = '0'
  • pausa_override: permite que el desplazamiento anule el parámetro Pausa y active la carga de publicaciones al desplazarse. Predeterminado = nulo
  • pausa: no cargue publicaciones hasta que el usuario haga clic en el botón Cargar más (verdadero/falso). Predeterminado = 'falso'
  • transición: elija una transición de revelación de publicaciones (desvanecimiento/mampostería/ninguna). Predeterminado = 'desvanecerse'
  • Transition_container: muestra el contenedor de carga Ajax Load More (.alm-reveal). Predeterminado = 'verdadero'
  • Transition_container_classes: agrega clases al div de transición .alm-reveal.
  • masonry_selector: el nombre de clase de destino de cada elemento de mampostería. Predeterminado = nulo
  • masonry_animation: seleccione un tipo de transición de carga para elementos de mampostería. (predeterminado/alejar/deslizar hacia arriba/deslizar hacia abajo/ninguno). Predeterminado = predeterminado
  • masonry_horizontalorder: mantiene el orden horizontal. Predeterminado = verdadero
  • images_loaded: espere a que se carguen todas las imágenes antes de mostrar el contenido cargado ajax (verdadero/falso). Predeterminado = 'falso'
  • destroy_after: elimina la funcionalidad de carga de ajax después de que se hayan cargado 'n' número de páginas. Predeterminado = nulo
  • Progress_bar: muestra el indicador de la barra de progreso en la parte superior de la ventana mientras se carga contenido Ajax. Predeterminado = 'falso'
  • Progress_bar_color: ingresa el color hexadecimal de la barra de progreso. Predeterminado = 'ed7070'
  • button_label: el texto de la etiqueta del botón Cargar más. Predeterminado = 'Publicaciones más antiguas'
    • — Actualiza el texto del botón Cargar más mientras se carga el contenido. Predeterminado = nulo
  • container_type: anula el tipo de contenedor global que se configuró en la página Configuración de ALM. Predeterminado = nulo
  • css_classes: agregue clases CSS personalizadas al contenedor Ajax Load More. Predeterminado = nulo
  • id: un ID único para la instancia de Ajax Load More.
  • anidado: ¿Es esta una instancia anidada de Ajax Load More? Predeterminado = falso
Ejemplo Ajax Cargar más demostraciones de ejemplo de código corto
  • Predeterminado: funcionalidad y estilo listos para usar.
  • Campos personalizados avanzados: desplazamiento infinito de datos de campos personalizados avanzados con Ajax Load More.
  • Archivos adjuntos: archivos adjuntos de publicaciones de desplazamiento sin fin.
  • Destruir después: elimine la funcionalidad Ajax Load More después de "n" número de páginas.
  • Listado de eventos: ordenar y enumerar eventos por fecha de campo personalizado.
  • Filtrado: restablece y filtra una instancia de Ajax Load More.
  • Flexbox: creación de una cuadrícula Ajax Load More receptiva con Flexbox.
  • Desplazamiento infinito: una mirada a las nuevas funciones y estilos de carga.
  • Imágenes cargadas: descargue imágenes antes de mostrar el contenido cargado ajax.
  • Masonry: creación de un diseño de cuadrícula flexible con Masonry JS.
  • Múltiples instancias: incluya múltiples Ajax Load More en una sola página.
  • URL de paginación: genere URL de paginación únicas para cada consulta Ajax Load More con el complemento SEO.
  • — Las publicaciones no se cargarán hasta que las inicie el usuario.
  • Publicaciones precargadas: precargue fácilmente un conjunto inicial de publicaciones antes de completar cualquier solicitud Ajax al servidor.
  • Barra de progreso: muestra un indicador de carga de la barra de progreso con cada solicitud de Ajax.
  • Resultados de búsqueda: devolver resultados basados ​​en términos de búsqueda.
  • Contenedor de desplazamiento: restrinja la carga más de Ajax a un contenedor principal.
  • SEO y paginación: combine estos dos complementos para crear un potente sistema de navegación.
  • Galería de presentaciones de diapositivas: cree una galería de publicaciones con Ajax Cargar más y el Complemento de paginación.
  • Diseño de tabla: Ajax Load More mostrará los resultados de la consulta en formato de tabla.

Si en mi sitio web va a una página o cualquier categoría, en la parte inferior de la página, junto con la navegación habitual de la página, verá el botón Cargar más, que le permite cargar las siguientes publicaciones sin actualizar la página.

Seré honesto, mi sitio utiliza una forma un tanto chamánica de navegar por las páginas: desarrollé esta navegación hace mucho tiempo y quizás en ese momento no era tan bueno en PHP y jQuery. Ahora les mostraré una forma más correcta y efectiva de implementar la navegación de páginas con la capacidad de cargar nuevas publicaciones de forma asincrónica. Es decir, no es necesario que mire el código de mi sitio, pero si tiene preguntas, busque respuestas en los comentarios de esta publicación o mire el video.

Trabajaremos con el tema estándar TwentySeventeen, en primer lugar, este tema es bastante simple y no será difícil entender el código, y en segundo lugar, siempre puedes instalarlo directamente desde el panel de administración desde el repositorio de temas de WordPress.

¿Qué intentaremos hacer en este post?

  • Cargando publicaciones al hacer clic en el botón Cargar más.
  • Carga sin fin, es decir, las publicaciones y comentarios se cargarán automáticamente al desplazarse por la página (sí, como en VKontakte).
  • Hagamos que la carga de publicaciones funcione para cualquier archivo.
Paso 1. Agregar un botón "Cargar más"

Primero, necesitamos encontrar el archivo en el que se agrega la navegación de la página. En TwentySeventeen este archivo es directamente index.php. Si no estás seguro de qué archivo buscar en tu tema, te recomiendo que eches un vistazo a .

Si decides utilizar uno de los temas estándar (como yo), te recuerdo que es recomendable utilizarlo para realizar cambios (más detalles en el vídeo al final del post).

Encuentre el lugar apropiado en la plantilla fuera del ciclo while, es decir, después de que finalice la salida de las publicaciones (en TwentySeventeen este lugar es casi inmediatamente después del final mientras) e inserte el código allí:

var ajaxurl = " "; var página_actual = ; var max_pages = " "; Carga más

Ajaxurl Esto está en WordPress. true_posts Una matriz serializada que contiene todos los parámetros de solicitud requeridos es . Número de página_actual.

Y ahora algunos estilos que agregaremos a nuestro botón para que se vea genial (los estilos se pueden insertar en el style.css estándar en la carpeta del tema).

#true_loadmore ( background-color : #ddd ; /* fondo gris */ border-radius : 2px; /* redondear esquinas */ display : block ; /* elemento de bloque, en caso de que quieras usarlo */ alineación de texto: centro; /* alineación central del texto */ tamaño de fuente: 14px; tamaño de fuente: 0,875rem; /* tamaño de fuente */ peso-fuente: 800; /* estilo */ espacio entre letras: 1px; /* espaciado entre letras */ cursor: puntero; /* el cursor del mouse al pasar el cursor es el mismo que cuando se coloca el cursor sobre un enlace */ text-transform: mayúscula; relleno: 10px 0; /* relleno en la parte superior e inferior del botón */ transición: color de fondo 0,2 s fácil entrada y salida, color de borde 0,2 s fácil entrada y salida, color 0,3 s fácil entrada y salida; /* Animación CSS*/ ) #true_loadmore :hover (color de fondo: #767676; color: #fff;)

La finalización exitosa del primer paso se considerará un botón como este, que debería aparecer en la página de todas sus entradas, pero tenga en cuenta que si no hay suficientes entradas para dos páginas, entonces el botón no aparecerá, para hacer esto , cree más entradas o vaya a Configuración> Lectura y cambie la cantidad de publicaciones que se muestran en la página allí.

El paso más fácil está detrás de ti.

Paso 2. Conexión de scripts jQuery
var ajaxurl = "/wp-admin/admin-ajax.php"; var true_posts = " "; var página_actual = ;

En segundo lugar, tampoco necesitamos estilos CSS, si los agregaste, puedes eliminarlos por completo.

En tercer lugar, el contenido del archivo loadmore.js cambiará para verse así:

jQuery(function ($) ( $(window).scroll (function () ( var bottomOffset = 2000 ; // sangría desde el borde inferior del sitio al que el usuario debe desplazarse para cargar nuevas publicaciones var data = ( "action ": "loadmore", "consulta": true_posts, "página": página_actual); if ($(document).scrollTop() > ($(document).height() - bottomOffset) &&! $("body") ) ( $ .ajax (( url: ajaxurl, datos: datos, tipo: "POST", antes de enviar: función ( xhr) ($("cuerpo" ); ), éxito: función (datos) (si (datos) ($ ("# true_loadmore" ) ​​​​.antes (datos); $("cuerpo" ; página_actual++; ) ) ) ); ) ); ) );

Dejamos el archivo funciones.php (estos son los pasos 2 y 4) sin cambios.

Todos hemos visto archivos en los que, al seleccionar un mes, se nos redirige a una página con entradas para ese mes. En WordPress, esta visualización de enlaces de archivos se implementa mediante la función wp_get_archives(). Se obtiene un archivo similar de publicaciones cuando se muestran las categorías habituales de WordPress, sólo que las publicaciones están agrupadas por categorías.

Hoy quiero contarles cómo hacer una página de archivo dinámica. "Dinámico" significa que al seleccionar un mes, los resultados se mostrarán en la misma página utilizando la tecnología AJAX - Javascript. Dado que la biblioteca jQuery proporciona una API conveniente para trabajar con Ajax, usaremos este marco. Además, ¿dónde estaríamos hoy sin jQuery? Se utiliza todo el tiempo y probablemente ya esté conectado en su proyecto.

Antes de escribir este artículo, creé una página de archivo dinámica para este blog, te sugiero que le eches un vistazo (DEMO).

Para implementar un archivo dinámico necesitamos pasar por 4 etapas:

Mostraré la creación de una página de archivos dinámicos usando un ejemplo. tema basico WordPress: "veinte".

1. Conectando jQuery en WordPress

La forma correcta de conectar un script jQuery es utilizar la función wp_enqueue_script(). Esta conexión lo protegerá de conflictos al conectar el mismo script en complementos. El script se conectará una vez.

Debe insertar este código en el archivo funciones.php del tema.

opcion 2

En la primera opción conectamos el script de nuestro servidor, disponible en los archivos de WordPress. Sin embargo, puede cambiar el enlace al archivo jQuery y conectarlo desde la CDN de Google. La ventaja de este enfoque es que si este archivo ya está cargado en el navegador del visitante, cuando visite su sitio, el navegador ya no descargará el script/la carga de la página aumentará. Además, el script se envía al CDN en forma comprimida, lo que hace que el archivo sea varios kilobytes más ligero:

Función my_scripts_method() ( wp_deregister_script("jquery"); wp_register_script("jquery", "//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"); wp_enqueue_script("jquery" ); ) add_action("wp_enqueue_scripts", "my_scripts_method");

Opción 3

La opción más antigua y llamada "difícil" para conectar jQuery es escribir un enlace en el archivo de plantilla header.php, dentro de la etiqueta. Pegue este código html:

2. Cargue el precargador de imágenes.

Durante el período de espera, cuando la solicitud se envía al servidor usando AJAX, necesitamos mostrar una imagen, notificando al usuario que algo está sucediendo. Probablemente haya visto imágenes de este tipo en Internet más de una vez; una alternativa a una imagen de este tipo es el texto: "Cargando...".

Para que en el futuro tengamos esa imagen, descargémosla, por ejemplo, desde aquí: GIF animado (me gustó el servicio), cámbiele el nombre a ajax-loader.gif y cárguelo en la carpeta de imágenes, que se encuentra en el directorio de nuestro tema de WordPress. Como resultado, obtendremos algo como esto, incluso hasta la imagen: http://example.com/wp-content/themes/twentyten/images/ajax-loader.gif. A continuación lo usamos en el código.

3. Crea una plantilla de página permanente

Para las páginas permanentes en WordPress, podemos usar plantillas independientes, de modo que podamos crear una página con una estructura completamente diferente a la de otras páginas. Para indicarle a WordPress que el archivo que creamos es una plantilla para una página permanente, debe escribir el siguiente código al principio de este archivo:

“Plantilla de archivos” es el nombre de nuestra plantilla, que veremos en el panel de administración de WordPress al crear una página permanente.

Vamos a crear archivo nuevo en la carpeta del tema llamada tpl_archive.php y pegue el código anterior allí. A continuación, vayamos al panel de administración de WordPress y creemos una página permanente, asignándole la plantilla que acabamos de crear.

Ahora, completemos este archivo con el código necesario.

1. En primer lugar, necesitamos mostrar listas desplegables, las crearemos usando las funciones de WordPress: wp_get_archives() y wp_dropdown_categories():

Meses - Encabezados

get_header(); y get_footer(); Obtenga el encabezado y pie de página de la plantilla respectivamente. get_sidebar(); Lo corté a propósito para que no interfiriera con la comprensión del código. El resto del código muestra las listas desplegables Mes y Categoría.

Un bloque vacío es un contenedor donde se mostrarán los resultados de la consulta, es decir. registros.

2. Diseñemos las listas desplegables usando CSS, para ello agreguemos el siguiente código inmediatamente después de llamar al encabezado ():

#archivo_navegador >

En esta etapa obtuve lo siguiente:


3. Agregue código JavaScript que realizará una solicitud al servidor y la enviará al bloque archive_pot (agregamos el código después de los estilos CSS):

Compartir: