Cómo crear un sitio web de desplazamiento infinito con WordPress

El desplazamiento infinito es un proceso utilizado por muchos sitios web en la actualidad. Esto es cuando las publicaciones se cargan constantemente al final de una página en lugar de usar "siguiente" o "anterior". Continuará entregando publicación tras publicación hasta que se haya agotado todo el contenido. Probablemente hayas visto esto en sitios como y Twitter. También puede desarrollar un sitio web de desplazamiento infinito dentro de WordPress.

Con la mayoría de las técnicas de desplazamiento infinito, verás una carga diferida. Esto hace que sea mucho más fácil para los navegadores cargar contenido mientras mantiene el sitio web rápido. Si intenta cargar todo a la vez, podría llevar literalmente días descargar toda la información, especialmente en sitios web muy grandes.

En este tutorial, le mostraré cómo crear un sitio web de desplazamiento infinito usando WordPress.

Instalación de Ajax Cargar más

Hoy, cubriré algunas de las funciones del complemento de desplazamiento infinito Ajax Load More . Es una herramienta flexible que brinda mucha personalización al utilizar códigos cortos en su sitio. Si bien necesitará saber un poco de codificación para sumergirse realmente en este complemento, es algo que quizás desee considerar.

También ayuda que Ajax Load More sea uno de los mejores complementos de desplazamiento infinito para WordPress. Tiene más de 30,000 instalaciones activas y una calificación brillante.

Instale y active el complemento "Ajax Load More".

Haga clic en la herramienta Ajax Load More de la columna izquierda en WordPress.

La pantalla de configuración

En la pantalla de configuración, puede cambiar el comportamiento de Ajax Load More en el sitio web. Por ejemplo, puede cambiar el tipo de contenedor de cómo funcionan los códigos abreviados o si desea usar sus propios estilos CSS.

También puede cambiar la forma en que aparece el botón y el estilo de carga en su sitio.

Cuando realice cambios en la pantalla de configuración, se guardará automáticamente.

Plantillas de repetidor

Desde Plantillas de repetidor, puede modificar cómo funcionan HTML y PHP dentro del código abreviado Ajax Load More. Ya existe un código predeterminado, pero puede realizar sus propias modificaciones a este código.

Si actualiza a la versión premium de este complemento, tendrá acceso a más plantillas que pueden eliminar parte del trabajo de codificación del proceso. Esto podría ser un ahorro de tiempo si conoce PHP y HTML.

Generador de códigos cortos

Shortcode Builder es el pan y la mantequilla de este complemento. Es aquí donde modificará el comportamiento de la herramienta y agregará algunas personalizaciones.

A la izquierda, tienes todas las opciones disponibles para crear tu propia función de scroll infinito. Las identificaciones, las etiquetas de los botones, las opciones de desplazamiento y más se pueden personalizar para que pueda crear algo que se adapte fácilmente a sus ideas de diseño.

A la derecha está la salida del shortcode. Este es el código que desea copiar y pegar en sus publicaciones o páginas. A medida que realice cambios en el generador, verá que este código se ajusta automáticamente.

Para aprovechar al máximo esta herramienta, es posible que desee familiarizarse con CSS, HTML y PHP. No necesariamente tiene que aprender una jerga de codificación extravagante, pero sería útil para usted aprender la diferencia entre cosas como div, ul, ol y contenedores de tablas.

Si necesita ayuda en este sentido, le sugiero sitios como W3 Schools . Está repleto de información gratuita para ayudar a cualquier persona a aprender a codificar para Internet.

Usando Ajax Cargar más

Una vez que obtenga el código abreviado tal como lo desea, hay un par de formas en que puede usarlo en su sitio web. Puede copiar y pegar el código corto que ve en Ajax Shortcode Builder, o puede usar el editor visual en WordPress para construir el código.

Copie y pegue el código

Desde Shortcode Builder, copie el shortcode que ve en el campo de salida.

Ve a tu publicación o página y pega el código.

Una vez que actualice o publique el contenido, el desplazamiento infinito estará activo en esa publicación o página.

Desde el editor visual de WordPress

Ajax Load More agregará una nueva función al editor visual de WordPress. Si no desea crear el código solo para copiarlo y moverlo a una publicación o página, puede simplemente hacer clic en un botón para abrir el generador.

Abra cualquier publicación o página y haga clic en el botón "Ajax Load More". Es un cuadrado rojo con la letra “A” en el centro.

Esto abrirá el Shortcode Builder en una ventana emergente. Una vez que haya terminado de hacer los ajustes para el desplazamiento infinito, haga clic en el botón "Insertar código abreviado" en la parte inferior izquierda.

El código abreviado se coloca dentro de su publicación o página automáticamente y puede actualizarlo o publicarlo cuando lo desee.

¿Ajax Load More guarda códigos abreviados personalizados del constructor?

En el momento de este tutorial, Ajax Load More no guarda los códigos abreviados creados con el constructor. Si tiene un diseño determinado que le gusta más, probablemente sea una buena idea que lo guarde en un lugar fácil de encontrar. Por ejemplo, puede pegarlo en programas de texto como el Bloc de notas y copiarlos en una fecha posterior.

¿Es absolutamente necesario saber CSS, HTML o PHP para usar Ajax Load More?

Esta herramienta es bastante fácil de usar. No necesita saber cómo codificar para usarlo en su sitio web . Sin embargo, una mejor comprensión de los elementos de codificación le facilitará la realización de ajustes personalizados.

¿Funcionará esto en cualquier publicación o página?

Debido a que Ajax Load More utiliza códigos abreviados para controlar su función, se puede usar en prácticamente cualquier ubicación de WordPress que lo admita. Esto significa publicaciones, páginas, algunos widgets y otros tipos de publicaciones personalizadas .

Una buena manera de usar este complemento es crear una página específicamente para el desplazamiento infinito de su contenido. Podría ir tan lejos como para usar el generador de páginas de SiteOrigin para agregar aún más personalización a una página mientras coloca el código abreviado de desplazamiento infinito.

Tal vez pueda convertirlo en una página de destino para sus perfiles de redes sociales.

Mantener el sitio rápido y fácil de usar

Agregar desplazamiento infinito a un sitio web que ejecuta WordPress no requiere mucho esfuerzo. De hecho, incluso los usuarios más novatos pueden crear algo funcional para sus visitantes utilizando Ajax Load More. Como Ajax es un sistema eficiente, no tiene que preocuparse de que su sitio web sufra velocidades lentas.

¿Qué complementos te encantan en términos de entregar contenido a tus visitantes? ¿Planea aprender algún tipo de codificación para personalizar WordPress aún más, o está satisfecho con la funcionalidad que algunos desarrolladores implementan en complementos y temas?